feat: modify document demo

Author: wuyiping0628

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

@@ -14,8 +14,7 @@ npm i @floating-ui/dom @emoji-mart/data emoji-mart
 
 > `emojiData`、`EmojiPicker`、`emojiPickerPosition` 支持通过 window 传入
 
-:::demo src=demos/emoji.vue
-:::
+<demo vue="../../demos/emoji.vue" />
 
 ## Options
 

packages/docs/fluent-editor/docs/demo/flow-chart.md

@@ -23,29 +23,25 @@ npm install @logicflow/core @logicflow/extension
 
 通过配置工具栏按钮 `flow-chart`，并启用 `flow-chart`模块: `'flow-chart': true` 可以开启流程图功能。
 
-:::demo src=demos/flow-chart.vue
-:::
+<demo vue="../../demos/flow-chart.vue" />
 
 ## 网格样式
 
 流程图模块支持配置网格样式，可以配置网格大小、颜色、类型等设置。
 
-:::demo src=demos/flow-chart-grid.vue
-:::
+<demo vue="../../demos/flow-chart-grid.vue" />
 
 ## 背景样式
 
 流程图模块支持配置背景样式，可以配置背景颜色、图片等设置。
 
-:::demo src=demos/flow-chart-background.vue
-:::
+<demo vue="../../demos/flow-chart-background.vue" />
 
 ## 调整大小
 
 流程图模块支持调整流程图的大小，拖动调整手柄可以改变流程图的尺寸。
 
-:::demo src=demos/flow-chart-resize.vue
-:::
+<demo vue="../../demos/flow-chart-resize.vue" />
 
 ## 配置
 

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

@@ -4,5 +4,4 @@
 
 比如：输入 `#`，再按空格键，即可插入一级标题格式；输入 `-`，再按空格键，即可插入无序列表格式；输入 `>`，再按空格键，即可插入引用格式。
 
-:::demo src=demos/markdown.vue
-:::
+<demo vue="../../demos/markdown.vue" />

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

@@ -6,24 +6,20 @@
 
 通过配置 `mention` 模块，可以开启@提醒功能。
 
-:::demo src=demos/mention.vue
-:::
-
+<demo vue="../../demos/mention.vue" />
 ## 自定义列表样式
 
 通过配置 `renderMentionItem` 方法，可以自定义选项列表的样式。
 
-:::demo src=demos/mention-custom-list.vue
-:::
+<demo vue="../../demos/mention-custom-list.vue" />
 
 ## 跳转链接
 
 在数据中配置`link`与`target`属性，可设置提醒跳转的链接，对应`a`标签的`href`与`target`属性。
 
 当编辑器处于可编辑状态时，链接跳转不可以，注意切换为只读状态。
 
-:::demo src=demos/mention-link.vue
-:::
+<demo vue="../../demos/mention-link.vue" />
 
 ## API
 

packages/docs/fluent-editor/docs/demo/mind-map.md

@@ -23,36 +23,31 @@ npm install simple-mind-map simple-mind-map-plugin-themes
 
 通过配置工具栏按钮 `mind-map`，并启用 `mind-map`模块: `'mind-map': true` 可以开启思维导图功能。
 
-:::demo src=demos/mind-map.vue
-:::
+<demo vue="../../demos/mind-map.vue" />
 
 ## 背景样式
 
 思维导图模块支持配置背景样式，可以配置背景颜色、图片等设置。
 
-:::demo src=demos/mind-map-background.vue
-:::
+<demo vue="../../demos/mind-map-background.vue" />
 
 ## 调整大小
 
 思维导图模块支持调整思维导图的大小，拖动调整手柄可以改变思维导图的尺寸。
 
-:::demo src=demos/mind-map-resize.vue
-:::
+<demo vue="../../demos/mind-map-resize.vue" />
 
 ## 连线样式
 
 思维导图模块支持配置连线样式，可以配置连线颜色、样式等设置。其中曲线只在logicalStructure逻辑结构图和mindMap思维导图两种结构时生效。
 
-:::demo src=demos/mind-map-line.vue
-:::
+<demo vue="../../demos/mind-map-line.vue" />
 
 ## 主题样式
 
 思维导图模块支持配置主题样式，传入主题名称即可。需要注意的是设置了主题后改变的是节点，连线，背景等相关样式，所以设置了主题和背景样式和连线样式后，背景样式和连线样式会覆盖与其相关的主题样式。
 
-:::demo src=demos/mind-map-theme.vue
-:::
+<demo vue="../../demos/mind-map-theme.vue" />
 
 ## 配置
 

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

@@ -2,5 +2,4 @@
 
 通过配置 `modules.toolbar` 为 false 可以隐藏工具栏，配置 `readOnly` 为 true 可以设置只读模式。
 
-:::demo src=demos/readonly.vue
-:::
+<demo vue="../../demos/readonly.vue" />

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

@@ -11,17 +11,15 @@ import Html2Canvas from 'html2canvas'
 window.Html2Canvas = Html2Canvas
 ```
 
-:::demo src=demos/screenshot.vue
-:::
+<demo vue="../../demos/screenshot.vue" />
 
 ## 上传截图
 
 除了将 `Html2Canvas` 变量暴露在 `window` 上，还可以将 Html2Canvas 变量传入 screenshot 配置项中。
 
 默认截图的格式是 Base64，你可以在 `screenshot.beforeCreateImage` 中处理截屏图片，将图片上传到服务器，再将服务器返回的图片 URL 显示到编辑器中。
 
-:::demo src=demos/screenshot-upload-to-server.vue
-:::
+<demo vue="../../demos/screenshot-upload-to-server.vue" />
 
 ## API
 

packages/docs/fluent-editor/docs/demo/set-content.md

@@ -4,12 +4,10 @@
 
 通过设置 `editor.root.innerHTML`，可以初始化 HTML 内容。
 
-:::demo src=demos/set-content-html.vue
-:::
+<demo vue="../../demos/set-content-html.vue" />
 
 ## 初始化 Delta 内容
 
 配置调用 `editor.setContents()` 方法，可以初始化 Delta 内容。
 
-:::demo src=demos/set-content-delta.vue
-:::
+<demo vue="../../demos/set-content-delta.vue" />

packages/docs/fluent-editor/docs/demo/shortcut-key.md

@@ -2,5 +2,4 @@
 
 快捷菜单功能默认关闭，可通过配置 `shortcut-key` 模块为 true 进行开启，开启后，placeholder 会显示“输入 / 唤起菜单”，当我们在空行输入 `/` 时就会唤起快捷菜单，可以通过方向键进行菜单选择，按 Enter 确定，实现纯键盘操作，提升操作效率。
 
-:::demo src=demos/shortcut-key.vue
-:::
+<demo vue="../../demos/shortcut-key.vue" />

packages/docs/fluent-editor/docs/demo/table-up.md

@@ -10,15 +10,12 @@ npm install quill-table-up
 
 ## 单元格操作菜单
 
-:::demo src=demos/table-up-menu.vue
-:::
+<demo vue="../../demos/table-up-menu.vue" />
 
 ## 单元格大小调整
 
-:::demo src=demos/table-up-resize.vue
-:::
+<demo vue="../../demos/table-up-resize.vue" />
 
 ## 快捷菜单配置
 
-:::demo src=demos/table-up-shortcut.vue
-:::
+<demo vue="../../demos/table-up-shortcut.vue" />