Imported MJML code breaks

We’re using Mautic 3.3.3 with grapejs builder.

If I create an email using the MLJML macos app, and import that code into grapejs, the layout is completely broken with mj-head code lost and a ton of other rendering issues.

We have a standalone grapejs editor that will apply the mjml code just fine - but the one in Mautic just doesn’t

What am I missing please?

Hello!
I think you are using mjml attributes in the header to set the classes for the whole email.
Unfortunatly this feature is not present, you’d need to code the attributes into the columns, like:

        <mj-text line-height="24px" font-size="16px" color="#454545" font-family="Arial, Helvetica, sans-serif">This is my awesome text</mj-text>

As far as I know it is in the roadmap to fix this issue.

Joey

Hmmm, this is a pretty big bug. Any ideas where to look to fix this?

I wouldn’t say it’s a bug, I rather think it is an upcoming feature. The header section works a bit different when it comes to mjml.

Considering how many people ACTUALLY coding this builder, it is a remarkable achievement, that it came so far.

We are lucky, this is an open source project. If you consider it a bug, and you would really need that feature, you can post it on Bountysource.

Whatever you pledge, I’ll match it to get it started.

1 Like

I have developers I can flick this to, but knowing where to start would be great. As I said, the stand alone version of grapejs mjml we have works fine. How is the mautic version different? I don’t understand why the entire mjml code wouldn’t be parsed intentionally. I’m just trying to understand better so we can resolve this issue.

Okay, sure. Please look at the file structure how Mautic put the emails together. Each template has multiple files. Some of them also contain the header.
Maybe @adiux an give more info.