Html to mdx package?

[xHomu]

I imagine converting the jsx and JavaScript expressions might be too much of a reach. What about something that approximates how mdx-js evaluates markdown (with say, gfm plugin), but in reverse?

I been hacking something basic for a copy paste function, but having something more supported would be nice!

[wooorm]

Something that mixes https://github.com/syntax-tree/hast-util-to-estree which turns hast elements to jsx elements, but then you need to turn them into the mdast mdx jsx nodes, combined with hast-util-to-mdast?

But what is the reason?

[xHomu]

I'm currently using this unified processor to convert a richtext pastebin to mdx automatically inside a textarea, but not sure if there's a better way to match how mdx compiles.

unified()
  .use(rehypeParse)
  .use(fixGoogleHtml)
  .use(rehypeRemark)
  .use(remarkGFM)
  .use(remarkStringify, {
    resourceLink: true,
    rule: "-",
    ruleRepetition: 5,
    fences: true,
  });

In the long term, I can imagine an mdx editor where "editing the live preview reflects the changes back into mdx" would be very powerful.

[wooorm]

how mdx compiles

Are you talking about:
a) The MDX format (markdown + JSX + ESM + Expressions)
b) The results of the MDX compiler, which is serialized JavaScript

---

Your code is currently generating markdown.
If you want to generate MDX, you:
a) need to use remark-mdx, which includes extensions that tell remark-stringify how to serialize JSX (and expressions, and ESM), similar to how remark-gfm tells remark-stringify how to compile tables, etc.
b) tell rehype-remark to turn some things into JSX. There are several examples in its readme on how to tell rehype-remark how to handle custom things (https://github.com/rehypejs/rehype-remark#examples). The previously linked project hast-util-to-estree can help, as it turns hast into JSX. In this case, you want to generate the nodes that remark-mdx understands. For more info on the syntax tree it supports, see: https://mdxjs.com/packages/remark-mdx/#syntax-tree.