dsh-spell-check 0.2.1 → 0.2.2

package/README.md

@@ -9,7 +9,7 @@
 
 English | [中文](README.zh-CN.md)
 
-![language](https://img.shields.io/badge/language-javascript-f7dc6f) ![license](https://img.shields.io/badge/license-MIT-blue) ![node](https://img.shields.io/badge/node-%E2%89%A5%2022-brightgreen) ![dsh](https://img.shields.io/badge/dsh-web%20profile-orange) ![runtime](https://img.shields.io/badge/runtime-offline_%C2%B7_100%25_local-brightgreen) ![tests](https://img.shields.io/badge/tests-128%20checks-brightgreen)
+![language](https://img.shields.io/badge/language-javascript-f7dc6f) ![license](https://img.shields.io/badge/license-MIT-blue) ![node](https://img.shields.io/badge/node-%E2%89%A5%2022-brightgreen) ![dsh](https://img.shields.io/badge/dsh-web%20profile-orange) ![runtime](https://img.shields.io/badge/runtime-offline_%C2%B7_100%25_local-brightgreen) ![tests](https://img.shields.io/badge/tests-136%20checks-brightgreen) ![npm](https://img.shields.io/npm/v/dsh-spell-check)
 
 A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that spell-checks the composer the way Chrome does: the word you are typing is checked as you type it, and fixing it never takes your hands off the keyboard.
 

package/README.zh-CN.md

@@ -9,7 +9,7 @@
 
 [English](README.md) | 中文
 
-![language](https://img.shields.io/badge/language-javascript-f7dc6f) ![license](https://img.shields.io/badge/license-MIT-blue) ![node](https://img.shields.io/badge/node-%E2%89%A5%2022-brightgreen) ![dsh](https://img.shields.io/badge/dsh-web%20profile-orange) ![runtime](https://img.shields.io/badge/runtime-offline_%C2%B7_100%25_local-brightgreen) ![tests](https://img.shields.io/badge/tests-129%20checks-brightgreen)
+![language](https://img.shields.io/badge/language-javascript-f7dc6f) ![license](https://img.shields.io/badge/license-MIT-blue) ![node](https://img.shields.io/badge/node-%E2%89%A5%2022-brightgreen) ![dsh](https://img.shields.io/badge/dsh-web%20profile-orange) ![runtime](https://img.shields.io/badge/runtime-offline_%C2%B7_100%25_local-brightgreen) ![tests](https://img.shields.io/badge/tests-136%20checks-brightgreen) ![npm](https://img.shields.io/npm/v/dsh-spell-check)
 
 一个 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) 插件，像 Chrome 那样给输入框做拼写检查：正在输入的词会边打边查，改错时手不用离开键盘。
 

package/dsh.plugin.json

@@ -1,6 +1,6 @@
 {
   "id": "spell-check",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "src/index.js",
   "description": "Chrome-style local spell check for the dsh composer",
   "engines": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-spell-check",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Chrome-style spell check for the dsh composer: the misspelled word under the caret gets a suggestion strip, and Tab accepts it. Local only — no network, no LLM, no telemetry.",
   "icon": "assets/icon.png",
   "type": "module",

package/scripts/test-client.mjs

@@ -62,18 +62,30 @@ const fakeElement = (tag) => {
     getAttribute(key) {
       return this.attributes[key] ?? null
     },
-    // The underliner draws on a canvas; the stub only has to not throw.
-    getContext: () => ({
-      setTransform() {},
-      clearRect() {},
-      beginPath() {},
-      moveTo() {},
-      quadraticCurveTo() {},
-      stroke() {},
-      strokeStyle: '',
-      lineWidth: 0,
-      lineCap: '',
-    }),
+    // The underliner draws on a canvas; record the calls so a test can prove a
+    // repaint happened (the stale-underline bug was a repaint that never ran).
+    getContext() {
+      if (!this.__ctx) {
+        this.__draws = { clear: 0, stroke: 0 }
+        const draws = this.__draws
+        this.__ctx = {
+          setTransform() {},
+          clearRect() {
+            draws.clear += 1
+          },
+          beginPath() {},
+          moveTo() {},
+          quadraticCurveTo() {},
+          stroke() {
+            draws.stroke += 1
+          },
+          strokeStyle: '',
+          lineWidth: 0,
+          lineCap: '',
+        }
+      }
+      return this.__ctx
+    },
     addEventListener() {},
     removeEventListener() {},
     contains() {
@@ -92,18 +104,43 @@ const fakeElement = (tag) => {
   return node
 }
 
-globalThis.Node = class Node {}
+globalThis.Node = class Node {}
 globalThis.NodeFilter = { SHOW_TEXT: 4 }
 globalThis.Element = class Element {
   closest() {
     return null
   }
 }
+
+// Observers the underliner uses to repaint when the DOM changes without a
+// keyboard event. The stubs capture the callback so a test can fire it by hand.
+const createdCanvases = []
+let queryResult = null
+let mutationCallback = null
+const intervals = []
+globalThis.MutationObserver = class {
+  constructor(callback) {
+    mutationCallback = callback
+  }
+  observe() {}
+  disconnect() {
+    mutationCallback = null
+  }
+}
+globalThis.ResizeObserver = class {
+  observe() {}
+  disconnect() {}
+}
+
 globalThis.document = {
   head: { appendChild: (node) => styles.push(node) },
   body: { appendChild: (node) => { node.parentNode = { body: true } } },
-  createElement: fakeElement,
-  createTreeWalker: () => ({ nextNode: () => null }),
+  createElement: (tag) => {
+    const node = fakeElement(tag)
+    if (tag === 'canvas') createdCanvases.push(node)
+    return node
+  },
+  createTreeWalker: () => ({ nextNode: () => null }),
   createRange: () => ({
     setStart() {},
     setEnd() {},
@@ -113,7 +150,7 @@ globalThis.document = {
     toString: () => '',
   }),
   getElementById: () => null,
-  querySelector: () => null,
+  querySelector: () => queryResult,
   querySelectorAll: () => [],
   addEventListener: (type) => listeners.push(type),
   removeEventListener: (type) => {
@@ -130,6 +167,11 @@ globalThis.window = {
     return 1
   },
   clearTimeout: () => {},
+  setInterval: (fn, ms) => {
+    intervals.push({ fn, ms })
+    return intervals.length
+  },
+  clearInterval: () => {},
   addEventListener: (type) => listeners.push('win:' + type),
   removeEventListener: (type) => {
     const index = listeners.indexOf('win:' + type)
@@ -300,6 +342,55 @@ check(
 )
 check('detach releases the window slot', globalThis.window.__dshSpellCheck === undefined)
 
+/* --- the stale-underline regression ----------------------------------- */
+
+// The reported bug: after pressing Enter to send, the blue underline stayed
+// floating in mid-air over the now-empty composer, and only vanished when a
+// screenshot hotkey caused an unrelated focus/resize repaint. Root cause: the
+// full-window canvas was repainted ONLY by keyboard/selection events, and a
+// programmatic draft-clear that moves focus out of the editor fires none of
+// them. These checks prove the canvas now repaints from the DOM itself.
+
+const fakeBox = { top: 100, left: 120, width: 600, height: 40 }
+const fakeEditor = {
+  textContent: 'theh',
+  getBoundingClientRect: () => fakeBox,
+}
+queryResult = fakeEditor
+
+const underliner = moduleExports.createUnderliner()
+const underlineCanvas = createdCanvases[createdCanvases.length - 1]
+const releaseUnderline = underliner.attach()
+
+check('underliner paints once on attach', underlineCanvas.__draws.clear === 1, String(underlineCanvas.__draws.clear))
+check('underliner watches the editor DOM', mutationCallback !== null)
+check('underliner exposes observe', typeof underliner.observe === 'function')
+
+// Path A — the actual bug: the draft is cleared programmatically (send) and NO
+// keyboard or selection event fires. The MutationObserver must still repaint.
+fakeEditor.textContent = ''
+mutationCallback()
+check(
+  'a programmatic clear repaints with no keyboard event',
+  underlineCanvas.__draws.clear === 2,
+  String(underlineCanvas.__draws.clear),
+)
+
+// Path B — the composer shrank/moved after send (the "mid-air" geometry). The
+// self-heal tick must notice the box changed and repaint even with no mutation.
+fakeBox.top = 40
+const heal = intervals[intervals.length - 1].fn
+heal()
+check('self-heal repaints when the editor box moves', underlineCanvas.__draws.clear === 3, String(underlineCanvas.__draws.clear))
+
+// Path C — heal is idempotent: an unchanged editor must not repaint every tick.
+heal()
+check('self-heal is a no-op when nothing changed', underlineCanvas.__draws.clear === 3, String(underlineCanvas.__draws.clear))
+
+releaseUnderline()
+check('detach disconnects the DOM observer', mutationCallback === null)
+queryResult = null
+
 /* --- unmount ---------------------------------------------------------- */
 
 for (const cleanup of effectCleanups) cleanup()

package/src/client.js

@@ -1420,6 +1420,64 @@ function createEngine(words, typoMap = TYPO_MAP) {
       canvas.className = "sp-underline";
       canvas.setAttribute("aria-hidden", "true");
       let timer = null;
+      // The canvas is fixed and full-window, and every mark is painted at an
+      // absolute viewport coordinate. That means it is only correct at the
+      // instant it is painted: the moment the editor's text or geometry changes
+      // without a repaint, the old marks hang in the air like an imprint.
+      //
+      // Keyboard and selection events are NOT enough to keep it correct. Sending
+      // a message clears the draft programmatically and usually moves focus out
+      // of the composer, so no `keyup`/`selectionchange` fires a repaint — the
+      // exact "underline stays after I press Enter" bug. These observers watch
+      // the DOM and the box directly, so a clear or a resize repaints regardless
+      // of where focus went.
+      let mutationObserver = null;
+      let resizeObserver = null;
+      let observedEditor = null;
+      let lastSignature = "";
+      let healTimer = null;
+
+      const EDITOR_SELECTOR = '[data-lexical-editor="true"][contenteditable="true"]';
+
+      /** A cheap fingerprint of "what the canvas should currently show". */
+      function signature(editor) {
+        if (editor === null || editor === undefined) return "";
+        let rect = null;
+        try {
+          rect = editor.getBoundingClientRect();
+        } catch {
+          rect = null;
+        }
+        const box = rect
+          ? Math.round(rect.left) + "," + Math.round(rect.top) + "," + Math.round(rect.width) + "," + Math.round(rect.height)
+          : "0";
+        // Length, not the whole string: a clear (→0), an edit, a remount or a
+        // resize all change it, and it stays O(1) to compare on every heal tick.
+        return (editor.textContent ?? "").length + ":" + box;
+      }
+
+      /** Keep the observers pointed at the live editor, even across remounts. */
+      function observe(editor) {
+        if (editor === observedEditor) return;
+        observedEditor = editor;
+        if (mutationObserver !== null) {
+          mutationObserver.disconnect();
+          mutationObserver = null;
+        }
+        if (resizeObserver !== null) {
+          resizeObserver.disconnect();
+          resizeObserver = null;
+        }
+        if (editor === null || editor === undefined) return;
+        if (typeof MutationObserver !== "undefined") {
+          mutationObserver = new MutationObserver(() => schedule(50));
+          mutationObserver.observe(editor, { childList: true, characterData: true, subtree: true });
+        }
+        if (typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(() => schedule(50));
+          resizeObserver.observe(editor);
+        }
+      }
 
       function ensure() {
         if (canvas.parentNode === null) document.body.appendChild(canvas);
@@ -1451,7 +1509,9 @@ function createEngine(words, typoMap = TYPO_MAP) {
 
       /** Repaint every misspelled word currently laid out in the editor. */
       function paint() {
-        const editor = document.querySelector('[data-lexical-editor="true"][contenteditable="true"]');
+        const editor = document.querySelector(EDITOR_SELECTOR);
+        observe(editor);
+        lastSignature = signature(editor);
         const ratio = ensure();
         const context = canvas.getContext("2d");
         if (context === null) return;
@@ -1525,14 +1585,39 @@ function createEngine(words, typoMap = TYPO_MAP) {
         timer = window.setTimeout(paint, delay);
       }
 
+      /**
+       * Safety net for any change no event announced.
+       *
+       * The observers above catch the common cases immediately; this catches the
+       * rest — an editor remounted onto a new node, a programmatic clear that
+       * raced focus, a layout shift — by comparing a cheap fingerprint and
+       * repainting only when it actually changed. Without it, a single missed
+       * event left a permanent imprint until the next unrelated repaint.
+       */
+      function heal() {
+        const editor = document.querySelector(EDITOR_SELECTOR);
+        if (signature(editor) !== lastSignature) paint();
+      }
+
       return {
         schedule,
         paint,
+        observe,
         attach() {
           ensure();
           schedule(0);
+          if (typeof window.setInterval === "function") {
+            healTimer = window.setInterval(heal, 400);
+          }
           return () => {
             window.clearTimeout(timer);
+            if (healTimer !== null && typeof window.clearInterval === "function") {
+              window.clearInterval(healTimer);
+              healTimer = null;
+            }
+            if (mutationObserver !== null) mutationObserver.disconnect();
+            if (resizeObserver !== null) resizeObserver.disconnect();
+            observedEditor = null;
             canvas.remove();
           };
         },
@@ -1626,6 +1711,7 @@ function createEngine(words, typoMap = TYPO_MAP) {
         // The underlines follow every keystroke; the strip follows only the
         // word under the caret.
         silenceNativeSpellcheck(editor);
+        underliner.observe(editor);
         underliner.schedule();
         const at = tokenAtCaret(editor);
         if (at === null) {
@@ -1985,6 +2071,11 @@ function createEngine(words, typoMap = TYPO_MAP) {
       }
 
       function onViewportChange() {
+        // The underline canvas is fixed and full-window with marks at absolute
+        // viewport coordinates, so a scroll or resize detaches every mark from
+        // its word until it is repainted. Repaint unconditionally, not only when
+        // the strip happens to be visible.
+        underliner.schedule();
         if (visible) position();
       }
 
@@ -2229,6 +2320,7 @@ function createEngine(words, typoMap = TYPO_MAP) {
     // Exported for the test harness only; never read by dsh.
     exports.engine = ENGINE;
     exports.createController = createController;
+    exports.createUnderliner = createUnderliner;
 
     return module.exports;
   },