Mdx: MDX v2 node.type="html"

[glitteringkatie]

Subject of the issue

Hi! I'm using MDX with gatsby. I'm trying to update my system to MDX v2 but found three different plugins that no longer rendered content. The commonality I saw between all three were that they were creating a node of type html:

• https://github.com/florianeckerstorfer/gatsby-remark-a11y-emoji/blob/main/src/index.js#L11
• https://github.com/remcohaszing/gatsby-remark-mermaid/blob/master/index.js#L59
• https://github.com/janmarthedal/gatsby-remark-mathjax-ssr/blob/master/index.js#L35

It seems as though something is breaking down on v2 when the node.type is "html".

Your environment

• OS: macOS Catalina, 10.15.6
• Packages:
  
  
  
  • "@mdx-js/mdx": "^1.6.16" (working) or "^2.0.0-next.8" (broken)
  
  
  • "@mdx-js/react": "^1.6.16" (working) or "^2.0.0-next.8" (broken)
  
  
  • "gatsby-plugin-mdx": "^1.2.34"
  
  
  • "gatsby-remark-mathjax-ssr": "^1.2.1"
  
  
  • "gatsby-remark-mermaid": "^2.0.0"
  
  
  • "gatsby-remark-a11y-emoji": "^1.1.0"
  
  
• Env:
  
  
  
  • node: 10.22.1
  
  
  • yarn: 1.22.10
  
  
  • gatsby cli: 2.13.0
  
  
  • gatsby: 2.26.0
  
  
  • browser: chrome 86.0.4240.80
  
  

Steps to reproduce

Vague steps since I'm so far removed:

1. In your AST add something that would be either node.type "html" or create a node and set type to "html"
2. View the rendering of your mdx--on 1.6.16 you should see that node rendered 🏆 on v2 it should not be rendered 😔

Expected behaviour

I think if you dive into the gatsby plugins, the emoji one should be the simplest (it wraps an emoji with a span that has an appropriate aria label!). So for that expected behviour: I'd expect a line with an emoji to render!

Actual behaviour

Empty <p> tag.

Source

## Emoji

Emoji get proper a11y automatically! 💯

## Images
...

Output

[wooorm]

Hi there Katie! Thanks for such a detailed report.

The removal for html is in my opinion a feature, not a bug. In unified we have a better alternative for mapping markdown to “html”: hProperties, which works for all your “virtual dom” needs: GraphQL, React, Vue, etc, whereas a string of “html” doesn’t.

For some reason, Gatsby plugins never picked that up. I’ll start opening issues with them to update.

[wooorm]

for mathjax: you can use remark-math as a remark plugin, and rehype-mathjax as a rehype plugin. No Gatsby-specificness needed.

For mermaid, there are also already remark plugins out there: https://github.com/search?q=remark+mermaid.

And I raised an issue for a11y-emoji, plus some other often used gatsby-remark plugins.

[wooorm]

Anyway, I’ll close this because it is an intended change in a major version!

[glitteringkatie]

Thanks for the quick response and suggestions!

[glitteringkatie]

For any future readers, I ended up going with https://www.npmjs.com/package/rehype-accessible-emojis for my emojis. https://github.com/florianeckerstorfer/gatsby-remark-a11y-emoji has a similar package without gatsby that is https://github.com/florianeckerstorfer/remark-a11y-emoji but that wasn't able to work either because it still relied on an html node. Since rehype is dealing with hypertext abstract tree, that's the right time to introduce a span element that wraps emojis, not at the remark level.