Creating a custom block tool in React

[SoorajChandran]

Is it possible to return React markup when creating a custom block tool?

I'm using Editor.js in React - The actual package without using react-editor-js.

I'm trying to create a custom block element. It was possible to create the below block

export default class SampleBlock {
	static get toolbox() {
		return {
			title: 'SampleBlock',
			icon:
				'<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
		};
	}

	render() {
		return document.createElement('span');
	}

	save(blockContent) {
		return {
			url: blockContent.value,
		};
	}
}

and use it directly.

Is it possible to add React code in the render function here? For example like below:

export default class SampleBlock {
	static get toolbox() {
		return {
			title: 'SampleBlock',
			icon:
				'<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
		};
	}

	render() {
		return (
      <span>Hello world</span>
    )
	}

	save(blockContent) {
		return {
			url: blockContent.value,
		};
	}
}

When I tried this, it complained that the expected type is Node. Is there any way around this?

[donfour]

That is because under the hood, the JSX <span>Hello world</span> gets compiled to React.createElement("span", null, "Hello world"), which returns a React element. However, editor.js expects us to return a HTML document (see docs for React.createElement() and document.createElement()).

This is a hacky way to make it work:

  render() {
    // converts React element to HTML string
    const html = ReactDOMServer.renderToString(<span>Hello world</span>);

    // converts HTML string to HTML Document
    const node = new DOMParser().parseFromString(html, "text/html");

    // returns HTML element
    return node.documentElement;
  }

Note I have not tested this code for more complicated use cases (e.g. nested components, stylings, complex logic). I suspect you'll need more hacky code along the way. It'd be nice if we could get official support for React with editor.js, but judging from #1202 it won't happen soon.

[hata6502]

Please see: https://github.com/hata6502/editorjs-examples/blob/main/examples/ExampleReactBlockTool/ExampleReactBlockTool.tsx

[donfour]

Please see: https://github.com/hata6502/editorjs-examples/blob/main/examples/ExampleReactBlockTool/ExampleReactBlockTool.tsx

Sir that is very smart. I have not thought of that.

[donfour]

Inspired by @hata6502 's example, I extracted the logic and wrote a util function: https://gist.github.com/donfour/82193ab0c138afcc8c840c7a79474db4. Hope it's useful.

[sahilmob]

I have created a babel plugin that wraps a React component with block tool class definition. You can check it out here. Though, It is experimental, so use it at your own risk.