Compiling partial without adding surrounding HTML tags #459

danielsunnerberg · 2016-12-05T11:25:09Z

Hi, great work -- makes my life a lot easier!

I have a partial MJML-file which I'd like to render (without a parent) without the surrounding HTML tags. I tried rendering it without the parent mj-body/mjml-tags, but that doesn't seem to be valid syntax.

Reproduction Steps:
Compile the following partial MJML-file:

<mjml>
  <mj-body>
    <mj-text>
      <p>Foo</p>
    </mj-text> 
  </mj-body>
</mjml>

Expected behavior:
Generates only the relevant HTML-code for a partial:

<div style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
  <p>Foo</p>
</div>

Observed behavior:
Generates the full HTML, with surrounding HTML tags:


<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  p { display: block; margin: 13px 0; }
</style>
<!--[if !mso]><!-->
<style type="text/css">
  @media only screen and (max-width:480px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
  }
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
  .outlook-group-fix {
    width:100% !important;
  }
</style>
<![endif]-->

<!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
    <style type="text/css">

        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

    </style>
  <!--<![endif]--></head>
<body>
  <div style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
      <p>Foo</p>
    </div>
</body>
</html>

Perhaps a --partial flag would be a good idea?

The text was updated successfully, but these errors were encountered:

iRyusa · 2016-12-05T12:08:42Z

Hi there,

First, I would like to know the use case of such an option ?

To me, a component like mj-column cannot live outside an html document because there's some media queries attached to it in the head.

danielsunnerberg · 2016-12-05T12:17:33Z

Hi!

Yeah, that makes sense. I'm rendering the compiled partial through Twig, which itself extends a parent template. I suppose a better solution would be to add support for inheritance in MJML.

iRyusa · 2016-12-05T15:03:57Z

I don't know how twig works, but you should apply all twig variables & conditionnal structures to it and then pass it to the MJML engine ? ( Twig -> MJML -> HTML )

danielsunnerberg · 2017-01-11T15:34:46Z

Thank you for the feedback; I attacked the problem from the wrong direction.

nthgol · 2019-04-28T15:36:40Z

I think this is a valid request.
We send specially id'd <div>s to the client that can be Rich text edited, but the default html in such a div is generated by mjml.

iRyusa · 2019-04-28T15:49:49Z

Just do a div inside mj text or use any html tag inside it ? Most of content tag within allow html.

…

On Sun, Apr 28, 2019 at 5:36 PM Nathan ***@***.***> wrote: I think this is a valid request. We send specially id'd s to the client that can be Rich text edited, but the default html in such a div is generated by mjml. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#459 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAELHTNC4RMIT6JCCRBH63DPSXAATANCNFSM4CYQO7TA> .

nthgol · 2019-04-28T15:53:05Z

Couple examples:

<mj-text> //cannot put custom attributes on mj components
<div editable=true database-field='customTitle'>
   {{#if customTitle}}
      {{{customTitle}}}
   {{else}}
    {{{insert some default html here}}} //ideally an mjml partial
   {{/if}}
</div>
</mj-text>

Is there a way to make this work? I tried using mjml2html for the default and ran into this issue thread

iRyusa · 2019-04-28T16:33:11Z

Yeah so basically it's not related to this issue, you most likely want #200 instead. And I don't think it add too much overhead to add a simple div inside a mj-text ? https://mjml.io/try-it-live/H1KorU7iN it compiles just fine and I don't see any issue

…

On Sun, Apr 28, 2019 at 5:53 PM Nathan ***@***.***> wrote: Couple examples: <mj-text> //cannot put custom attributes on mj components <div editable=true database-field='customTitle'> {{#if customTitle}} {{{customTitle}}} {{else}} {{{insert some default html here}}} //ideally an mjml partial {{/if}} </div> </mj-text> Is there a way to make this work? I tried using mjml2html for the default and ran into this issue thread — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#459 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAELHTPUIOQB32NHLXLC6Y3PSXB6FANCNFSM4CYQO7TA> .

kmcb777 · 2019-04-28T23:33:30Z

concerning the ideally an mjml partial, note that you can't use mjml components in a mj-text. It only takes html, and keeps it unchanged.

iRyusa mentioned this issue Dec 5, 2016

Twig tags in my MJML file #457

Closed

danielsunnerberg closed this as completed Jan 11, 2017

igalarzab mentioned this issue Aug 29, 2017

Rendering partials #794

Closed

XBeg9 mentioned this issue Feb 13, 2020

feat: Add middleware (preprocessors) to mjml parser #1815

Merged

fogx mentioned this issue May 27, 2020

Converting twig before mjml assoconnect/mjml-bundle#7

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compiling partial without adding surrounding HTML tags #459

Compiling partial without adding surrounding HTML tags #459

danielsunnerberg commented Dec 5, 2016

iRyusa commented Dec 5, 2016

danielsunnerberg commented Dec 5, 2016

iRyusa commented Dec 5, 2016

danielsunnerberg commented Jan 11, 2017

nthgol commented Apr 28, 2019 •

edited

Loading

iRyusa commented Apr 28, 2019 via email

nthgol commented Apr 28, 2019

iRyusa commented Apr 28, 2019 via email

kmcb777 commented Apr 28, 2019

Compiling partial without adding surrounding HTML tags #459

Compiling partial without adding surrounding HTML tags #459

Comments

danielsunnerberg commented Dec 5, 2016

iRyusa commented Dec 5, 2016

danielsunnerberg commented Dec 5, 2016

iRyusa commented Dec 5, 2016

danielsunnerberg commented Jan 11, 2017

nthgol commented Apr 28, 2019 • edited Loading

iRyusa commented Apr 28, 2019 via email

nthgol commented Apr 28, 2019

iRyusa commented Apr 28, 2019 via email

kmcb777 commented Apr 28, 2019

nthgol commented Apr 28, 2019 •

edited

Loading