Details tag with tables or table syntax not correctly rendered after modifying AST and converting back to Markdown

[niravbhuva99]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

I have tested this issue using the latest version of the relevant packages.

Link to runnable example

runnable example

Steps to reproduce

1. Include a table or table syntax within a <details> tag in Markdown.
2. Convert Markdown to AST.
3. Make modifications to the AST.(optional)
4. Convert the modified AST back to Markdown.
5. Observe that the <details> tag with the table or table syntax does not render correctly.

When modifying the Abstract Syntax Tree (AST) and converting it back to Markdown, the <details> tag containing either tables or table syntax is not rendered correctly. This issue arises specifically when converting Markdown to AST, making modifications, and then converting back to Markdown. The <details> tag fails to render as expected in the presence of table syntax within it.

Expected behavior

The <details> tag with the table or table syntax should render properly after converting the modified AST back to Markdown.

Actual behavior

Behavior with Table Syntax

Behavior with Table Syntax Inside Details Tag

Affected runtime and version

node@21.5.0

Affected package manager and version

"micromark-extension-mdxjs": "^3.0.0", "mdast-util-mdx": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.1.0", "@mdx-js/mdx": "^3.0.1", "@mdx-js/mdxast": "^1.1.1"

Affected OS and version

macOs

Build and bundle tools

No response

[wooorm]

Hey!

I think your previewer is wrong. You use a markdown previewer. It doesn’t render MDX 2+ properly.

@mdx-js/mdxast is ancient and archived and deprecated, don’t use it.

Your example looks fine. Both the input and output MDX are perfect.

Your screenshots don’t include details? And what are you modifying? I don’t see anything in your linked example doing that.

[github-actions[bot]]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing more info. It’s not clear yet whether this is an issue. Here are a couple tips:

• Spend time framing the issue! The more time you put into it, the more we will
• Often, maintainers respond with why for several back and forths; rubber duck debugging might help avoid that
• Folks posting issues sometimes fall for xy problems: asking for a certain solution instead of raising the root problem

Thanks, — bb

[niravbhuva99]

Thank you for your reply

I changed the previewer, but the result remains the same. I want the Markdown to render the same result before and after the modification. The modification involves changing the link node. The modification process itself seems to be working fine; however, the issue lies in the Markdown rendering after converting the modified AST back to Markdown.

Markdown renders before the modification

Markdown renders after the modification

One observation is that it adds an extra line.

[wooorm]

I want the Markdown [...]

[...] back to Markdown

This project isn’t about markdown. This is MDX. There is a real difference. Don’t use MDX things if you want markdown.

[...] to render the same result before and after the modification.

ASTs don’t work like that. ASTs are not CSTs.

The modification process itself seems to be working fine;

Which one? Your code does not modify.

the issue lies in the Markdown rendering after converting the modified AST back to Markdown.

That is not an issue. That’s how MDX works. You’re asking about XY problems and not providing code. Please explain your actual question. Please provide more info.

[niravbhuva99]

How can I convert MDX to AST and AST to MDX?

Is this the right method?

[wooorm]

Yes. Use .mdx as an extension though

[niravbhuva99]

Now please clone this repository and run 'npm install'. After that, execute the 'index.js' file. This will generate the 'processes.mdx' file. Open the file with MDX Preview

[ChristianMurphy]

@niravbhuva99 put your example in a sandbox. Like https://stackblitz.com/ or https://codesandbox.io/

Nobody wants to run an unvetted executable on their machine, it's a security nightmare.

[niravbhuva99]

here is the example

[ChristianMurphy]

@niravbhuva99 you are generating a .md extension instead of .mdx. Other than the extension, the generated file looks valid and it renders the same in https://mdxjs.com/playground/ as the original file did.

[wooorm]

You're asking about a previewer. I don't know this previewer. This tools seems broken. If it's broken, ask the folks working on that tool. For us here: why do you care about some random preview tool? What do you actually want to do? MDX, markdown? What is your root problem?

[niravbhuva99]

@ChristianMurphy Do you know which previewer the MDXjs playground uses?

[ChristianMurphy]

@niravbhuva99 the MDX website uses MDX to render the preview https://github.com/mdx-js/mdx/blob/8f754f707207915bd34c3af8f9064e367c125a58/docs/_asset/editor.jsx

That doesn't answer the question what are you using and trying to do?

[niravbhuva99]

I'm currently working with netlify-cms. My aim is to be able to preview MDX components embedded in my pages directly within Netlify CMS. I am also modifying the link nodes and then converting them back to MDX. It seems that after this modification, some of the MDX content does not render as expected.

[niravbhuva99]

I am using a package called netlify-cms-widget-mdx.

[ChristianMurphy]

It is broken because netlify-cms-widget-mdx uses mdx-scoped-runtime (https://github.com/karolis-sh/gatsby-mdx/blob/80de7cbdb1b514ade5266da086ab5490d3441ee4/packages/netlify-cms-widget-mdx/package.json#L26). mdx-scoped-runtime uses MDX version 0 (alpha and unmaintained for years, https://github.com/karolis-sh/gatsby-mdx/blob/80de7cbdb1b514ade5266da086ab5490d3441ee4/packages/mdx-scoped-runtime/package.json#L26), we're on version 3 currently.

Ask netlify-cms-widget-mdx to update to use the latest MDX.

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[github-actions[bot]]

Hi team! I don’t know what’s up as there’s no phase label. Please add one so I know where it’s at.

Thanks, — bb