Expose editor in the Math.configure

[benzend]

Description

Need editor to be accessible within the Math.configuration object.

Thinking something like:

Math.configure((editor) => ({
   // config
}))

or

Math.configure({
  inlineOptions: {
    onClick: (node, pos, editor) => {
      // some functionality
    }
  }
})

Use Case

When using NextJS, with my editor example configuration below, I don't get access to the editor object.

  const editor = useEditor({
    extensions: [
      // ... other extensions ...
      Mathematics.configure({
        inlineOptions: {
          onClick: (node, pos) => {
            handleMathAction(node, pos, 'inline');
          },
        },
      }),
    ],
    shouldRerenderOnTransaction: true,
    immediatelyRender: false,
  });

  // tried wrapping in a useCallback to see if it would help (it doesn't which makes sense)
  const handleMathAction = useCallback((node: Node, pos: number, _type: 'block' | 'inline') => {
    const katex = prompt('Enter new calculation:', node.attrs.latex);

    if (katex && editor) {
      let ref = editor.chain().setNodeSelection(pos);

      if (_type === 'block') {
        ref.updateBlockMath({ latex: katex });
      } else {
        ref.updateInlineMath({ latex: katex });
      }

      ref.focus().run();
    }

  }, [editor]);

I'm thinking that using a callback would allow editor to be passed through when the onClick happens, that way we're avoiding the initializer issue

Type

Other

[niallmurphy-ie]

Came here looking to find out how this is meant to work. The examples page has editor inside useEditor but I can't make it work like that myself.

https://tiptap.dev/docs/editor/extensions/nodes/mathematics

[benzend]

Yeah, normally it's supposed to work like that, but sometimes editor isn't accessible or null, so it doesn't work.

[niallmurphy-ie]

contentEditor.on("selectionUpdate", () => {
        const { from } = contentEditor.state.selection;
        const node = contentEditor.state.doc.nodeAt(from);
        if (node) {
	        if (node.type.name === "inlineMath") {
		        const newLatex = prompt("Edit the LaTeX code:", node.attrs.latex);
		        if (newLatex !== null) {
			        contentEditor.chain().setNodeSelection(from).updateInlineMath({ latex: newLatex }).focus().run();
		        }
	        }
	        if (node.type.name === "blockMath") {
		        const newLatex = prompt("Edit the LaTeX code:", node.attrs.latex);
		        if (newLatex !== null) {
			        contentEditor.chain().setNodeSelection(from).updateBlockMath({ latex: newLatex }).focus().run();
		        }
	        }
        }
});

That works for me in a useEffect in React. Probably not good for performance but I can't see any other way.

[benzend]

Nice, I'll have to use this as a temp solution. Thank you for the drop.