dsh-happy-reader 0.3.2 → 0.3.3

package/README.md

@@ -103,6 +103,10 @@
 - **引用/标题**内选区补回 `>` / `#`；**表格**选区自动补整行、原表头和分隔行；
   单格/单项内部按格内/项内内容复制。DSH 聊天只渲染 GFM 表（raw HTML 按文本显示）；
   跨格/整表选择时，合并单元格/无表头等非 GFM 结构整段交还原生复制，不伪造表格
+- 跨代码块、列表、表格、引用/标题的混合选区保留各自结构：代码围栏、列表符号、
+  行内代码和表格不会因为一端落在某类结构里就整段退化成纯文本；边界表补完整表头/
+  整行，有序列表中段续接真实序号，嵌套列表不出现双项目符号，任务项 `[x]/[ ]`
+  状态保留；只选中代码块顶部语言/复制按钮时交还系统原生复制
 - 只在消息区域生效；复制界面其它地方（如设置、输入框）保持系统默认行为
 - **与官方「引用文本」不冲突（v0.3.0 核对）**：官方引用是选中文字后出现的按钮，
   把纯文本插入输入框；本功能只接管消息区内的 `copy` 事件（Ctrl+C）改写剪贴板，
@@ -167,7 +171,7 @@ dsh plugin --profile <profile> add dsh-happy-reader
   （面板避让的是 Windows 系统按钮条，字体候选为 Windows 常用字体）。
 - 依赖官方客户端界面结构，DSH 版本升级后可能需要跟随更新。
 - 运行时按事件工作：无常驻定时轮询；宽度观察器只在面板打开或扩展宽度生效时挂载，
-  字体 token 晚就绪用有限次退避重试（成功后停止）。
+  纯高度变化不触发宽度逻辑；字体 token 晚就绪用有限次退避重试（成功后停止）。
 
 ## 许可
 

package/lib/client.js

@@ -21,7 +21,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports
 
     // ── 常量 ────────────────────────────────────────────────────────────
-    const VERSION = '0.3.2'
+    const VERSION = '0.3.3'
     const INSTANCE_TOKEN = {}
     const GROUPS_VERSION = 3
     const STATE_KEY = 'dsh.reader-boost.v1'
@@ -1561,15 +1561,9 @@ window.__ModuleLoader__.load({
           if (open) {
             renderAll()
             rebuildFontPick()
+            // 先归位宽度再显示面板：避免面板出现后下一帧才改聊天宽度，造成背后内容跳动
+            refreshWidthTargets()
             placePanel()
-            // 观察器接线不影响首帧可读性：挪到下一帧，避免打开瞬间与定位抢布局。
-            if (typeof window.requestAnimationFrame === 'function') {
-              window.requestAnimationFrame(() => {
-                if (!disposed && state.open) refreshWidthTargets()
-              })
-            } else {
-              refreshWidthTargets()
-            }
           } else {
             refreshWidthTargets()
           }
@@ -1961,10 +1955,17 @@ window.__ModuleLoader__.load({
         // 官方键/官方变量的收敛压到同一批回调内，开合过程不再出现滞留窄值的中间态。
         let watchedColumn = null
         let watchedColumnWidth = -1
-        const columnObserver = new ResizeObserver(() => {
+        let watchedContentWidth = -1
+        const columnObserver = new ResizeObserver((entries) => {
           if (disposed) return
           // 块级容器的高度会随流式输出、折叠动画变化；宽度没变时这些回调与
-          // 宽度状态无关，跳过可避免滚动/渲染期间做无谓的样式读写。
+          // 宽度状态无关，直接跳过（用观测值判断，避免为读 offsetWidth 触发布局）。
+          const entry = entries && entries.length ? entries[entries.length - 1] : null
+          const observed = entry && entry.contentRect ? entry.contentRect.width : null
+          if (observed !== null) {
+            if (observed === watchedContentWidth) return
+            watchedContentWidth = observed
+          }
           const current = widthTargets()
           const width = current ? current.column : 0
           if (width === watchedColumnWidth) return
@@ -1982,6 +1983,7 @@ window.__ModuleLoader__.load({
           columnObserver.disconnect()
           watchedColumn = container
           watchedColumnWidth = -1
+          watchedContentWidth = -1
           if (container) columnObserver.observe(container)
         }
 
@@ -2393,15 +2395,36 @@ window.__ModuleLoader__.load({
           if (rows[0] !== header || !rows.every(rowFits)) return null
           return { header, headerCells, rows }
         }
+        /** 用原表的结构化表头 + 指定行区间生成一张完整 GFM 表（单元格行内内容）。 */
+        function buildGfmTable(parts, lo, hi) {
+          const { header, headerCells, rows } = parts
+          const body = rows.slice(Math.max(0, lo), Math.min(rows.length - 1, hi) + 1).filter((row) => row !== header)
+          const table = document.createElement('table')
+          const thead = document.createElement('thead')
+          const headRow = document.createElement('tr')
+          for (const cell of headerCells) headRow.append(cell.cloneNode(true))
+          thead.append(headRow)
+          table.append(thead)
+          if (body.length) {
+            const tbody = document.createElement('tbody')
+            for (const row of body) {
+              const tr = document.createElement('tr')
+              for (const cell of row.cells) tr.append(cell.cloneNode(true))
+              tbody.append(tr)
+            }
+            table.append(tbody)
+          }
+          return table
+        }
         /** 表格：按显示结构还原 GFM，只补被选中的整行与原表头；非 GFM 结构交还原生复制。 */
         function tableReplacement(range, elOf) {
           const startTable = closestFrom(range.startContainer, 'table', elOf)
           const endTable = closestFrom(range.endContainer, 'table', elOf)
           if (!startTable && !endTable) return null
-          if (!startTable || !endTable || startTable !== endTable) return false
+          if (!startTable || !endTable || startTable !== endTable) return null // 跨表/混合选区走通用转换，不能整段退回原生
           const startCell = closestFrom(range.startContainer, 'td,th', elOf)
           const endCell = closestFrom(range.endContainer, 'td,th', elOf)
-          if (!startCell || !endCell) return false
+          if (!startCell || !endCell) return null
           // 单个单元格内部按普通行内内容复制，不扩成整表。
           if (startCell === endCell) return null
           const startRow = startCell.closest('tr')
@@ -2409,41 +2432,50 @@ window.__ModuleLoader__.load({
           if (!startRow || !endRow) return false
           const parts = gfmTableParts(startTable)
           if (!parts) return false
-          const { header, headerCells, rows } = parts
+          const rows = parts.rows
           const si = rows.indexOf(startRow)
           const ei = rows.indexOf(endRow)
           if (si < 0 || ei < 0) return false
-          const lo = Math.min(si, ei)
-          const hi = Math.max(si, ei)
-          const body = rows.slice(lo, hi + 1).filter((row) => row !== header)
           const box = document.createElement('div')
-          const table = document.createElement('table')
-          const thead = document.createElement('thead')
-          const headRow = document.createElement('tr')
-          for (const cell of headerCells) headRow.append(cell.cloneNode(true))
-          thead.append(headRow)
-          table.append(thead)
-          if (body.length) {
-            const tbody = document.createElement('tbody')
-            for (const row of body) {
-              const tr = document.createElement('tr')
-              for (const cell of row.cells) tr.append(cell.cloneNode(true))
-              tbody.append(tr)
-            }
-            table.append(tbody)
-          }
-          box.append(table)
+          box.append(buildGfmTable(parts, Math.min(si, ei), Math.max(si, ei)))
           return box
         }
+        /**
+         * 混合选区一端的表只会被克隆出局部（通常缺行/缺列），GFM 校验会整段回退原生。
+         * 用原表把首/尾边界表补成完整行（含表头），中间完整表保持原样。
+         */
+        function completeBoundaryTables(box, work, elOf) {
+          const startTable = closestFrom(work.startContainer, 'table', elOf)
+          const endTable = closestFrom(work.endContainer, 'table', elOf)
+          if (!startTable && !endTable) return
+          if (startTable && endTable && startTable === endTable) return
+          const cloned = [...box.querySelectorAll('table')]
+          if (!cloned.length) return
+          const fill = (table, isStart) => {
+            if (!table) return
+            const parts = gfmTableParts(table)
+            if (!parts) return
+            const row = closestFrom(isStart ? work.startContainer : work.endContainer, 'tr', elOf)
+            if (!row) return
+            const index = parts.rows.indexOf(row)
+            if (index < 0) return
+            const lo = isStart ? index : 1
+            const hi = isStart ? parts.rows.length - 1 : Math.max(0, index)
+            const target = isStart ? cloned[0] : cloned[cloned.length - 1]
+            if (target && target.parentNode) target.replaceWith(buildGfmTable(parts, lo, hi))
+          }
+          if (startTable) fill(startTable, true)
+          if (endTable && endTable !== startTable) fill(endTable, false)
+        }
         /** 列表：跨多个列表项时补齐完整项与 ol 起始序号；单项内部保持普通文本。 */
         function listReplacement(range, elOf) {
           const startItem = closestFrom(range.startContainer, 'li', elOf)
           const endItem = closestFrom(range.endContainer, 'li', elOf)
           if (!startItem && !endItem) return null
-          if (!startItem || !endItem) return false
+          if (!startItem || !endItem) return null // 代码块→列表等混合选区仍应保留 Markdown
           const startList = startItem.parentElement
           const endList = endItem.parentElement
-          if (!startList || startList !== endList || !/^(UL|OL)$/.test(startList.tagName)) return false
+          if (!startList || startList !== endList || !/^(UL|OL)$/.test(startList.tagName)) return null
           if (startItem === endItem) return null
           const items = [...startList.children].filter((child) => child.tagName === 'LI')
           const si = items.indexOf(startItem)
@@ -2493,6 +2525,89 @@ window.__ModuleLoader__.load({
           }
           for (const banner of [...root.querySelectorAll('[data-code-block-banner]')]) banner.remove()
         }
+        /** 混合选区时首/尾代码块可能只克隆出 pre、没带横幅；按原 DOM 端点补语言。 */
+        function tagSelectedCodeLanguages(box, work, elOf) {
+          const pres = [...box.querySelectorAll('pre')]
+          if (!pres.length) return
+          const preAt = (node) => {
+            const direct = closestFrom(node, 'pre', elOf)
+            if (direct) return direct
+            const block = closestFrom(node, '.md-code-block', elOf)
+            return block ? block.querySelector('[data-code-block-content] pre') : null
+          }
+          const mark = (pre, original) => {
+            if (!original || !pre || pre.getAttribute('data-dsrb-lang')) return
+            const lang = dshCodeLanguage(original)
+            if (!lang) return
+            const text = pre.textContent
+            if (text && !original.textContent.includes(text)) return
+            pre.setAttribute('data-dsrb-lang', lang)
+          }
+          mark(pres[0], preAt(work.startContainer))
+          if (pres.length > 1) mark(pres[pres.length - 1], preAt(work.endContainer))
+        }
+        /** 选区从嵌套列表子项开始时，克隆会带出“只有子列表、没有自身文字”的父 li；
+         *  直接转换会得到 `-   -   子项`。把空父项拆壳，让子列表成为顶层列表。 */
+        function normalizeEmptyListItems(root) {
+          for (const li of [...root.querySelectorAll('li')]) {
+            const nested = [...li.children].filter((child) => /^(UL|OL)$/.test(child.tagName))
+            if (!nested.length) continue
+            const own = [...li.childNodes].some((node) =>
+              !nested.includes(node) && (node.nodeType === 1 || (node.nodeType === 3 && node.textContent.trim())))
+            if (own) continue
+            li.replaceWith(...nested)
+          }
+        }
+        /** 从任务列表项文字开始时，克隆会丢掉前面的 checkbox，`[x]` 状态随之消失；
+         *  按原 li 给首/尾克隆项补回 checkbox。 */
+        function tagSelectedTaskItems(root, work, elOf) {
+          const cloned = [...root.querySelectorAll('li')]
+          if (!cloned.length) return
+          const ownCheckbox = (li) => [...li.children].find((child) => child.tagName === 'INPUT' && child.type === 'checkbox')
+          const mark = (li, original) => {
+            if (!li || !original) return
+            const source = ownCheckbox(original)
+            if (!source || ownCheckbox(li)) return
+            const text = li.textContent.trim()
+            if (text && !original.textContent.includes(text)) return
+            const input = document.createElement('input')
+            input.setAttribute('type', 'checkbox')
+            input.checked = !!source.checked
+            if (input.checked) input.setAttribute('checked', '')
+            li.insertBefore(input, li.firstChild)
+          }
+          mark(cloned[0], closestFrom(work.startContainer, 'li', elOf))
+          if (cloned.length > 1) mark(cloned[cloned.length - 1], closestFrom(work.endContainer, 'li', elOf))
+        }
+        /** 混合选区从有序列表中段开始时，克隆会保留原 start 但丢掉前面各项，
+         *  序号会从 3、4 重新开始；按原列表项的真实位置改写克隆 ol 的 start。 */
+        function fixOrderedListStarts(root, work, elOf) {
+          const list = closestFrom(work.startContainer, 'ol', elOf)
+          const item = closestFrom(work.startContainer, 'li', elOf)
+          if (!list || !item) return
+          const items = [...list.children].filter((child) => child.tagName === 'LI')
+          const index = items.indexOf(item)
+          if (index < 0) return
+          const base = Number.parseInt(list.getAttribute('start') || '1', 10)
+          const first = (Number.isFinite(base) ? base : 1) + index
+          const target = item.textContent.trim()
+          const depth = (node, stop) => {
+            let n = 0
+            for (let el = node.parentElement; el && el !== stop; el = el.parentElement) {
+              if (el.tagName === 'UL' || el.tagName === 'OL') n += 1
+              if (el.matches && el.matches('[data-chat-node-key]')) break
+            }
+            return n
+          }
+          const listDepth = depth(list)
+          for (const ol of root.querySelectorAll('ol')) {
+            if (depth(ol, root) !== listDepth) continue
+            const firstItem = [...ol.children].find((child) => child.tagName === 'LI')
+            if (!firstItem || firstItem.textContent.trim() !== target) continue
+            ol.setAttribute('start', String(first))
+            break
+          }
+        }
         /** 校验选区里的所有表格并把对齐落到 align；非 GFM 表返回 false。 */
         function normalizeGfmTables(root) {
           for (const table of root.querySelectorAll('table')) {
@@ -2522,6 +2637,13 @@ window.__ModuleLoader__.load({
               return !!(node && node.closest && node.closest('input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]'))
             }
             if (inEditable(sel.anchorNode) || inEditable(sel.focusNode)) return
+            // 代码块横幅是语言/复制按钮等 UI，不是正文；只选横幅时交还原生。
+            const bannerAt = (n) => {
+              const node = elOf(n)
+              return node && node.closest ? node.closest('[data-code-block-banner]') : null
+            }
+            const bannerStart = bannerAt(sel.anchorNode)
+            if (bannerStart && bannerStart === bannerAt(sel.focusNode)) return
             const ka = elOf(sel.anchorNode).closest('.katex')
             const kf = elOf(sel.focusNode).closest('.katex')
             // 只选中了某个公式本身（两端落在同一个公式内）→ 直接输出该公式的 LaTeX
@@ -2586,7 +2708,12 @@ window.__ModuleLoader__.load({
               }
               nestAt.append(work.cloneContents())
             }
+            tagSelectedCodeLanguages(box, work, elOf)
+            completeBoundaryTables(box, work, elOf)
             normalizeCodeBlocks(box)
+            fixOrderedListStarts(box, work, elOf)
+            normalizeEmptyListItems(box)
+            tagSelectedTaskItems(box, work, elOf)
             // 通用/列表结构里若夹带非 GFM 表格（含整表被框进选区的情况），
             // 不能让 Turndown 退回 HTML 表或拼出坏表——整段交还原生复制。
             if (!normalizeGfmTables(box)) return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-happy-reader",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Happy Reader（阅读增强）：隐藏输入框 / 上边栏、全屏切换、字号 10–40px、行距/字距微调、面板可拖动可拉高、复制为 Markdown（公式→LaTeX）、内容宽度扩展、中英文分别选正文字体 + 官方代码/终端字体与字号（仅列本机已装）—— 与官方设置协同，不冲突",
   "type": "module",
   "license": "MIT",