What is the right way to create a table of contents base on headings? #408

9vek · 2022-03-04T11:22:19Z

9vek
Mar 4, 2022

Hi guys,
I'm very new to milkdown and I'm now trying to use it in a small vue3 + typescript project. I want to make a TOC for my milkdown editor instance, but I don't know the right way to do it, since the learning materials on the net are quite few at the moment.

The feature is quite simple, I want to display a list of headings as toc, user can click on it and jump to coresponding heading as well. the following picture shows what I want:

Actually the above picture shows what I have implemented in my (stupid) way, I wrote a simple plugin to give every new heading an id and emit the heading list to the toc component. The code of the plugin is as follow:

import { css } from '@emotion/css';
import { Ctx, NodeSchema } from '@milkdown/core'
import { heading } from '@milkdown/preset-commonmark'
import { reactive } from 'vue'
import { v4 as uuid } from 'uuid'
import mitt from 'mitt'

type Events = {
  'update-toc': void
}

export const TOCEmitter = mitt<Events>()

let hids: string[] = []

interface Heading {
  text: string,
  type: number,
  hid: string
}

export const headings = reactive<Heading[]>([])

TOCEmitter.on('update-toc', () => {
  hids = hids.filter((hid) => {
    return document.querySelector(`.editor #${hid}`) instanceof HTMLElement
  })
  headings.length = 0
  hids.map((hid) => {
    const hel = document.querySelector(`.editor #${hid}`) as HTMLElement
    headings.push({
      text: hel.innerText,
      type: parseInt(hel.tagName.replace('H', '')),
      hid: hid
    })
  })
})

export const myHeading = heading.extend((original, utils, options) => {

  const headingMap: Record<number, string> = {
    1: css`
          font-size: 3rem;
          line-height: 3.5rem;
      `,
    2: css`
          font-size: 2.125rem;
          line-height: 2.25rem;
      `,
    3: css`
          font-size: 1.5rem;
          line-height: 1.5rem;
      `,
  };

  const style = (level: number) =>
    options?.headless
      ? null
      : css`
                ${headingMap[level] || ''}
                margin: 2.5rem 0 !important;
                font-weight: 400;
            `;

  const mySchema = (ctx: Ctx): NodeSchema => {
    return {
      ...original.schema(ctx),
      toDOM: (node) => {

        return [
          `h${node.attrs.level}`,
          {
            class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level)),
            id: (() => {
              let newHid = `h${uuid().split('-')[4]}`
              while (true) {
                if (hids.indexOf(newHid) < 0) {
                  break
                }
                newHid = `h${uuid().split('-')[4]}`
              }
              hids.push(newHid)
              return newHid
            })()
          },
          0,
        ];
      },
    }
  }

  return {
    ...original,
    schema: mySchema
  }
})