gatsby-plugin-mdx v4 code in heading

[NickyMeuleman]

I'm updating my gatsby theme to the latest gatsby-plugin-mdx and noticed a heading with inline code has a different entry in the tableOfContents compared to the older gatsby-plugin-mdx.

The heading is:
## Shed your bikes, `let` sleeping dogs lie

In the tableOfContents object you get from querying that mdx, the title is " sleeping dogs lie".
(the older gatsby-plugin-mdx produced "Shed your bikes, let sleeping dogs lie"

Screenshot of rendered header with the correct CSS applied, and next to it a table of contents component that uses that wrong title field.

The output from the tableOfContents object for that post:

{
  "items": [
    // ...
    {
      "url": "#useful-knowledge",
      "title": "Useful knowledge",
      "items": [
        {
          "url": "#shed-your-bikes-let-sleeping-dogs-lie",
          "title": " sleeping dogs lie"
        }
      ]
    },
    // ...
  ]
}

Why is this happening?
Can I code something to get complete text (that includes the text in the inline code)?

[LekoArts]

The ToC gets generated here:

gatsby/packages/gatsby-plugin-mdx/src/gatsby-node.ts

Lines 224 to 274 in ab51cd4

	tableOfContents: {
	type: `JSON`,
	args: {
	maxDepth: {
	type: `Int`,
	default: 6,
	},
	},
	async resolve(mdxNode, { maxDepth }) {
	const [{ visit }, { toc }] = await Promise.all([
	import(`unist-util-visit`),
	import(`mdast-util-toc`),
	])
	const fileNode = getNode(mdxNode.parent) as FileSystemNode
	if (!fileNode) {
	return null
	}
	const result = await compileMDXWithCustomOptions(
	{
	source: mdxNode.body,
	absolutePath: fileNode.absolutePath,
	},
	{
	pluginOptions,
	customOptions: {
	mdxOptions: {
	remarkPlugins: [
	[remarkInferTocMeta, { visit, toc, maxDepth }],
	],
	},
	},
	getNode,
	getNodesByType,
	pathPrefix,
	reporter,
	cache,
	store,
	}
	)
	if (!result) {
	return null
	}
	return result.metadata.toc
	},
	},
	},

So it uses https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-mdx/src/remark-infer-toc-meta.ts and https://github.com/syntax-tree/mdast-util-toc under the hood. If you have time you could check out its code to see where it drops that information (if it's intentional or accidental)

My gut feeling would be that in e.g.

gatsby/packages/gatsby-plugin-mdx/src/remark-infer-toc-meta.ts

Lines 48 to 55 in ab51cd4

	visit(node, item => {
	if (item.type === `link`) {
	typedCurrent.url = item.url
	}
	if (item.type === `text`) {
	typedCurrent.title = item.value
	}
	})

we don't account for code

[LekoArts]

@NickyMeuleman A solution should be here: #37704