Parse MDX string and replace Markdown elements

[mattboon]

Hi there

Was wondering how you can take a string of MDX and replace the markdown elements e.g. headings, lists etc, and then return another string.

Input:

# Heading 1

<Box>
  <SomeComponent />
</Box>

## Heading 2

- List
- List
- List

Expected output:

<h1>Heading 1</h1>

<Box>
  <SomeComponent />
</Box>

<h2>Heading 2</h2>

<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

Not sure if there is a combination of mdx and/or remark/unist libraries one can use to achieve this parsing?

You can always run the string through something like markdown-it, but ideally I'd like to stick to MDX-related libs.

Am aware of things like next-mdx-remote and @mdx-js/react to handle rendering, but here I'm concerned with string -> string only.

Any help appreciated. Thanks in advance

[wooorm]

This sounds a bit like it may be an XY problem: you’re asking for a solution, but maybe your question is different.
Because this is close to what mdx-js/mdx already does: it compiles markdown to JavaScript. What’s missing in the current state that you’d want differently?

[mattboon]

Thanks for the quick response.

The end goal is so that inline markdown is parsed when the content is returned from a child function:

<ChildFunctionComponent>
  {() => (
    <Box>

# Heading 1

<Box>
  <SomeComponent />
</Box>

## Heading 2

- List
- List
- List

    </Box>
  )}
</ChildFunctionComponent>

Currently "regular" markdown elements are rendered as a string, not parsed to their relevant HTML elements and thus not rendered as components from components object from next-mdx-remote.

This however parses the MDX as I would like:

<ChildFunctionComponent>
  {() => (
    <Box>
<h1>Heading 1</h1>

<Box>
  <SomeComponent />
</Box>

<h2>Heading 2</h2>

<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
    </Box>
  )}
</ChildFunctionComponent>

I'm currently trying to find a way that the author can write in the format of the first example, with MDX parsing to the correct elements. At the moment the idea was by using a custom rehype plugin.

[wooorm]

Ahh. You want child content as MDX.

• Is there a reason you even wrap it in a function? What if it worked without that function?
• Could you put the child content in another mdx file, and import that?
• There are some differences between v1 and v2. v1 takes how markdown deals with HTML (so needing blank lines to enter MDX again), v2 instead lets you nest children by indenting how far you want (because indented code is not used)

[mattboon]

• Props will be returned from the child function component / render prop that are needed to render the page
• Am using next-mdx-remote so importing is not possible, sadly.
• Am using the @invertase/next-mdx-remote fork which upgrades @mdx-js to 2.0.0-next.9. Overall I've found the parsing is excellent (improves on v1 for sure) including child content as component children in the normal way.

Have tried indenting the content and adding new line breaks, but it still doesn't parse when inside a function.

[wooorm]

Props will be returned from the child function component / render prop that are needed to render the page

Could you perhaps share something a bit closer to what you’re actually doing? Not sure, but it might help me understand?

Am using next-mdx-remote so importing is not possible, sadly.

Ah, that’s indeed sad. I’d guess that somehow it’s still possible to also include components from other places, but 🤷‍♂️.

Overall I've found the parsing is excellent (improves on v1 for sure) including child content as component children in the normal way.

Glad to hear! It’s unfortunate that it’s a bit different from v1, but over all I’d say it’s much better — glad you see that too.

Have tried indenting the content and adding new line breaks, but it still doesn't parse when inside a function.

The thinking there is similar to that someCode('someMoreCode()') in JavaScript also doesn’t recursively run the “JavaScript” in the string. Same with JS expressions when entered from markdown: you’re in JS then, not in the outer language.