md2ui 1.0.18 → 1.0.19

package/public/docs/10-/351/203/250/347/275/262/344/270/216/351/205/215/347/275/256/02-/350/207/252/345/256/232/344/271/211/351/205/215/347/275/256.md

@@ -0,0 +1,58 @@
+# 自定义配置
+
+验证用户自定义配置的加载和生效。
+
+## 配置文件
+
+在文档目录下创建 `md2ui.config.js` 或 `.md2uirc.json`：
+
+```js
+// md2ui.config.js
+export default {
+  title: '我的文档站',
+  port: 8080,
+  folderExpanded: true,
+  themeColor: '#3eaf7c',
+  github: 'https://github.com/xiaoyaodev/md2ui',
+  footer: 'Copyright © 2025'
+}
+```
+
+## 配置项
+
+| 配置项 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| title | string | `'md2ui'` | 站点标题，显示在顶部 Logo 旁 |
+| port | number | `3000` | 开发服务器端口 |
+| folderExpanded | boolean | `false` | 文件夹默认是否展开 |
+| themeColor | string | `'#3eaf7c'` | 主题色，影响全局强调色 |
+| github | string | `''` | GitHub 仓库链接，显示在顶部 |
+| footer | string | `''` | 页脚内容 |
+
+## JSON 格式
+
+```json
+{
+  "title": "我的文档站",
+  "port": 8080,
+  "folderExpanded": true,
+  "themeColor": "#3eaf7c",
+  "github": "https://github.com/xiaoyaodev/md2ui",
+  "footer": "Copyright © 2025"
+}
+```
+
+## 优先级
+
+配置合并优先级（从低到高）：
+
+1. 内置默认值
+2. 配置文件（md2ui.config.js 或 .md2uirc.json）
+3. 命令行参数（如 `-p 8080`）
+
+## 验证要点
+
+1. 创建配置文件后重启服务，配置应生效
+2. 修改 title 后页面标题应更新
+3. 修改 themeColor 后主题色应变化
+4. 命令行 `-p` 参数应覆盖配置文件中的 port

package/public/docs/11-/345/244/232/347/272/247/347/233/256/345/275/225/346/265/213/350/257/225/00-/344/270/200/347/272/247/346/226/207/346/241/243.md

@@ -0,0 +1,20 @@
+# 一级文档
+
+这是多级目录测试的一级文档，用于验证目录树的多级嵌套显示。
+
+## 目录结构
+
+```
+11-多级目录测试/
+├── 01-一级文档.md          ← 当前文档
+└── 01-子目录/
+    ├── 01-二级文档.md
+    └── 01-深层嵌套/
+        └── 01-三级文档.md
+```
+
+## 验证要点
+
+1. 左侧导航应正确显示三级嵌套结构
+2. 文件夹节点应可展开/收起
+3. 各级文档应可正常点击加载

package/public/docs/11-/345/244/232/347/272/247/347/233/256/345/275/225/346/265/213/350/257/225/01-/345/255/220/347/233/256/345/275/225/00-/344/272/214/347/272/247/346/226/207/346/241/243.md

@@ -0,0 +1,13 @@
+# 二级文档
+
+这是多级目录测试的二级文档，位于 `01-子目录` 下。
+
+## 站内链接测试
+
+- [返回一级文档](../01-一级文档.md)
+- [进入三级文档](01-深层嵌套/01-三级文档.md)
+
+## 验证要点
+
+1. 本文档应在导航树的第二级显示
+2. 上方站内链接应可正常跳转

package/public/docs/11-/345/244/232/347/272/247/347/233/256/345/275/225/346/265/213/350/257/225/01-/345/255/220/347/233/256/345/275/225/01-/346/267/261/345/261/202/345/265/214/345/245/227/00-/344/270/211/347/272/247/346/226/207/346/241/243.md

@@ -0,0 +1,23 @@
+# 三级文档
+
+这是多级目录测试的三级文档，位于 `01-子目录/01-深层嵌套` 下。
+
+## 深层嵌套验证
+
+本文档验证三级及以上目录嵌套的正确性：
+
+- 导航树应正确缩进显示
+- 文件夹展开/收起应正常工作
+- 上下篇导航应正确计算
+
+## 站内链接测试
+
+- [返回二级文档](../01-二级文档.md)
+- [返回一级文档](../../01-一级文档.md)
+- [跳转到快速开始](../../../00-快速开始.md)
+
+## 验证要点
+
+1. 本文档应在导航树的第三级显示
+2. 多级返回链接应可正常跳转
+3. 跨多级目录的链接应正确解析

package/src/App.vue

@@ -10,8 +10,13 @@
     <!-- 桌面端顶栏 -->
     <TopBar
       v-if="!isMobile"
+      :editMode="editMode"
+      :showWelcome="showWelcome"
+      :docTitle="currentDocTitle"
+      :rawMarkdown="rawMarkdown"
       @select-search="handleSearchSelect"
       @go-home="goHome"
+      @toggle-edit="onToggleEdit"
     />
     <!-- 移动端遮罩 -->
     <transition name="fade">
@@ -34,23 +39,44 @@
       @collapse-all="onCollapseAll"
       @toggle-folder="toggleFolder"
       @select-doc="handleDocSelect"
+      @create-doc="createDoc"
+      @delete-doc="deleteDoc"
+      @rename-doc="({ item, newName }) => renameDoc(item, newName)"
+      @reorder="reorderDocs"
     />
     <!-- 左侧拖拽条 & 展开按钮（桌面端） -->
     <div v-if="!isMobile && !sidebarCollapsed" class="resizer resizer-left" @mousedown="startResize('left', $event)"></div>
     <button v-if="!isMobile && sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
       <ChevronRight :size="14" />
     </button>
-    <!-- 内容区 -->
+    <!-- 内容区：查看模式 / 编辑模式 -->
     <DocContent
+      v-if="!editMode"
       :showWelcome="showWelcome"
       :htmlContent="htmlContent"
       :prevDoc="prevDoc"
       :nextDoc="nextDoc"
       :docTitle="currentDocTitle"
+      :lastModified="lastModified"
+      @scroll="handleScroll"
+      @content-click="onContentClick"
+      @start="loadFirstDoc"
+      @load-doc="loadDoc"
+    />
+    <EditorContentVue
+      v-else
+      :showWelcome="showWelcome"
+      :markdownContent="rawMarkdown"
+      :prevDoc="prevDoc"
+      :nextDoc="nextDoc"
+      :docTitle="currentDocTitle"
+      :currentDocPath="currentDocFilePath"
       @scroll="handleScroll"
       @content-click="onContentClick"
       @start="loadFirstDoc"
       @load-doc="loadDoc"
+      @save="onSaveDoc"
+      @update:markdownContent="onEditorUpdate"
     />
     <!-- 桌面端 TOC -->
     <div v-if="!isMobile && !tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
@@ -84,25 +110,28 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 import { ArrowUp, ChevronRight, ChevronLeft } from 'lucide-vue-next'
 import MobileHeader from './components/MobileHeader.vue'
 import TopBar from './components/TopBar.vue'
 import AppSidebar from './components/AppSidebar.vue'
 import DocContent from './components/DocContent.vue'
+import EditorContentVue from './components/EditorContent.vue'
 import TableOfContents from './components/TableOfContents.vue'
 import MobileToc from './components/MobileToc.vue'
 import ImageZoom from './components/ImageZoom.vue'
 import { useDocManager } from './composables/useDocManager.js'
 import { useResize } from './composables/useResize.js'
+import { useFileWatcher } from './composables/useFileWatcher.js'
+import { resetContentEtag } from './services/DocService.js'
 
 import { useSearch } from './composables/useSearch.js'
 import { useMobile } from './composables/useMobile.js'
 
 
-// UI 状态
-const sidebarCollapsed = ref(false)
-const tocCollapsed = ref(false)
+// UI 状态（从 sessionStorage 恢复）
+const sidebarCollapsed = ref(sessionStorage.getItem('sidebarCollapsed') === 'true')
+const tocCollapsed = ref(sessionStorage.getItem('tocCollapsed') === 'true')
 const zoomVisible = ref(false)
 const zoomContent = ref('')
 const zoomImages = ref([])
@@ -111,12 +140,15 @@ const zoomIndex = ref(0)
 // composables
 const {
   docsList, currentDoc, currentDocTitle, showWelcome, htmlContent, tocItems,
+  editMode, rawMarkdown, currentDocFilePath, lastModified,
   scrollProgress, showBackToTop, activeHeading,
   handleScroll, scrollToHeading, scrollToTop,
   loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,
   handleDocSelect, handleContentClick, handleSearchSelect,
+  toggleEditMode, reloadDocsList, reloadCurrentDoc, saveDoc, getCurrentDocPath,
   toggleFolder, onExpandAll, onCollapseAll,
-  prevDoc, nextDoc
+  prevDoc, nextDoc,
+  createDoc, deleteDoc, renameDoc, reorderDocs
 } = useDocManager()
 
 const { sidebarWidth, tocWidth, startResize } = useResize()
@@ -124,6 +156,94 @@ const { sidebarWidth, tocWidth, startResize } = useResize()
 const { openSearch } = useSearch()
 const { isMobile, mobileDrawerOpen, mobileTocOpen } = useMobile()
 
+// 文件监听（DocService 统一处理模式检测和 ETag）
+useFileWatcher({
+  getCurrentDocPath,
+  onDocsListChange: (newTree) => reloadDocsList(newTree),
+  onDocContentChange: (content) => reloadCurrentDoc(content)
+})
+
+// 切换编辑模式（基于锚点/标题文本保持阅读位置）
+function onToggleEdit(isEdit) {
+  const contentEl = document.querySelector('.content')
+  let anchorId = ''
+  let headingText = ''
+  let scrollRatio = 0
+
+  if (contentEl) {
+    const headings = contentEl.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6')
+    const contentRect = contentEl.getBoundingClientRect()
+    const scrollTop = contentEl.scrollTop
+
+    // 找到当前视口中最近的标题（最后一个已滚过顶部的）
+    for (const heading of headings) {
+      const rect = heading.getBoundingClientRect()
+      const offsetFromTop = rect.top - contentRect.top
+      if (offsetFromTop <= 80) {
+        anchorId = heading.id || ''
+        // 提取纯文本（去掉锚点图标等）
+        const clone = heading.cloneNode(true)
+        clone.querySelectorAll('.heading-anchor').forEach(a => a.remove())
+        headingText = clone.textContent.trim()
+      }
+    }
+
+    // 记录滚动比例作为兜底
+    const scrollHeight = contentEl.scrollHeight - contentEl.clientHeight
+    scrollRatio = scrollHeight > 0 ? scrollTop / scrollHeight : 0
+  }
+
+  editMode.value = isEdit
+  sessionStorage.setItem('editMode', isEdit)
+
+  nextTick(() => {
+    const newContentEl = document.querySelector('.content')
+    if (!newContentEl) return
+
+    // 策略1：通过 id 定位（查看模式有 id）
+    if (anchorId) {
+      const target = document.getElementById(anchorId)
+      if (target) {
+        target.scrollIntoView({ block: 'start' })
+        activeHeading.value = anchorId
+        return
+      }
+    }
+
+    // 策略2：通过标题文本匹配（编辑模式无 id，但文本一致）
+    if (headingText) {
+      const headings = newContentEl.querySelectorAll('h1, h2, h3, h4, h5, h6')
+      for (const heading of headings) {
+        const clone = heading.cloneNode(true)
+        clone.querySelectorAll('.heading-anchor').forEach(a => a.remove())
+        if (clone.textContent.trim() === headingText) {
+          heading.scrollIntoView({ block: 'start' })
+          if (heading.id) activeHeading.value = heading.id
+          return
+        }
+      }
+    }
+
+    // 策略3：按滚动比例恢复
+    const scrollHeight = newContentEl.scrollHeight - newContentEl.clientHeight
+    if (scrollHeight > 0) {
+      newContentEl.scrollTop = scrollRatio * scrollHeight
+    }
+  })
+}
+
+// 编辑器内容更新
+function onEditorUpdate(md) {
+  rawMarkdown.value = md
+}
+
+// 保存文档
+async function onSaveDoc({ path, content }) {
+  const ok = await saveDoc({ path, content })
+  if (ok) {
+    resetContentEtag()
+  }
+}
 
 // 内容区点击：委托给 docManager，图片放大回调在这里处理
 function onContentClick(event) {
@@ -139,6 +259,10 @@ function onContentClick(event) {
 // 全局快捷键
 window.addEventListener('popstate', () => loadFromUrl())
 
+// 持久化 UI 状态
+watch(sidebarCollapsed, (v) => sessionStorage.setItem('sidebarCollapsed', v))
+watch(tocCollapsed, (v) => sessionStorage.setItem('tocCollapsed', v))
+
 onMounted(async () => {
   await loadDocsList()
   await loadFromUrl()

package/src/components/AppSidebar.vue

@@ -4,7 +4,6 @@
     :class="{ 'sidebar-drawer': isMobile, 'drawer-open': drawerOpen }"
     :style="!isMobile ? { width: width + 'px' } : undefined"
   >
-    <!-- 移动端显示 Logo + 关闭按钮，桌面端只显示收起按钮 -->
     <div class="sidebar-header">
       <Logo v-if="isMobile" @go-home="$emit('go-home')" />
       <div class="sidebar-header-actions">
@@ -20,6 +19,9 @@
       <div class="nav-section">
         <span>文档目录</span>
         <div class="nav-actions">
+          <button class="action-btn" @click="showCreateMenu($event, '')" title="新建">
+            <Plus :size="14" />
+          </button>
           <button class="action-btn" @click="$emit('expand-all')" title="全部展开">
             <ChevronsDownUp :size="14" />
           </button>
@@ -28,37 +30,106 @@
           </button>
         </div>
       </div>
-      <!-- 过滤输入框 -->
       <div class="nav-filter">
         <Filter :size="12" class="nav-filter-icon" />
-        <input
-          v-model="filterText"
-          type="text"
-          class="nav-filter-input"
-          placeholder="过滤文档..."
-        />
+        <input v-model="filterText" type="text" class="nav-filter-input" placeholder="过滤文档..." />
         <button v-if="filterText" class="nav-filter-clear" @click="filterText = ''">
           <X :size="12" />
         </button>
       </div>
-      <TreeNode
-        v-for="item in filteredDocs"
-        :key="item.key"
-        :item="item"
-        :currentDoc="currentDoc"
-        @toggle="$emit('toggle-folder', $event)"
-        @select="$emit('select-doc', $event)"
-      />
+      <!-- 无过滤时使用拖拽排序 -->
+      <draggable
+        v-if="!filterText"
+        :list="docsList"
+        :group="{ name: 'doc-tree', pull: true, put: true }"
+        item-key="key"
+        :animation="200"
+        ghost-class="drag-ghost"
+        chosen-class="drag-chosen"
+        drag-class="drag-active"
+        handle=".nav-item"
+        :fallback-on-body="true"
+        :swap-threshold="0.65"
+        @end="onDragEnd"
+      >
+        <template #item="{ element }">
+          <TreeNode
+            :item="element"
+            :currentDoc="currentDoc"
+            @toggle="$emit('toggle-folder', $event)"
+            @select="$emit('select-doc', $event)"
+            @show-create="showCreateMenu"
+            @rename="(payload) => $emit('rename-doc', payload)"
+            @delete="(payload) => $emit('delete-doc', payload)"
+            @drag-end="onDragEnd"
+          />
+        </template>
+      </draggable>
+      <!-- 过滤模式下禁用拖拽 -->
+      <template v-else>
+        <TreeNode
+          v-for="item in filteredDocs"
+          :key="item.key"
+          :item="item"
+          :currentDoc="currentDoc"
+          @toggle="$emit('toggle-folder', $event)"
+          @select="$emit('select-doc', $event)"
+          @show-create="showCreateMenu"
+          @rename="(payload) => $emit('rename-doc', payload)"
+          @delete="(payload) => $emit('delete-doc', payload)"
+        />
+      </template>
       <div v-if="filterText && filteredDocs.length === 0" class="nav-filter-empty">
         没有匹配的文档
       </div>
     </nav>
+
+    <!-- 新建菜单 -->
+    <Teleport to="body">
+      <div v-if="createMenuVisible" class="ctx-menu-overlay" @click="createMenuVisible = false">
+        <div class="ctx-menu" :style="createMenuStyle" @click.stop>
+          <div class="ctx-menu-item" @click="startCreate('file')">
+            <FileText :size="14" />
+            <span>新建文档</span>
+          </div>
+          <div class="ctx-menu-item" @click="startCreate('folder')">
+            <FolderPlus :size="14" />
+            <span>新建目录</span>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 新建输入弹窗 -->
+    <Teleport to="body">
+      <div v-if="createInputVisible" class="modal-overlay" @click="createInputVisible = false">
+        <div class="modal-dialog" @click.stop>
+          <div class="modal-title">{{ createType === 'file' ? '新建文档' : '新建目录' }}</div>
+          <input
+            ref="createInputRef"
+            v-model="createName"
+            class="modal-input"
+            :placeholder="createType === 'file' ? '请输入文档名称' : '请输入目录名称'"
+            @keydown.enter="confirmCreate"
+            @keydown.escape="createInputVisible = false"
+          />
+          <div v-if="createError" class="modal-error">{{ createError }}</div>
+          <div class="modal-actions">
+            <button class="modal-btn modal-btn-cancel" @click="createInputVisible = false">取消</button>
+            <button class="modal-btn modal-btn-confirm" @click="confirmCreate">确定</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+
   </aside>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { ChevronLeft, X, ChevronsDownUp, ChevronsUpDown, Filter } from 'lucide-vue-next'
+import { ref, computed, nextTick, watch } from 'vue'
+import { ChevronLeft, X, ChevronsDownUp, ChevronsUpDown, Filter, Plus, FileText, FolderPlus } from 'lucide-vue-next'
+import draggable from 'vuedraggable'
 import Logo from './Logo.vue'
 import TreeNode from './TreeNode.vue'
 
@@ -70,15 +141,16 @@ const props = defineProps({
   width: { type: Number, default: 320 }
 })
 
-defineEmits([
+const emit = defineEmits([
   'go-home', 'close-drawer', 'collapse',
   'expand-all', 'collapse-all',
-  'toggle-folder', 'select-doc'
+  'toggle-folder', 'select-doc',
+  'create-doc', 'delete-doc', 'rename-doc',
+  'reorder'
 ])
 
 const filterText = ref('')
 
-// 递归过滤文档树：保留匹配的文件和包含匹配文件的文件夹
 function filterTree(items, keyword) {
   if (!keyword) return items
   const lower = keyword.toLowerCase()
@@ -99,4 +171,92 @@ function filterTree(items, keyword) {
 }
 
 const filteredDocs = computed(() => filterTree(props.docsList, filterText.value))
+
+// 当前文档变化时，自动滚动菜单到选中项
+watch(() => props.currentDoc, (newDoc) => {
+  if (!newDoc) return
+  nextTick(() => {
+    const activeEl = document.querySelector('.nav-menu .nav-item.active')
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  })
+})
+
+// ===== 新建菜单 =====
+const createMenuVisible = ref(false)
+const createMenuStyle = ref({})
+const createParentKey = ref('')
+
+function showCreateMenu(event, parentKey) {
+  createParentKey.value = parentKey
+  const rect = event.currentTarget.getBoundingClientRect()
+  // 先以不可见状态渲染，等测量后再修正位置
+  createMenuStyle.value = {
+    position: 'fixed',
+    left: `${rect.right + 4}px`,
+    top: `${rect.top}px`,
+    zIndex: 9999,
+    visibility: 'hidden'
+  }
+  createMenuVisible.value = true
+  nextTick(() => {
+    const menuEl = document.querySelector('.ctx-menu')
+    if (menuEl) {
+      const menuRect = menuEl.getBoundingClientRect()
+      let left = rect.right + 4
+      let top = rect.top
+      // 右侧溢出修正
+      if (left + menuRect.width > window.innerWidth - 10) {
+        left = rect.left - menuRect.width - 4
+      }
+      // 底部溢出修正：向上弹出，使菜单底部对齐触发按钮底部
+      if (top + menuRect.height > window.innerHeight - 10) {
+        top = rect.bottom - menuRect.height
+      }
+      // 如果向上修正后超出顶部，则贴顶
+      if (top < 10) {
+        top = 10
+      }
+      createMenuStyle.value = {
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 9999,
+        visibility: 'visible'
+      }
+    }
+  })
+}
+
+// ===== 新建输入 =====
+const createInputVisible = ref(false)
+const createInputRef = ref(null)
+const createType = ref('file')
+const createName = ref('')
+const createError = ref('')
+
+function startCreate(type) {
+  createMenuVisible.value = false
+  createType.value = type
+  createName.value = ''
+  createError.value = ''
+  createInputVisible.value = true
+  nextTick(() => createInputRef.value?.focus())
+}
+
+function confirmCreate() {
+  const name = createName.value.trim()
+  if (!name) { createError.value = '名称不能为空'; return }
+  if (/[\\/:*?"<>|]/.test(name)) { createError.value = '名称包含非法字符'; return }
+  createError.value = ''
+  emit('create-doc', { parentKey: createParentKey.value, name, type: createType.value })
+  createInputVisible.value = false
+}
+
+// ===== 拖拽排序 =====
+function onDragEnd() {
+  // 拖拽结束后，通知父组件执行重编号
+  emit('reorder')
+}
 </script>

package/src/components/CodeBlockNodeView.vue

@@ -0,0 +1,72 @@
+<template>
+  <node-view-wrapper class="code-block-wrapper editor-code-block" data-type="codeBlock">
+    <!-- 代码块 header -->
+    <div class="code-block-header" contenteditable="false">
+      <input
+        class="code-lang-input"
+        :value="node.attrs.language || ''"
+        @input="updateLanguage"
+        placeholder="语言"
+        spellcheck="false"
+      />
+      <div class="code-block-actions">
+        <button class="code-action-btn" :class="{ copied }" @click="copyCode" title="复制代码">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          <span class="copy-text">{{ copied ? '已复制' : '复制' }}</span>
+        </button>
+      </div>
+    </div>
+    <!-- 代码编辑区域：行号 gutter + 编辑区 -->
+    <div class="code-block-body">
+      <div class="code-edit-layout">
+        <!-- 行号列 -->
+        <div class="code-line-gutter" contenteditable="false" aria-hidden="true">
+          <span v-for="n in lineCount" :key="n" class="code-ln-num">{{ n }}</span>
+        </div>
+        <!-- 编辑区 -->
+        <pre class="code-edit-area"><node-view-content as="code" :class="codeClass" /></pre>
+      </div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { nodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const copied = ref(false)
+
+const codeClass = computed(() => {
+  const lang = props.node.attrs.language
+  return lang ? `language-${lang}` : ''
+})
+
+// 根据代码内容计算行数（响应式，编辑时自动更新）
+const lineCount = computed(() => {
+  const text = props.node.textContent
+  if (!text) return 1
+  return text.split('\n').length
+})
+
+// 更新语言属性
+function updateLanguage(e) {
+  props.updateAttributes({ language: e.target.value || null })
+}
+
+// 复制代码
+async function copyCode() {
+  const text = props.node.textContent
+  try {
+    await navigator.clipboard.writeText(text)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // fallback
+  }
+}
+</script>