refactor(markdown): externalize custom component plugin

BREAKING CHANGE: `markdown.customComponent` has been renamed to `markdown.component`

Author: meteorlxy

.vscode/settings.json

@@ -26,6 +26,7 @@
     "frontmatter",
     "globby",
     "gtag",
+    "mdit",
     "nprogress",
     "prefetch",
     "preload",

docs/reference/config.md

@@ -461,13 +461,13 @@ You can disable it if you want to implement them in client side. For example, [P
 - Also see:
   - [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
 
-### markdown.customComponent
+### markdown.component
 
 - Type: `undefined | false`
 
 - Details:
 
-  Options for VuePress built-in markdown-it custom-component plugin.
+  Options for [@mdit-vue/plugin-component](https://www.npmjs.com/package/@mdit-vue/plugin-component).
 
   Set to `false` to disable this plugin.
 

docs/zh/reference/config.md

@@ -460,13 +460,13 @@ VuePress 在开发和构建时会加载临时文件，因此临时文件目录
 - 参考：
   - [指南 > Markdown > 语法扩展 > 代码块 > 添加 v-pre](../guide/markdown.md#添加-v-pre)
 
-### markdown.customComponent
+### markdown.component
 
 - 类型： `undefined | false`
 
 - 详情：
 
-  VuePress 内置的 markdown-it custom-component 插件的配置项。
+  [@mdit-vue/plugin-component](https://www.npmjs.com/package/@mdit-vue/plugin-component) 插件的配置项。
 
   设置为 `false` 可以禁用该插件。
 

packages/@vuepress/markdown/__tests__/plugins/customComponentPlugin.spec.ts

@@ -26,6 +26,7 @@
     "clean": "rimraf lib *.tsbuildinfo"
   },
   "dependencies": {
+    "@mdit-vue/plugin-component": "^0.1.0",
     "@types/markdown-it": "^12.2.3",
     "@vuepress/shared": "workspace:*",
     "@vuepress/utils": "workspace:*",

packages/@vuepress/markdown/package.json

@@ -3,7 +3,7 @@ import {
   anchorPlugin,
   assetsPlugin,
   codePlugin,
-  customComponentPlugin,
+  componentPlugin,
   emojiPlugin,
   extractHeadersPlugin,
   extractTitlePlugin,
@@ -33,7 +33,7 @@ export const createMarkdown = ({
   anchor,
   assets,
   code,
-  customComponent,
+  component,
   emoji,
   extractHeaders,
   extractTitle,
@@ -103,9 +103,9 @@ export const createMarkdown = ({
   // following plugins modify or replace the rule in place
   // and have no conflicts, so the order is not important
 
-  // treat unknown html tags as custom components
-  if (customComponent !== false) {
-    md.use(customComponentPlugin)
+  // treat unknown html tags as components
+  if (component !== false) {
+    md.use(componentPlugin)
   }
 
   // replace relative link of assets with absolute link

packages/@vuepress/markdown/src/markdown.ts

@@ -1,7 +1,8 @@
+export * from '@mdit-vue/plugin-component'
+
 export * from './anchorPlugin'
 export * from './assetsPlugin'
 export * from './codePlugin'
-export * from './customComponentPlugin'
 export * from './emojiPlugin'
 export * from './extractHeadersPlugin'
 export * from './extractTitlePlugin'

packages/@vuepress/markdown/src/plugins/customComponentPlugin/customComponentPlugin.ts

@@ -18,7 +18,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   anchor?: false | AnchorPluginOptions
   assets?: false | AssetsPluginOptions
   code?: false | CodePluginOptions
-  customComponent?: false
+  component?: false
   emoji?: false | EmojiPluginOptions
   extractHeaders?: false | ExtractHeadersPluginOptions
   extractTitle?: false