how do I turn the Result object table into mdast or hast?

[reypm]

I was in the middle of write some custom code to parse a custom directive that is coming as markdown content and has the following syntax:

:::page-heading-list{min-level=2 max-level=3}
In this section // this should be the TOC header|title
:::

See the following example of markdown content:

# this h1
## this h2
## this h2
### this h3
#### this h4

The idea behind this was to create a TOC for all the h2 (set by min-leve), h3 (set by max-level). On top of my head I should end up with something like:

 - [this h2](#this-h2)
 - [this h2](#this-h2)
 - [this h3](#this-h3)

Doing some research I found this two:

• remark-toc
• mdast-util-toc

This is my current code:

const processPageHeadingList = (
  node: ContainerDirective | LeafDirective,
  index: number,
  parent: any
) => {
  const minLevel: number = node.attributes?.['min-level'] !== undefined ? parseInt(node.attributes?.['min-level']) : 0
  const maxLevel: number = node.attributes?.['max-level'] !== undefined ? parseInt(node.attributes?.['max-level']) : 0

  node.data = node.data ?? {}
  node.data.hName = 'nav'
  node.data.hProperties = {
    className: 'page-heading-list',
    ariaLabel: 'Page heading list'
  }

  let headings: any = []

  parent.children.map((element: any) => {
    if (element.type === 'heading' && element.depth <= maxLevel && element.depth >= minLevel) {
      headings.push(element)
    }
  })

  /** @type {import('mdast').Root} */
  const tocElement = {
    type: 'root',
    children: parent.children
  }

  const table = toc(tocElement)

  console.dir(table, { depth: 3 })
}

export default processPageHeadingList

and it partially works, however:

• is it possible to set a constraint to just start the TOC from the min-level?
• how do I turn the Result object table into mdast or hast?

Here is a runnable example for the above: https://codesandbox.io/s/remark-directive-forked-tjy5z6

[ChristianMurphy]

is it possible to set a constraint to just start the TOC from the min-level?

I'm not sure what you mean by this.
There is not an option for this currently https://github.com/syntax-tree/mdast-util-toc#options
An option could be added, but there would need to be some definition about why a min level is needed, and how it would work in practice.

how do I turn the Result object table into mdast or hast?

Reading the documentation is a good starting point https://github.com/syntax-tree/mdast-util-toc#result 🙂
Result.map is an MDAST List object.

MDAST can be turned into HAST with mdast-util-to-hast or its wrapper remark-rehype.

Or if you are adding additional headings through your remark directives or rehype plugins, you could also consider using rehype-toc https://github.com/JS-DevTools/rehype-toc

[ChristianMurphy]

What is your question?
If you have ids on the headings, the table of contents has anchor references to the headings, and the page jumps to the correct location when you click on the link.
Then everything is working?

[reypm]

Can you check really quick here https://codesandbox.io/s/remark-directive-forked-tjy5z6?file=/src/customPlugins/Shortcodes/UnorderedList.tsx ?? I am able to print out the toc but no links and I am not sure why because the headings has ids

[reypm]

Do find out why first, then consider opening a separate issue/discussion on the feature.

Got my answer: they don't want to include the page title which is an h1. However, I think this is achievable by using options.skip I will check on this

[ChristianMurphy]

Can you check really quick here https://codesandbox.io/s/remark-directive-forked-tjy5z6?file=/src/customPlugins/Shortcodes/UnorderedList.tsx ?? I am able to print out the toc but no links and I am not sure why because the headings has ids

The answer remains the same as before

If you are working with an MDAST tree (which it looks like you are) you can directly add/splice/replace the List into the content where you want it to go, and react-markdown will take care of the rest.

Don't run toHast on table.map, directly add table.map into the MDAST document.

[reypm]

I have chosen the latest as the answer but all the information contained here was really helpful to me and helped me to understand a little bit more how things work and what I was doing wrong.