Can you create plugins that are React components?

[marksboyce]

Hi, thanks for all your hard work.

I assume it isn't possible out-of-the-box to use React components as plugins, correct? It doesn't seem that way, but I'm just making sure.

Thanks.

[Jungwoo-An]

@marksboyce Hi! First of all, thanks for your interest! 👋

You can't create plugin with react currently. (only vanila js)

I hope this document will help you.

Thanks!

[marksboyce]

I thought not. Thanks.

[Benjaminryejones]

@marksboyce Not sure if this is what you meant, but custom tools can return jsx/react components

Here's a quick example:

class MyTool {
  render() {
    const container = document.createElement('div')
    ReactDOM.render(
      <ReactComponent />,
      container
    )

    return container
  }

  save(blockContent) {
    return {
      myData: blockContent.value,
    }
  }
}

Also see this thread for caveats about onClick events

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marksboyce]

@Benjaminryejones Thanks, this is useful. I started down this path, but I get the feeling that the lack of native support for React will make the whole thing a lot harder.

[natterstefan]

Hi @marksboyce,

This is indeed an interesting question. I've implemented EditorJS in several React apps and there are certain issues you need to be aware of. Not only regarding the onClick handling, but also other aspects.

Take a look at this example for instance: In a simple use-case where you add a React component (as I mentioned in the another issue), you end up with the following React app tree:

(example)

Because we are using ReactDOM.render here, two new trees will be added to the document. You have your App and two ReactComponents. This is important if you want to work with an AppContext for instance (or Redux). Because the two React components cannot access it directly. They are independent Apps, seen in this way. Keep that in mind, as this caused some trouble for me at first.

I plan to write an article about how I solved this in my apps. But I do not have an ETA for the article yet.

[marksboyce]

@natterstefan Thanks for this. Helpful to know, and please share your article, once complete. These are the sorts of issues that I'm worried about banging my head against.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[donfour]

@marksboyce Not sure if this is what you meant, but custom tools can return jsx/react components

Here's a quick example:

class MyTool {
  render() {
    const container = document.createElement('div')
    ReactDOM.render(
      <ReactComponent />,
      container
    )

    return container
  }

  save(blockContent) {
    return {
      myData: blockContent.value,
    }
  }
}

Also see this thread for caveats about onClick events

As this pattern seems pretty common, I extracted out the logic and wrote a util function: https://gist.github.com/donfour/82193ab0c138afcc8c840c7a79474db4. Hope it's useful.

[PurplePineapple123]

I plan to write an article about how I solved this in my apps. But I do not have an ETA for the article yet.

Hey @natterstefan! Did you ever figure out how to prevent custom blocks from rendering in a different DOM? I was having trouble for a few days until I realized that my custom component was rendering in a different DOM and wasn't able to access redux.

[natterstefan]

Hi @PurplePineapple123,

I never figured out how to prevent it, but how to utilize and work with it instead. We ended up enriching the blocks with callbacks, that triggered state updates in the "root app" and callbacks that we're able to update the state of the block vice versa.

It's definitely a workaround, but it solved our issue and insofar worked. But unfortunately, I do not have a working example I can provide anymore - I do not work at that company anymore - and therefore cannot illustrate it. I am sorry.

---

What you must achieve is providing a "bridge" between the rendered Block and the App with callbacks you add to the tools provided to the Editor.

I am sorry I cannot be of more help to you.

[mikahFSmusic]

Hey @natterstefan,

I know you can't share the code/too much detail, but can share a little more detail on how you implemented the callbacks? Did you have to fork editor.js/modify its source in order to do this? I'm trying to have a react component inside of a block that can read from a react context that's higher up in the component tree but have been struggling to find a method of implementation I'm happy with.

If I can get something reasonable working, I'd be happy to open source the work and add it as a contribution to editor.js if appropriate. I imagine a tool like this would make editor.js infinitely more adoptable by the react community.