Integrating React components

Fantastic work @beepsoft Integrating React properly into the core would be a great step and could make way for the support of other frameworks. This will raise the bar for grapesjs to another level.

Really cool @beepsoft especially all the explanation of the process

Could you please add a public API to be able to provide a custom HTML parser the same way as it is possible to provide a custom CSS parser?

I'll see if I'll be able to add something quickly without too much refactoring but from what I see your way is quite safe even if you're using not public methods.

Anyway, the project you've made is able to render one only component, the <Timer/>, I hardly believe anyone will ever jump in such a journey just to add one React component. I think that we have to create a kind of generic React component renderer that will be able to display automatically any React component.

An example of what I'd expect as an API

import grapesjs from 'grapesjs';
import ReactRenderer from 'grapesjs-react-renderer';

grapesjs.init({
	...
	plugins: [
		// this could contain the custom HTML parser, code generator, commands, etc.
		ReactRenderer,
	],
});

// ...
// somewhere in the code or another plugin
import ReactComponent from 'some/react/component';
import { addComponent } from 'grapesjs-react-renderer';

// ...
addComponent(editor, ReactComponent, {
	name: 'Component name',
	block: { // eg. add also a block
		label: 'Block name',
		media: '<svg ...',
	},
	traits: [ ... ], // Add custom traits or build them by reading the component propTypes
	// ... other options
});

Hi,

I created a poof of concept implementation/example of the integration of a React component as a GrapesJS block/component here:

https://github.com/beepsoft/grapesjs-react-component-example

Although "integrating with React" could mean many things here's the use case I tried to solve:

• Have a GrapesJS block, which when dragged onto the canvas uses a React component to display the content in the canvas.
• Have the same component generate JSX code of itself in the final template.
• Have a way to get the GrapesJS generated JSX/CSS as text and make it live again by loading the JSX/CSS text into a React component.

For all this to work I had to implement a custom HTML parser and replace the built-in parser somehow, but the way I did is kind of hackish. @artf Could you please add a public API to be able to provide a custom HTML parser the same way as it is possible to provide a custom CSS parser?