feat: add vitepress-demo-plugin

Author: wuyiping0628

packages/docs/fluent-editor/.vitepress/config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 import packageJson from '@opentiny/fluent-editor/package.json' with { type: 'json'}
 import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
 import { defineConfig, loadEnv } from 'vitepress'
+import { vitepressDemoPlugin } from 'vitepress-demo-plugin'
 import llmstxt from 'vitepress-plugin-llms'
 import { sidebar } from './sidebar'
 
@@ -100,6 +101,12 @@ export default defineConfig({
           return `${content}</div>`
         }
       })
+      md.use(vitepressDemoPlugin, {
+        playground: { show: true },
+        codeTransformer: (code) => {
+          return code.replace(/import\.meta\.env\.BASE_URL/g, `'${process.env.VITEPRESS_BASE || '/'}'`)
+        },
+      })
     },
   },
   vite: {

packages/docs/fluent-editor/docs/demo/add-toolbar-item.md

@@ -4,5 +4,4 @@
 
 本示例增加点赞、点踩两个工具栏图标，点赞可以给文本设置绿色，点踩可以给文本设置红色。
 
-:::demo src=demos/add-toolbar-item.vue
-:::
+<demo vue="../../demos/add-toolbar-item.vue" />

packages/docs/fluent-editor/docs/demo/ai.md

@@ -8,8 +8,7 @@
 该功能依赖于大模型的 API Key，无法在官网的 Demo 中进行体验。如果你想体验该功能，可以本地启动 TinyEditor 项目，并使用 Ollama 启动本地大模型；或者配置线上大模型的 host 和 apiKey。
 :::
 
-:::demo src=demos/ai.vue
-:::
+<demo vue="../../demos/ai.vue" />
 
 ## API
 

packages/docs/fluent-editor/docs/demo/basic-usage.md

@@ -13,5 +13,4 @@
 ]
 ```
 
-:::demo src=demos/basic-usage.vue
-:::
+<demo vue="../../demos/basic-usage.vue" />

packages/docs/fluent-editor/docs/demo/code-block-highlight.md

@@ -2,5 +2,4 @@
 
 使用代码块高亮需要安装 [`highlight.js`](https://highlightjs.org/) 插件，并将导入的 highlight.js 传递给 `syntax` 模块的 `hljs` 选项。
 
-:::demo src=demos/code-block-highlight.vue
-:::
+<demo vue="../../demos/code-block-highlight.vue" />

packages/docs/fluent-editor/docs/demo/collaborative-editing.md

@@ -15,8 +15,7 @@
 
 下面是一个完整的协同编辑演示：
 
-:::demo src=demos/collaborative-editing.vue
-:::
+<demo vue="../../demos/collaborative-editing.vue" />
 
 ## 快速开始
 

packages/docs/package.json

@@ -51,6 +51,7 @@
     "postcss": "^8.5.3",
     "vite": "^6.0.3",
     "vitepress": "^1.5.0",
+    "vitepress-demo-plugin": "1.5.0",
     "vitepress-plugin-llms": "^1.1.3"
   }
 }