Mjml: Render of mj-button adds unwanted <![CDATA[

[raulsann]

It's hard to use a template system like ERB with mjml because it adds an unwanted <![CDATA[ on the mj-button when there is a variable on the href attribute.

Here you can see an example. This code:

          <mj-button
            align="left"
            border="2px solid #F9A73E"
            font-size="16px"
            font-weight="400"
            padding="0 68px 26px 68px"
            font-family="'Open Sans', sans-serif"
            background-color="#ffffff"
            href="<%[email protected]_s%>"
            color="#F9A73E">READ MORE</mj-button>

Renders into the following code where you can see the unwanted <![CDATA[

</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 68px 26px 68px;" align="left">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tbody>
<tr>
<td style="border:2px solid #F9A73E;border-radius:3px;color:#F9A73E;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ffffff">
<a href="<%[email protected]_s%>
<![CDATA[" style="display:inline-block;text-decoration:none;background:#ffffff;color:#F9A73E;font-family:'Open Sans', sans-serif;font-size:16px;font-weight:400;margin:0px;" target="_blank">READ MORE]]>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>

[iRyusa]

Hi there @raulsann ,

It's an known issue with our current XML Parser that we can't solve yet, but we're working on a new parser see #394.

Best workaround is to apply templating language first and then send it to MJML. So you can use conditionnal or even loop column without breaking anything. I advise you to use one of community Ruby Gem such as https://github.com/kolybasov/mjml-ruby

TLDR; You should apply ERB before passing it to MJML.

[raulsann]

Hi @iRyusa, thank you for your quick reply.

We are currently using https://github.com/kolybasov/mjml-ruby but in order to preview it in our local machines we are rendering it with https://github.com/mjmlio/gulp-mjml and applying MJML before ERB.

Again, thank you for your reply. We'll workaround this issue as you suggested.

[iRyusa]

Rails has a built in mailer preview now ? It doesn't work with it ? http://api.rubyonrails.org/v4.1/classes/ActionMailer/Base.html#class-ActionMailer::Base-label-Previewing+emails

[raulsann]

Yes, we are using preview but https://github.com/kolybasov/mjml-ruby doesn't seem to work with it. We implemented gulp-mjml because of that. To your knowledge, should mjml-ruby work with preview, @iRyusa?

[iRyusa]

Mh, dunno why it doesn't. I never tried MJML in a Rails app but I like the implementation of mjml-ruby. Can you mail me your errors or something maxime [at] derniercri.io

[raulsann]

I'd love to but we are not really running into errors. When we execute our emails via ActionMailer::Preview, the mjml is simply not parsed, but we can see the email in plain text.

On the other side, when we run an email with a pure ActionMailer, mjml-ruby works as expected.

Our assumption was that the mjml-ruby was not interjecting emails when run with a ActionMailer::Preview.

In any case, we found a workaround to the initial problem, we are using a mj-table instead of a mj-button element. ERB works as expected in a mj-table. This is an example mj-table that we are using to substitute a mj-button:

          <mj-table padding="0 68px 26px 68px">
              <tr style="padding: 0 0 0 0">
                <th style="padding: 0 0; text-align: left;">
                  <a style="padding: 0 0 0 0;display:inline-block;border: 2px solid #F9A73E;border-radius: 3px;color: #F9A73E;cursor: auto;padding: 10px 25px;font-family: 'Open Sans', sans-serif;font-size: 16px;font-weight: 400;text-decoration: none;" href="<%[email protected]_s%>">
                    READ MORE
                  </a>
                </th>
              </tr>
          </mj-table>

[m-basov]

@raulsann @iRyusa handlers are applied before mjml you can check it at https://github.com/kolybasov/mjml-ruby/blob/master/lib/mjml/rails/template_handler.rb#L13
Also there is usage example of ActionMailer::Preview with mjml-ruby https://github.com/kolybasov/actionmailer_preview_mjml_test.

[ptolemybarnes]

I'm also experiencing this issue. It can be quickly reproduced from the command line with:

echo "<mjml><mj-body><mj-container><mj-section><mj-column><mj-button href='<>'>link</mj-button></mj-column></mj-section></mj-container></mj-body></mjml>" | mjml -is

[raulsann]

Amazing, thank you @kolybasov. We were able to make it work with Preview. Also thank you for adding the support for mjml 3 so fast too!

[ngarnier]

Great to hear it solved your issue @raulsann; thanks a lot for this gem @kolybasov!

@ptolemybarnes, are you also using https://github.com/kolybasov/mjml-ruby?

[ptolemybarnes]

@ngarnier No, currently using the CLI only. I want to be able to precompile mjml templates locally as I don't have node available in the production environment. Unfortunately the compiled templates need to have erb-style tags in them which are interpolated at runtime, so I don't think kolybasov's workaround is suitable for me.

I'm considering a script that will make a first-pass through, replacing '<' or '>' with some other arbitrary non-corrupting markup, then invoke mjml, and then revert the first pass. 😆

[m-basov]

@raulsann awesome! Glad to hear that you solved your issue.
@ngarnier you are welcome!
@ptolemybarnes I will try to find a way to precompile templates. So if you have any ideas let me know in the issues! https://github.com/kolybasov/mjml-ruby/issues PR's are always welcome as well :)

[ptolemybarnes]

@kolybasov Okay, will do! TBH I think, as iRyusa said, it's a problem with the parser so there's probably not much you can do at your end, short of a hacky solution such as the one I suggested.

[ptolemybarnes]

This is probably related. The following causes the CLI to hang:

Given a template template.mjml

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-button
            href='<>'>
            <%= %>
          </mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

$ mjml -r template.mjml

[iRyusa]

Hi there,

Quick update here, it should no longer happen in 3.3 ! So I can close this one.
However you could have some encoding issue with href. For that it's a React limitation and it should no longer be an issue with MJML4.
This is a separate issue so I can close this one for now