md2ui 1.0.18 → 1.0.20

package/src/components/EditorContent.vue

@@ -0,0 +1,257 @@
+<template>
+  <main class="content editor-content" @scroll="$emit('scroll', $event)" @click="$emit('content-click', $event)">
+    <WelcomePage v-if="showWelcome" @start="$emit('start')" />
+    <template v-else>
+      <EditorToolbar v-if="editor" :editor="editor" />
+      <div v-if="hasFrontmatter" class="markdown-content">
+        <div class="code-block-wrapper frontmatter-block frontmatter-editor-block">
+          <div class="code-block-header">
+            <span class="code-lang-label">FRONTMATTER</span>
+            <div class="code-block-actions">
+              <button class="code-action-btn" :data-tooltip="frontmatterCollapsed ? '展开' : '折叠'" @click="frontmatterCollapsed = !frontmatterCollapsed">
+                <svg v-if="frontmatterCollapsed" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+                <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
+              </button>
+            </div>
+          </div>
+          <div v-show="!frontmatterCollapsed" class="code-block-body frontmatter-edit-body">
+            <div class="fm-edit-layout">
+              <div class="fm-line-gutter" aria-hidden="true">
+                <span v-for="n in fmLineCount" :key="n" class="code-ln-num">{{ n }}</span>
+              </div>
+              <textarea ref="fmTextarea" class="frontmatter-textarea" :value="frontmatterYaml" @input="onFrontmatterInput" spellcheck="false" rows="1" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <article class="markdown-content editor-area">
+        <editor-content :editor="editor" />
+      </article>
+      <nav v-if="prevDoc || nextDoc" class="doc-nav">
+        <a v-if="prevDoc" class="doc-nav-link prev" @click.prevent="$emit('load-doc', prevDoc.key)">
+          <ChevronLeft :size="16" />
+          <div class="doc-nav-text">
+            <span class="doc-nav-label">上一篇</span>
+            <span class="doc-nav-title">{{ prevDoc.label }}</span>
+          </div>
+        </a>
+        <div v-else></div>
+        <a v-if="nextDoc" class="doc-nav-link next" @click.prevent="$emit('load-doc', nextDoc.key)">
+          <div class="doc-nav-text">
+            <span class="doc-nav-label">下一篇</span>
+            <span class="doc-nav-title">{{ nextDoc.label }}</span>
+          </div>
+          <ChevronRight :size="16" />
+        </a>
+      </nav>
+    </template>
+  </main>
+</template>
+
+<script setup>
+import { watch, onBeforeUnmount, onMounted, ref, onUnmounted, computed, nextTick } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { Table } from '@tiptap/extension-table'
+import { TableRow } from '@tiptap/extension-table-row'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+import { TaskList } from '@tiptap/extension-task-list'
+import { TaskItem } from '@tiptap/extension-task-item'
+import { Image } from '@tiptap/extension-image'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Underline } from '@tiptap/extension-underline'
+import { Markdown } from 'tiptap-markdown'
+import { MermaidBlock } from '../extensions/MermaidBlock.js'
+import { CodeBlockCustom } from '../extensions/CodeBlockCustom.js'
+import { TableControls } from '../extensions/TableControls.js'
+import { MathBlock } from '../extensions/MathBlock.js'
+import { MathInline } from '../extensions/MathInline.js'
+import { uploadImage } from '../services/DocService.js'
+import { parseFrontmatter } from '../composables/useFrontmatter.js'
+import WelcomePage from './WelcomePage.vue'
+import EditorToolbar from './EditorToolbar.vue'
+
+const props = defineProps({
+  showWelcome: { type: Boolean, default: true },
+  markdownContent: { type: String, default: '' },
+  prevDoc: { type: Object, default: null },
+  nextDoc: { type: Object, default: null },
+  docTitle: { type: String, default: '' },
+  currentDocPath: { type: String, default: '' }
+})
+
+const emit = defineEmits(['scroll', 'content-click', 'start', 'load-doc', 'save', 'update:markdownContent'])
+
+const frontmatterYaml = ref('')
+const hasFrontmatter = computed(() => frontmatterYaml.value.length > 0)
+const frontmatterCollapsed = ref(false)
+const fmTextarea = ref(null)
+
+const fmLineCount = computed(() => {
+  const text = frontmatterYaml.value
+  if (!text) return 1
+  return text.split('\n').length
+})
+
+function splitFrontmatter(markdown) {
+  const { content, rawYaml } = parseFrontmatter(markdown)
+  return { yaml: rawYaml, body: content }
+}
+
+function joinFrontmatter(yaml, body) {
+  if (!yaml.trim()) return body
+  return '---\n' + yaml + '\n---\n' + body
+}
+
+function getFullMarkdown() {
+  if (!editor.value) return ''
+  const body = editor.value.storage.markdown.getMarkdown()
+  return joinFrontmatter(frontmatterYaml.value, body)
+}
+
+function onFrontmatterInput(e) {
+  frontmatterYaml.value = e.target.value
+  autoResizeTextarea(e.target)
+  emit('update:markdownContent', getFullMarkdown())
+  scheduleAutoSave()
+}
+
+function autoResizeTextarea(el) {
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+function handleKeydown(e) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    e.preventDefault()
+    if (!editor.value || !props.currentDocPath) return
+    if (autoSaveTimer) clearTimeout(autoSaveTimer)
+    const md = getFullMarkdown()
+    emit('save', { path: props.currentDocPath, content: md })
+  }
+}
+
+onMounted(() => { window.addEventListener('keydown', handleKeydown) })
+onUnmounted(() => { window.removeEventListener('keydown', handleKeydown) })
+
+let autoSaveTimer = null
+function scheduleAutoSave() {
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(() => {
+    if (!editor.value || !props.currentDocPath) return
+    const md = getFullMarkdown()
+    emit('save', { path: props.currentDocPath, content: md })
+  }, 1000)
+}
+
+onUnmounted(() => {
+  if (autoSaveTimer) {
+    clearTimeout(autoSaveTimer)
+    if (editor.value && props.currentDocPath) {
+      const md = getFullMarkdown()
+      emit('save', { path: props.currentDocPath, content: md })
+    }
+  }
+})
+
+const isExternalUpdate = ref(false)
+
+function preloadImage(src) {
+  return new Promise((resolve) => {
+    const img = document.createElement('img')
+    img.onload = () => resolve(true)
+    img.onerror = () => resolve(false)
+    img.src = src
+  })
+}
+
+async function handleImageUpload(file, editorInstance) {
+  if (!file || !file.type.startsWith('image/')) return
+  if (!props.currentDocPath) return
+  try {
+    const url = await uploadImage(file, props.currentDocPath)
+    await preloadImage(url)
+    editorInstance.chain().focus().setImage({ src: url }).run()
+  } catch (e) {
+    console.error('upload failed:', e)
+  }
+}
+
+function createImagePasteProps(getEditor) {
+  return {
+    handlePaste(view, event) {
+      const items = event.clipboardData?.items
+      if (!items) return false
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          event.preventDefault()
+          const file = item.getAsFile()
+          if (file) handleImageUpload(file, getEditor())
+          return true
+        }
+      }
+      return false
+    },
+    handleDrop(view, event) {
+      const files = event.dataTransfer?.files
+      if (!files || files.length === 0) return false
+      const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) return false
+      event.preventDefault()
+      const editorInstance = getEditor()
+      const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+      if (pos) {
+        editorInstance.commands.focus()
+        editorInstance.commands.setTextSelection(pos.pos)
+      }
+      imageFiles.forEach(file => handleImageUpload(file, editorInstance))
+      return true
+    },
+  }
+}
+
+const { yaml: initYaml, body: initBody } = splitFrontmatter(props.markdownContent)
+frontmatterYaml.value = initYaml
+
+const editor = useEditor({
+  extensions: [
+    StarterKit.configure({ codeBlock: false }),
+    Table.configure({ resizable: true }),
+    TableRow, TableCell, TableHeader,
+    TaskList, TaskItem.configure({ nested: true }),
+    Image, Underline,
+    MermaidBlock, CodeBlockCustom, TableControls,
+    MathBlock, MathInline,
+    Placeholder.configure({ placeholder: '开始编写文档...' }),
+    Markdown.configure({ html: true, transformPastedText: true, transformCopiedText: true }),
+  ],
+  content: initBody,
+  editorProps: createImagePasteProps(() => editor.value),
+  onUpdate: ({ editor }) => {
+    if (isExternalUpdate.value) return
+    emit('update:markdownContent', getFullMarkdown())
+    scheduleAutoSave()
+  },
+})
+
+onMounted(() => {
+  nextTick(() => { if (fmTextarea.value) autoResizeTextarea(fmTextarea.value) })
+})
+
+watch(() => props.markdownContent, (newContent) => {
+  if (!editor.value) return
+  const { yaml, body } = splitFrontmatter(newContent)
+  frontmatterYaml.value = yaml
+  nextTick(() => { if (fmTextarea.value) autoResizeTextarea(fmTextarea.value) })
+  const currentMd = editor.value.storage.markdown.getMarkdown()
+  if (currentMd === body) return
+  isExternalUpdate.value = true
+  editor.value.commands.setContent(body)
+  isExternalUpdate.value = false
+})
+
+onBeforeUnmount(() => { editor.value?.destroy() })
+</script>

package/src/components/EditorToolbar.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="editor-toolbar">
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().run()"
+        title="加粗 (Ctrl+B)"
+      >
+        <Bold :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().run()"
+        title="斜体 (Ctrl+I)"
+      >
+        <Italic :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('underline') }"
+        @click="editor.chain().focus().toggleUnderline().run()"
+        title="下划线 (Ctrl+U)"
+      >
+        <UnderlineIcon :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('strike') }"
+        @click="editor.chain().focus().toggleStrike().run()"
+        title="删除线"
+      >
+        <Strikethrough :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('code') }"
+        @click="editor.chain().focus().toggleCode().run()"
+        title="行内代码"
+      >
+        <Code :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        v-for="level in [1, 2, 3, 4]"
+        :key="level"
+        class="editor-toolbar-btn heading-btn"
+        :class="{ active: editor.isActive('heading', { level }) }"
+        @click="editor.chain().focus().toggleHeading({ level }).run()"
+        :title="`标题 ${level}`"
+      >
+        H{{ level }}
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('bulletList') }"
+        @click="editor.chain().focus().toggleBulletList().run()"
+        title="无序列表"
+      >
+        <List :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('orderedList') }"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+        title="有序列表"
+      >
+        <ListOrdered :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('taskList') }"
+        @click="editor.chain().focus().toggleTaskList().run()"
+        title="任务列表"
+      >
+        <ListChecks :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('blockquote') }"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+        title="引用"
+      >
+        <Quote :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().setHorizontalRule().run()"
+        title="分割线"
+      >
+        <Minus :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().toggleCodeBlock().run()"
+        :class="{ active: editor.isActive('codeBlock') }"
+        title="代码块"
+      >
+        <FileCode :size="15" />
+      </button>
+      <div class="table-picker-wrapper" ref="tablePickerRef">
+        <button
+          class="editor-toolbar-btn"
+          @click="toggleTablePicker"
+          title="插入表格"
+        >
+          <TableIcon :size="15" />
+        </button>
+        <div v-if="showTablePicker" class="table-picker-dropdown">
+          <div class="table-picker-label">{{ pickerRows }} x {{ pickerCols }}</div>
+          <div class="table-picker-grid"
+            @mouseleave="pickerRows = 1; pickerCols = 1"
+          >
+            <div
+              v-for="r in 8" :key="r"
+              class="table-picker-row"
+            >
+              <div
+                v-for="c in 8" :key="c"
+                class="table-picker-cell"
+                :class="{ active: r <= pickerRows && c <= pickerCols }"
+                @mouseenter="pickerRows = r; pickerCols = c"
+                @click="confirmInsertTable(r, c)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        class="editor-toolbar-btn"
+        @click="insertImage"
+        title="插入图片"
+      >
+        <ImageIcon :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn math-toolbar-btn"
+        @click="insertMathInline"
+        title="行内公式"
+      >
+        <span class="math-toolbar-icon">$</span>
+      </button>
+      <button
+        class="editor-toolbar-btn math-toolbar-btn"
+        @click="insertMathBlock"
+        title="块级公式"
+      >
+        <span class="math-toolbar-icon">$$</span>
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().undo().run()"
+        :disabled="!editor.can().undo()"
+        title="撤销 (Ctrl+Z)"
+      >
+        <Undo :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().redo().run()"
+        :disabled="!editor.can().redo()"
+        title="重做 (Ctrl+Shift+Z)"
+      >
+        <Redo :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-spacer"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  Bold, Italic, Underline as UnderlineIcon, Strikethrough, Code,
+  List, ListOrdered, ListChecks, Quote, Minus, FileCode,
+  Table as TableIcon, Image as ImageIcon,
+  Undo, Redo
+} from 'lucide-vue-next'
+
+const props = defineProps({
+  editor: { type: Object, required: true }
+})
+
+defineEmits([])
+
+// 表格行列选择器
+const showTablePicker = ref(false)
+const pickerRows = ref(1)
+const pickerCols = ref(1)
+const tablePickerRef = ref(null)
+
+function toggleTablePicker() {
+  showTablePicker.value = !showTablePicker.value
+  pickerRows.value = 1
+  pickerCols.value = 1
+}
+
+function confirmInsertTable(rows, cols) {
+  props.editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run()
+  showTablePicker.value = false
+}
+
+// 点击外部关闭选择器
+function handleClickOutside(e) {
+  if (tablePickerRef.value && !tablePickerRef.value.contains(e.target)) {
+    showTablePicker.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+
+function insertImage() {
+  const url = window.prompt('输入图片 URL:')
+  if (url) {
+    props.editor.chain().focus().setImage({ src: url }).run()
+  }
+}
+
+// 插入行内公式
+function insertMathInline() {
+  const latex = window.prompt('输入行内 LaTeX 公式:', 'E=mc^2')
+  if (latex !== null && latex.trim()) {
+    props.editor.chain().focus().insertContent({
+      type: 'mathInline',
+      attrs: { latex: latex.trim() },
+    }).run()
+  }
+}
+
+// 插入块级公式
+function insertMathBlock() {
+  props.editor.chain().focus().insertContent({
+    type: 'mathBlock',
+    content: [{ type: 'text', text: '\\int_0^\\infty e^{-x} dx' }],
+  }).run()
+}
+</script>

package/src/components/ImageZoom.vue

@@ -22,6 +22,14 @@
           <button class="zoom-btn" @click="resetZoom" title="重置">
             <RotateCcw :size="16" />
           </button>
+          <button class="zoom-btn" :class="{ 'copy-success': copySuccess, 'copy-fail': copyFail }" @click="handleCopyImage" :title="copySuccess ? '已复制' : '复制图片'">
+            <Check v-if="copySuccess" :size="16" />
+            <Copy v-else :size="16" />
+          </button>
+          <transition name="tip-fade">
+            <span v-if="copySuccess" class="copy-tip copy-tip-ok">已复制</span>
+            <span v-else-if="copyFail" class="copy-tip copy-tip-fail">复制失败</span>
+          </transition>
           <span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
           <!-- 图片计数 -->
           <span v-if="images.length > 1" class="image-counter">{{ currentIndex + 1 }} / {{ images.length }}</span>
@@ -69,8 +77,9 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { ZoomIn, ZoomOut, RotateCcw, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ref, computed, nextTick, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ZoomIn, ZoomOut, RotateCcw, X, ChevronLeft, ChevronRight, Copy, Check } from 'lucide-vue-next'
+import { imgToPngBlob, svgToPngBlob } from '../utils/imageConverter.js'
 
 // Props
 const props = defineProps({
@@ -113,6 +122,8 @@ const translateY = ref(0)
 const isDragging = ref(false)
 const lastMouseX = ref(0)
 const lastMouseY = ref(0)
+const copySuccess = ref(false)
+const copyFail = ref(false)
 
 // 缩放控制
 const minScale = 0.1
@@ -161,6 +172,34 @@ function close() {
   emit('close')
 }
 
+// 复制图片到剪贴板
+async function handleCopyImage() {
+  try {
+    const wrapper = document.querySelector('.image-wrapper')
+    if (!wrapper) return
+    const img = wrapper.querySelector('img')
+    const svg = wrapper.querySelector('svg')
+
+    let blobPromise
+    if (img) {
+      blobPromise = imgToPngBlob(img.src)
+    } else if (svg) {
+      blobPromise = svgToPngBlob(svg, 2)
+    } else {
+      return
+    }
+
+    const item = new ClipboardItem({ 'image/png': blobPromise })
+    await navigator.clipboard.write([item])
+    copySuccess.value = true
+    setTimeout(() => { copySuccess.value = false }, 1500)
+  } catch (e) {
+    console.warn('复制图片失败:', e)
+    copyFail.value = true
+    setTimeout(() => { copyFail.value = false }, 1500)
+  }
+}
+
 // 处理遮罩层点击
 function handleOverlayClick(event) {
   if (event.target.classList.contains('image-zoom-overlay')) {
@@ -204,7 +243,7 @@ function handleMouseUp() {
   isDragging.value = false
 }
 
-// 监听键盘事件
+// 监听键盘事件（使用生命周期钩子管理，避免泄漏）
 function handleKeyDown(event) {
   if (!props.visible) return
   switch (event.key) {
@@ -230,9 +269,13 @@ function handleKeyDown(event) {
   }
 }
 
-if (typeof window !== 'undefined') {
+onMounted(() => {
   window.addEventListener('keydown', handleKeyDown)
-}
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
 </script>
 
 <style scoped>
@@ -309,6 +352,38 @@ if (typeof window !== 'undefined') {
   color: #c53030;
 }
 
+.copy-success {
+  color: #38a169 !important;
+}
+
+.copy-fail {
+  color: #e53e3e !important;
+}
+
+.copy-tip {
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.copy-tip-ok {
+  color: #38a169;
+}
+
+.copy-tip-fail {
+  color: #e53e3e;
+}
+
+.tip-fade-enter-active,
+.tip-fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.tip-fade-enter-from,
+.tip-fade-leave-to {
+  opacity: 0;
+}
+
 .zoom-level {
   font-size: 12px;
   font-weight: 600;
@@ -379,6 +454,14 @@ if (typeof window !== 'undefined') {
   cursor: grabbing;
 }
 
+/* 确保图片在放大浮层中有合理的最小尺寸，避免复制按钮遮挡 */
+.image-wrapper :deep(img) {
+  display: block;
+  min-width: 200px;
+  min-height: 200px;
+  object-fit: contain;
+}
+
 /* 确保SVG在放大时保持清晰 */
 .image-wrapper :deep(svg) {
   display: block !important;