Editor.js: Using JSX tools render method

[vpetrushenko]

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
      }}
    />;
  }
}

[gohabereg]

Hi @vpetrushenko
No, it is not possible to return JSX from render method. If you want to use JSX you can try some render tools for it (eg. preact or just call ReactDOM.render with tool wrapper)

[vpetrushenko]

Hi @vpetrushenko
No, it is not possible to return JSX from render method. If you want to use JSX you can try some render tools for it (eg. preact or just call ReactDOM.render with tool wrapper)

Thank you for your decent answer.

[natterstefan]

Hi @gohabereg, would you mind sharing a short example? Thank you!

Or could you share your final solution with me @vpetrushenko, please?

[gohabereg]

Hi @natterstefan !
Sure, it should be something like this:

render () {
  const jsx = <Component />;
  const container = document.createElement('div');

  ReactDOM.render(jsx, container);

  return container;
}

[natterstefan]

@gohabereg, thank you! Will test it. (you're fast ^^)

[natterstefan]

Hello @gohabereg, it's me again. Looks like I can render a React component, _but_ for some reason eg. onClick is not working. It's a simple custom plugin with a Button.

When I add it with ReactDOM.render(<Button />, container) the onClick does not work, but when adding it with createElement('button') and adding the onclick there it does. Any clue/hint for me?

Here's an example: https://codesandbox.io/s/solitary-night-96hzk?fontsize=14.

And I am also not sure yet how to design the save method when using React. Hm.

PS: we can discuss this on another channel, if you like. I just need to know where (eg. slack, discord or https://spectrum.chat).

[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:

[natterstefan]

Hi @gohabereg, mhm, looks like. Is this something easy or complicated to fix? Haven't looked into the editorjs codebase (yet) by myself to be honest. :/

I have updated the example and added both a react and plain-js example, so it can be easily compared: https://codesandbox.io/s/solitary-night-96hzk.

And shall I create a new issue, because this one is actually closed?

[natterstefan]

I created a new issue for this topic: https://github.com/codex-team/editor.js/issues/946.

[gohabereg]

Thanks @natterstefan !
It requires some investigation, should be complicated.

[hata6502]

https://github.com/codex-team/editor.js/issues/849#issuecomment-552815971

I also encounted this onClick problem!
I'll research it.

[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.