fix(docs): [autocomplete] (#10426)

* Fix crowdin possible error when using with html tag

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

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 { ApiTableContainer } from '../plugins/api-table'
 import { highlight } from '../utils/highlight'
 import type Token from 'markdown-it/lib/token'
 import type Renderer from 'markdown-it/lib/renderer'
@@ -57,4 +58,6 @@ export const mdPlugin = (md: MarkdownIt) => {
       }
     },
   } as ContainerOpts)
+
+  md.use(ApiTableContainer)
 }

docs/.vitepress/plugins/api-table.ts

@@ -0,0 +1,40 @@
+import markdown from 'markdown-it'
+
+import type MarkdownIt from 'markdown-it'
+
+const ApiMd = new markdown()
+
+export const ApiTableContainer = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+
+  ApiMd.renderer.rules = md.renderer.rules
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx, ...rest] = args
+    const [options, env] = rest
+    const token = tokens[idx]
+    if (token.info === 'api') {
+      const newTokens = md.parse(token.content, env)
+
+      let result = ''
+      const { rules } = md.renderer
+      newTokens.forEach((newToken, idx) => {
+        const { type } = newToken
+        if (type === 'inline') {
+          result += md.renderer.renderInline(newToken.children!, options, env)
+        } else if (typeof rules[type] !== 'undefined') {
+          result += rules[newToken.type]!(
+            newTokens,
+            idx,
+            options,
+            env,
+            md.renderer
+          )
+        } else {
+          result += md.renderer.renderToken(newTokens, idx, options)
+        }
+      })
+      return result
+    }
+    return fence.call(md, ...args)
+  }
+}

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

@@ -22,10 +22,13 @@ const props = defineProps({
 
 const mappedParams = computed(() =>
   props.params
-    .reduce(
-      (params, [key, val]) => params.concat([`${key}: ${val}`]),
-      [] as string[]
-    )
+    .reduce((params, [key, val]) => {
+      let type = val
+      if (Array.isArray(val)) {
+        type = val.join(' | ')
+      }
+      return params.concat([`${key}: ${type}`])
+    }, [] as string[])
     .join(', ')
 )
 

docs/en-US/component/autocomplete.md

@@ -41,6 +41,8 @@ autocomplete/remote-search
 
 ### Attributes
 
+```api
+
 | Name                              | Description                                                                                                                | Type                                                                                           | Default      |
 | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------ |
 | placeholder                       | the placeholder of Autocomplete                                                                                            | <StringType />                                                                                 | —            |
@@ -62,8 +64,12 @@ autocomplete/remote-search
 | highlight-first-item              | whether to highlight first item in remote search suggestions by default                                                    | <BooleanType />                                                                                | false        |
 | fit-input-width                   | whether the width of the dropdown is the same as the input                                                                 | <BooleanType />                                                                                | false        |
 
+```
+
 ### Slots
 
+```api
+
 | Name    | Description                                                           |
 | ------- | --------------------------------------------------------------------- |
 | default | Custom content for input suggestions. The scope parameter is { item } |
@@ -72,15 +78,23 @@ autocomplete/remote-search
 | prepend | content to prepend before Input                                       |
 | append  | content to append after Input                                         |
 
+```
+
 ### Events
 
-| Name   | Description                                      | Type                                                                         |
-| ------ | ------------------------------------------------ | ---------------------------------------------------------------------------- |
-| select | triggers when a suggestion is clicked            | <FunctionType :params="[['item', '{ value: typeof modelValue } \| any']]" /> |
-| change | triggers when the icon inside Input value change | <FunctionType :params="[['value', 'string \| number']]" />                   |
+```api
+
+| Name   | Description                                      | Type                                                                           |
+| ------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
+| select | triggers when a suggestion is clicked            | <FunctionType :params="[['item', ['{ value: typeof modelValue }', 'any']]]" /> |
+| change | triggers when the icon inside Input value change | <FunctionType :params="[['value', ['string', 'number']]]" />                   |
+
+```
 
 ### Instance Exposes
 
+```api
+
 | Name             | Description                                 | Type                                                                 |
 | ---------------- | ------------------------------------------- | -------------------------------------------------------------------- |
 | activated        | if autocomplete activated                   | <RefType type="boolean" />                                           |
@@ -95,3 +109,5 @@ autocomplete/remote-search
 | loading          | remote search loading indicator             | <RefType type="boolean" />                                           |
 | popperRef        | el-tooltip component instance               | <RefType type="ElTooltipInstance" />                                 |
 | suggestions      | fetch suggestions result                    | <RefType type="Record<string, any>" />                               |
+
+```