Template export adds a html body tag in mjml code

Question

Template export adds a html body tag in mjml code

Frankosntin opened this issue 2 years ago · comments

Hi, im a newbie coder and im using Grapesjs in a react component. i am having troubles to export mjml and html code. When i click on export template button it add an extra tag before and after mjml code. It seems to be the canvas wrapper. how can i prevent this issue?

my console log display this error:
index.js:1 Uncaught Error: Malformed MJML. Check that your structure is correct and enclosed in <mjml> tags.

thats my code:

`import React, {useState, useEffect} from 'react';
import * as grapesjs from 'grapesjs';

import grapesJSMJML from 'grapesjs-mjml'

import {useParams} from 'react-router-dom'
import { API_HOST } from './api_utils';

const Editor = () => {
const [editor, setEditor] = useState(null);
const pageId = useParams();
console.log('params editor :>>', pageId )

useEffect(() => {
  const editor =grapesjs.init({
    id:"#editor",
    noticeOnUnload: 0,
    container:"#editor",
    avoidInlineStyle : false,
    fromElement: true,
    storageManager:{
      type: "remote",
      stepsBeforeSave: 1,
      contentTypeJson:true,
      storeComponents:true,
      storeStyles:true,
      storeHtml:true,
      storeCss: true,
      headers: {
        "Content-Type": "application/json",
      },
      id: "mycustom-",
      urlStore: `${API_HOST}/${pageId.pageId}/content`,
      urlLoad: `${API_HOST}/${pageId.pageId}/content`,
    },
    plugins: [grapesJSMJML],
    pluginsOpts:{
      grapesJSMJML:{
        resetDevices: false,
        overwriteExport: true,
        resetStyleManager:true,
        resetBlocks:true,
       
        
      },
    }
  });
 
  editor.DomComponents.clear()
  editor.addComponents('<mjml><mj-body><mj-section></mj-section></mj-body></mjml>')
  setEditor(editor);
}, []);

return (

)
}
export default Editor `

and that is the export template modal:

Juan Timaná · Answer 1 · Sat Apr 09 2022 03:56:05 GMT+0800 (China Standard Time)

This issue also happens to me. Check out this fiddle.

https://jsfiddle.net/zietbukuel/m1vcjgn5/2/

Frankosntin · Answer 2 · Sun Apr 10 2022 04:28:45 GMT+0800 (China Standard Time)

@zietbukuel I cant solve that yet, but i found another open soucer drag-and-drop email builder with a mjml output thats working fine for me.
im using this version : https://github.com/m-Ryan/easy-email-demo
but that is the main repo: https://github.com/arco-design/easy-email

augustinnoha · Answer 3 · Sun Apr 10 2022 04:39:05 GMT+0800 (China Standard Time)

Hi guys exact same problem for me using VueJS. Can't get rid of this body tag added. So mjml compilation fails. Hop it could be resolved soon.

lphm · Answer 4 · Wed Apr 13 2022 16:26:02 GMT+0800 (China Standard Time)

Same problem for me.

esafronov · Answer 5 · Mon Apr 18 2022 18:06:40 GMT+0800 (China Standard Time)

This issue also happens to me. Check out this fiddle.

https://jsfiddle.net/zietbukuel/m1vcjgn5/2/

Hi I have the same issue but if you remove mjml tags in your example it will work.

Juan Timaná · Answer 6 · Tue Apr 19 2022 04:57:44 GMT+0800 (China Standard Time)

@esafronov still not working, the tag is still present, which shouldn't be the case.

atodared · Answer 7 · Mon Apr 25 2022 00:33:50 GMT+0800 (China Standard Time)

Same behavior.
Resolved fixing previous version 18.0.3 on grapes.js

Html:

NodeJs:
npm i grapesjs@0.18.3

Vladimír Mlázovský · Answer 8 · Thu May 12 2022 19:45:54 GMT+0800 (China Standard Time)

In changelog v0.18.4 is suggested to override wrapper component.

editor.Components.addType('wrapper', {
  model: {
    defaults: {
      tagName: 'div', // replace body to div
    },
    // And/or skip wrapper in the HTML output
    toHTML: function(opts) {
      return this.getInnerHTML(opts);
     }
  }
});

But it does not work for me, any suggestion?

esafronov · Answer 9 · Thu May 12 2022 21:59:15 GMT+0800 (China Standard Time)

In changelog v0.18.4 is suggested to override wrapper component.

editor.Components.addType('wrapper', {
  model: {
    defaults: {
      tagName: 'div', // replace body to div
    },
    // And/or skip wrapper in the HTML output
    toHTML: function(opts) {
      return this.getInnerHTML(opts);
     }
  }
});

But it does not work for me, any suggestion?

Should be :
tagName: 'mjml'

Vladimír Mlázovský · Answer 10 · Thu May 12 2022 22:16:37 GMT+0800 (China Standard Time)

No, I have to remove body tag entirely.

It is like this:

<body>
  <mjml>
    <mj-head id="ilnn">
       <mj-raw>
       ...
  </mjml>
</body>

And it would be like this.

<mjml>
  <mj-head id="ilnn">
    <mj-raw>
     ...
</mjml>

The solution is to override wrapper component toHTML() method.

editor.getWrapper().toHTML = function(opts) {
  return this.getInnerHTML(opts);
};

Manuel · Answer 11 · Wed Jul 27 2022 16:33:32 GMT+0800 (China Standard Time)

No, I have to remove body tag entirely.

It is like this:
<body>
  <mjml>
    <mj-head id="ilnn">
       <mj-raw>
       ...
  </mjml>
</body>
And it would be like this.
<mjml>
  <mj-head id="ilnn">
    <mj-raw>
     ...
</mjml>
The solution is to override wrapper component toHTML() method.
editor.getWrapper().toHTML = function(opts) {
  return this.getInnerHTML(opts);
};

overriding toHTML was enough for me, this is my starting container

      <div :id="id">
        <mjml v-pre>
          <mj-body>
            <mj-section>
              <mj-column>
                <mj-text>Content</mj-text>
              </mj-column>
            </mj-section>
          </mj-body>
        </mjml>
      </div>

Artur Arseniev · Answer 12 · Sat Oct 01 2022 20:37:13 GMT+0800 (China Standard Time)

This should be fixed in the latest release.