Creating a custom block tool in React

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]

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.

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