md2ui 1.0.18 → 1.0.20

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 规则匹配
+        },
+      },
+    }
+  },
+})