md2ui 1.0.18 → 1.0.19

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,8 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { ZoomIn, ZoomOut, RotateCcw, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ref, computed, nextTick, watch } from 'vue'
+import { ZoomIn, ZoomOut, RotateCcw, X, ChevronLeft, ChevronRight, Copy, Check } from 'lucide-vue-next'
 
 // Props
 const props = defineProps({
@@ -113,6 +121,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 +171,153 @@ 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) {
+      // 构造 PNG blob Promise
+      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)
+  }
+}
+
+// 将图片 URL 转为 PNG blob（兼容同源和跨域）
+async function imgToPngBlob(src) {
+  // 策略1：fetch 获取（同源图片直接成功）
+  try {
+    const resp = await fetch(src)
+    const blob = await resp.blob()
+    if (blob.type === 'image/png') return blob
+    return blobToCanvasPng(blob, 1)
+  } catch {
+    // 策略2：通过 crossOrigin Image 加载（需服务器支持 CORS）
+    try {
+      return await loadImageToBlob(src, true)
+    } catch {
+      // 策略3：不设 crossOrigin 直接画（可能被 taint，但对某些场景有效）
+      return loadImageToBlob(src, false)
+    }
+  }
+}
+
+// 加载图片到 canvas 并转 PNG blob
+function loadImageToBlob(src, useCors) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    if (useCors) image.crossOrigin = 'anonymous'
+    image.onload = () => {
+      try {
+        const canvas = document.createElement('canvas')
+        canvas.width = image.naturalWidth
+        canvas.height = image.naturalHeight
+        canvas.getContext('2d').drawImage(image, 0, 0)
+        canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob null')), 'image/png')
+      } catch (e) {
+        reject(e)
+      }
+    }
+    image.onerror = () => reject(new Error('图片加载失败'))
+    image.src = src
+  })
+}
+
+// 将任意图片 blob 通过 canvas 转为 PNG blob
+function blobToCanvasPng(srcBlob, scale = 1) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(srcBlob)
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.naturalWidth * scale
+      canvas.height = image.naturalHeight * scale
+      const ctx = canvas.getContext('2d')
+      if (scale !== 1) ctx.scale(scale, scale)
+      ctx.drawImage(image, 0, 0)
+      URL.revokeObjectURL(url)
+      canvas.toBlob(b => resolve(b), 'image/png')
+    }
+    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('图片加载失败')) }
+    image.src = url
+  })
+}
+
+// SVG 转 PNG blob（处理 foreignObject 导致的 tainted canvas 问题）
+function svgToPngBlob(svgEl, scale = 2) {
+  return new Promise((resolve, reject) => {
+    const clone = svgEl.cloneNode(true)
+    // 从 viewBox 或属性中获取 SVG 实际尺寸，确保复制完整
+    const viewBox = clone.getAttribute('viewBox')
+    let svgWidth, svgHeight
+    if (viewBox) {
+      const parts = viewBox.split(/[\s,]+/)
+      svgWidth = parseFloat(parts[2])
+      svgHeight = parseFloat(parts[3])
+    }
+    // 回退到 width/height 属性或 getBoundingClientRect
+    if (!svgWidth || !svgHeight) {
+      svgWidth = parseFloat(clone.getAttribute('width')) || svgEl.getBoundingClientRect().width || 800
+      svgHeight = parseFloat(clone.getAttribute('height')) || svgEl.getBoundingClientRect().height || 600
+    }
+    // 显式设置 width/height 属性，确保 Image 加载时尺寸正确
+    clone.setAttribute('width', svgWidth)
+    clone.setAttribute('height', svgHeight)
+    // 将 foreignObject 替换为 text 元素，避免 canvas 被污染
+    clone.querySelectorAll('foreignObject').forEach(fo => {
+      const text = fo.textContent.trim()
+      const x = fo.getAttribute('x') || '0'
+      const y = fo.getAttribute('y') || '0'
+      const width = fo.getAttribute('width') || '100'
+      const height = fo.getAttribute('height') || '20'
+      const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+      textEl.setAttribute('x', String(parseFloat(x) + parseFloat(width) / 2))
+      textEl.setAttribute('y', String(parseFloat(y) + parseFloat(height) / 2 + 5))
+      textEl.setAttribute('text-anchor', 'middle')
+      textEl.setAttribute('font-size', '14')
+      textEl.setAttribute('fill', '#455a64')
+      textEl.textContent = text
+      fo.parentNode.replaceChild(textEl, fo)
+    })
+    const svgData = new XMLSerializer().serializeToString(clone)
+    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+    const url = URL.createObjectURL(svgBlob)
+    const image = new Image()
+    image.onload = () => {
+      // 使用从 SVG 提取的精确尺寸，而非 naturalWidth/Height（后者对无 width/height 的 SVG 不可靠）
+      const w = svgWidth * scale
+      const h = svgHeight * scale
+      const canvas = document.createElement('canvas')
+      canvas.width = w
+      canvas.height = h
+      const ctx = canvas.getContext('2d')
+      ctx.scale(scale, scale)
+      ctx.drawImage(image, 0, 0, svgWidth, svgHeight)
+      URL.revokeObjectURL(url)
+      canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob null')), 'image/png')
+    }
+    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('SVG加载失败')) }
+    image.src = url
+  })
+}
+
 // 处理遮罩层点击
 function handleOverlayClick(event) {
   if (event.target.classList.contains('image-zoom-overlay')) {
@@ -309,6 +466,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 +568,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;

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,149 @@
+<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'
+
+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
+  }
+  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
+  } catch (e) {
+    console.error('Mermaid 编辑器渲染失败:', e)
+    svgContent.value = ''
+    renderError.value = true
+    // 清理 Mermaid 渲染失败时残留的 DOM 元素
+    const errId = 'mermaid-editor-' // 前缀匹配清理
+    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>