Allow MDX-like nodes in `markdownToHtml`

[stephenlrandall]

What's the problem?

I'm having trouble creating a plugin that maps directives to Svelte components. I have two somewhat competing issues, which are (1) I want children to be passed through, so I need to be careful about how I manipulate the node, and (2) I can't rely on just returning something like...

{ ...node, data: { hName: "Component", hProperties: { ... } } }

...which doesn't work because I want to be able to leverage templating (e.g., <Component attr={expression}/>). This isn't possible with hProperties as far as I know.

So instead I'm manually wrapping the node with raw html that has the component opening/closing tags. I'd love to just replace the node by its children, but when I do that, they're treated as new nodes and dropped from the visitor list for that plugin. Okay, I can pass through the node itself with an innocuous hName of "div". This gets me closest, as long as I'm okay with having every instance of <Component> look like:

<Component attr={expression}>
<div>
<!-- actual children here... -->
</div>
</Component>

But this obviously isn't ideal from an eventual styling perspective.

In the Discord (message link), @Princesseuh suggested using a mdxJsxFlowElement, but this isn't supported in markdownToHtml.

What's the proposed solution?

Allow mdxJsxFlowElement nodes (or something similar) to be inserted in markdownToHtml pipelines. Perhaps behind an option flag? Although I'd understand if it should be a separate function instead, since the output isn't pure HTML.

Participation

• I am willing to submit a pull request for this feature.

[Princesseuh]

It seems like allowing somehow to return a raw value for a hProperty, i.e something like hRawProperties: {attr: "{expression}"}] would fix most of this issue?

It's unlikely that we'll add support for MDX nodes inside Markdown, since they have no HTML representation.

[stephenlrandall]

If that's not too difficult to implement, that'd address the entire issue.