dsh-quote-annotate-pro 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 本项目的所有重要变更都记在这里。版本号遵循 [SemVer](https://semver.org/lang/zh-CN/)。
 
+## 0.2.8 — 修复"批注编辑框跑到窗口左上角 / 引用不了"
+
+- **现象**：选中文字点「批注」后，编辑框出现在窗口左上角（压住侧边栏），看起来像引用功能坏了
+- **根因**：装饰逻辑会替换消息里的文本节点；若用户**正在那条消息里划词**，替换会让选区失效，`getBoundingClientRect()` 随即返回全 0 —— 用这个矩形算出来的位置正好是 `left=12 / top=8`（窗口左上角）
+- **修复**
+  - **不再动用户正在划词的那条消息**：`selectionTouches(row)` 守卫，等选区释放后再装饰
+  - **`safeRect()` 兜底**：矩形无效时先用当前选区重算，仍无效则退回视口底部居中 —— 编辑框不会再跑到左上角
+- 文本与模型侧行为不变（位置行仍只对模型可见）
+
 ## 0.2.7 — 引用渲染定版：输入框与对话区都不再"先露原文"
 
 - **输入框侧（本次）**：插入引用后**同一帧内**完成装饰 —— 不再走 `setTimeout`，改为在 `MutationObserver` 回调里同步执行（回调先于绘制），消除此前约 40ms 的"先露出完整引用块"窗口

package/lib/client.js

@@ -683,7 +683,7 @@ window.__ModuleLoader__.load({
           anchorKey: sel.anchorKey,
           turn: sel.turn,
           kind: sel.kind,
-        }, sel.rect)
+        }, safeRect(sel.rect))
         finish()
       }
       return React.createElement('div', { className: 'dshq-toolbar', style: { left, top } },
@@ -704,6 +704,31 @@ window.__ModuleLoader__.load({
     }
 
     // ============ 组件三：悬浮批注编辑框（评论输入框元素永久驻留，复用时输入法上下文不重建） ============
+    /**
+     * 选区矩形兜底。矩形失效（节点被装饰/重渲染替换后 getBoundingClientRect 会全 0）时，
+     * 直接用它会算出 left=12 / top=8 —— 编辑框就跑到窗口左上角（用户反馈的现象）。
+     * 处理：无效 → 用当前选区重算 → 仍无效 → 退回视口底部居中。
+     */
+    function safeRect(rect) {
+      const ok = (r) => !!(r
+        && Number.isFinite(r.left) && Number.isFinite(r.top)
+        && Number.isFinite(r.right) && Number.isFinite(r.bottom)
+        && ((r.right - r.left) > 0 || (r.bottom - r.top) > 0))
+      if (ok(rect)) return rect
+      try {
+        const s = typeof window !== 'undefined' ? window.getSelection() : null
+        if (s && s.rangeCount > 0) {
+          const r = s.getRangeAt(0).getBoundingClientRect()
+          if (ok(r)) return r
+        }
+      } catch (e) { /* ignore */ }
+      const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
+      const vh = typeof window !== 'undefined' ? window.innerHeight : 768
+      const left = Math.max(12, Math.round(vw / 2 - 140))
+      const top = Math.max(12, Math.round(vh - 200))
+      return { left, right: left + 280, top, bottom: top + 24, width: 280, height: 24 }
+    }
+
     const AnnotationEditor = () => {
       const state = useEditor()
       const inputRef = React.useRef(null)
@@ -721,18 +746,19 @@ window.__ModuleLoader__.load({
       const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
       const vh = typeof window !== 'undefined' ? window.innerHeight : 768
       const item = state.item
+      const rect = open ? safeRect(state.rect) : null
       let left = -9999
       let top = -9999
       let w = 200
-      if (open) {
+      if (open && rect) {
         // 宽度：默认约 10 字（120px），随评论输入变宽，封顶 340px
         const quoteW = Math.min(220, item.text.length * 12 + 16)
         const inputW = Math.min(300, Math.max(140, comment.length * 13 + 44))
         w = Math.max(120, Math.min(340, Math.max(quoteW, inputW)))
-        const center = state.rect.left + (state.rect.right - state.rect.left) / 2
+        const center = rect.left + (rect.right - rect.left) / 2
         left = Math.max(12, Math.min(center - w / 2, vw - w - 12))
         const estH = 200
-        top = state.rect.bottom + 8 + estH <= vh - 8 ? state.rect.bottom + 8 : Math.max(8, state.rect.top - estH - 8)
+        top = rect.bottom + 8 + estH <= vh - 8 ? rect.bottom + 8 : Math.max(8, rect.top - estH - 8)
       }
       const insert = () => {
         if (!open || !item) return
@@ -1293,6 +1319,20 @@ window.__ModuleLoader__.load({
             })
             return wrap
           }
+          /** 用户当前选区是否落在这个行里（是则暂缓装饰，别动 DOM 把选区搞失效） */
+          const selectionTouches = (row) => {
+            try {
+              const s = typeof window !== 'undefined' ? window.getSelection() : null
+              if (!s || s.rangeCount === 0 || s.isCollapsed) return false
+              for (let i = 0; i < s.rangeCount; i++) {
+                const r = s.getRangeAt(i)
+                const a = r.startContainer
+                const b = r.endContainer
+                if ((a && row.contains(a)) || (b && row.contains(b))) return true
+              }
+            } catch (e) { /* ignore */ }
+            return false
+          }
           /** 把承载「【引用…】\n原文…」的文本节点拆成：隐藏头部 + 紧凑引用块 + 其余文本 */
           const transformTextNode = (node) => {
             const raw = node.nodeValue || ''
@@ -1326,10 +1366,12 @@ window.__ModuleLoader__.load({
           }
           const scan = () => {
             timer = null
-            try {
-              for (const row of document.querySelectorAll(USER_ROW_SEL)) {
+            try {              for (const row of document.querySelectorAll(USER_ROW_SEL)) {
                 const kind = row.getAttribute('data-chat-flow-kind')
                 if (kind && kind !== 'user') continue
+                // 用户正在这条消息里划词时**不要动它的 DOM**：替换文本节点会让选区失效，
+                // 选区矩形随即变成全 0，批注气泡/编辑框就会定位到左上角（用户反馈过）。
+                if (selectionTouches(row)) continue
                 let walker
                 try { walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT, null) } catch (e) { continue }
                 const targets = []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quote-annotate-pro",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "选区引用与锚点批注（增强 fork）：划词 → 批注 → 带精确锚点的引用；输入框上方只显示原文片段，点一下跳回原文；发送时把轮次/角色写入引用块，让模型精确知道你指的是哪一处。",
   "keywords": ["dsh", "dsh-plugin", "deepseek-harness", "quote", "annotate", "selection", "reference", "anchor"],
   "license": "MIT",