mj-image inside colum breaks contents

GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS

http://grapesjs.com/demo-mjml.html

BSD 3-Clause "New" or "Revised" License

638 stars 228 forks source link

mj-image inside colum breaks contents #222

Closed lahdekorpi closed 3 years ago

lahdekorpi commented 3 years ago

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="http://placehold.it/350x250/78c5d6/fff"/>
        <mj-text>I'm broken</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

In this example, the mj-text isn't visible, only mj-image is inside the column.
You can test this by dragging a new column, an image and then text in the demo, exporting MJML code and re-importing it.

Curiously, contents above mj-image work just fine.

mumumilk commented 3 years ago

I think its the same problem related to #149

Theres a solution in the linked issue that may help you (force tags to not self-close)

lahdekorpi commented 3 years ago

Thanks @mumumilk, I just happened to find the same issue of #149 myself and thought this could be the same.
I modified the void property of mj-image's model to false, but didn't realize it obviously only affects how the markup is generated, not the import I was using to test it.

So just as a workaround for anyone having the same issue, modify your import MJML and open up any self-closing tags before importing.