GrapesJS / mjml

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

support mj-wrapper with background-url and full-width #361

Open ndusart opened 1 month ago

ndusart commented 1 month ago

Hi @artf , here is a PR to propose a fix in the mjml plugin.

When applying a background image to a full-width wrapper, the mjml compiler generates an html tree that does not match with the getChildrenSelector of Wrapper and the javascript crash with the following error:

TypeError: this.getChildrenContainer() is null

This can be reproduced by either setting a wrapper in full-width and adding a background image to it from the editor or by importing an MJML with this kind of component, like in the next example:

<mjml>
  <mj-body>
    <mj-wrapper full-width="full-width" background-url="https://grapesjs.com/assets/images/grapesjs-front-page-m.jpg">
        <mj-section>
        <mj-column>
            <mj-text>Foo</mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

The cause is that when using a background-url attribute, mjml use two successive <div> before the second <table>. This PR fixes the issue by considering any number of level between the first <div> and the next <table>.

This is the current behavior for Section.getChildrenSelector() already and replicated here in Wrapper.