Mjml: Allow data attributes

[blackfyre]

We're planning to implement mjml in a visual editor environment where the template components would be stored and maintained in mjml and the rendered html would be shown to the user.

For this reason, allowing data-* attributes would be a nice feature, as we could create functionality around these attributes. Currently there's nothing on the mjml elements that can make them unique and referenceable.

Our current option is to create a custom element that provides this feature but this leads to extra code that could be in-lined.

[iRyusa]

Hi @blackfyre , as custom style attribute we can't add data-* because of how components are made.

However it is possible to use MJML with JSON. This is not documented yet, but here's how to use it :

{ 
  tagName: "mj-container", // Node Name
  attributes: { width: "600px" }, // Mj-Attributes
  children: [
    { tagName: "mj-section", ... }, 
    ... ], // Childrens
  externalSuff: { editable: true } // works as data-* for you
}

The MJML renderer will detect that you're using an Object instead of a String and it should render as expected.

Note that Mj-head are not yet supported on the JSON notation !

Let me know if it fits your needs ?

[blackfyre]

So, in short: JSON can be used instead of XML?

If so, that's even better for us :smile:

[iRyusa]

TL;DR yes 👍

[loeck]

Little example :

var mjml = require('mjml')

console.log(mjml.mjml2html({
  tagName: 'mj-body',
  attributes: {},
  children: [{
    tagName: 'mj-container',
    attributes: {},
    children: [{
      tagName: 'mj-section',
      attributes: {},
      children: [{
        tagName: 'mj-column',
        attributes: {},
        children: [{
          tagName: 'mj-text',
          attributes: {},
          content: 'Youhou \o/'
        }]
      }]
    }]
  }]
}))

[blackfyre]

We've originally had an implementation of handlebars template files which were orchestrated by a json schema, and we planned to modify the original system to concat mjml based markup with handlebars and then pass it over to the mjml renderer, but this way we can interact with the mjml json directly, which allows us a greater flexibility and portability then the original version.

Can't wait for the documentation :smile:

Thanks for the great work! This really helps in bridging the gaps between email clients! :+1:

[blackfyre]

Now, I went ahead and started creating a proof of concept editor for this...
While it's true, that the JSON format gives us easier access/storage/portability options, the original issue still remains.
We cannot create a connection between the rendered HTML and the mjml source object.

We've used the data-* attributes to create unique, persistent ids for this and added data-row=SomeHash & data-block=AnotherHash and attached event listeners on to those data-* attributes respectively.

We've also used these to attach controls for the rows and blocks of the letter.

And in the final rendering, we've created a clean html version without any data-* attributes.

[blackfyre]

We've found that the best placement for the data attribute would be the outermost standard HTML element of the mjml element.

[farhansalam]

I get a "Line undefined (mj-body) — Element mj-body doesn't exist or is not registered" when I try to convert this same json

[ngarnier]

hey @farhansalam, please remove mj-body for now and start with mj-container directly. In the next release (v3.3.0), the JSON format will handle mj-head too so you'll be able to use mj-body as expected.

[farhansalam]

@ngarnier Thanks now it works 👍 I have another question: Is there any way of converting a React component returning something like (below) to html?

<mj-section padding="0" border="1px solid #BABABA" background-color="#FAFAFA">
  <mj-column width="100%">
    <mj-text font-family="monospace">
      <p>Hello</p>
      <p>World</p>
    </mj-text>
  </mj-column>   
</mj-section>

[iRyusa]

Well, data-* will be treated as any custom attributes mentioned here #200 so i'm closing this one.