Came up with a great Typescript+React Tool factory for Editor.js

[mmmeff]

Hey all, I wasn't really having a lot of luck with the documentation around rendering React components in Editor.js, and the guides out there were all either JS-centric (not Typescript) or confusing/poorly-written. I came up with this handy little utility that I really wish was built into EditorJS.

This tool allows you to take any React component that implements the ReactEditorToolProps interface for its Props and spits out an Editor.js-compatible tool block for it.

Check it out, lemme know what you think!

https://gist.github.com/mmmeff/5c60423a6ae564d6e485587f6621e169

[bekogeko]

I NEED this functionality. I'm more than ready to implement each tools by myself if needed.

[mmmeff]

That's what my team did. It honestly works surprisingly well, although a couple pain points we've seen since I shared this in March:

1. Editor.js gets really mad at times and throws all sorts of junk DOM exceptions. Functionally, things seem fine, but it's making a lot of noise in our client-side monitoring.
2. Large documents can get a little slow without meticulous optimization of your react tools. You will find yourself spending time tracking down annoying side-effects from context wrappers or arbitrary reflows from things like tooltip components that destroy rendering. In one document with over 300 blocks, we were experiencing main thread lock to the tune of 30 seconds before it finished loading the page. I wish I could offer specific optimization advice here, but it's going to be totally situational depending on your components. Profiling devtools are your friend here.