[go: nahoru, domu]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ndusart
Copy link
@ndusart ndusart commented Jun 13, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant