HTML block elements with markdown content rendered incorrectly about markdown-to-jsx

[okonet]

I also saw you've skipped the appropriate test in spec file. Is this a known issue? Any idea how to solve it?

[quantizor]

This is a limitation of remark. I do my best to process inline html, but block tags are very difficult. It's also considered an antipattern to use raw HTML in markdown, so I likely won't implement this.

…

On Wed, Apr 26, 2017 at 7:04 AM Andrey Okonetchnikov < ***@***.***> wrote: I also saw you've skipped the appropriate test in spec file. Is this a know issue? Any idea how to solve it? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#102 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1lpM9WBvb1AcG9fGl96aw62hmGF8ks5rzyTWgaJpZM4NItDV> .

[wooorm]

@okonet What’s your HTML use case?
If you’re allowing HTML in markdown on the client side, it’s essentially impossible doing it safely.

However, if you’re using it to generate some virtual dom “server-side”, you could go remark-parse -> remark-rehype - rehype-raw -> rehype-react (something like this).

[okonet]

@probablyup thanks for answering! I thought it might be a hard problem to solve since raw HTML is tricky to convert to JSX.

@wooorm thanks for chiming in. I'm building the styleguide/documentation for react-dropzone: https://react-dropzone.netlify.com from the README.md that has some HTML in it https://raw.githubusercontent.com/okonet/react-dropzone/master/README.md (scroll down to the end).

I discovered this issue then I was trying to center the logo by wrapping it and the heading with <div align="center"></div>

[quantizor]

One thing you could take advantage of here is markdown-to-jsx allows for overriding the component output of particular HTML tags. You could provide an img override that applies the centering under specific criteria, perhaps switching on the href.

…

On Wed, Apr 26, 2017 at 11:11 AM Andrey Okonetchnikov < ***@***.***> wrote: @probablyup <https://github.com/probablyup> thanks for answering! I thought it might be a hard problem to solve since raw HTML is tricky to convert to JSX. @wooorm <https://github.com/wooorm> thanks for chiming in. I'm building the styleguide/documentation for react-dropzone: https://react-dropzone.netlify.com from the README.md that has some HTML in it https://raw.githubusercontent.com/okonet/react-dropzone/master/README.md (scroll down to the end). I discovered this issue then I was trying to center the logo by wrapping it and the heading with <div align="center"></div> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#102 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1jV6kCAqjQhe-2dMNaDgoQZg_kqhks5rz16PgaJpZM4NItDV> .

[quantizor]

Link href and/or img src I mean.