How add custom block <math-field>

[jongjunpark]

Summary

I want to add custom DOM

<math-field></math-field>

The source of DOM is mathlive (https://cortexjs.io/mathlive/) So, I want to add custom DOM like this docs's <ifame> DOM https://github.com/nhn/tui.editor/blob/master/docs/en/custom-block.md. However, my DOM disappears it is embedded into the editor. How add custom block?

My Code

<Editor
  ...
  ref={editorRef}
  toolbarItems={[
    [
      {
        name: "math",
        tooltip: "math",
        command: "math",
        text: "math",
        className: "custom-icon",
      },
    ],
  ]}
  customHTMLRenderer={{
    htmlBlock: {
      math(node) {
        return [
          {
            type: "openTag",
            tagName: "math-field",
            outerNewLine: true,
          },
          { type: "html", content: node.childrenHTML },
          { type: "closeTag", tagName: "math-field", outerNewLine: true },
        ];
      },
    },
  }}
/>

useEffect(() => {
  if (editorRef.current) {
    editorRef.current.getInstance().addCommand("wysiwyg", "math", () => {
      editorRef.current
        .getInstance()
        .setHTML('<math-field virtual-keyboard-mode="manual"></math-field>');
    });
  }
}, [editorRef.current]);

Version

recently @toast-ui/react-editor

Additional context

[jwlee1108]

@jongjunpark I'm sorry for the late reply. We need to build an environment to solve your question. Can you put the sample on the codesandbox and something else? I want to test based on that.

[jongjunpark]

@jongjunpark I'm sorry for the late reply. We need to build an environment to solve your question. Can you put the sample on the codesandbox and something else? I want to test based on that.

@jwlee1108 My project is private. so I create new repository for test. please check pages/test folder https://github.com/jongjunpark/editor-test

[jongjunpark]

@jwlee1108 Is it going on?

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!