Conditional html comments for MS Outllook

[monochromer]

How to render conditional html comments for MS Outlook? For example:

<!--[if gte MSO 9]>
<table width="200"><tr><td>
<![endif]-->
<table align="center" width="100%" style="max-width: 200px;">
  <tr>
    <td align="center" style="text-align: center">
        <img src="//link.com" alt="" width="200" height="140" style="display: block; border: 0; width: 100%; height: auto;">
    </td>
  </tr>
</table>
<!--[if gte MSO 9]>
</td></tr></table>
<![endif]-->

[revivek]

Would dangerouslySetInnerHTML work for this case? React doesn’t have support for rendering HTML comments, so if you need to render raw strings like the comments, then I believe that you’ll have to directly set the string or do some post-processing of the rendered template.

[monochromer]

You need to create a parent element with dangerouslySetInnerHTML, which can interfere with the correct layout.

[revivek]

Ah, yes, that's true. Then I'm unaware of a way to render an HTML comment within Oy today. To support this, I think we would need to have a post-processing step on the rendered string where we strip out or rewrite certain marked tags. I'd be open to discussing an approach here and accepting PRs on the outcome of the discussion.

One approach:

<span data-oy-html-comment dangerouslySetInnerHTML={{__html: '<!--[if gte MSO 9]><table width="200"><tr><td><![endif]-->'}}></span>

renders

<span data-oy-html-comment><!--[if gte MSO 9]><table width="200"><tr><td><![endif]--></span>

which, in preprocessing finds tags with data-oy-html-comment attributes and strips the outer tag. One major worry with this post-processing approach is that it can easily lead to malformed HTML, which React helps prevent.