Integración de componentes de React

Muy interesante @beepsoft especialmente toda la explicación del proceso

¿Podrías, por favor, añadir una API pública para poder proporcionar un analizador HTML personalizado de la misma manera que es posible proporcionar un analizador CSS personalizado?

Veré si puedo añadir algo rápido sin demasiadas refactorizaciones, pero por lo que veo, tu método es bastante seguro incluso si usas métodos no públicos.

De todos modos, el proyecto que has hecho puede renderizar un solo componente, el '<Timer/>', cuesta creer que alguien se lance en un viaje así solo para añadir un componente de React. Creo que tenemos que crear una especie de renderizador genérico de componentes de React que pueda mostrar automáticamente cualquier componente de React.

Un ejemplo de lo que esperaría como API

'''js importar uvas de 'uvas'; importar ReactRenderer de 'grapesjs-react-renderer';

grapesjs.init({ ... Plugins: [ esto podía contener el analizador HTML personalizado, el generador de código, comandos, etc. ReactRenderer, ], });

// ... en algún lugar del código u otro plugin importar ReactComponent de 'some/react/component'; importar { addComponent } de 'grapesjs-react-renderer';

// ... addComponent(editor, ReactComponent, { nombre: 'Nombre del componente', bloque: { // por ejemplo, añadir también un bloque etiqueta: 'Nombre del bloque', Medios: '<SVG ...', }, rasgos: [ ... ], // Añade rasgos personalizados o crearlos leyendo los componentes propTypes // ... Otras opciones });

Hola,

He creado aquí una implementación conceptual/ejemplo de integración de un componente de React como bloque/componente GrapesJS:

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

Aunque "integrar con React" podría significar muchas cosas, aquí está el caso de uso que intenté resolver:

• Tener un bloque GrapesJS bloque, que al arrastrarse sobre el lienzo utiliza un componente React para mostrar el contenido del lienzo.
• Hacer que el mismo component genere código JSX de sí mismo en la plantilla final.
• Tener una forma de obtener el JSX/CSS generado por GrapesJS como texto y hacerlo funcionar de nuevo cargando el texto JSX/CSS en un componente de React.

Para que todo esto funcionara tuve que implementar un analizador HTML personalizado y reemplazar el parser integrado de alguna manera, pero la forma en que lo hice es un poco improvisada. @artf ¿Podrías, por favor, añadir una API pública para poder proporcionar un analizador HTML personalizado de la misma manera que es posible proporcionar un analizador CSS personalizado?