fix(@vant/cli): added markdown link open plugin (#9597)

packages/vant-cli/package.json

@@ -34,6 +34,7 @@
     "@types/fs-extra": "^9.0.12",
     "@types/less": "^3.0.3",
     "@types/lodash": "^4.14.173",
+    "@types/markdown-it": "^12.2.1",
     "@types/postcss-load-config": "^3.0.1",
     "@vue/compiler-sfc": "3.2.12",
     "vue": "3.2.12"

packages/vant-cli/site/desktop/components/Content.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['van-doc-content', `van-doc-content--${currentPage}`]">
+  <div
+    :class="['van-doc-content', `van-doc-content--${currentPage}`]"
+    @click="onClick"
+  >
     <slot />
   </div>
 </template>
@@ -18,19 +21,18 @@ export default {
     },
   },
 
-  mounted() {
-    const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
-    anchors.forEach((anchor) => {
-      anchor.addEventListener('click', this.scrollToAnchor);
-    });
-  },
-
   methods: {
-    scrollToAnchor(event) {
+    onClick({ target }) {
-      if (event.target.id) {
+      if (['H2', 'H3', 'H4', 'H5'].includes(target.tagName)) {
+        this.scrollToAnchor(target);
+      }
+    },
+
+    scrollToAnchor(target) {
+      if (target.id) {
         this.$router.push({
           name: this.$route.name,
-          hash: '#' + event.target.id,
+          hash: '#' + target.id,
         });
       }
     },

packages/vant-cli/src/config/vite.site.ts

@@ -13,6 +13,7 @@ import {
 } from '../common/constant';
 import { injectHtml } from 'vite-plugin-html';
 import type { InlineConfig } from 'vite';
+import type MarkdownIt from 'markdown-it';
 
 function markdownHighlight(str: string, lang: string) {
   if (lang && hljs.getLanguage(lang)) {
@@ -40,6 +41,24 @@ function markdownCardWrapper(htmlCode: string) {
     .join('');
 }
 
+// add target="_blank" to all links
+function markdownLinkOpen(md: MarkdownIt) {
+  const defaultRender =
+    md.renderer.rules.link_open ||
+    ((tokens, idx, options, env, self) =>
+      self.renderToken(tokens, idx, options));
+
+  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    const aIndex = tokens[idx].attrIndex('target');
+
+    if (aIndex < 0) {
+      tokens[idx].attrPush(['target', '_blank']); // add new attribute
+    }
+
+    return defaultRender(tokens, idx, options, env, self);
+  };
+}
+
 function getSiteConfig(vantConfig: any) {
   const siteConfig = vantConfig.site;
 
@@ -96,9 +115,12 @@ export function getViteConfigForSiteDev(): InlineConfig {
         markdownItOptions: {
           highlight: markdownHighlight,
         },
-        markdownItSetup(md: any) {
+        markdownItSetup(md: MarkdownIt) {
           const { slugify } = require('transliteration');
           const markdownItAnchor = require('markdown-it-anchor');
+
+          markdownLinkOpen(md);
+
           md.use(markdownItAnchor, {
             level: 2,
             slugify,

yarn.lock

@@ -1605,11 +1605,25 @@
   resolved "https://registry.nlark.com/@types/less/download/@types/less-3.0.3.tgz#f9451dbb9548d25391107d65d6401a0cfb15db92"
   integrity sha1-+UUdu5VI0lOREH1l1kAaDPsV25I=
 
+"@types/linkify-it@*":
+  version "3.0.2"
+  resolved "https://registry.nlark.com/@types/linkify-it/download/@types/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
+  integrity sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk=
+
 "@types/lodash@^4.14.173":
   version "4.14.173"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.173.tgz#9d3b674c67a26cf673756f6aca7b429f237f91ed"
   integrity sha512-vv0CAYoaEjCw/mLy96GBTnRoZrSxkGE0BKzKimdR8P3OzrNYNvBgtW7p055A+E8C31vXNUhWKoFCbhq7gbyhFg==
 
+"@types/markdown-it@^12.2.1":
+  version "12.2.1"
+  resolved "https://registry.nlark.com/@types/markdown-it/download/@types/markdown-it-12.2.1.tgz#ca36e1edce6f15a770f3e99e68622d1d2e2f0c65"
+  integrity sha1-yjbh7c5vFadw8+meaGItHS4vDGU=
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+    highlight.js "^10.7.2"
+
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.nlark.com/@types/mdast/download/@types/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -1617,6 +1631,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/mdurl@*":
+  version "1.0.2"
+  resolved "https://registry.nlark.com/@types/mdurl/download/@types/mdurl-1.0.2.tgz?cache=0&sync_timestamp=1629708373717&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmdurl%2Fdownload%2F%40types%2Fmdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha1-4s6dg6YTus8oTHvn1JGUXjnh+Ok=
+
 "@types/minimist@^1.2.0":
   version "1.2.2"
   resolved "https://registry.nlark.com/@types/minimist/download/@types/minimist-1.2.2.tgz?cache=0&sync_timestamp=1629708337116&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fminimist%2Fdownload%2F%40types%2Fminimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -4223,6 +4242,11 @@ he@^1.2.0:
   resolved "https://registry.nlark.com/he/download/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha1-hK5l+n6vsWX922FWauFLrwVmTw8=
 
+highlight.js@^10.7.2:
+  version "10.7.3"
+  resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha1-aXJy45kTVuQMPKxWanTu9oF1ZTE=
+
 highlight.js@^11.2.0:
   version "11.2.0"
   resolved "https://registry.nlark.com/highlight.js/download/highlight.js-11.2.0.tgz#a7e3b8c1fdc4f0538b93b2dc2ddd53a40c6ab0f0"