How do I add html-attributes from my custom `rehype` plug-in #1187

prestonbourne · 2023-07-15T19:41:28Z

prestonbourne
Jul 15, 2023

What I want

To visit heading nodes throughout the tree and apply a custom id to each of them and then push these all these headings into an object that I plan to use elsewhere in the app.

For additional context, if what I'm doing seems strange I'm trying to build a Table of Contents / Page outline similar to what you'd see on google docs or nextra The on this page component on the right handside is my long term goal

What I'm trying

So from what I've read thus far, anything in node.data.hProperties should automatically get passed to rehype and then placed in the final rendered mark-up. That led to me to produce this block of code. I've put comments throughout the code to convey my itentions

import { Heading as AstHeading } from 'mdast'
import { Node } from 'vfile/lib'
import { visit } from 'unist-util-visit'
import { toString } from 'mdast-util-to-string'
import { VFileWithOutput } from 'unified'

interface Heading {
  depth: number
  value: string
  data?: any
}

export const getHeadings = (root: Node) => {
  const headingList: Heading[] = []
// visit only the heading nodes
  visit(root, 'heading', (node: AstHeading) => {

// get the node depth and text and place it into this headings object
    const heading: Heading = {
      depth: node.depth,
      value: toString(node, { includeImageAlt: false }),
    }
// if data was added from a previous plug in add `hProperties` then my custom `id`
    if (node.data) {
      node.data.hProperities = {}
      // @ts-expect-error
      node.data.hProperities.id = 'This WORKS??'
    } else {
      node.data = {}
      node.data.hProperities = {}
      // @ts-expect-error
      node.data.hProperities.id = 'This WORKS??'
    }
// push this to my `ArrayList` with all the headings on the page
    headingList.push(heading)
  
  })

  return headingList
}
// invoke the the function when the plug in runs and add the heading data to the final output
export default function remarkHeadings() {
  return (tree: Node, file: VFileWithOutput<any>) => {
    file.data.headings = getHeadings(tree)
  }
}

Edit: I should add that this is being done with Next.js
I'm having the props being passed with this pattern

const MDXComponents = {
  h1: (props: any) => <Heading as="h1" {...props} />,
  h2: (props: any) => <Heading as="h2" {...props} />,
  h3: (props: any) => <Heading as="h3" {...props} />,
  h4: (props: any) => <Heading as="h4" {...props} />,
  h5: (props: any) => <Heading as="h5" {...props} />,
  h6: (props: any) => <Heading as="h6" {...props} />,
  p: (props: any) => <Body {...props} />,
  pre: (props: any) => <CodeBlock {...props} />,
}

export default MDXComponents

wooorm · 2023-07-16T09:48:56Z

wooorm
Jul 16, 2023
Maintainer

You can use https://github.com/rehypejs/rehype-slug to add IDs to headings.
You can use https://github.com/syntax-tree/mdast-util-toc to get a ToC. Which you can then stash somewhere. This works on the remark level, but you can use mdast-util-to-hast to turn it into hast and then either hast-util-to-jsx-runtime to create react nodes or hast-util-to-html to create a string of HTML

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remark

How do I add html-attributes from my custom `rehype` plug-in #1187

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

remark

How do I add html-attributes from my custom rehype plug-in #1187

prestonbourne Jul 15, 2023

What I want

What I'm trying

Replies: 1 comment

wooorm Jul 16, 2023 Maintainer

How do I add html-attributes from my custom `rehype` plug-in #1187

prestonbourne
Jul 15, 2023

wooorm
Jul 16, 2023
Maintainer