dsh-md-plus 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # 更新日志
 
-## 0.4.1 —— 未发布
+## 0.4.3 —— 未发布
+
+- 修复补高亮语言映射：`hbs` / `jade` / `tscn` / `tres` 分别使用 handlebars / pug / gdresource 语法着色。
+- 修复 Mermaid 12.1 在占位标签兜底路径下的图种识别：补充 `radar-beta`、`treemap-beta`、`venn-beta`、`ishikawa-beta`、`wardley-beta`、`cynefin-beta`、`treeView-beta`、`flowchart-elk` 等，并去掉无效裸关键字的误判。
+- 修复插件卸载后 debounce 扫描重新插入按钮、设置入口和折叠控件的问题，同时清理 `data-md-plus-zoom` 属性。
+- 修复 localStorage 不可用时设置保存和配色切换连当前会话都不生效的问题。
+- 修复运行时路由 ETag 只依赖文件大小和 mtime、内容更新后仍可能返回 304 的问题。
+- 同步能力展示页和 README 预览图到当前 DSH 样式，并把所有版本引用更新为 0.4.3。
+- 测试补到 78 条，新增别名语言、Mermaid 新图种、卸载清理、localStorage 降级和 ETag 回归用例。
+
+## 0.4.2 —— 2026-10-30
+
+- 修复鼠标悬浮表格或折叠内容时吞掉页面滚轮：移除表格容器的 `overscroll-behavior` containment，折叠态改为保留横向滚动、纵向 `overflow-y: clip`，并覆盖 DSH 宿主 `.tableScroll` 自带的横向 containment。
+- 修复宽表横向滚动条出现 / 消失时鼠标移入移出表格造成的上下跳动：取消 hover 阶段的 padding 切换，固定底部留白。
+- 修复宽表横向滚动时「展开 / 收起」按钮跟着表格内容移动：按钮中心固定跟随表格可视区域。
+- 修复宽表横向滚动时右上角 CSV / Markdown 操作按钮跟表格内容移动：操作组固定在表格可视区域右上角。
+- 新增 `docs/table-wheel-demo.html`：可直接检查短表、默认折叠长表（含横向滚动）和展开长表三种滚轮行为。
+- 测试补到 73 条，新增表格和折叠内容不建立吞滚轮滚动容器的回归用例。
+
+## 0.4.1 —— 2026-10-30
 
 - 修复 DSH 代码块头部只显示占位文案时读不到真实围栏语言、补高亮失效的问题：现在会从宿主的 React fiber 读取真实 `lang`，读不到再退回正文嗅探，并把头部语言名显示成真实语言。
 - 修复 `graph = nx.Graph()`、`pie = 3.14`、`timeline = []` 等普通代码被误判成 mermaid 图的问题：只嗅探第一行有效内容，并排除赋值和调用形态。

package/README.md

@@ -9,7 +9,7 @@
 - **代码块**：统一成完整卡片，头部显示 `</>` 图标和语言名（无语言显示 `Plain text`），保留宿主原生的换行与复制按钮，顶栏与卡片同色。
 - **Mermaid**：围栏渲染成 SVG，可在「图形 / 代码」间切换；支持全屏查看（滚轮缩放、拖拽、双击适应、Esc 关闭）、四套配色，以及下载 SVG / PNG。
 - **长内容折叠**：代码块、表格、图表超过阈值自动折叠，底部出现「展开 / 收起」，长日志和长表格不会撑满聊天。
-- **表格**：浅色 / 深色两套样式，表头吸顶；每张表上方右侧有「CSV / Markdown」复制按钮。
+- **表格**：浅色 / 深色两套样式，表头吸顶，宽表支持表内横向滚动；每张表上方右侧有「CSV / Markdown」复制按钮。
 - **图片放大**：只在旧宿主没有原生预览按钮时兜底，点击图片打开暗色预览，Esc 或点遮罩关闭；新版 DSH 的原生预览、头像、图标、代码块和链接里的图片都不接管。
 - **设置面板**：右下角齿轮可调 Mermaid 配色、代码字号、图表默认视图和三类折叠阈值，阈值下方会注明按高度判断。设置存在 `localStorage`，界面文案跟随页面 `<html lang>` 切换中英文。
 
@@ -27,11 +27,13 @@ dsh plugin --profile desktop remove dsh-md-plus
 ```powershell
 npm install       # 顺带跑 prepare → build
 npm run build     # 产出 lib/ 下四个文件
-npm run check     # 语法检查 + 72 条测试（先 build 再跑，check 不含 build）
+npm run check     # 语法检查 + 78 条测试（先 build 再跑，check 不含 build）
 npm run preview   # 生成 preview.html（含真渲出来的 mermaid 图）
 npm run shot      # 用 headless Chrome 把 preview.html 截成 docs/preview.png
 ```
 
+`npm run preview` / `scripts/showcase.mjs` 需要读取 DSH 安装目录里的主题和前端资源；如果本机 DSH 是 `app.asar` 包，请先解包到目录，并把 `DSH_APP_DIR` 指向该目录。
+
 ## 已知限制
 
 - DSH 0.2.1-rc.4 的头部语言名由宿主决定：不认识的围栏只显示占位文案「代码块」。插件会从宿主的 React fiber 里兜底读取真实语言，读不到时才退回正文嗅探；宿主改 React 结构后这条兜底可能失效。

package/lib/client.js

@@ -178,6 +178,8 @@ window.__ModuleLoader__.load({
     var STYLE_ATTR = "data-md-plus-style";
     var RUNTIME_ATTR = "data-md-plus-runtime";
     var DEBOUNCE_MS = 160;
+    var memorySettings = null;
+    var memoryTheme = null;
     function readSettings() {
       var settings = { ...DEFAULT_SETTINGS };
       try {
@@ -194,11 +196,14 @@ window.__ModuleLoader__.load({
             if (Number.isFinite(value) && value >= 0) settings[key] = Math.min(4e3, Math.round(value));
           }
         }
+        memorySettings = { ...settings };
       } catch {
+        if (memorySettings !== null) return { ...DEFAULT_SETTINGS, ...memorySettings };
       }
       return settings;
     }
     function saveSettings(next) {
+      memorySettings = { ...next };
       try {
         window.localStorage.setItem(SETTINGS_KEY, JSON.stringify(next));
       } catch {
@@ -331,10 +336,10 @@ window.__ModuleLoader__.load({
       "gradle"
     ]);
     var MMD_LANGS = /* @__PURE__ */ new Set(["mermaid", "mermaidjs", "mmd"]);
-    var MMD_FLOW = /^\s*(flowchart|graph)(?:\s+(?:TD|TB|BT|RL|LR))?\s*;?\s*$/i;
-    var MMD_PIE = /^\s*pie(?:\s+title\b.*)?\s*;?\s*$/i;
+    var MMD_FLOW = /^\s*(flowchart(?:-elk)?|graph)(?:\s+(?:TD|TB|BT|RL|LR))?\s*;?\s*$/i;
+    var MMD_PIE = /^\s*pie(?:\s+(?:showData|title)\b.*)?\s*;?\s*$/i;
     var MMD_GIT = /^\s*gitGraph(?:\s+(?:LR|TB|BT|RL))?:?\s*;?\s*$/i;
-    var MMD_SINGLE = /^\s*(sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|gantt|mindmap|timeline|quadrantChart|xychart-beta|sankey-beta|block-beta|packet-beta|architecture-beta|usecase-beta|agentflow-beta|C4Context|requirementDiagram|kanban|radar|treemap|venn|ishikawa|wardley|cynefin|treeView|zenuml)\s*;?\s*$/i;
+    var MMD_SINGLE = /^\s*(sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|gantt|mindmap|timeline|quadrantChart|xychart-beta|sankey-beta|block-beta|packet-beta|architecture-beta|usecase-beta|agentflow-beta|C4Context|requirementDiagram|kanban|radar-beta|treemap(?:-beta)?|venn-beta|ishikawa(?:-beta)?|wardley-beta|cynefin-beta|treeView-beta|info|eventmodeling|swimlane-beta|railroad-beta|railroad-abnf-beta|railroad-ebnf-beta|railroad-peg-beta)\s*;?\s*$/i;
     function icon(paths) {
       var svg = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" + paths + "</svg>";
       return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
@@ -443,8 +448,9 @@ window.__ModuleLoader__.load({
       "." + MODAL_CLASS + " svg{display:block}",
       // ── 长内容折叠：代码块、表格、图表卡共用一套按钮 ───────────────
       "." + FOLD_CLASS + "{position:relative}",
-      "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{max-height:var(--md-plus-fold-max-height);overflow:hidden}',
-      "." + FOLD_BTN_CLASS + "{display:block;margin:8px auto 0;padding:4px 12px;border:1px solid var(--dsw-alias-border-secondary,rgb(127 127 127 / 22%));border-radius:999px;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary);font:12px/18px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer;box-shadow:0 2px 8px rgb(0 0 0 / 12%);z-index:2}",
+      // 用 clip 而不是 hidden：hidden 会建立隐形滚动容器，鼠标在折叠内容上滚轮会被它吞掉。
+      "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{max-height:var(--md-plus-fold-max-height);overflow:clip}',
+      "." + FOLD_BTN_CLASS + "{display:block;white-space:nowrap;margin:8px auto 0;padding:4px 12px;border:1px solid var(--dsw-alias-border-secondary,rgb(127 127 127 / 22%));border-radius:999px;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary);font:12px/18px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer;box-shadow:0 2px 8px rgb(0 0 0 / 12%);z-index:2}",
       "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"] .' + FOLD_BTN_CLASS + "{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0}",
       // ── 图片点击放大 ────────────────────────────────────────────────
       '[class*="_markdown_"] img{cursor:zoom-in}',
@@ -480,7 +486,10 @@ window.__ModuleLoader__.load({
       // 抓手用结构选择器而不是 DSH 的哈希类名：外层是「唯一子元素是 table 的 div」。
       // 前面挂 [class*="_markdown_"] 有两个作用——只认 markdown 渲染出来的表格，
       // 同时把特异性顶到 (0,1,4)，压过 DSH 自己的 .tableScroll th (0,1,1)。
-      TABLE + "{position:relative;margin-block:16px;max-height:min(70vh,720px);overflow-y:auto;overscroll-behavior-y:contain;" + TABLE_VARS + "}",
+      // 不要加 overscroll-behavior-y:contain：宿主给表格的外层是 overflow-x:auto，
+      // 两轴滚动容器上加 contain 会让没有纵向滚动的短表也吞掉页面滚轮；宿主的
+      // overscroll-behavior-x:contain 同样要清掉，Chrome 下它也会连带吞掉纵向滚轮。
+      TABLE + "{position:relative;margin-block:16px;max-height:min(70vh,720px);overflow-y:auto;overscroll-behavior:auto;" + TABLE_VARS + "}",
       "body[data-ds-dark-theme] " + TABLE + "{" + TABLE_VARS_DARK + "}",
       // 整张表一个 1px 边框 + 小圆角。
       // 注意必须是 separate：collapse 模式下 Chrome 会忽略单元格的圆角，
@@ -507,27 +516,29 @@ window.__ModuleLoader__.load({
       // 长表往下滚时表头留在视口顶部；底色不透明才不会透出下面的行
       TABLE + " > table thead th{position:sticky;top:0;z-index:1}",
       // 复制按钮放在表尾右侧：不压住表头文字，表格折叠时也能随展开一起出现
-      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + "{caption-side:top;text-align:right;padding:0 0 6px}",
+      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + "{caption-side:top;position:sticky;right:0;width:0;height:30px;margin-left:auto;padding:0;text-align:right;z-index:2}",
+      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " > span{position:absolute;right:0;top:0;display:flex;gap:0;white-space:nowrap}",
       TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " button{appearance:none;border:1px solid var(--md-plus-tbl-line);border-radius:5px;padding:2px 8px;margin-left:4px;background:transparent;color:var(--dsw-alias-label-secondary);font:11px/16px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer}",
       TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " button:hover{color:var(--dsw-alias-label-primary);background:var(--md-plus-tbl-hover)}",
       // 宽表（≥4 列）不收着不行。宿主给这类表加了 .md-table-wide，并让它「出血」：
       // 包裹层撑到面板宽，再用 padding-left 把表推到正文栏左侧。那个 padding 会吃掉
-      // 可用宽度，结果是表格比正文宽出一截、右边还被裁掉，而滚动条只在鼠标悬停时
-      // 才出现——文字表落进这个区间就很难读。这里按回正文栏宽，超出改为表内横滚。
+      // 可用宽度，结果是表格比正文宽出一截、右边还被裁掉；这里按回正文栏宽，超出改为表内横滚。
       // 特异性 (0,2,2)，压得住宿主的 .Pg4CGa_body .md-table-wide (0,2,0)。
-      TABLE + ".md-table-wide{width:100%;max-width:100%;margin-inline:0;padding-inline:0;overflow-x:auto}",
+      TABLE + ".md-table-wide{width:100%;max-width:100%;margin-inline:0;padding-inline:0;padding-bottom:0;overflow-x:auto}",
       // 塞得下就撑满正文栏，塞不下保持自然宽度让外面滚，不把列挤成一列一个字
       TABLE + ".md-table-wide > table{width:100%;max-width:none;min-width:max-content}",
-      // 宿主原本是「悬停才出滚动条」，所以悬停时会把预留的滚动条高度收掉；
-      // 现在滚动条常驻，再收掉就会跳 5px，固定住。
-      TABLE + ".md-table-wide:hover{padding-bottom:var(--dsh-scrollbar-width,5px)}"
+      // 折叠态保留横向滚动，但纵向必须 clip；横向滚动容器只有在
+      // overscroll-behavior:auto 时才会把纵向滚轮交还给页面。
+      TABLE + "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{overflow-x:auto;overflow-y:clip}'
     ].join("\n");
     var scripts = /* @__PURE__ */ new Map();
     var pending = /* @__PURE__ */ new Set();
+    var foldSyncs = /* @__PURE__ */ new WeakMap();
     var timer = null;
     var rescanQueued = false;
     var injected = /* @__PURE__ */ new Set();
     var diagramSeq = 0;
+    var disposed = false;
     function injectStyle() {
       if (document.querySelector("style[" + STYLE_ATTR + "]") !== null) return;
       var tag = document.createElement("style");
@@ -670,6 +681,7 @@ window.__ModuleLoader__.load({
       ) != null;
     }
     function schedule(block) {
+      if (disposed) return;
       if (block !== void 0) pending.add(block);
       else rescanQueued = true;
       if (timer !== null) return;
@@ -677,6 +689,7 @@ window.__ModuleLoader__.load({
     }
     function flush() {
       timer = null;
+      if (disposed) return;
       if (rescanQueued) {
         rescanQueued = false;
         for (const block of document.querySelectorAll(BLOCK)) pending.add(block);
@@ -838,7 +851,7 @@ window.__ModuleLoader__.load({
       if (lang === "") return;
       if (DSH_LANGS.has(lang)) return;
       var api = await loadScript(HL_URL, HL_GLOBAL);
-      if (api === null || !api.supports(lang)) return;
+      if (disposed || api === null || !api.supports(lang)) return;
       if (!pre.isConnected) return;
       var code = pre.textContent ?? "";
       if (code.trim() === "") return;
@@ -850,6 +863,7 @@ window.__ModuleLoader__.load({
       } catch {
         return;
       }
+      if (disposed) return;
       if (typeof html !== "string" || html === "") return;
       if (!pre.isConnected || (pre.textContent ?? "") !== code) {
         schedule(block);
@@ -874,8 +888,13 @@ window.__ModuleLoader__.load({
     function getMermaidTheme() {
       try {
         var saved = window.localStorage.getItem(THEME_KEY);
-        if (saved !== null && THEME_ORDER.indexOf(saved) !== -1) return saved;
+        if (saved !== null && THEME_ORDER.indexOf(saved) !== -1) {
+          memoryTheme = saved;
+          return saved;
+        }
+        memoryTheme = null;
       } catch {
+        if (memoryTheme !== null) return memoryTheme;
       }
       return "blue";
     }
@@ -893,6 +912,7 @@ window.__ModuleLoader__.load({
       var current = getMermaidTheme();
       var index = THEME_ORDER.indexOf(current);
       var next = THEME_ORDER[(index + 1) % THEME_ORDER.length];
+      memoryTheme = next;
       try {
         window.localStorage.setItem(THEME_KEY, next);
       } catch {
@@ -906,16 +926,18 @@ window.__ModuleLoader__.load({
       var key = "mmd\0" + code;
       if (block.getAttribute(KEY_ATTR) === key) return;
       var api = await loadScript(MMD_URL, MMD_GLOBAL);
-      if (api === null) return;
+      if (disposed || api === null) return;
       if (!pre.isConnected) return;
       var svg;
       try {
         var dark = document.body.hasAttribute("data-ds-dark-theme");
         svg = await api.render("dsh-md-plus-mmd-" + ++diagramSeq, code, dark, getMermaidTheme());
       } catch (error) {
+        if (disposed) return;
         failDiagram(block, content, pre, key, error);
         return;
       }
+      if (disposed) return;
       if (typeof svg !== "string" || svg === "") return;
       if (svg.includes('aria-roledescription="error"')) {
         failDiagram(block, content, pre, key, new Error("mermaid \u8FD4\u56DE\u7684\u662F\u9519\u8BEF\u5361\u7247"));
@@ -1045,6 +1067,12 @@ window.__ModuleLoader__.load({
     }
     function resetFold(target) {
       if (target === null) return;
+      var sync = foldSyncs.get(target);
+      if (sync !== void 0) {
+        target.removeEventListener("scroll", sync);
+        window.removeEventListener("resize", sync);
+        foldSyncs.delete(target);
+      }
       target.removeAttribute(FOLD_ATTR);
       target.classList.remove(FOLD_CLASS);
       target.style.removeProperty("--md-plus-fold-max-height");
@@ -1077,13 +1105,23 @@ window.__ModuleLoader__.load({
         button.className = FOLD_BTN_CLASS;
         button.textContent = t("foldOpen");
         button.setAttribute("aria-expanded", "false");
+        var sync = target.hasAttribute(TABLE_DONE_ATTR) ? () => {
+          button.style.left = target.scrollLeft + target.clientWidth / 2 + "px";
+        } : null;
+        if (sync !== null) {
+          foldSyncs.set(target, sync);
+          target.addEventListener("scroll", sync, { passive: true });
+          window.addEventListener("resize", sync);
+        }
         button.addEventListener("click", () => {
           var folded = target.getAttribute(FOLD_ATTR) === "on";
           target.setAttribute(FOLD_ATTR, folded ? "off" : "on");
           button.textContent = folded ? t("foldClose") : t("foldOpen");
           button.setAttribute("aria-expanded", folded ? "true" : "false");
+          sync?.();
         });
         target.appendChild(button);
+        sync?.();
       });
     }
     function scanFolds() {
@@ -1153,6 +1191,8 @@ window.__ModuleLoader__.load({
       table.setAttribute(TABLE_DONE_ATTR, "1");
       var tools = document.createElement("caption");
       tools.className = TABLE_TOOLS_CLASS;
+      var group = document.createElement("span");
+      group.className = TABLE_TOOLS_CLASS + "-group";
       for (const [kind, label, titleKey, convert] of [
         ["csv", t("tableCsv"), "copyCsvTitle", tableToCsv],
         ["md", t("tableMd"), "copyMdTitle", tableToMarkdown]
@@ -1171,8 +1211,9 @@ window.__ModuleLoader__.load({
           }
           flashButton(button, ok ? t("copied") : t("copyFailed"));
         });
-        tools.appendChild(button);
+        group.appendChild(button);
       }
+      tools.appendChild(group);
       dataTable.insertBefore(tools, dataTable.firstChild);
     }
     function openImage(source, alt) {
@@ -1370,6 +1411,7 @@ window.__ModuleLoader__.load({
           foldTable: readNumber(foldTable, DEFAULT_SETTINGS.foldTable),
           foldDiagram: readNumber(foldDiagram, DEFAULT_SETTINGS.foldDiagram)
         });
+        memoryTheme = themeSelect.value;
         try {
           window.localStorage.setItem(THEME_KEY, themeSelect.value);
         } catch {
@@ -1602,6 +1644,7 @@ window.__ModuleLoader__.load({
     function apply0(ctx) {
       if (typeof document === "undefined") return;
       ctx.effect(() => {
+        disposed = false;
         injectStyle();
         applyCodeFontSize();
         ensureSettingsButton();
@@ -1617,6 +1660,13 @@ window.__ModuleLoader__.load({
         });
         schedule();
         return () => {
+          disposed = true;
+          if (timer !== null) {
+            window.clearTimeout(timer);
+            timer = null;
+          }
+          pending.clear();
+          rescanQueued = false;
           observer.disconnect();
           document.removeEventListener("click", onDocumentClick, true);
           for (const node of injected) node.remove();
@@ -1626,7 +1676,7 @@ window.__ModuleLoader__.load({
           for (const node of document.querySelectorAll("." + FOLD_BTN_CLASS)) node.remove();
           for (const node of document.querySelectorAll("[" + FOLD_ATTR + "]")) resetFold(node);
           for (const node of document.querySelectorAll("." + TABLE_TOOLS_CLASS)) node.remove();
-          for (const attr of [DONE_ATTR, KEY_ATTR, WRAP_ATTR, MMD_ATTR, TABLE_DONE_ATTR, "data-md-plus-lang"]) {
+          for (const attr of [DONE_ATTR, KEY_ATTR, WRAP_ATTR, MMD_ATTR, TABLE_DONE_ATTR, "data-md-plus-lang", ZOOM_ATTR]) {
             for (const node of document.querySelectorAll("[" + attr + "]")) node.removeAttribute(attr);
           }
           for (const node of document.querySelectorAll("[data-md-plus-original-label]")) {