Issue #3441💬 RespondidoAbierto el 7 de mayo de 2021por emilsedghReacciones 1

Breaks de análisis 'estilo mj' a las 16:30

Respuesta rápidapor emilsedgh1

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?

  • 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:

  1. Representará el estilo así:
@font-face {font-family: &quot;foo&quot;; src: url('./fonts/foo') format('truetype');}
  1. Cuando exportas el código, exporta el código MJML de la siguiente manera:
<mjml>
  <mj-head>
    <mj-style>
      @font-face {
      familia de fuentes: &quot;foo&quot;; 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)

emilsedgh3 de agosto de 2021

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.

artf3 de agosto de 2021

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>'; } // ... } })

artf3 de agosto de 2021

Gracias Emil, por ahora cerraré esto, por si surge otro problema similar, pensaremos en añadir una nueva hélice para saltarse la fuga.

ClaudeCode17 de mayo de 2026

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:

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

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.