fix: ignore non-text content in permalink generation and fix types of markdown.config

src/node/markdown/markdown.ts

@@ -25,6 +25,7 @@ import attrsPlugin from 'markdown-it-attrs'
 import { full as emojiPlugin } from 'markdown-it-emoji'
 import type { BuiltinLanguage, BuiltinTheme, Highlighter } from 'shiki'
 import type { Logger } from 'vite'
+import type { Awaitable } from '../shared'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { gitHubAlertsPlugin } from './plugins/githubAlerts'
 import { highlight as createHighlighter } from './plugins/highlight'
@@ -52,11 +53,11 @@ export interface MarkdownOptions extends Options {
   /**
    * Setup markdown-it instance before applying plugins
    */
-  preConfig?: (md: MarkdownItAsync) => Awaited<void>
+  preConfig?: (md: MarkdownItAsync) => Awaitable<void>
   /**
    * Setup markdown-it instance
    */
-  config?: (md: MarkdownItAsync) => Awaited<void>
+  config?: (md: MarkdownItAsync) => Awaitable<void>
   /**
    * Disable cache (experimental)
    */
@@ -268,22 +269,31 @@ export async function createMarkdownRenderer(
         .map((t) => t.content)
         .join('')
     },
-    permalink: anchorPlugin.permalink.linkInsideHeader({
+    permalink: (slug, _, state, idx) => {
-      symbol: '&ZeroWidthSpace;',
+      const title =
-      renderAttrs: (slug, state) => {
+        state.tokens[idx + 1]?.children
-        // Find `heading_open` with the id identical to slug
+          ?.filter((token) => ['text', 'code_inline'].includes(token.type))
-        const idx = state.tokens.findIndex((token) => {
+          .reduce((acc, t) => acc + t.content, '')
-          const attrs = token.attrs
+          .trim() || ''
-          const id = attrs?.find((attr) => attr[0] === 'id')
+
-          return id && slug === id[1]
+      const linkTokens = [
-        })
+        Object.assign(new state.Token('text', '', 0), { content: ' ' }),
-        // Get the actual heading content
+        Object.assign(new state.Token('link_open', 'a', 1), {
-        const title = state.tokens[idx + 1].content
+          attrs: [
-        return {
+            ['class', 'header-anchor'],
-          'aria-label': `Permalink to "${title}"`
+            ['href', `#${slug}`],
-        }
+            ['aria-label', `Permalink to “${title}”`]
-      }
+          ]
-    }),
+        }),
+        Object.assign(new state.Token('html_inline', '', 0), {
+          content: '&#8203;',
+          meta: { isPermalinkSymbol: true }
+        }),
+        new state.Token('link_close', 'a', -1)
+      ]
+
+      state.tokens[idx + 1].children?.push(...linkTokens)
+    },
     ...options.anchor
   } as anchorPlugin.AnchorOptions).use(frontmatterPlugin, {
     ...options.frontmatter