feat: solve the problem of TinyEditor document demo not displaying

.vitepress/config.mts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress'
 import { vitepressDemoPlugin } from 'vitepress-demo-plugin'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import { isMermaidFence, renderMermaidFence } from './theme/markdown/mermaid'
+import { tinyEditorDemoPlugin } from './theme/markdown/tiny-editor-demo'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -187,6 +188,8 @@ export default defineConfig({
   },
   markdown: {
     config: (md) => {
+      // tiny-editor 的 :::demo src=... 转成 <demo vue="..." />，再交给 vitepress-demo-plugin
+      md.use(tinyEditorDemoPlugin)
       md.use(vitepressDemoPlugin, {
         playground: { show: true },
         codeTransformer: (code) => {

.vitepress/theme/index.ts

@@ -7,6 +7,7 @@ import HomePage from './home/index.vue'
 import CustomTable from './components/CustomTable.vue'
 import MermaidBlock from './components/MermaidBlock.vue'
 import '@opentiny/tiny-robot-style'
+import '@opentiny/fluent-editor/style.css'
 import {nextTick, watch} from 'vue';
 import {useRoute} from 'vitepress';
 import mediumZoom, { Zoom } from 'medium-zoom';

.vitepress/theme/markdown/tiny-editor-demo.ts

@@ -0,0 +1,23 @@
+/**
+ * 将 tiny-editor 文档中的 :::demo src=... 语法
+ * 转换为主站 vitepress-demo-plugin 可解析的 <demo vue="..." />。
+ *
+ * tiny-editor 独立站点使用 @vitepress-code-preview，
+ * 统一文档站使用 vitepress-demo-plugin，语法不兼容。
+ */
+export function transformTinyEditorDemoMarkdown(src: string) {
+  // docs/demo/*.md 中 src=demos/xxx.vue，相对路径为 ../../demos/xxx.vue
+  return src.replace(/:::demo\s+src=([^\s]+)\s*\r?\n:::/g, (_match, demoSrc: string) => {
+    const vuePath = demoSrc.startsWith('demos/') ? `../../${demoSrc}` : demoSrc
+    return `<demo vue="${vuePath}" />`
+  })
+}
+
+export function tinyEditorDemoPlugin(md: {
+  parse: (src: string, env: Record<string, unknown>) => unknown
+}) {
+  const parse = md.parse.bind(md)
+  md.parse = (src: string, env: Record<string, unknown>) => {
+    return parse(transformTinyEditorDemoMarkdown(src), env)
+  }
+}

.vitepress/theme/style.css

@@ -24,6 +24,18 @@ body,
   scrollbar-width: thin;
 }
 
+/* ===== TinyEditor Demo：避免 VitePress 文档样式覆盖编辑器 ===== */
+.vp-doc[class*="_tiny-editor_"] .vitepress-demo-plugin-preview .ql-editor ul,
+.vp-doc[class*="_tiny-editor_"] .vitepress-demo-plugin-preview .ql-editor ol {
+  list-style: revert;
+  padding: revert;
+  margin: revert;
+}
+
+.vp-doc[class*="_tiny-editor_"] .vitepress-demo-plugin-preview .ql-editor li + li {
+  margin: revert;
+}
+
 /* ===== VitePress Demo 插件样式 ===== */
 .vitepress-demo-plugin__container {
   background-color: #fafafa;