[Feature Request] Opting-out of phrasing content inclusion

[helloworld]

Subject of the feature

I'm running into the same issue as described in https://github.com/syntax-tree/mdast-util-toc/issues/67. The last comment there suggested re-opening the issue if anyone else ran into the same problem.

Problem

I'm using rehype-slug and mdast-util-toc alongside each other. I'm using the former as an MDX plugin to add slugs to my HTML, and the latter to extract out a table of contents so I can render it in the sidebar of the page.

In 99% of cases, the slugs generated by the two libraries are the same and this setup works great. However, just like in the original issue, I have some headers that look like this:

### Dynamic fan-out <Experimental/>

### <Check /> Environment-specific hooks using modes

For these two headers, rehype-slug produces the following anchor links:

#dynamic-fan-out

#environment-specific-hooks-using-modes

However, mdast-util-toc produces:

#dynamic-fan-out-experimental

#check-environment-specific-hooks-using-modes

Interestingly, the titles produced by mdhast-util-toc don't include the text of the MDX components, only the slugs do. The titles look like:

Dynamic fan-out
Environment-specific hooks using modes

If you look at the underlying nodes for the header, they look like this. It looks like the title is ignoring the HTML node, but the slug isn't.

[
  {
    type: 'text',
    value: 'Dynamic fan-out ',
    position: { start: [Object], end: [Object] }
  },
  {
    type: 'html',
    value: '<Experimental/>',
    position: { start: [Object], end: [Object] }
  }
]

Expected behavior

What should happen? Please describe the desired behavior.

Ideally, there would be some way to have the text of the titles and the slugs match, ignoring the HTML nodes in both cases.

The desired slugs are:

#dynamic-fan-out

#environment-specific-hooks-using-modes

Alternatives

What are the alternative solutions? Please describe what else you have considered?

I might be approaching this the wrong way completely by using both rehype-slug and mdast-util-toc alongside each other. The problem is that I don't want my table of contents to be included in the main body of the HTML page itself, and rather render it in the sidebar of the page. That is why I need to extract the table of contents using this library.

I feel like there's a way to run rehype-slug first before running mdast-util-toc, but I had no luck with this. I tried:

const tree = remark().use(mdx).use(remarkSlug).parse(content);
const node = generateToc(tree, { maxDepth: 4 });

and even desperately attempted

const tree = remark().use(mdx).use(rehypeSlugparse(content);
const node = generateToc(tree, { maxDepth: 4 });

with no luck.

[wooorm]

heya.

Why are you seeing an 'html' node? This looks like JSX, and that’s not HTML.

For the desired outcome, I don’t think the -experimental and check- make a lot of sense. Without those, I’d agree. And I think that might be working on the latest alpha of mdx-js/mdx. Or at least the latest main (or in xdm).

[helloworld]

Not sure why I'm seeing an 'html' node, since I'm using remark-mdx as my first step.

You're totally right, I had the incorrect desired outcome by mistake. I edited the original issue above! The desired outcome is:

#dynamic-fan-out

#environment-specific-hooks-using-modes

I'm using next-mdx-remote which is tracking the latest release of mdx. Any ideas here that avoid forking the package to use the alpha mdx version?

[wooorm]

next-mdx-remote has a branch up for xdm. So that should solve this in a bit (when they release it) for your use case

[wooorm]

I'd there still anything to do here? The last beta of mdx-js/mdx now also supports a better ast.

[github-actions[bot]]

Hi team! Could you describe why this has been marked as wontfix?

Thanks, — bb

[wooorm]

Closing as it doesn’t seem needed anymore. Please comment if there’s still a good reason to add it!