GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
628 stars 226 forks source link

Unclosed tags generated on export make the import not working #239

Closed ThomasPof closed 3 years ago

ThomasPof commented 3 years ago

I was struggling with this issue for a while because I didn't saw how to reproduce, but I finally nailed-it

Steps to reproduce

Import this MJML code

<mjml>
  <mj-head>
    <mj-font name="Dosis" href="https://fonts.googleapis.com/css?family=Dosis"></mj-font>
  </mj-head>
  <mj-body background-color="#FFFFFF">
    <mj-section padding="0px">
      <mj-column width="100%">
        <mj-image padding="0px" src="http://img.mailinblue.com/1702968/images/6062e1f810820_1617093112.jpg" id="ivv2d" href="https://anbalaba.com/sud-de-lile-maurice-decouvrez-les-activites-incontournables?utm_source=carnets&utm_medium=emailing&utm_campaign=activites"></mj-image>
        <mj-text color="#0094A2" font-family="Dosis, sans-serif" font-weight="300" font-size="24px" line-height="30px" padding="10px 10px 0px 10px" align="center" padding-top="16px">
          <span id="ixurk">Sud de l&#039;Île Maurice : découvrez les activités incontournables</span>
        </mj-text>
        <mj-text color="#4F575F" font-family="Roboto, sans-serif" font-weight="300" font-size="14px" padding="10px 10px 0px 10px" align="center">
          <p>Le Sud de l&#039;Île Maurice possède une côte sauvage et authentique époustouflante !
            <br/>
          </p>
          <p>Randonnées dans les montagnes, baignades dans des plages sublimes ou encore activités sportives sensationnelles, tout est fait pour passer des moments inoubliables.
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You should see an image, a blue title and two paragraphs.

If you export it and copy the MJML code, you'll notice that mj-font and mj-image tags are now self-closed tags. If you import this copied code in the MJML importer, you will see the import is not working well. It comes from those two tags : if you change them into standard tags <mj-image></mj-image>, the import will now works well...

DRoet commented 3 years ago

duplicate of https://github.com/artf/grapesjs-mjml/issues/149

ThomasPof commented 3 years ago

Fixed in https://github.com/artf/grapesjs-mjml/pull/240