feat: add docx and html2pdf.js for document export functionality

2026-03-10 22:21:11 +08:00
parent 637456ee34
commit 2ad57887cd
7 changed files with 1381 additions and 90 deletions
--- a/src/components/MilkdownEditor.vue
+++ b/src/components/MilkdownEditor.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
  <div class="editor-container">
    <div ref="root" class="milkdown-editor"></div>

@@ -48,20 +48,27 @@
      </button>
      <input type="file" ref="fileInputRef" @change="handleFileUpload" accept=".md,text/markdown,text/x-markdown" style="display:none">
      
-      <button
-        type="button"
-        class="action-btn"
-        :aria-label="t('exportMd')"
-        :title="t('exportMd')"
-        @click="exportMarkdown"
-      >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-          <polyline points="7 10 12 15 17 10"/>
-          <line x1="12" y1="15" x2="12" y2="3"/>
-        </svg>
-        <span class="btn-tooltip">{{ t('exportMd') }}</span>
-      </button>
+      <div class="export-btn-wrapper">
+        <button
+          type="button"
+          class="action-btn"
+          :aria-label="t('exportMd')"
+          :title="t('exportMd')"
+          @click="toggleExportDropdown"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          <span class="btn-tooltip">{{ t('exportMd') }}</span>
+        </button>
+        <div v-if="showExportDropdown" class="export-dropdown">
+          <button type="button" @click="exportMarkdown">{{ t('exportMd') }}</button>
+          <button type="button" @click="exportToDocx">{{ t('exportDocx') }}</button>
+          <button type="button" @click="exportToPdf">{{ t('exportPdf') }}</button>
+        </div>
+      </div>
      
      <div class="image-btn-wrapper">
        <button
@@ -128,6 +135,15 @@
        </div>
      </div>
    </div>
+
+    <div v-if="showMermaidPreview" class="mermaid-preview-overlay" @click.self="closeMermaidPreview">
+      <div class="mermaid-preview-dialog" role="dialog" aria-modal="true" aria-label="Mermaid Preview">
+        <button type="button" class="mermaid-preview-close" @click="closeMermaidPreview" aria-label="Close preview">✕</button>
+        <div class="mermaid-preview-scroll">
+          <img :src="mermaidPreviewSrc" alt="Mermaid diagram preview">
+        </div>
+      </div>
+    </div>
  </div>
 </template>

@@ -135,15 +151,19 @@
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import { replaceAll } from '@milkdown/kit/utils'
 import { Crepe } from '@milkdown/crepe'
-import { editorViewCtx, serializerCtx } from '@milkdown/kit/core'
+import { editorViewCtx } from '@milkdown/kit/core'
 import { Selection } from '@milkdown/prose/state'
 import { undo, redo, undoDepth, redoDepth } from '@milkdown/prose/history'
 import { copilotPlugin, copilotConfigCtx, copilotGhostMark, setCopilotEnabled, interruptCopilot, COPILOT_PLUGIN_KEY, SIZE_LIMIT, checkSizeLimit, clearGhostSuggestion } from '../plugins/copilotPlugin'
-import { mermaidRenderPreview, codeBlockConfig } from '../plugins/mermaidPlugin'
+import { mermaidRenderPreview, codeBlockConfig, refreshMermaidPreviews } from '../plugins/mermaidPlugin'
 import { fetchSuggestion } from '../utils/api.js'
 import { useSettingsStore } from '../stores/settings'
 import { OCR_URL } from '../utils/config.js'
 import { setOcrCache, clearOcrCache, clearAllOcrCache, IMAGE_SIZE_LIMIT, calculateImageHash, getOcrByHash, setOcrByHash } from '../utils/ocrCache.js'
+import MarkdownIt from 'markdown-it'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+import html2pdf from 'html2pdf.js'

 const emit = defineEmits(['update:markdown'])
 const settings = useSettingsStore()
@@ -156,7 +176,10 @@ const cameraInputRef = ref(null)
 const aiEnabled = ref(true)
 const contentSize = ref(0)
 const showImageDropdown = ref(false)
+const showExportDropdown = ref(false)
 const showUrlDialog = ref(false)
+const showMermaidPreview = ref(false)
+const mermaidPreviewSrc = ref('')
 const imageUrl = ref('')
 const canUndo = ref(false)
 const canRedo = ref(false)
@@ -178,6 +201,8 @@ const aiButtonLabel = computed(() => {
 let crepe = null
 let markdownSyncTimer = null
 let rootResizeObserver = null
+let themeObserver = null
+let mermaidResizeTimer = null
 const objectUrls = new Set()
 const IMAGE_NODE_TYPES = new Set(['image', 'image-block', 'imageBlock'])
 const MARKDOWN_EXT_RE = /\.md$/i
@@ -392,6 +417,170 @@ const prepareImageFile = async (file) => {
  return objectUrl
 }

+const closeMermaidPreview = () => {
+  showMermaidPreview.value = false
+  mermaidPreviewSrc.value = ''
+}
+
+const openMermaidPreview = (url) => {
+  if (!url) return
+  mermaidPreviewSrc.value = url
+  showMermaidPreview.value = true
+}
+
+const makeMermaidFilename = () => {
+  const now = new Date()
+  const pad = (n) => String(n).padStart(2, '0')
+  const datePart = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`
+  const timePart = `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
+  return `mermaid-${datePart}-${timePart}.png`
+}
+
+const normalizeMermaidFilename = (filename = '') => {
+  if (!filename) return makeMermaidFilename()
+  if (/\.png$/i.test(filename)) return filename
+  if (/\.[^./\\]+$/.test(filename)) return filename.replace(/\.[^./\\]+$/, '.png')
+  return `${filename}.png`
+}
+
+const parseSvgSize = (svg) => {
+  const viewBox = svg.match(/viewBox\s*=\s*["']\s*[-\d.]+\s+[-\d.]+\s+([-\d.]+)\s+([-\d.]+)\s*["']/i)
+  if (viewBox) {
+    const width = Number(viewBox[1])
+    const height = Number(viewBox[2])
+    if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
+      return { width, height }
+    }
+  }
+  const widthAttr = svg.match(/width\s*=\s*["']([-\d.]+)(px)?["']/i)
+  const heightAttr = svg.match(/height\s*=\s*["']([-\d.]+)(px)?["']/i)
+  const width = widthAttr ? Number(widthAttr[1]) : 960
+  const height = heightAttr ? Number(heightAttr[1]) : 540
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : 960,
+    height: Number.isFinite(height) && height > 0 ? height : 540,
+  }
+}
+
+const getRasterDpr = (width, height) => {
+  const rawDpr = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1
+  const baseDpr = Math.min(3, Math.max(1, rawDpr))
+  const maxCanvasEdge = 4096
+  const edgeLimitedDpr = maxCanvasEdge / Math.max(width, height, 1)
+  return Math.max(1, Math.min(baseDpr, edgeLimitedDpr))
+}
+
+const decodeSvgDataUrl = (url) => {
+  const commaIndex = url.indexOf(',')
+  if (commaIndex === -1) throw new Error('Invalid SVG data URL')
+  const header = url.slice(0, commaIndex)
+  const payload = url.slice(commaIndex + 1)
+  if (/;base64/i.test(header)) {
+    const binary = atob(payload)
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+    return new TextDecoder().decode(bytes)
+  }
+  return decodeURIComponent(payload)
+}
+
+const svgTextToPngDataUrl = async (svgText) => {
+  const fallback = parseSvgSize(svgText)
+  let width = fallback.width
+  let height = fallback.height
+
+  const maxEdge = 2400
+  const scale = Math.min(1, maxEdge / Math.max(width, height))
+  width = Math.max(1, Math.round(width * scale))
+  height = Math.max(1, Math.round(height * scale))
+
+  const image = new Image()
+  image.decoding = 'async'
+  image.crossOrigin = 'anonymous'
+
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve()
+    image.onerror = () => reject(new Error('Failed to load SVG image'))
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`
+  })
+
+  const dpr = getRasterDpr(width, height)
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.max(1, Math.round(width * dpr))
+  canvas.height = Math.max(1, Math.round(height * dpr))
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('Canvas context unavailable')
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.imageSmoothingEnabled = true
+  ctx.imageSmoothingQuality = 'high'
+  ctx.clearRect(0, 0, width, height)
+  ctx.drawImage(image, 0, 0, width, height)
+
+  return canvas.toDataURL('image/png')
+}
+
+const ensurePngDownloadUrl = async (url) => {
+  if (!url) return ''
+  if (/^data:image\/png/i.test(url)) return url
+  if (/^data:image\/svg\+xml/i.test(url)) {
+    const svgText = decodeSvgDataUrl(url)
+    return await svgTextToPngDataUrl(svgText)
+  }
+  return url
+}
+
+const downloadMermaidImage = async (url, filename = '') => {
+  if (!url) return
+  let downloadUrl = url
+  try {
+    downloadUrl = await ensurePngDownloadUrl(url)
+  } catch (error) {
+    alert('PNG export failed for this diagram. Please remove external image resources and try again.')
+    return
+  }
+  const a = document.createElement('a')
+  a.href = downloadUrl
+  a.download = normalizeMermaidFilename(filename)
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+const handleMermaidAction = async (event) => {
+  const target = event.target instanceof Element ? event.target.closest('[data-mermaid-action]') : null
+  if (!(target instanceof HTMLElement)) return
+
+  const action = target.getAttribute('data-mermaid-action')
+  if (!action) return
+
+  const block = target.closest('.mermaid-block')
+  const url = target.getAttribute('data-mermaid-url') || block?.getAttribute('data-mermaid-url') || ''
+  if (!url) return
+
+  event.preventDefault()
+  event.stopPropagation()
+
+  if (action === 'zoom') {
+    openMermaidPreview(url)
+    return
+  }
+
+  if (action === 'download') {
+    const filename = target.getAttribute('data-mermaid-filename') || ''
+    await downloadMermaidImage(url, filename)
+  }
+}
+
+const handleMermaidViewportResize = () => {
+  if (mermaidResizeTimer) {
+    clearTimeout(mermaidResizeTimer)
+    mermaidResizeTimer = null
+  }
+  mermaidResizeTimer = setTimeout(() => {
+    mermaidResizeTimer = null
+    refreshMermaidPreviews()
+  }, 140)
+}
+
 onMounted(async () => {
    if (!root.value) throw new Error('root.value is null')
    updateEditorTailSpace()
@@ -401,10 +590,12 @@ onMounted(async () => {
        })
        rootResizeObserver.observe(root.value)
    }
+    root.value.addEventListener('click', handleMermaidAction, true)
+    window.addEventListener('resize', handleMermaidViewportResize)
    
    crepe = new Crepe({
        root: root.value,
-        defaultValue: '# 娆㈣繋鏉ュ埌LLM-IN-TEXT\n\n涓€涓嵆鏃禠LM绯荤粺\n\n鍦ㄤ笅闈㈠紑濮嬩綘鐨勫垱浣?..',
+        defaultValue: '# 欢迎来到LLM-IN-TEXT\n\n一个即时LLM系统\n\n在下开始你的创作...',
        features: {
            [Crepe.Feature.Latex]: true,
            [Crepe.Feature.ImageBlock]: true,
@@ -464,6 +655,7 @@ onMounted(async () => {

    
    await crepe.create()
+    refreshMermaidPreviews()
    
    crepe.on((listener) => {
        listener.updated((ctx, doc) => {
@@ -481,6 +673,20 @@ onMounted(async () => {
        refreshSizeAndLimit(ctx)
        updateHistoryState(view)
    })
+
+    if (typeof MutationObserver !== 'undefined') {
+        themeObserver = new MutationObserver((mutations) => {
+            const changed = mutations.some((mutation) => mutation.type === 'attributes' && mutation.attributeName === 'data-theme')
+            if (changed) {
+                refreshMermaidPreviews()
+            }
+        })
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        })
+    }
+
    scheduleMarkdownSync()
 })

@@ -508,6 +714,233 @@ const exportMarkdown = async () => {
    URL.revokeObjectURL(url)
 }

+// 棰勫鐞?LaTeX 鍏紡
+const preprocessLatex = (text) => {
+    // 澶勭悊 $$...$$ 鍧楃骇鍏紡
+    text = text.replace(/\$\$([\s\S]*?)\$\$/g, (match, content) => {
+        try {
+            const html = katex.renderToString(content.trim(), {
+                displayMode: true,
+                throwOnError: false
+            })
+            return `<div class="math-block">${html}</div>`
+        } catch (e) {
+            return `<div class="math-error">$$${content}$$</div>`
+        }
+    })
+    
+    // 澶勭悊 $...$ 琛屽唴鍏紡
+    text = text.replace(/(?<!\$)\$(?!\$)([^\$\n]+?)\$(?!\$)/g, (match, content) => {
+        try {
+            const html = katex.renderToString(content.trim(), {
+                displayMode: false,
+                throwOnError: false
+            })
+            return `<span class="math-inline">${html}</span>`
+        } catch (e) {
+            return `<span class="math-error">${match}</span>`
+        }
+    })
+    
+    return text
+}
+
+// 灏?markdown 杞崲涓?HTML 骞跺鐞?mermaid
+const decodeHtmlEntities = (input) => {
+    if (!input) return ''
+    const textarea = document.createElement('textarea')
+    textarea.innerHTML = input
+    return textarea.value
+}
+
+const collectRenderedMermaidImages = () => {
+    const imageMap = new Map()
+    const blocks = document.querySelectorAll('.mermaid-block[data-mermaid-code][data-mermaid-url]')
+    for (const block of blocks) {
+        const encodedCode = block.getAttribute('data-mermaid-code') || ''
+        const imageUrl = block.getAttribute('data-mermaid-url') || ''
+        if (!encodedCode || !imageUrl) continue
+        try {
+            const code = normalizeMermaidCodeForExport(decodeURIComponent(encodedCode))
+            if (code) imageMap.set(code, imageUrl)
+        } catch (error) {
+            continue
+        }
+    }
+    return imageMap
+}
+
+const normalizeMermaidCodeForExport = (code) => {
+    return (code || '').replace(/\r\n/g, '\n').trim()
+}
+const markdownToHtml = async (markdown) => {
+    const md = new MarkdownIt({
+        html: true,
+        linkify: true,
+        typographer: true
+    })
+    
+    // 棰勫鐞?LaTeX
+    let html = preprocessLatex(markdown)
+    
+    // 娓叉煋 markdown
+    html = md.render(html)
+    
+    // Mermaid code block -> rendered image
+    const mermaidImageMap = collectRenderedMermaidImages()
+    const template = document.createElement('template')
+    template.innerHTML = html
+    const mermaidNodes = template.content.querySelectorAll('pre > code.language-mermaid')
+    for (const node of mermaidNodes) {
+        const pre = node.parentElement
+        if (!(pre instanceof HTMLElement)) continue
+        const normalizedCode = normalizeMermaidCodeForExport(decodeHtmlEntities(node.textContent || ''))
+        const imgUrl = mermaidImageMap.get(normalizedCode)
+        if (!imgUrl) {
+            pre.remove()
+            continue
+        }
+        const wrapper = document.createElement('div')
+        wrapper.className = 'mermaid-export'
+        const image = document.createElement('img')
+        image.src = imgUrl
+        image.alt = 'Mermaid diagram'
+        wrapper.appendChild(image)
+        pre.replaceWith(wrapper)
+    }
+    html = template.innerHTML
+
+    html = html.replace(/<pre class="language-(\w+)"><code>([\s\S]*?)<\/code><\/pre>/g, 
+        '<pre class="code-simple"><code>$2</code></pre>')
+    
+    // Process remote images
+    html = html.replace(/<img src="(http[s]?:\/\/[^"]+)"([^>]*)>/g, (match, src, attrs) => {
+        return `<img src="${src}"${attrs} style="max-width: 100%; height: auto;" />`
+    })
+    
+    return html
+}
+
+// 瀵煎嚭涓?DOCX (浣跨敤 HTML 鏍煎紡锛學ord 鍙互鐩存帴鎵撳紑)
+const exportToDocx = async () => {
+    if (!crepe) return
+    
+    showExportDropdown.value = false
+    
+    try {
+        const markdown = await crepe.getMarkdown()
+        const html = await markdownToHtml(markdown)
+        
+        // 鍖呰 HTML 涓哄畬鏁存枃妗ｏ紝娣诲姞 Word 鍏煎鐨勫厓鏁版嵁
+        const fullHtml = `
+<html xmlns:o="urn:schemas-microsoft-com:office:office" 
+      xmlns:w="urn:schemas-microsoft-com:office:word" 
+      xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+    <meta charset="utf-8">
+    <title>Document</title>
+    <!--[if gte mso 9]>
+    <xml>
+        <w:WordDocument>
+            <w:View>Print</w:View>
+        </w:WordDocument>
+    </xml>
+    <![endif]-->
+    <style>
+        body { font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; padding: 40px; }
+        h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; }
+        p { margin: 1em 0; }
+        code { background-color: #f5f5f5; padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; }
+        pre { background-color: #f5f5f5; padding: 16px; border-radius: 6px; overflow-x: auto; }
+        pre code { background-color: transparent; padding: 0; }
+        blockquote { border-left: 4px solid #ddd; margin: 1em 0; padding-left: 16px; color: #666; }
+        img { max-width: 100%; height: auto; }
+        table { border-collapse: collapse; width: 100%; margin: 1em 0; }
+        th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
+        th { background-color: #f5f5f5; font-weight: 600; }
+        .math-block { display: block; margin: 1em 0; text-align: center; overflow-x: auto; }
+        .math-inline { padding: 0 2px; }
+    </style>
+</head>
+<body>
+${html}
+</body>
+</html>`
+        
+        // 浣跨敤 HTML 鏍煎紡淇濆瓨涓?.doc锛學ord 鍙互鐩存帴鎵撳紑
+        const blob = new Blob([fullHtml], { type: 'application/msword' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        const now = new Date()
+        const pad = (n) => String(n).padStart(2, '0')
+        const datePart = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`
+        const timePart = `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
+        a.href = url
+        a.download = `document${datePart}${timePart}.doc`
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        URL.revokeObjectURL(url)
+    } catch (error) {
+        console.error('[Export DOCX] Error:', error)
+        alert('瀵煎嚭 DOCX 澶辫触锛岃閲嶈瘯')
+    }
+}
+
+// 瀵煎嚭涓?PDF
+const exportToPdf = async () => {
+    if (!crepe) return
+    
+    showExportDropdown.value = false
+    
+    try {
+        const markdown = await crepe.getMarkdown()
+        const html = await markdownToHtml(markdown)
+
+        const fullHtml = `
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Document</title>
+    <style>
+        body { font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; padding: 40px; color: #111; background: #fff; }
+        h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; }
+        p { margin: 1em 0; }
+        code { background-color: #f5f5f5; padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; }
+        pre { background-color: #f5f5f5; padding: 16px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
+        pre code { background-color: transparent; padding: 0; }
+        blockquote { border-left: 4px solid #ddd; margin: 1em 0; padding-left: 16px; color: #666; }
+        img { max-width: 100%; height: auto; }
+        table { border-collapse: collapse; width: 100%; margin: 1em 0; }
+        th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
+        th { background-color: #f5f5f5; font-weight: 600; }
+        .math-block { display: block; margin: 1em 0; text-align: center; overflow-x: auto; }
+        .math-inline { padding: 0 2px; }
+    </style>
+</head>
+<body>
+${html}
+</body>
+</html>`
+        
+        // 閰嶇疆 PDF 閫夐」
+        const options = {
+            margin: [10, 10, 10, 10],
+            filename: `document${new Date().toISOString().slice(0, 10)}.pdf`,
+            image: { type: 'jpeg', quality: 0.98 },
+            html2canvas: { scale: 2, useCORS: true, backgroundColor: '#ffffff', windowWidth: 1200 },
+            pagebreak: { mode: ['css', 'legacy'] },
+            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+        }
+        
+        // 鐢熸垚 PDF
+        await html2pdf().set(options).from(fullHtml, 'string').save()
+    } catch (error) {
+        console.error('[Export PDF] Error:', error)
+        alert('瀵煎嚭 PDF 澶辫触锛岃閲嶈瘯')
+    }
+}
+
 const triggerUpload = () => {
    fileInputRef.value?.click()
 }
@@ -559,6 +992,10 @@ const toggleAI = async () => {
    })
 }

+const toggleExportDropdown = () => {
+    showExportDropdown.value = !showExportDropdown.value
+}
+
 const toggleImageDropdown = () => {
    showImageDropdown.value = !showImageDropdown.value
 }
@@ -630,6 +1067,21 @@ onUnmounted(() => {
        rootResizeObserver = null
    }

+    if (mermaidResizeTimer) {
+        clearTimeout(mermaidResizeTimer)
+        mermaidResizeTimer = null
+    }
+
+    if (themeObserver) {
+        themeObserver.disconnect()
+        themeObserver = null
+    }
+
+    if (root.value) {
+        root.value.removeEventListener('click', handleMermaidAction, true)
+    }
+    window.removeEventListener('resize', handleMermaidViewportResize)
+
    for (const url of Array.from(objectUrls)) {
        revokeObjectUrl(url)
    }
@@ -791,6 +1243,40 @@ onUnmounted(() => {
    opacity: 1;
 }

+.export-btn-wrapper {
+    position: relative;
+}
+
+.export-dropdown {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 8px;
+    background: var(--panel-bg);
+    border: 1px solid var(--panel-border);
+    border-radius: 8px;
+    box-shadow: var(--panel-shadow);
+    overflow: hidden;
+    z-index: 10000;
+    min-width: 160px;
+}
+
+.export-dropdown button {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--app-text);
+}
+
+.export-dropdown button:hover {
+    background: var(--crepe-color-hover);
+}
+
 .image-btn-wrapper {
    position: relative;
 }
@@ -900,6 +1386,60 @@ onUnmounted(() => {
    filter: brightness(0.92);
 }

+.mermaid-preview-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 10002;
+    background: var(--overlay-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+}
+
+.mermaid-preview-dialog {
+    width: min(96vw, 1280px);
+    max-height: min(92vh, 920px);
+    background: var(--panel-bg);
+    border: 1px solid var(--panel-border);
+    border-radius: 12px;
+    box-shadow: var(--panel-shadow);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.mermaid-preview-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--panel-border);
+    border-radius: 8px;
+    background: var(--btn-bg);
+    color: var(--btn-fg);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.mermaid-preview-close:hover {
+    background: var(--btn-hover-bg);
+    color: var(--btn-hover-fg);
+    border-color: var(--btn-hover-bg);
+}
+
+.mermaid-preview-scroll {
+    overflow: auto;
+    padding: 40px 16px 16px;
+}
+
+.mermaid-preview-scroll img {
+    display: block;
+    max-width: none;
+    margin: 0 auto;
+}
+
 .milkdown-editor {
    --editor-tail-space: calc(100vh - 32px);
    width: 100%;
@@ -937,10 +1477,14 @@ onUnmounted(() => {
 }

 .milkdown-editor :deep(.ProseMirror img) {
-    max-width: 60%;
+    max-width: 80%;
    height: auto;
 }

+.milkdown-editor :deep(.ProseMirror .mermaid-image) {
+    max-width: none !important;
+}
+
 .milkdown-editor :deep(.ProseMirror > *:first-child) {
    margin-top: 0 !important;
 }
@@ -1046,3 +1590,6 @@ onUnmounted(() => {
 }
 </style>

+
+
+