refactor: migrate markdown toc plugin (#1093) (#1207)

Author: meteorlxy

docs/config/app-configs.md

@@ -148,10 +148,8 @@ interface MarkdownOptions extends MarkdownIt.Options {
   lineNumbers?: boolean
 
   // markdown-it-anchor plugin options.
-  // See: https://github.com/valeriangalliat/markdown-it-anchor
-  anchor?: {
-    permalink?: anchor.AnchorOptions['permalink']
-  }
+  // See: https://github.com/valeriangalliat/markdown-it-anchor#usage
+  anchor?: anchorPlugin.AnchorOptions
 
   // markdown-it-attrs plugin options.
   // See: https://github.com/arve0/markdown-it-attrs
@@ -162,9 +160,9 @@ interface MarkdownOptions extends MarkdownIt.Options {
     disable?: boolean
   }
 
-  // markdown-it-toc-done-right plugin options
-  // See: https://github.com/nagaozen/markdown-it-toc-done-right
-  toc?: any
+  // @mdit-vue/plugin-toc plugin options.
+  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
+  toc?: TocPluginOptions
 
   // Configure the Markdown-it instance.
   config?: (md: MarkdownIt) => void

docs/guide/markdown.md

@@ -435,12 +435,13 @@ const anchor = require('markdown-it-anchor')
 module.exports = {
   markdown: {
     // options for markdown-it-anchor
-    // https://github.com/valeriangalliat/markdown-it-anchor#permalinks
+    // https://github.com/valeriangalliat/markdown-it-anchor#usage
     anchor: {
       permalink: anchor.permalink.headerLink()
     },
 
-    // options for markdown-it-toc-done-right
+    // options for @mdit-vue/plugin-toc
+    // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
     toc: { level: [1, 2] },
 
     config: (md) => {

package.json

@@ -92,7 +92,8 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@mdit-vue/plugin-component": "^0.9.0",
+    "@mdit-vue/plugin-component": "^0.9.2",
+    "@mdit-vue/plugin-toc": "^0.9.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
@@ -136,7 +137,6 @@
     "markdown-it-attrs": "^4.1.4",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
-    "markdown-it-toc-done-right": "^4.2.0",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.6",
     "npm-run-all": "^4.1.5",

pnpm-lock.yaml

@@ -2,10 +2,9 @@ import MarkdownIt from 'markdown-it'
 import anchorPlugin from 'markdown-it-anchor'
 import attrsPlugin from 'markdown-it-attrs'
 import emojiPlugin from 'markdown-it-emoji'
-import tocPlugin from 'markdown-it-toc-done-right'
 import { componentPlugin } from '@mdit-vue/plugin-component'
+import { tocPlugin, type TocPluginOptions } from '@mdit-vue/plugin-toc'
 import { IThemeRegistration } from 'shiki'
-import { parseHeader } from '../utils/parseHeader'
 import { highlight } from './plugins/highlight'
 import { slugify } from './plugins/slugify'
 import { highlightLinePlugin } from './plugins/highlightLines'
@@ -26,18 +25,15 @@ export type ThemeOptions =
 export interface MarkdownOptions extends MarkdownIt.Options {
   lineNumbers?: boolean
   config?: (md: MarkdownIt) => void
-  anchor?: {
-    permalink?: anchorPlugin.AnchorOptions['permalink']
-  }
+  anchor?: anchorPlugin.AnchorOptions
   attrs?: {
     leftDelimiter?: string
     rightDelimiter?: string
     allowedAttributes?: string[]
     disable?: boolean
   }
   theme?: ThemeOptions
-  // https://github.com/nagaozen/markdown-it-toc-done-right
-  toc?: any
+  toc?: TocPluginOptions
   externalLinks?: Record<string, string>
 }
 
@@ -95,15 +91,11 @@ export const createMarkdownRenderer = async (
     slugify,
     permalink: anchorPlugin.permalink.ariaHidden({}),
     ...options.anchor
-  })
+  } as anchorPlugin.AnchorOptions)
     .use(tocPlugin, {
       slugify,
-      level: [2, 3],
-      format: (x: string, htmlencode: (s: string) => string) =>
-        htmlencode(parseHeader(x)),
-      listType: 'ul',
       ...options.toc
-    })
+    } as TocPluginOptions)
     .use(emojiPlugin)
 
   // apply user config