Unable to remove keybindings about mathlive HOT 7 CLOSED

@rosinghal yes, because there is no keybinding for "[". The keybinding that got filtered out was for "alt+leftbracket". If you want "leftbracket" to do something else, you can add a keybinding for it.

from mathlive.

The issue is most likely occurring because the mathfield is not properly mounted by the time you attempt top customize it (by the time you set the event listener). React lifecycle can be a bit tricky.

To ensure a mathfield is customized at the right time, I recommend two options:

1/ Use the onMount event handler. The TypeScript bindings for the math-field element currently do not have this event handler type appropriately, so you may need to do some convincing to have TypeScript let you use it.

2/ Use a useEffect hook, but wait on the ref to be ready.

  useEffect(() => {
    const mathfield = ref.current;
    // ...
  }, [ref.current]);

Also, note you do not need to copy the set of keybindings from source. You can simply filter the ones you don't want at runtime:

    mathfield.keybindings = mathfield.keybindings.filter((x) => !x.key.includes("[BracketLeft]"));

from mathlive.

Thanks for the suggestion. However, it does not work either. Here is my code

import { createElement, DetailedHTMLProps, HTMLAttributes, ReactElement, useEffect, useMemo, useRef } from 'react';

import Mathlive, { MathfieldElement } from 'mathlive';

type MathfieldProps = DetailedHTMLProps<HTMLAttributes<MathfieldElement>, MathfieldElement>;

export const Mathfield = ({ children, className, ...props }: MathfieldProps): ReactElement<MathfieldProps> => {
  const ref = useRef<MathfieldElement>(null);
  const mfe = useMemo(() => new MathfieldElement(), []);

  useEffect(() => {
    const mathfield = ref.current;

    if (mathfield) {
      mathfield.keybindings = mathfield.keybindings.filter(x => !x.key.includes('[BracketLeft]'));
    }
  }, [ref, mfe]);

  return createElement('math-field', { ref, class: className, 'data-testid': 'math-field', ...props }, children);
};

from mathlive.

Please check https://codesandbox.io/p/sandbox/exciting-aryabhata-th68p9

from mathlive.

I think it should work if you use the code I included. Try https://codesandbox.io/p/sandbox/exciting-aryabhata-forked-tll5zh?file=%2Fsrc%2FMathField.jsx

Note that the dependency in the useEffect is on ref.current. Also, you don't need the reference to mfe.

from mathlive.

@arnog even in the code you sent, if I type [ab] I get the value as \left\lbrack ab\right\rbrack even though we have filtered out keybindings with [BracketLeft].

You will see the output after typing in the math field and then click outside.

from mathlive.

Understood, I have updated the keybindings to

mathfield.keybindings = [
  ...mathfield.keybindings.filter(
    (x) => !x.key.includes("[BracketLeft]")
  ),
  {
    key: "[BracketLeft]",
    ifLayout: ["apple.en-intl", "windows.en-intl", "linux.en"],
    ifMode: "math",
    command: ["insert", "[#0]"],
  },
];

This is what I was looking for. Thanks a lot. Closing the issue.

from mathlive.