fix: 🐛 support async rehype plugin

Author: Cat1007

.changeset/short-keys-bake.md

@@ -0,0 +1,5 @@
+---
+'vue-markdown-next': patch
+---
+
+fix: support async rehype plugin

packages/docs/example/components.vue

@@ -1,5 +1,9 @@
 <template>
-  <Markdown :content="testContent" :components="components">
+  <Markdown
+    :content="testContent"
+    :components="components"
+    :rehype-plugins="[[rehypeMermaid, { strategy: 'img-png' }]]"
+  >
     <template #hr>
       <t-divider align="left">Using TDesign Divider</t-divider>
     </template>
@@ -15,6 +19,7 @@
 <script setup>
 import { Markdown, VNodeRenderer } from 'vue-markdown-next';
 import { Divider as TDivider } from 'tdesign-vue-next';
+import rehypeMermaid from 'rehype-mermaid';
 import { components } from './components';
 
 const testContent = `
@@ -25,6 +30,15 @@ This is [an example](http://example.com/ "Title") inline link.
 
 <http://example.com/>
 
+\`\`\`mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+\`\`\`
+
+
 - Red
 - Green
 - Blue

packages/docs/package.json

@@ -15,6 +15,7 @@
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.49",
+    "rehype-mermaid": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "tdesign-vue-next": "^1.10.6",
     "unplugin-auto-import": "^0.19.0",

packages/markdown/package.json

@@ -28,6 +28,7 @@
     "@types/mdast": "^4.0.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vueuse/core": "^12.7.0",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "html-url-attributes": "^3.0.1",
     "remark-parse": "^11.0.0",

packages/markdown/src/markdown.tsx

@@ -9,6 +9,7 @@ import { VFile } from 'vfile';
 import { computed, defineComponent, PropType, shallowRef, watch, h } from 'vue';
 import { Fragment, JSX } from 'vue/jsx-runtime';
 import { Root as HastRoot, Element, Parents } from 'hast';
+import { computedAsync } from '@vueuse/core';
 import { defaultUrlTransform } from './utils';
 
 // 替换 vue3 中的实现，vue3 实现后续参数中不存在 children，渲染函数无法处理 children 的渲染
@@ -123,7 +124,7 @@ export default defineComponent({
       },
     );
 
-    const renderTree = computed(() => {
+    const renderTree = computedAsync(async () => {
       const file = new VFile();
 
       // 检测类型
@@ -139,7 +140,7 @@ export default defineComponent({
       }
 
       const mdAstTree = processor.value.parse(file);
-      let hastTree = processor.value.runSync(mdAstTree, file);
+      let hastTree = await processor.value.run(mdAstTree, file);
 
       if (props.className) {
         hastTree = {
@@ -226,17 +227,21 @@ export default defineComponent({
 
     // 返回渲染函数结果
     return () =>
-      toJsxRuntime(renderTree.value, {
-        Fragment,
-        components: {
-          ...props.components,
-          ...componentsWithSlot.value,
-        },
-        ignoreInvalidStyle: true,
-        jsx: jsxWithChildren,
-        jsxs: jsxWithChildren,
-        passKeys: true,
-        passNode: true,
-      });
+      renderTree.value ? (
+        toJsxRuntime(renderTree.value, {
+          Fragment,
+          components: {
+            ...props.components,
+            ...componentsWithSlot.value,
+          },
+          ignoreInvalidStyle: true,
+          jsx: jsxWithChildren,
+          jsxs: jsxWithChildren,
+          passKeys: true,
+          passNode: true,
+        })
+      ) : (
+        <></>
+      );
   },
 });