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=... 转成 ,再交给 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 可解析的 。 + * + * 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 `` + }) +} + +export function tinyEditorDemoPlugin(md: { + parse: (src: string, env: Record) => unknown +}) { + const parse = md.parse.bind(md) + md.parse = (src: string, env: Record) => { + 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;