Custom anchor id not get extracted into toc in .mdx file

[jkzing]

Reproduction

import { compile } from './index.js';

const { toc } = await compile({
  value: `# Title

## Foo {#my-anchor}

## Bar {Math.PI}
`,
  filepath: 'README.mdx',
  development: true,
  root: '/root',
});
console.log(toc);

Expected toc should be:

[
  { text: 'Foo', id: 'my-anchor', depth: 2 },
  { text: 'Bar ', id: 'bar-', depth: 2 }
]

But got:

[
  { text: 'Foo', id: 'foo-', depth: 2 },
  { text: 'Bar ', id: 'bar-', depth: 2 }
]

More information

Did a little dig into it, and found it caused by the parse options passed to markdown-rs here:

mdx-rs/crates/mdx_rs/src/lib.rs

Lines 62 to 78 in 5b52c03

	let parse_options = ParseOptions {
	constructs: Constructs {
	frontmatter: true,
	// Enable GFM Grammer
	gfm_autolink_literal: true,
	gfm_label_start_footnote: true,
	gfm_footnote_definition: true,
	gfm_strikethrough: true,
	gfm_table: true,
	gfm_task_list_item: true,
	// If is_mdx is true, use mdx constructs, or use markdown constructs
	..if is_mdx {
	Constructs::mdx()
	} else {
	Constructs::default()
	}
	},

Specifically it is the option mdx_expression_text inside Constructs::mdx(). The parser would parse #my-anchor as an javascript expression when this option is turned on.

Maybe we can give mdx_expression_parse a custom function to handle this kind of special cases, but I haven't find a clean fix yet.

[10Derozan]

Maybe we can escape heading id in processor, like web-infra-dev/rspress#413.