Error de JavaScript cuando quiero añadir relleno

Me he estado encontrando con el mismo problema y también uso el plugin 'grapesjs-mjml'. Aparentemente solo ocurre cuando se carga un proyecto que tiene la propiedad 'style' presente en los 'atributos' de un componente cuando el proyecto está cargado. Tras cada cambio realizado en el editor, la propiedad 'style' se extenderá añadiendo el valor 'viejo' al valor más reciente, haciendo crecer exponencialmente el JSON del proyecto.

Probé a probar diferentes versiones de grapesjs, empezando por la versión '0.22.2' hacia arriba. Al llegar a la versión '0.22.6' empezó a aparecer el problema, así que en algún momento entre la versión '0.22.5' y la '0.22.6' debió de haber sido introducido el fallo. En todas las versiones anteriores todo funciona como se espera.

Para reproducir el problema, simplemente a lo siguiente:

1. Crear un nuevo proyecto y añadir algunos componentes
2. Generar el JSON del proyecto llamando a 'editor.getProjectData()'
3. Carga el proyecto en el editor llamando a 'editor.loadProjectData()'
4. Con o sin modificación de uno o más componentes, generar los datos del proyecto de nuevo usando 'editor.getProjectData()'

Tras ejecutar el 'paso 4', el JSON del proyecto acaba con los atributos incorrectos. Esto, a su vez, puede causar el problema que mencionó el OP.

Por favor, revisa el fragmento a continuación que se generó tras cargar un JSON del proyecto y recuperar los datos del proyecto de inmediato, sin realizar ninguna modificación.

'''json "componentes": [ { "etiquetaNombre": "mj-image", "tipo": "mj-image", "estilo": { "src": "resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg", "acolchado": "10px", "acolchado-bottom": "10px", "relleno-derecha": "25px", "relleno-izquierda": "25px", "alinear": "centro", "ancho": "250px", "style": "src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg; Acolchado: 10px; relleno-abajo: 10px; relleno-derecha: 25px; relleno-izquierda: 25px; alinear:centro; ancho:250px;" }, "atributos": { "src": "resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg", "acolchado": "10px", "acolchado-bottom": "10px", "relleno-derecha": "25px", "relleno-izquierda": "25px", "alinear": "centro", "ancho": "250px", "style": "src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg; Acolchado: 10px; relleno-abajo: 10px; relleno-derecha: 25px; relleno-izquierda: 25px; alinear:centro; ancho:250px; style:src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg; Acolchado: 10px; relleno-abajo: 10px; relleno-derecha: 25px; relleno-izquierda: 25px; alinear:centro; ancho:250px;;" }

El JSON cargado del proyecto contenía lo siguiente para el mismo componente:

'''json
"componentes": [
    {
      "etiquetaNombre": "mj-image",
      "tipo": "mj-image",
      "estilo": {
        "src": "resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "acolchado": "10px",
        "acolchado-bottom": "10px",
        "relleno-derecha": "25px",
        "relleno-izquierda": "25px",
        "alinear": "centro",
        "ancho": "250px"
      },
      "atributos": {
        "src": "resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "acolchado": "10px",
        "acolchado-bottom": "10px",
        "relleno-derecha": "25px",
        "relleno-izquierda": "25px",
        "alinear": "centro",
        "ancho": "250px",
        "style": "src:resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg; Acolchado: 10px; relleno-abajo: 10px; relleno-derecha: 25px; relleno-izquierda: 25px; alinear:centro; ancho:250px;"
      }
    }
  ]

Desafortunadamente, no he conseguido averiguar qué commit en la versión '0.22.6' causaba el problema. Así que si alguien pudiera ayudarme, se lo agradecería mucho.

Reducir a '0.22.5' parece ser la única opción por ahora.

Desafortunadamente, no he conseguido averiguar dónde ni cuándo exactamente se añade la propiedad 'style' al componente 'style' al exportar datos de un proyecto previamente cargado. Quizá alguien más pueda identificar qué causa el problema.

@soul-media: para que conste, parchear el método 'init' en los componentes 'mjml' como solución temporal parece funcionar y evita que la propiedad 'style' se añada en la exportación de los datos del proyecto (incluso después de cargar un proyecto guardado previamente). Esto parece funcionar incluso para la versión '0.22.14', y la salida JSON será como la que aparece a la derecha de tu captura de pantalla.

Para parchear la función, utiliza la opción 'customComponents' de los plugins 'grapesjs-mjml' para registrar una función que obtenga acceso a la función 'coreMjmlModel.init'. Para cada componente cuya función 'init' sea igual a la del 'coreMjmlModel', asigna la función parcheada (esto solo modificará los componentes que tengan una función 'init' presente). En la función parcheada, la propiedad 'style' se elimina antes de que los atributos se pasen a 'this.set('style', ...)'llamar, que parece solucionar el problema.

'''javascript var editor = grapesjs.init({ Offsets: 1, avisoOnUnload: 0, Contenedor: '#gjs', Altura: '100%', fromElement: cierto, storageManager: false, Plugins: ['Grapesjs-MJML'], pluginsOpts: { 'grapesjs-mjml': { customComponents: [ Parches: https://github.com/GrapesJS/grapesjs/issues/6646 (editor, { coreMjmlModel }) => { function patchedMjmlInit() { const attrs = { ... this.get('atributos') }; Estilo const = { ... this.get('style-default'), ... this.get('style') };

para (let prop in style) { si (!( prop en los atractivos)) { attrs[prop] = style[prop]; } }

this.set('attributes', attrs);

Elimina el atributo 'style' antes de pasar a this.set('style') Esto debería evitar errores aleatorios tras cargar un proyecto existente const attrsNoStyle = { ... attrs }; eliminar attrsNoStyle.style;

this.set ('estilo', atrasNoEstilo);

this.listenTo(this, 'change:style', this.handleStyleChange); this.listenTo(this, 'change:attributes', this.handleAttributeChange); }

editor. DomComponents.getTypes().forEach((type) => { const compType = editor. DomComponents.getType(type.id); if (compType.model.prototype.init === coreMjmlModel.init) { compType.model.prototype.init = patchedMjmlInit; } }); }, ], }, }, });

Gracias por informar de esto, @soul-media.

Buena pregunta sobre error de Javascript cuando quiero añadir relleno. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!