Include JSX headings in table of contents field

[chasemccoy]

Right now, you can query an MDX node to get a table of contents that is built using the markdown headers in the MDX file.

It would be really nice if this would also include headers rendered inside of JSX. I have scenarios where I want to put a header inside of a React component, but right now that will break my table of contents because gatsby-mdx only picks up Markdown headers.

[ChristopherBiscardi]

hmm, I suppose we could accomplish this by rendering out the MDX content in full, converting back to mdast and then running get-table-of-content on it. Probably better than what we do today.

[avigoldman]

If we are adding the html field described in #139, this should be a relatively straightforward change.

[chasemccoy]

This is awesome. I know I keep saying this, but this really is the last thing keeping me from shipping mdx integration with my company's new, Gatsby-built design system. Would love to see this added!

[ChristopherBiscardi]

Master now has a working html field so we can move on this

[chasemccoy]

@ChristopherBiscardi Trying to dig in and see if I can make this happen now that the html field exists. Looking at this:

gatsby-mdx/packages/gatsby-mdx/gatsby/extend-node-type.js

Lines 192 to 206 in 3790904

	tableOfContents: {
	type: GraphQLJSON,
	args: {
	maxDepth: {
	type: GraphQLInt,
	default: 6
	}
	},
	async resolve(mdxNode, { maxDepth }) {
	const { mdast } = await processMDX({ node: mdxNode });
	const toc = generateTOC(mdast, maxDepth);
	return getTableOfContents(toc.map, {});
	}
	},

The generateTOC function expects an mdast object. For the sake of simplicity, is there a way to take the contents of the html field and convert it back into an mdast object so we can use that here?

[chasemccoy]

Looks like there is a utility for going from HAST to MDAST but I am not sure how to get the HTML string into HAST...

[ChristopherBiscardi]

You can use rehype-parse to get from HTML to hast

[chasemccoy]

Looks like that requires adding unified as a dependency as well as rehype-parse, that cool?

[ChristopherBiscardi]

yeah, it's already a dependency of mdx and we're not moving away from unified anytime soon (or ever really).

[ChristopherBiscardi]

This might be possible in the future due to gatsbyjs/gatsby#13061