md2ui 1.0.16 → 1.0.19

package/src/composables/useScroll.js

@@ -5,8 +5,16 @@ const scrollProgress = ref(0)
 const showBackToTop = ref(false)
 const activeHeading = ref('')
 
+// 外部注入的 tocItems 引用，用于编辑模式下通过文本匹配标题
+let _tocItemsRef = null
+
 export function useScroll() {
 
+  // 注入 tocItems 引用（由 useDocManager 调用一次）
+  function setTocItems(tocItems) {
+    _tocItemsRef = tocItems
+  }
+
   // 监听滚动
   function handleScroll(e) {
     const element = e.target
@@ -21,12 +29,26 @@ export function useScroll() {
     updateActiveHeading()
   }
 
+  // 提取标题纯文本（去掉锚点图标等子元素）
+  function getHeadingText(heading) {
+    const clone = heading.cloneNode(true)
+    clone.querySelectorAll('.heading-anchor').forEach(a => a.remove())
+    return clone.textContent.trim()
+  }
+
+  // 通过文本匹配在 tocItems 中查找对应 id（编辑模式下标题无 id 时使用）
+  function findTocIdByText(text) {
+    if (!_tocItemsRef || !_tocItemsRef.value) return ''
+    const item = _tocItemsRef.value.find(t => t.text === text)
+    return item ? item.id : ''
+  }
+
   // 更新当前激活的标题
   function updateActiveHeading() {
     const content = document.querySelector('.content')
     if (!content) return
     
-    const headings = document.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6')
+    const headings = content.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6')
     const scrollTop = content.scrollTop
     
     let currentId = ''
@@ -36,19 +58,38 @@ export function useScroll() {
       const offsetTop = rect.top - contentRect.top + scrollTop
       
       if (offsetTop <= scrollTop + 100) {
-        currentId = heading.id
+        // 优先用 id，没有 id 时通过文本匹配 tocItems
+        currentId = heading.id || findTocIdByText(getHeadingText(heading))
       }
     })
     
     activeHeading.value = currentId
   }
 
-  // 滚动到指定标题
+  // 滚动到指定标题（支持编辑模式下通过文本匹配定位）
   function scrollToHeading(id) {
-    const el = document.getElementById(id)
+    // 优先通过 id 定位
+    let el = document.getElementById(id)
     if (el) {
       el.scrollIntoView({ behavior: 'smooth', block: 'start' })
       activeHeading.value = id
+      return
+    }
+    // 编辑模式下标题无 id，通过 tocItems 找到文本再匹配 DOM
+    if (_tocItemsRef && _tocItemsRef.value) {
+      const tocItem = _tocItemsRef.value.find(t => t.id === id)
+      if (tocItem) {
+        const content = document.querySelector('.content')
+        if (!content) return
+        const headings = content.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6')
+        for (const heading of headings) {
+          if (getHeadingText(heading) === tocItem.text) {
+            heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            activeHeading.value = id
+            return
+          }
+        }
+      }
     }
   }
 
@@ -66,6 +107,7 @@ export function useScroll() {
     activeHeading,
     handleScroll,
     scrollToHeading,
-    scrollToTop
+    scrollToTop,
+    setTocItems
   }
 }

package/src/config.js

@@ -1,4 +1,4 @@
-// 共享配置 - bin/md2ui.js 和 src/api/docs.js 共用
+// 共享配置 - vite.config.js 和 DocService.js 共用
 export const config = {
   // 默认端口
   defaultPort: 3000,

package/src/extensions/CodeBlockCustom.js

@@ -0,0 +1,113 @@
+import { Node, mergeAttributes, VueNodeViewRenderer, textblockTypeInputRule } from '@tiptap/vue-3'
+import CodeBlockNodeView from '../components/CodeBlockNodeView.vue'
+
+/**
+ * 自定义代码块扩展
+ * 编辑模式下渲染带 header（语言标签 + 复制按钮）的代码块，与查看模式风格一致
+ */
+export const CodeBlockCustom = Node.create({
+  name: 'codeBlock',
+  group: 'block',
+  content: 'text*',
+  marks: '',
+  defining: true,
+  isolating: true,
+  code: true,
+
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          const code = element.querySelector('code')
+          if (!code) return null
+          // 从 class="language-xxx" 中提取语言
+          const cls = [...code.classList].find(c => c.startsWith('language-'))
+          return cls ? cls.replace('language-', '') : null
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs: (node) => {
+          const code = node.querySelector('code')
+          if (!code) return {}
+          // 排除 mermaid，由 MermaidBlock 处理
+          if (code.classList.contains('language-mermaid')) return false
+          return {}
+        },
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const lang = node.attrs.language
+    return [
+      'pre',
+      mergeAttributes(HTMLAttributes),
+      ['code', { class: lang ? `language-${lang}` : null }, 0],
+    ]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(CodeBlockNodeView)
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
+      // 在代码块内按 Enter 保持在代码块中
+      'Enter': ({ editor }) => {
+        if (!editor.isActive('codeBlock')) return false
+        return editor.commands.newlineInCode()
+      },
+      // 在代码块末尾按 Mod-Enter 跳出代码块
+      'Mod-Enter': ({ editor }) => {
+        if (!editor.isActive('codeBlock')) return false
+        return editor.commands.exitCode()
+      },
+      // Backspace 在空代码块时退出
+      'Backspace': ({ editor }) => {
+        const { $anchor } = editor.state.selection
+        if (!editor.isActive('codeBlock')) return false
+        if ($anchor.parent.textContent.length > 0) return false
+        return editor.commands.clearNodes()
+      },
+    }
+  },
+
+  // 输入规则：``` 触发代码块
+  addInputRules() {
+    return [
+      textblockTypeInputRule({
+        find: /^```([a-z]*)?[\s\n]$/,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1] || null,
+        }),
+      }),
+    ]
+  },
+
+  // tiptap-markdown 序列化规则
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          const lang = node.attrs.language || ''
+          state.write('```' + lang + '\n')
+          state.text(node.textContent, false)
+          state.ensureNewLine()
+          state.write('```')
+          state.closeBlock(node)
+        },
+        parse: {},
+      },
+    }
+  },
+})

package/src/extensions/MathBlock.js

@@ -0,0 +1,107 @@
+import { Node, mergeAttributes, VueNodeViewRenderer } from '@tiptap/vue-3'
+import MathBlockNodeView from '../components/MathBlockNodeView.vue'
+
+// HTML 属性转义
+function escapeAttr(str) {
+  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/**
+ * 块级数学公式扩展（$$...$$）
+ * 编辑模式下渲染为可交互的 NodeView
+ */
+export const MathBlock = Node.create({
+  name: 'mathBlock',
+  group: 'block',
+  atom: true,
+
+  addAttributes() {
+    return {
+      latex: { default: '' },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.math-block',
+        getAttrs: (node) => {
+          const latex = node.getAttribute('data-latex') || node.textContent.trim()
+          return { latex }
+        },
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, {
+      class: 'math-block',
+      'data-latex': node.attrs.latex,
+    })]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(MathBlockNodeView)
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Backspace': ({ editor }) => {
+        if (!editor.isActive('mathBlock')) return false
+        return editor.commands.deleteSelection()
+      },
+    }
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          state.write('$$\n')
+          state.text(node.attrs.latex || '', false)
+          state.ensureNewLine()
+          state.write('$$')
+          state.closeBlock(node)
+        },
+        parse: {
+          // 给 markdown-it 注册块级公式规则
+          setup(md) {
+            md.block.ruler.before('fence', 'math_block', (state, startLine, endLine, silent) => {
+              const startPos = state.bMarks[startLine] + state.tShift[startLine]
+              const maxPos = state.eMarks[startLine]
+              if (startPos + 2 > maxPos) return false
+              const marker = state.src.slice(startPos, startPos + 2)
+              if (marker !== '$$') return false
+              if (silent) return true
+              let nextLine = startLine + 1
+              let found = false
+              while (nextLine < endLine) {
+                const nPos = state.bMarks[nextLine] + state.tShift[nextLine]
+                const nMax = state.eMarks[nextLine]
+                if (nPos < nMax && state.src.slice(nPos, nPos + 2) === '$$') {
+                  found = true
+                  break
+                }
+                nextLine++
+              }
+              if (!found) return false
+              // 提取 $$ 之间的内容
+              const contentStart = state.bMarks[startLine + 1]
+              const contentEnd = state.eMarks[nextLine - 1]
+              const latex = state.src.slice(contentStart, contentEnd).trim()
+              const token = state.push('math_block', 'div', 0)
+              token.content = latex
+              token.map = [startLine, nextLine + 1]
+              state.line = nextLine + 1
+              return true
+            })
+            md.renderer.rules.math_block = (tokens, idx) => {
+              const latex = tokens[idx].content
+              return '<div class="math-block" data-latex="' + escapeAttr(latex) + '"></div>'
+            }
+          },
+        },
+      },
+    }
+  },
+})

package/src/extensions/MathInline.js

@@ -0,0 +1,100 @@
+import { Node, mergeAttributes, VueNodeViewRenderer } from '@tiptap/vue-3'
+import MathInlineNodeView from '../components/MathInlineNodeView.vue'
+
+// HTML 属性转义
+function escapeAttr(str) {
+  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/**
+ * 行内数学公式扩展（$...$）
+ * 编辑模式下渲染为 inline NodeView
+ */
+export const MathInline = Node.create({
+  name: 'mathInline',
+  group: 'inline',
+  inline: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      latex: { default: '' },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span.math-inline-node',
+        getAttrs: (node) => {
+          const latex = node.getAttribute('data-latex') || node.textContent.trim()
+          return latex ? { latex } : false
+        },
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes, {
+      class: 'math-inline-node',
+      'data-latex': node.attrs.latex,
+    }), node.attrs.latex]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(MathInlineNodeView)
+  },
+
+  addInputRules() {
+    return [
+      {
+        find: /(?<!\$)\$([^$\n]+)\$$/,
+        handler: ({ state, range, match }) => {
+          const latex = match[1]
+          if (!latex || !latex.trim()) return
+          const node = state.schema.nodes.mathInline.create({ latex: latex.trim() })
+          const tr = state.tr.replaceWith(range.from, range.to, node)
+          tr.insertText(' ', range.from + 1)
+          return tr
+        },
+      },
+    ]
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          state.write('$' + (node.attrs.latex || '') + '$')
+        },
+        parse: {
+          // 给 markdown-it 注册行内公式规则
+          setup(md) {
+            md.inline.ruler.after('escape', 'math_inline', (state, silent) => {
+              if (state.src[state.pos] !== '$') return false
+              if (state.src[state.pos + 1] === '$') return false // 跳过 $$
+              const start = state.pos + 1
+              let end = start
+              while (end < state.posMax) {
+                if (state.src[end] === '$' && state.src[end - 1] !== '\\') break
+                end++
+              }
+              if (end >= state.posMax) return false
+              if (end === start) return false // 空公式
+              if (silent) return true
+              const latex = state.src.slice(start, end).trim()
+              const token = state.push('math_inline', 'span', 0)
+              token.content = latex
+              state.pos = end + 1
+              return true
+            })
+            md.renderer.rules.math_inline = (tokens, idx) => {
+              const latex = tokens[idx].content
+              return '<span class="math-inline-node" data-latex="' + escapeAttr(latex) + '">' + escapeAttr(latex) + '</span>'
+            }
+          },
+        },
+      },
+    }
+  },
+})

package/src/extensions/MermaidBlock.js

@@ -0,0 +1,73 @@
+import { Node, mergeAttributes, VueNodeViewRenderer } from '@tiptap/vue-3'
+import MermaidNodeView from '../components/MermaidNodeView.vue'
+
+/**
+ * Tiptap Mermaid 扩展
+ * 编辑模式下将 mermaid 代码块渲染为图表预览，右上角提供编辑按钮
+ */
+export const MermaidBlock = Node.create({
+  name: 'mermaidBlock',
+  group: 'block',
+  content: 'text*',
+  marks: '',
+  defining: true,
+  isolating: true,
+  code: true,
+
+  addAttributes() {
+    return {
+      language: {
+        default: 'mermaid',
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs: (node) => {
+          const code = node.querySelector('code')
+          if (!code) return false
+          const isMermaid = code.classList.contains('language-mermaid')
+          return isMermaid ? {} : false
+        },
+        // 优先级高于默认 codeBlock
+        priority: 60,
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'pre',
+      mergeAttributes(HTMLAttributes),
+      ['code', { class: 'language-mermaid' }, 0],
+    ]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(MermaidNodeView)
+  },
+
+  // tiptap-markdown 序列化/解析规则
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          state.write('```mermaid\n')
+          state.text(node.textContent, false)
+          state.ensureNewLine()
+          state.write('```')
+          state.closeBlock(node)
+        },
+        parse: {
+          // 不需要额外的 parse 配置，
+          // Markdown 解析后会生成 <pre><code class="language-mermaid"> 结构，
+          // 由 parseHTML 规则匹配
+        },
+      },
+    }
+  },
+})