Using JSX tools render method

Hi! I would like to understand if it is possible for tools render method to return JSX?

For example, I want each paragraph of editor to be my own (already written) React component, which is basically <div> with contenteditable attribute, but also with a lots of logic inside. Ideally I would love something like this:

class CustomParagraph {
  // other methods here

  render() {
    return <EditableDiv/>; // where EditableDiv is a big component
  }
}

export class NewEditableDiv extends React.Component {
  render() {
    return <EditorJS
      tools={{
        paragraph: CustomParagraph
      }}
    />;
  }
}

[natterstefan]

Hi @hata6502, you can find a solution (“workaround”) here already: https://github.com/codex-team/editor.js/issues/946#issuecomment-555760936.

Note: this issue is already closed, and a new one discusses this issue.

[gohabereg]

Hey @natterstefan, it seems, some of inner Editor.js handlers stops event propagation. Definitely we should look into this.

If I select button’s content it works ok: