From 61a574754754518fe54e0a2b312147c46500c219 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Thu, 23 Jul 2026 01:26:52 -0700
Subject: [PATCH] feat: solve the problem of TinyEditor document demo not
 displaying

---
 .vitepress/config.mts                         |  3 +++
 .vitepress/theme/index.ts                     |  1 +
 .vitepress/theme/markdown/tiny-editor-demo.ts | 23 +++++++++++++++++++
 .vitepress/theme/style.css                    | 12 ++++++++++
 4 files changed, 39 insertions(+)
 create mode 100644 .vitepress/theme/markdown/tiny-editor-demo.ts

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 8082526..2390dc3 100644
--- a/.vitepress/config.mts
+++ b/.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) => {
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index f2a7c0c..6021859 100644
--- a/.vitepress/theme/index.ts
+++ b/.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';
diff --git a/.vitepress/theme/markdown/tiny-editor-demo.ts b/.vitepress/theme/markdown/tiny-editor-demo.ts
new file mode 100644
index 0000000..461048a
--- /dev/null
+++ b/.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)
+  }
+}
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index c6a899d..6874757 100644
--- a/.vitepress/theme/style.css
+++ b/.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;