Breaks de análisis 'estilo mj' a las 16:30
Hola Artur. Gracias por el gran trabajo hecho en grapesjs. Realmente es fantástico. La solución provisional funciona perfectamente. Si hace falta, siéntete libre de cerrar el asunto, pero ofrecer una forma de manipular el comportamiento sería sin duda muy bueno.
Lee la respuesta completa abajo ↓Pregunta
Versión:
Todas las versiones de Grapesjs desde la 16.30 hasta ahora tienen estos problemas.
¿Puedes reproducir el error de la demo?
- Sí
- No
¿Cuál es el comportamiento esperado?
Lo siguiente es código válido de MJML. Debería funcionar bien en grapesjs-mjml.
<mjml>
<mj-head>
<mj-style>
@font-face {
familia de fuentes: "foo"; src: formato URL ('./fonts/foo.otf') ('truetype');
}
</mj-style>
</mj-head>
<mj-body>
Describe el error detallado
Ahora mismo, si usas grapesjs-mjml con el código anterior, se romperá de 2 maneras:
- Representará el estilo así:
@font-face {font-family: "foo"; src: url('./fonts/foo') format('truetype');}
- Cuando exportas el código, exporta el código MJML de la siguiente manera:
<mjml>
<mj-head>
<mj-style>
@font-face {
familia de fuentes: "foo"; src: formato URL ('./fonts/foo.otf') ('truetype');
}
</mj-style>
</mj-head>
<mj-body>
</mj-body>
</mjml>
En ambos casos, puedes ver que el estilo ha sido codificado en html.
¿Cuál es el comportamiento actual?
'mj-style' no es un textNode y su contenido no debe estar codificado en html.
Describe el error detallado
La razón por la que presento esto contra este repositorio y no contra grapesjs-mjml es esta: Esta regresión es resultado del commit 8e7f94abb0c4500cebde5a4984eca4215772cb0b.
A partir de este commit, grapesjs asume erróneamente que todos los textNode son, bueno, textNode. No siempre es así (como en el estilo MJ).
¿Puedes adjuntar capturas de pantalla, screencasts o una demo en directo?
! 3
Respuestas (4)
Hola Artur. Gracias por el gran trabajo hecho en grapesjs. Realmente es fantástico.
La solución provisional funciona perfectamente. Si hace falta, siéntete libre de cerrar el asunto, pero ofrecer una forma de manipular el comportamiento sería sin duda muy bueno.
Hola @emilsedgh disculpa por llegar tan tarde en este tema, pero bueno, podemos pensar en cómo saltar escape en casos así, aunque probablemente la forma más rápida sea simplemente extender el método estilo mj a HTML. '''js editor. Components.addType('mj-style', { modelo: { toHTML() { const content = this.components().map(c => c.get('content')).join(''); devolver '<mj-style>${content}</mj-style>'; } // ... } })
Gracias Emil, por ahora cerraré esto, por si surge otro problema similar, pensaremos en añadir una nueva hélice para saltarse la fuga.
Gracias por informar de esto, @emilsedgh.
El problema con Parser breaks 'mj' a las 16:30 parece ser una condición de carrera o un problema de sincronización de la dirección estatal. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.
Qué probar:
- Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);
2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos
3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
Es seguro interactuar con el componente aquí
});
Recomendaciones de siguientes pasos:
- Prueba con la última versión de GrapesJS si no lo has hecho
- Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
- Incluir errores de GrapesJS, de navegador y de consola en tu informe
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3612
Los botones deslizantes y las pestañas de Grapesjs no funcionan como se esperaba
Versión 0.17.19(grapesjs) Versión 0.1.5(grapesjs-lory-slider) Versión 1.0.6(grapesjs-tabs) ¿Puedes reproducir el error de la demo? No ¿Cuál...
Issue #5009
Error de análisis de estilo si tiene @import
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? solo Firefox (todas las versiones)Enlace de...
Issue #3693
AdoptStylesheet no soportado en grapesJS
Versión: Puedes obtener la versión escribiendo 'grapesjs.version' en la consola 0.17.22 ¿Puedes reproducir el error de la demo?[x] Sí[ ] No...
Issue #3679
El ancho del dispositivo es inválido por defecto
Gracias por el #3673 Tengo un nuevo feedback sobre un bug. Versión:. 0.17.22 ¿Puedes reproducir el error de la demo?[ ] Sí[ ] No ¿Cuál es e...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.