Raw rendering not working on some JS code or tags

[mjmlio]

Raw rendering not working on some JS code or tags

[iRyusa]

Hello,

This is a bug, mj-raw, shouldn't parse anything in it's node. I'm looking into it, i'll keep you updated.

The mso table ensure that outlook will have a centered 600px table rendered from mj-body so it's not really optional

[iRyusa]

I'm sorry @stepanh I don't think i'll have a fix for today.

We have an issue with a dependencies lib called cheerio that rely on htmlparser2. Htmlparser2 is parsing your mj-raw's content as a tag so that's why you get that weird render.

I try to play with htmlparser2 to see if I can find a quick workaround

[stepanh]

Thanks, @iRyusa !

[iRyusa]

@stepanh sorry for the delay, this was harder than I thought.

Next version of MJML will now correctly render <mj-raw><% if (undefined) {} %></mj-raw> ! I'll keep you updated tomorrow.

[techdragon]

I just ran into this issue trying to render handlebars template markup into some mjml output.

[iRyusa]

@techdragon it's merged on master, will be released it asap sorry for the delay

[jmpp]

Having the same problem with <mj-raw> and PHP tags, I silentely followed this issue.

Recent merge solved the problem for me, my PHP tags are now well-preserved inside a <mj-raw>

A big thank you for this fix @iRyusa ! Also for making email development fun again ;)

[techdragon]

We still have incorrect rendering problems for mj-raw in beta8... I'm tempted to say they are worse now, since its generating asymmetrical tags that will really screw up rendering in IE. It looks like the end table tag is actually slipping down to before the next raw element.

<mj-raw>
{{#if advert_1}}
{{#with advert_1}}
</mj-raw>
<mj-section padding-bottom="5" padding-top="5px">
    <mj-column><mj-image href='{{link_url}}' src='{{image_url}}'></mj-image></mj-column>
</mj-section>
<mj-raw>
{{/with}}
{{/if}}
</mj-raw>

Turns into

<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
  <![endif]-->
  {{#if advert_1}}
  {{#with advert_1}}
  <div style="margin:0 auto;max-width:600px;"><table cellpadding="0" cellspacing="0" style="font-size:0;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0;padding:20px 0;padding-bottom:5px;padding-top:5px;"><!--[if mso]>
    <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="font-size:0;padding:10px 25px;" align="center"><table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td><a href="{{link_url}}" target="_blank"><img alt="" src="{{image_url}}" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="550" height="auto"></a></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso]>
    </td></tr></table>
  <![endif]--></td></tr></tbody></table></div><!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
  <![endif]-->
  {{/with}}
  {{/if}}

[iRyusa]

@techdragon that looks good to me on branch 1.3-beta :

In red body table
In orange raw tags that wrap a section
In blue section + column
In green mj-image

[techdragon]

Then I may have misread the logic that constructed the table. It seemed that the opening and closing [if-mso] comment/tags were generated 'around content', not 'inside containers'. So, using your colours for reference, the orange portion, would belong 'outside' the [if-mso] segments that are in red.

I could be wrong about the order of nesting however, since all the convoluted table nesting that goes on in an email can make it extremely hard to keep track. Hopefully this comment clears up the question of what I think may still be broken.

[iRyusa]

Problem is there's many case and we have to deal with :

<mj-body>
   <mj-raw>if test</mj-raw>
   <mj-section ...Content />
   <mj-raw>end iff</mj-raw>
   <mj-section ...Content />
</mj-body>

Imagine this scenario, if mso's conditional tags was after the if test from mj-raw, the mso structure will not be applied and will completely fail on outlook.

MJML is a markup langage with no logic, you should use a preprocessor before using it for this kind of case.

Mj-raw is a workaround for some cases but it's not here to fulfill a preprocessor role

[iRyusa]

Closing this, now behave as expected on 1.3.