docs(build): add a plugin to display the type details (#10435)

docs/.vitepress/config/plugins.ts

@@ -5,6 +5,7 @@ import mdContainer from 'markdown-it-container'
 import { docRoot } from '@element-plus/build-utils'
 import externalLinkIcon from '../plugins/external-link-icon'
 import tableWrapper from '../plugins/table-wrapper'
+import tooltip from '../plugins/tooltip'
 import { ApiTableContainer } from '../plugins/api-table'
 import { highlight } from '../utils/highlight'
 import type Token from 'markdown-it/lib/token'
@@ -27,6 +28,7 @@ interface ContainerOpts {
 export const mdPlugin = (md: MarkdownIt) => {
   md.use(externalLinkIcon)
   md.use(tableWrapper)
+  md.use(tooltip)
   md.use(mdContainer, 'demo', {
     validate(params) {
       return !!params.trim().match(/^demo\s*(.*)$/)

docs/.vitepress/plugins/tooltip.ts

@@ -0,0 +1,31 @@
+import type MarkdownIt from 'markdown-it'
+
+export default (md: MarkdownIt): void => {
+  md.renderer.rules.tooltip = (tokens, idx) => {
+    const token = tokens[idx]
+
+    return `<api-typing type="${token.content}" details="${token.info}" />`
+  }
+
+  md.inline.ruler.before('emphasis', 'tooltip', (state, silent) => {
+    const tooltipRegExp = /^\^\[([^\]]*)\](\[[^\]]*\])?/
+    const str = state.src.slice(state.pos, state.posMax)
+
+    if (!tooltipRegExp.test(str)) return false
+    if (silent) return true
+
+    const result = str.match(tooltipRegExp)
+
+    if (!result) return false
+
+    const token = state.push('tooltip', 'tooltip', 0)
+    token.content = result[1]
+    token.info = (result[2] || '')
+      .replace(/^\[([^\]]*)\]$/, '$1')
+      .replace(/^`([^`]*)`$/, '$1')
+    token.level = state.level
+    state.pos += result[0].length
+
+    return true
+  })
+}

docs/.vitepress/vitepress/components/globals/vp-api-typing.vue

@@ -12,7 +12,7 @@ defineProps({
     <code class="api-typing mr-1">
       {{ type }}
     </code>
-    <el-tooltip effect="light" trigger="click">
+    <el-tooltip v-if="details" effect="light" trigger="click">
       <el-button text :icon="Warning" class="p-2 text-4" />
       <template #content>
         <slot>