search

Faire / mjml-react

React component library to generate the HTML emails on the fly
https://www.npmjs.com/package/@faire/mjml-react
MIT License
375 stars 16 forks source link

Style break by 3.0.0 due to html encoding #69

Closed xibman closed 1 year ago

xibman commented 1 year ago

Hi everyone,

Great work on this fork to continue this project.

I see a breaking change with the last version on styles :

<MjmlStyle>{`
          .main-body > div{background:#fff;}
`}</MjmlStyle>

The superior is encoded into html entities to &#x3E;. So the css end working.

The MjmlStyle content must not be encoded to be readable by browser and email client

emmclaughlin commented 1 year ago

Hi @xibman! We should have documented this update better. In the previous version (V2) MjmlStyle was automatically passing its children through dangerouslySetInnerHtml under the hood. We felt like it wasn't reasonable using dangerouslySetInnerHtml under the hood where developers may not know. So we updated and the children here are sanitized by React, but we added the dangerouslySetInnerHtml prop directly to MjmlStyle. So if you pass your string through the dangerouslySetInnerHtml prop no encoding should occur.

As always, happy to hear any opinions on the change 🙂

xibman commented 1 year ago

@emmclaughlin thanks for the reactivity.

I see the next step is documentation so it will be soon solved.

Again thanks !