HTML to MDAST

[lightstrike]

As part of the effort to transform HTML strings from WordPress with React components, it would be really helpful to build a utility to convert HTML to MDAST. From there, a pathway to create rehype plugins or Gatsby remark plugins would open up a lot of possibilities 😄

[CanRau]

You mean rehype-parse & hast-util-to-mdast?

[ChristopherBiscardi]

@CanRau yeah, but sourcing wordpress content into the MDX pipeline as hast instead of raw markdown (skipping mdPlugins), then letting the plugins/etc run on it and replace rendering of elements with MDXProvider on the other end.

[loremipson]

I'm currently trying to get something similar to this, but this is coming from someone who is fairly ignorant to mdx, so be warned.

It's probably important to note that we have no plans of having Wordpress function on the front end at all. We're actually returning our desired component string via Gutenberg, so that it shows up in wordpress' content as we are already expecting it.

Because of this, our content already looks similar to this:

"content": "<p>Here is a gutenberg paragraph</p>\n\n<SomeComponent title=\"Testing\" />"

In onCreateNode, I take this string, split it on new lines, and check each line in a loop. If the line is a component, I keep it and create a import for the component. Otherwise, I convert it to markdown. I then put it all together with a simple frontmatter string and try to use fs-extra to create a physical mdx file.

The more I'm learning about all this, the more I'm realizing how bad the above is. I'm realizing that mdx actually has AST transforming abilities, and my "loop" mentioned above seems entirely unnecessary..

The above is almost working, but I'm having a lot of issues getting onCreateNode to async/await and have gatsby not finish building before these mdx files are created. This is unrelated to gatsby-mdx, but it's ultimately what lead me here, hoping for a cleaner solution.

[loremipson]

So I think I just worked through my issue above, thanks to gatsby-mdx utils. My problem was trying to use fs inside Gatsby. Instead I ran my built out markup string through createMDXNode from your utils, and then did the standard createNode and it looks like I'm golden.

This still requires my manual loop through my string though, and an HTML to MDAST converter would probably be more efficient to use there.