feat: use <Link> component for internal links (#1553)

Co-authored-by: _Kerman <kermanx@qq.com>

packages/slidev/node/syntax/markdown-it/markdown-it-link.ts

@@ -0,0 +1,28 @@
+import type MarkdownIt from 'markdown-it'
+
+export default function markdownItLink(md: MarkdownIt) {
+  const defaultRender = md.renderer.rules.link_open
+    ?? ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options))
+
+  md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+    const token = tokens[idx]
+    const hrefIndex = token.attrIndex('href')
+    const attr = token.attrs?.[hrefIndex]
+    const href = attr?.[1] ?? ''
+    if ('./#'.includes(href[0]) || /^\d+$/.test(href)) {
+      token.tag = 'Link'
+      attr![0] = 'to'
+
+      for (let i = idx + 1; i < tokens.length; i++) {
+        if (tokens[i].type === 'link_close') {
+          tokens[i].tag = 'Link'
+          break
+        }
+      }
+    }
+    else if (token.attrGet('target') == null) {
+      token.attrPush(['target', '_blank'])
+    }
+    return defaultRender(tokens, idx, options, env, self)
+  }
+}

packages/slidev/node/vite/loaders.ts

@@ -5,8 +5,6 @@ import fg from 'fast-glob'
 import Markdown from 'markdown-it'
 import { bold, gray, red, yellow } from 'kolorist'
 
-// @ts-expect-error missing types
-import mila from 'markdown-it-link-attributes'
 import type { ResolvedSlidevOptions, SlideInfo, SlidePatch, SlidevPluginOptions, SlidevServerOptions } from '@slidev/types'
 import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
@@ -21,6 +19,7 @@ import { VIRTUAL_SLIDE_PREFIX, templateSlides } from '../virtual/slides'
 import { templateConfigs } from '../virtual/configs'
 import { templateMonacoRunDeps } from '../virtual/monaco-deps'
 import { templateMonacoTypes } from '../virtual/monaco-types'
+import markdownItLink from '../syntax/markdown-it/markdown-it-link'
 
 const regexId = /^\/\@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
 const regexIdQuery = /(\d+?)\.(md|json|frontmatter)$/
@@ -66,12 +65,7 @@ export function sendHmrReload(server: ViteDevServer, modules: ModuleNode[]) {
 }
 
 const md = Markdown({ html: true })
-md.use(mila, {
-  attrs: {
-    target: '_blank',
-    rel: 'noopener',
-  },
-})
+md.use(markdownItLink)
 
 function renderNote(text: string = '') {
   let clickCount = 0

packages/slidev/node/vite/markdown.ts

@@ -9,14 +9,13 @@ import type { MarkdownItShikiOptions } from '@shikijs/markdown-it'
 import type { Highlighter, ShikiTransformer } from 'shiki'
 import MagicString from 'magic-string-stack'
 // @ts-expect-error missing types
-import MarkdownItAttrs from 'markdown-it-link-attributes'
-// @ts-expect-error missing types
 import MarkdownItFootnote from 'markdown-it-footnote'
 
 import type { MarkdownTransformContext, MarkdownTransformer, ResolvedSlidevOptions, SlidevConfig, SlidevPluginOptions } from '@slidev/types'
 import MarkdownItKatex from '../syntax/markdown-it/markdown-it-katex'
 import MarkdownItPrism from '../syntax/markdown-it/markdown-it-prism'
 import MarkdownItVDrag from '../syntax/markdown-it/markdown-it-v-drag'
+import MarkdownItLink from '../syntax/markdown-it/markdown-it-link'
 
 import { loadShikiSetups } from '../setups/shiki'
 import { loadSetups } from '../setups/load'
@@ -79,13 +78,7 @@ export async function createMarkdownPlugin(
     },
     ...mdOptions,
     markdownItSetup(md) {
-      md.use(MarkdownItAttrs, {
-        attrs: {
-          target: '_blank',
-          rel: 'noopener',
-        },
-      })
-
+      md.use(MarkdownItLink)
       md.use(MarkdownItEscapeInlineCode)
       md.use(MarkdownItFootnote)
       md.use(MarkdownItTaskList, { enabled: true, lineNumber: true, label: true })

packages/slidev/package.json

@@ -85,7 +85,6 @@
     "magic-string-stack": "^0.1.0",
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-mdc": "^0.2.3",
     "mlly": "^1.6.1",
     "monaco-editor": "^0.47.0",