md2ui 1.0.18 → 1.0.20

package/src/components/MathBlockNodeView.vue

@@ -0,0 +1,160 @@
+<template>
+  <node-view-wrapper class="math-block-wrapper" data-type="mathBlock">
+    <!-- 预览模式 -->
+    <div v-if="!editing" class="math-block-preview" contenteditable="false" @click.stop="startEdit">
+      <div class="math-block-edit-btn" title="编辑公式">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+          <path d="m15 5 4 4" />
+        </svg>
+      </div>
+      <div v-if="renderedHtml && !renderError" class="math-block-rendered" v-html="renderedHtml"></div>
+      <div v-else-if="renderError" class="math-block-error-tip">
+        <span>公式渲染失败</span>
+        <button class="math-block-error-edit" @click.stop="startEdit">编辑公式</button>
+      </div>
+      <div v-else class="math-block-empty" @click.stop="startEdit">
+        <span>点击输入数学公式</span>
+      </div>
+    </div>
+    <!-- 编辑模式：上方编辑区 + 下方实时预览 -->
+    <div v-else class="math-block-editor" contenteditable="false">
+      <div class="math-block-editor-header">
+        <span class="math-block-editor-label">LATEX</span>
+        <div class="math-block-editor-actions">
+          <button class="math-block-editor-delete" @click.stop="deleteBlock" title="删除公式块">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+            </svg>
+          </button>
+          <button class="math-block-editor-done" @click.stop="finishEdit" title="完成编辑">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            <span>完成</span>
+          </button>
+        </div>
+      </div>
+      <textarea
+        ref="textareaRef"
+        class="math-block-editor-textarea"
+        :value="latex"
+        @input="onInput"
+        @keydown.tab.prevent="onTab"
+        @keydown.escape.prevent="finishEdit"
+        spellcheck="false"
+        placeholder="输入 LaTeX 公式，如 \int_0^\infty e^{-x} dx"
+      ></textarea>
+      <!-- 实时预览 -->
+      <div class="math-block-live-preview">
+        <div v-if="liveHtml && !liveError" class="math-block-live-rendered" v-html="liveHtml"></div>
+        <div v-else-if="liveError" class="math-block-live-error">{{ liveError }}</div>
+        <div v-else class="math-block-live-placeholder">预览区域</div>
+      </div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import katex from 'katex'
+
+const props = defineProps(nodeViewProps)
+
+const editing = ref(false)
+const renderedHtml = ref('')
+const renderError = ref(false)
+const liveHtml = ref('')
+const liveError = ref('')
+const textareaRef = ref(null)
+
+// 从节点属性获取 LaTeX 代码
+const latex = computed(() => props.node.attrs.latex || '')
+
+// 渲染 KaTeX
+function renderKatex(text, displayMode = true) {
+  const trimmed = (text || '').trim()
+  if (!trimmed) return { html: '', error: '' }
+  try {
+    const html = katex.renderToString(trimmed, { throwOnError: true, displayMode })
+    return { html, error: '' }
+  } catch (e) {
+    return { html: '', error: e.message || '渲染失败' }
+  }
+}
+
+function updatePreview() {
+  const { html, error } = renderKatex(latex.value)
+  renderedHtml.value = html
+  renderError.value = !!error
+}
+
+function updateLivePreview(text) {
+  const { html, error } = renderKatex(text || latex.value)
+  liveHtml.value = html
+  liveError.value = error
+}
+
+function startEdit() {
+  editing.value = true
+  updateLivePreview()
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.focus()
+      autoResize()
+    }
+  })
+}
+
+function finishEdit() {
+  editing.value = false
+  updatePreview()
+}
+
+function deleteBlock() {
+  const pos = props.getPos()
+  props.editor.chain().focus().deleteRange({ from: pos, to: pos + props.node.nodeSize }).run()
+}
+
+function onInput(e) {
+  const newLatex = e.target.value
+  props.updateAttributes({ latex: newLatex })
+  autoResize()
+  updateLivePreview(newLatex)
+}
+
+function onTab(e) {
+  const ta = e.target
+  const start = ta.selectionStart
+  const end = ta.selectionEnd
+  const val = ta.value
+  const newVal = val.substring(0, start) + '  ' + val.substring(end)
+  ta.value = newVal
+  ta.selectionStart = ta.selectionEnd = start + 2
+  onInput({ target: ta })
+}
+
+function autoResize() {
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+    }
+  })
+}
+
+watch(latex, () => {
+  if (!editing.value) {
+    updatePreview()
+  }
+})
+
+onMounted(() => {
+  updatePreview()
+})
+</script>

package/src/components/MathInlineNodeView.vue

@@ -0,0 +1,145 @@
+<template>
+  <node-view-wrapper as="span" class="math-inline-wrapper" :class="{ 'math-inline-editing': showEditor }">
+    <!-- 渲染态：显示 KaTeX 结果，点击进入编辑 -->
+    <span
+      v-if="renderedHtml && !renderError"
+      class="math-inline-rendered"
+      :class="{ 'math-inline-selected': selected }"
+      v-html="renderedHtml"
+      @click.stop="openEditor"
+      title="点击编辑公式"
+    ></span>
+    <!-- 渲染失败：显示源码 -->
+    <span
+      v-else
+      class="math-inline-error"
+      @click.stop="openEditor"
+      title="公式有误，点击编辑"
+    >{{ latex }}</span>
+
+    <!-- 编辑浮层 -->
+    <div v-if="showEditor" ref="popoverRef" class="math-inline-popover" @click.stop>
+      <div class="math-inline-popover-header">
+        <span class="math-inline-popover-label">行内公式</span>
+        <div class="math-inline-popover-actions">
+          <button class="math-inline-popover-btn delete" @click="deleteNode" title="删除公式">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+            </svg>
+          </button>
+          <button class="math-inline-popover-btn done" @click="closeEditor" title="完成">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <input
+        ref="inputRef"
+        class="math-inline-popover-input"
+        :value="latex"
+        @input="onInput"
+        @keydown.enter.prevent="closeEditor"
+        @keydown.escape.prevent="closeEditor"
+        spellcheck="false"
+        placeholder="LaTeX 公式"
+      />
+      <!-- 实时预览 -->
+      <div v-if="liveHtml" class="math-inline-popover-preview" v-html="liveHtml"></div>
+      <div v-else-if="liveError" class="math-inline-popover-preview math-inline-popover-error">{{ liveError }}</div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import katex from 'katex'
+
+const props = defineProps(nodeViewProps)
+
+const showEditor = ref(false)
+const renderedHtml = ref('')
+const renderError = ref(false)
+const liveHtml = ref('')
+const liveError = ref('')
+const inputRef = ref(null)
+const popoverRef = ref(null)
+
+const latex = computed(() => props.node.attrs.latex || '')
+
+// 渲染 KaTeX
+function renderKatex(text) {
+  if (!text.trim()) return { html: '', error: '' }
+  try {
+    const html = katex.renderToString(text.trim(), { throwOnError: true, displayMode: false })
+    return { html, error: '' }
+  } catch (e) {
+    return { html: '', error: e.message || '渲染失败' }
+  }
+}
+
+function updateRender() {
+  const { html, error } = renderKatex(latex.value)
+  renderedHtml.value = html
+  renderError.value = !!error
+}
+
+function updateLivePreview(text) {
+  const { html, error } = renderKatex(text)
+  liveHtml.value = html
+  liveError.value = error
+}
+
+function openEditor() {
+  showEditor.value = true
+  updateLivePreview(latex.value)
+  nextTick(() => {
+    if (inputRef.value) {
+      inputRef.value.focus()
+      inputRef.value.select()
+    }
+  })
+}
+
+function closeEditor() {
+  showEditor.value = false
+  updateRender()
+}
+
+function deleteNode() {
+  const pos = props.getPos()
+  props.editor.chain().focus().deleteRange({ from: pos, to: pos + props.node.nodeSize }).run()
+}
+
+function onInput(e) {
+  const newLatex = e.target.value
+  props.updateAttributes({ latex: newLatex })
+  updateLivePreview(newLatex)
+}
+
+// 点击外部关闭浮层
+function handleClickOutside(e) {
+  if (showEditor.value && popoverRef.value && !popoverRef.value.contains(e.target)) {
+    closeEditor()
+  }
+}
+
+onMounted(() => {
+  updateRender()
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+
+watch(latex, () => {
+  if (!showEditor.value) {
+    updateRender()
+  }
+})
+</script>

package/src/components/MermaidNodeView.vue

@@ -0,0 +1,157 @@
+<template>
+  <node-view-wrapper class="mermaid-block-wrapper" data-type="mermaidBlock">
+    <!-- 预览模式：渲染图表 -->
+    <div v-if="!editing" class="mermaid-preview">
+      <div class="mermaid-edit-btn" title="编辑 Mermaid 代码" @click.stop="startEdit">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+          <path d="m15 5 4 4" />
+        </svg>
+      </div>
+      <div v-if="svgContent" class="mermaid-svg zoomable-image" v-html="svgContent" style="cursor: zoom-in" title="点击放大查看"></div>
+      <div v-else-if="renderError" class="mermaid-error-tip">
+        <span>图表渲染失败</span>
+        <button class="mermaid-error-edit" @click.stop="startEdit">编辑代码</button>
+      </div>
+      <div v-else class="mermaid-loading">渲染中...</div>
+    </div>
+    <!-- 编辑模式：代码编辑器 -->
+    <div v-else class="mermaid-editor">
+      <div class="mermaid-editor-header">
+        <span class="mermaid-editor-label">MERMAID</span>
+        <button class="mermaid-editor-done" @click.stop="finishEdit" title="完成编辑">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          <span>完成</span>
+        </button>
+      </div>
+      <textarea
+        ref="textareaRef"
+        class="mermaid-editor-textarea"
+        :value="code"
+        @input="onInput"
+        @keydown.tab.prevent="onTab"
+        spellcheck="false"
+      ></textarea>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import mermaid from 'mermaid'
+import { getMermaidCache, setMermaidCache } from '../composables/useMermaidCache.js'
+
+const props = defineProps(nodeViewProps)
+
+const editing = ref(false)
+const svgContent = ref('')
+const renderError = ref(false)
+const textareaRef = ref(null)
+
+// 从节点内容获取代码文本
+const code = computed(() => props.node.textContent || '')
+
+// 渲染 Mermaid 图表
+async function renderChart() {
+  const text = code.value.trim()
+  if (!text) {
+    svgContent.value = ''
+    renderError.value = false
+    return
+  }
+  // 优先使用缓存
+  const cached = getMermaidCache(text)
+  if (cached) {
+    svgContent.value = cached
+    renderError.value = false
+    return
+  }
+  try {
+    const id = 'mermaid-editor-' + Math.random().toString(36).substr(2, 9)
+    const { svg } = await mermaid.render(id, text)
+    svgContent.value = svg
+    renderError.value = false
+    // 写入缓存
+    setMermaidCache(text, svg)
+  } catch (e) {
+    console.error('Mermaid 编辑器渲染失败:', e)
+    svgContent.value = ''
+    renderError.value = true
+    document.querySelectorAll('[id^="mermaid-editor-"][id$="-svg"]').forEach(el => {
+      if (el.closest('.mermaid-block-wrapper') === null) el.remove()
+    })
+  }
+}
+
+// 进入编辑模式
+function startEdit() {
+  editing.value = true
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.focus()
+      autoResize()
+    }
+  })
+}
+
+// 完成编辑，回到预览模式
+function finishEdit() {
+  editing.value = false
+  renderChart()
+}
+
+// 输入处理：更新节点内容
+function onInput(e) {
+  const newText = e.target.value
+  const { tr } = props.editor.state
+  const pos = props.getPos()
+  // 替换节点内部全部文本
+  tr.replaceWith(
+    pos + 1,
+    pos + props.node.nodeSize - 1,
+    newText ? props.editor.schema.text(newText) : []
+  )
+  props.editor.view.dispatch(tr)
+  autoResize()
+}
+
+// Tab 键插入两个空格
+function onTab(e) {
+  const ta = e.target
+  const start = ta.selectionStart
+  const end = ta.selectionEnd
+  const val = ta.value
+  const newVal = val.substring(0, start) + '  ' + val.substring(end)
+  // 先更新 textarea 显示
+  ta.value = newVal
+  ta.selectionStart = ta.selectionEnd = start + 2
+  // 同步到节点
+  onInput({ target: ta })
+}
+
+// 自动调整 textarea 高度
+function autoResize() {
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+      textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+    }
+  })
+}
+
+// 监听代码变化（外部更新时重新渲染）
+watch(code, () => {
+  if (!editing.value) {
+    renderChart()
+  }
+})
+
+onMounted(() => {
+  renderChart()
+})
+</script>

package/src/components/MobileSearch.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mobile-search-page">
+    <!-- 搜索输入区 -->
+    <div class="mobile-search-header">
+      <div class="mobile-search-input-wrapper">
+        <Search :size="16" class="mobile-search-icon" />
+        <input
+          ref="inputRef"
+          type="text"
+          class="mobile-search-input"
+          placeholder="搜索文档..."
+          v-model="searchQuery"
+          @input="doSearch(searchQuery)"
+          @keydown.escape="$emit('close')"
+          @keydown.enter="handleEnter"
+          @keydown.up.prevent="moveSelection(-1)"
+          @keydown.down.prevent="moveSelection(1)"
+        />
+        <button v-if="searchQuery" class="mobile-search-clear" @click="clearSearch">
+          <X :size="14" />
+        </button>
+      </div>
+      <button class="mobile-search-cancel" @click="$emit('close')">取消</button>
+    </div>
+    <!-- 搜索结果 -->
+    <div class="mobile-search-results">
+      <div v-if="!searchReady && indexBuilding" class="mobile-search-tip">
+        正在构建索引...
+      </div>
+      <div v-else-if="searchQuery && searchResults.length === 0" class="mobile-search-empty">
+        没有找到相关文档
+      </div>
+      <template v-else-if="searchResults.length > 0">
+        <div
+          v-for="(item, index) in searchResults"
+          :key="item.key"
+          :class="['mobile-search-item', { active: index === selectedIndex }]"
+          @click="selectResult(item)"
+        >
+          <FileText :size="14" class="mobile-search-item-icon" />
+          <span class="mobile-search-item-title">{{ item.title }}</span>
+        </div>
+      </template>
+      <div v-else class="mobile-search-tip">输入关键词搜索文档内容</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { Search, X, FileText } from 'lucide-vue-next'
+import { useSearch } from '../composables/useSearch.js'
+
+const emit = defineEmits(['close', 'select'])
+
+const { searchQuery, searchResults, searchReady, indexBuilding, doSearch, openSearch } = useSearch()
+
+const inputRef = ref(null)
+const selectedIndex = ref(0)
+
+// 页面挂载时自动聚焦并构建索引
+onMounted(async () => {
+  await openSearch()
+  await nextTick()
+  inputRef.value?.focus()
+})
+
+// 搜索结果变化时重置选中
+watch(searchResults, () => {
+  selectedIndex.value = 0
+})
+
+function clearSearch() {
+  searchQuery.value = ''
+  searchResults.value = []
+  inputRef.value?.focus()
+}
+
+function moveSelection(delta) {
+  const len = searchResults.value.length
+  if (len === 0) return
+  selectedIndex.value = (selectedIndex.value + delta + len) % len
+}
+
+function handleEnter() {
+  if (searchResults.value.length > 0) {
+    selectResult(searchResults.value[selectedIndex.value])
+  }
+}
+
+function selectResult(item) {
+  // 清理搜索状态
+  searchQuery.value = ''
+  searchResults.value = []
+  emit('select', item.key)
+}
+</script>