@bobfrankston/rmfmail 1.0.676 → 1.0.678

package/client/compose/spellcheck.js

@@ -0,0 +1,296 @@
+/**
+ * Right-click spell-check for the TinyMCE compose editor.
+ *
+ * Why this exists: WebView2's built-in spell checker isn't reliably
+ * enabled on our msger-hosted compose iframe (see msger main.rs around
+ * AreDefaultContextMenusEnabled — settings are left at defaults but
+ * `IsSpellcheckEnabled` is never explicitly set, and the default varies
+ * by WebView2 runtime). Rather than depend on the host, we ship a JS
+ * spellchecker (`nspell`) + the standard `dictionary-en` Hunspell files.
+ *
+ * Scope (intentionally minimal — Bob 2026-05-11):
+ * - On right-click inside the editor body, find the word at the click.
+ * - If nspell flags it, show a small popup with suggestions plus an
+ *   "Add to mailx dictionary" item.
+ * - Custom dictionary persists in localStorage under
+ *   `mailx-user-dict`; added words are also fed to nspell.add() so the
+ *   same session stops flagging them immediately.
+ * - No live red-underline decoration — that would mutate DOM the user
+ *   is actively typing into and adds significant complexity. The
+ *   right-click flow gives the suggestions experience without the
+ *   editing-experience tradeoffs.
+ *
+ * Loads nspell + the ~1 MB dictionary lazily on first right-click in
+ * an editor session, so picking TinyMCE in Settings doesn't pay this
+ * cost up front.
+ */
+// @ts-expect-error — nspell ships no type defs. Treated as `any`; the
+//   surface we use (`new NSpell({aff, dic})`, `.correct`, `.suggest`,
+//   `.add`) is small and stable.
+import NSpell from "nspell";
+const USER_DICT_KEY = "mailx-user-dict";
+let spellPromise = null;
+async function getSpell() {
+    if (spellPromise)
+        return spellPromise;
+    spellPromise = (async () => {
+        // Paths are relative to compose.html. msger serves files from
+        // contentDir=client/, so `../lib/dict/...` lands in the right
+        // place under both msger.localhost and Android file:// schemes.
+        const [affRes, dicRes] = await Promise.all([
+            fetch("../lib/dict/en.aff"),
+            fetch("../lib/dict/en.dic"),
+        ]);
+        if (!affRes.ok || !dicRes.ok) {
+            throw new Error(`spellcheck: dict fetch failed (aff=${affRes.status} dic=${dicRes.status})`);
+        }
+        const [aff, dic] = await Promise.all([affRes.text(), dicRes.text()]);
+        const sp = new NSpell({ aff, dic });
+        // Seed with user dictionary.
+        try {
+            const raw = localStorage.getItem(USER_DICT_KEY);
+            if (raw)
+                for (const w of JSON.parse(raw))
+                    sp.add(w);
+        }
+        catch { /* corrupt localStorage entry — start clean */ }
+        return sp;
+    })();
+    return spellPromise;
+}
+function addToUserDict(word, sp) {
+    try {
+        const raw = localStorage.getItem(USER_DICT_KEY);
+        const arr = raw ? JSON.parse(raw) : [];
+        if (arr.includes(word))
+            return;
+        arr.push(word);
+        localStorage.setItem(USER_DICT_KEY, JSON.stringify(arr));
+    }
+    catch { /* localStorage write failed — at least the in-memory add wins for this session */ }
+    sp.add(word);
+}
+/** Find the word at a given (x,y) point inside a document. Uses
+ *  `caretPositionFromPoint` (Firefox) or `caretRangeFromPoint`
+ *  (WebKit/Blink). Returns the word string + a Range covering it,
+ *  or null if the click was on whitespace / punctuation / outside text. */
+function wordAtPoint(doc, x, y) {
+    const anyDoc = doc;
+    let caretNode = null;
+    let caretOffset = 0;
+    if (typeof anyDoc.caretRangeFromPoint === "function") {
+        const r = anyDoc.caretRangeFromPoint(x, y);
+        if (!r)
+            return null;
+        caretNode = r.startContainer;
+        caretOffset = r.startOffset;
+    }
+    else if (typeof anyDoc.caretPositionFromPoint === "function") {
+        const p = anyDoc.caretPositionFromPoint(x, y);
+        if (!p)
+            return null;
+        caretNode = p.offsetNode;
+        caretOffset = p.offset;
+    }
+    else {
+        return null;
+    }
+    if (!caretNode || caretNode.nodeType !== Node.TEXT_NODE)
+        return null;
+    const text = caretNode.data;
+    // Expand left and right from caret to a word boundary. Hunspell-ish
+    // word characters: letters, digits, apostrophe, hyphen-in-word.
+    const isWordChar = (ch) => /[\p{L}\p{N}'’\-]/u.test(ch);
+    let start = caretOffset;
+    let end = caretOffset;
+    while (start > 0 && isWordChar(text[start - 1]))
+        start--;
+    while (end < text.length && isWordChar(text[end]))
+        end++;
+    if (start === end)
+        return null;
+    // Strip leading/trailing punctuation a word boundary regex might
+    // have included (apostrophe at the edge: "'hello" → "hello").
+    let word = text.slice(start, end);
+    while (word.length && /^['’\-]/.test(word)) {
+        word = word.slice(1);
+        start++;
+    }
+    while (word.length && /['’\-]$/.test(word)) {
+        word = word.slice(0, -1);
+        end--;
+    }
+    if (!word)
+        return null;
+    const range = doc.createRange();
+    range.setStart(caretNode, start);
+    range.setEnd(caretNode, end);
+    return { word, range };
+}
+/** Show a small floating menu at (x, y) in the parent document
+ *  (NOT inside the editor iframe — the iframe clips to its own bounds,
+ *  and a positioned menu can extend past the iframe edge). Returns
+ *  a remove() function. */
+function showSuggestionsMenu(parentDoc, x, y, items) {
+    // Close any prior instance.
+    parentDoc.getElementById("mailx-spell-menu")?.remove();
+    const menu = parentDoc.createElement("div");
+    menu.id = "mailx-spell-menu";
+    menu.style.cssText = `
+        position: fixed;
+        left: ${x}px; top: ${y}px;
+        z-index: 10000;
+        background: var(--color-bg, #fff);
+        color: var(--color-text, #222);
+        border: 1px solid var(--color-border, #ccc);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+        padding: 4px 0;
+        font: 13px system-ui, sans-serif;
+        min-width: 160px;
+        max-width: 320px;
+    `;
+    for (const it of items) {
+        if (it.label === "---") {
+            const sep = parentDoc.createElement("div");
+            sep.style.cssText = "border-top:1px solid var(--color-border,#ddd); margin: 4px 0;";
+            menu.appendChild(sep);
+            continue;
+        }
+        const btn = parentDoc.createElement("button");
+        btn.type = "button";
+        btn.textContent = it.label;
+        btn.style.cssText = `
+            display: block; width: 100%; text-align: left;
+            padding: 5px 12px; border: none; background: none;
+            color: inherit; cursor: pointer; font: inherit;
+            ${it.emphasized ? "font-weight: 600;" : ""}
+        `;
+        btn.addEventListener("mouseenter", () => { btn.style.background = "var(--color-bg-hover, #eef)"; });
+        btn.addEventListener("mouseleave", () => { btn.style.background = "none"; });
+        btn.addEventListener("click", () => {
+            try {
+                it.action();
+            }
+            finally {
+                menu.remove();
+            }
+        });
+        menu.appendChild(btn);
+    }
+    parentDoc.body.appendChild(menu);
+    // Clamp into viewport if it would overflow.
+    const r = menu.getBoundingClientRect();
+    if (r.right > window.innerWidth)
+        menu.style.left = `${Math.max(8, window.innerWidth - r.width - 8)}px`;
+    if (r.bottom > window.innerHeight)
+        menu.style.top = `${Math.max(8, window.innerHeight - r.height - 8)}px`;
+    // Dismiss on next click anywhere or Esc.
+    const dismiss = (e) => {
+        if (e.type === "keydown" && e.key !== "Escape")
+            return;
+        if (e.type === "mousedown" && menu.contains(e.target))
+            return;
+        menu.remove();
+        parentDoc.removeEventListener("mousedown", dismiss, true);
+        parentDoc.removeEventListener("keydown", dismiss, true);
+    };
+    setTimeout(() => {
+        parentDoc.addEventListener("mousedown", dismiss, true);
+        parentDoc.addEventListener("keydown", dismiss, true);
+    }, 0);
+}
+/** Replace the text covered by `range` with `replacement` via a normal
+ *  Selection edit — TinyMCE observes this through its normal undo /
+ *  dirty-tracking pathway. Document.execCommand("insertText") gives the
+ *  best undo integration; fall back to range mutation if the command
+ *  isn't recognized (older WebViews). */
+function replaceRange(doc, range, replacement) {
+    const sel = doc.getSelection();
+    if (!sel)
+        return;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    try {
+        if (!doc.execCommand("insertText", false, replacement)) {
+            range.deleteContents();
+            range.insertNode(doc.createTextNode(replacement));
+        }
+    }
+    catch {
+        range.deleteContents();
+        range.insertNode(doc.createTextNode(replacement));
+    }
+}
+/** Wire the right-click spell-suggest flow into a TinyMCE editor instance.
+ *  Idempotent (safe to call multiple times — only attaches once). */
+export function wireSpellcheck(editor) {
+    if (editor.__mailxSpellWired)
+        return;
+    editor.__mailxSpellWired = true;
+    const iframeDoc = editor.getDoc?.() || null;
+    if (!iframeDoc)
+        return;
+    iframeDoc.addEventListener("contextmenu", (ev) => {
+        const e = ev;
+        // Translate the iframe-internal point to the parent's viewport
+        // for menu positioning. The iframe element's bounding rect plus
+        // the event's clientX/Y inside the iframe gives parent-relative
+        // coords.
+        const iframeEl = editor.iframeElement;
+        if (!iframeEl)
+            return;
+        const found = wordAtPoint(iframeDoc, e.clientX, e.clientY);
+        if (!found)
+            return; // not on a word — let WebView2 default fire
+        // Lazy-load the dictionary. First right-click on a word in any
+        // editor session triggers the load; subsequent are instant.
+        getSpell().then(sp => {
+            if (sp.correct(found.word))
+                return; // word IS in the dictionary, no menu
+            // Misspelled — suppress default and show suggestions.
+            const sugs = sp.suggest(found.word).slice(0, 7);
+            const iframeRect = iframeEl.getBoundingClientRect();
+            const menuX = iframeRect.left + e.clientX;
+            const menuY = iframeRect.top + e.clientY;
+            const items = [];
+            if (sugs.length === 0) {
+                items.push({ label: "(no suggestions)", action: () => { } });
+            }
+            else {
+                for (const s of sugs) {
+                    items.push({
+                        label: s,
+                        emphasized: true,
+                        action: () => replaceRange(iframeDoc, found.range, s),
+                    });
+                }
+            }
+            items.push({ label: "---", action: () => { } });
+            items.push({
+                label: `Add "${found.word}" to dictionary`,
+                action: () => addToUserDict(found.word, sp),
+            });
+            items.push({
+                label: "Ignore (this session)",
+                action: () => sp.add(found.word),
+            });
+            showSuggestionsMenu(document, menuX, menuY, items);
+        }).catch(err => {
+            // Dict load failed (network / corrupt files). Don't intercept
+            // the menu — let WebView2 default fire. Log so it's debuggable.
+            console.error("[spellcheck] dict load failed:", err);
+            return;
+        });
+        // Preempt the browser default ONLY when we're about to show our
+        // own menu. We don't know synchronously whether the word is
+        // misspelled (the load is async), so we have to commit to either
+        // intercepting or not. Compromise: preempt always when on a
+        // word, then dismiss instantly if the word turned out correct.
+        // For the user's typical case (right-click on text), this means
+        // a brief moment where neither menu shows — acceptable.
+        e.preventDefault();
+        e.stopPropagation();
+    }, true);
+}
+//# sourceMappingURL=spellcheck.js.map

package/client/compose/spellcheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spellcheck.js","sourceRoot":"","sources":["spellcheck.ts"],"names":[],"mappings":"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"}

package/client/compose/spellcheck.ts

@@ -0,0 +1,267 @@
+/**
+ * Right-click spell-check for the TinyMCE compose editor.
+ *
+ * Why this exists: WebView2's built-in spell checker isn't reliably
+ * enabled on our msger-hosted compose iframe (see msger main.rs around
+ * AreDefaultContextMenusEnabled — settings are left at defaults but
+ * `IsSpellcheckEnabled` is never explicitly set, and the default varies
+ * by WebView2 runtime). Rather than depend on the host, we ship a JS
+ * spellchecker (`nspell`) + the standard `dictionary-en` Hunspell files.
+ *
+ * Scope (intentionally minimal — Bob 2026-05-11):
+ * - On right-click inside the editor body, find the word at the click.
+ * - If nspell flags it, show a small popup with suggestions plus an
+ *   "Add to mailx dictionary" item.
+ * - Custom dictionary persists in localStorage under
+ *   `mailx-user-dict`; added words are also fed to nspell.add() so the
+ *   same session stops flagging them immediately.
+ * - No live red-underline decoration — that would mutate DOM the user
+ *   is actively typing into and adds significant complexity. The
+ *   right-click flow gives the suggestions experience without the
+ *   editing-experience tradeoffs.
+ *
+ * Loads nspell + the ~1 MB dictionary lazily on first right-click in
+ * an editor session, so picking TinyMCE in Settings doesn't pay this
+ * cost up front.
+ */
+// @ts-expect-error — nspell ships no type defs. Treated as `any`; the
+//   surface we use (`new NSpell({aff, dic})`, `.correct`, `.suggest`,
+//   `.add`) is small and stable.
+import NSpell from "nspell";
+type NSpell = any;
+
+const USER_DICT_KEY = "mailx-user-dict";
+
+let spellPromise: Promise<NSpell> | null = null;
+async function getSpell(): Promise<NSpell> {
+    if (spellPromise) return spellPromise;
+    spellPromise = (async () => {
+        // Paths are relative to compose.html. msger serves files from
+        // contentDir=client/, so `../lib/dict/...` lands in the right
+        // place under both msger.localhost and Android file:// schemes.
+        const [affRes, dicRes] = await Promise.all([
+            fetch("../lib/dict/en.aff"),
+            fetch("../lib/dict/en.dic"),
+        ]);
+        if (!affRes.ok || !dicRes.ok) {
+            throw new Error(`spellcheck: dict fetch failed (aff=${affRes.status} dic=${dicRes.status})`);
+        }
+        const [aff, dic] = await Promise.all([affRes.text(), dicRes.text()]);
+        const sp = new NSpell({ aff, dic });
+        // Seed with user dictionary.
+        try {
+            const raw = localStorage.getItem(USER_DICT_KEY);
+            if (raw) for (const w of JSON.parse(raw) as string[]) sp.add(w);
+        } catch { /* corrupt localStorage entry — start clean */ }
+        return sp;
+    })();
+    return spellPromise;
+}
+
+function addToUserDict(word: string, sp: NSpell): void {
+    try {
+        const raw = localStorage.getItem(USER_DICT_KEY);
+        const arr = raw ? (JSON.parse(raw) as string[]) : [];
+        if (arr.includes(word)) return;
+        arr.push(word);
+        localStorage.setItem(USER_DICT_KEY, JSON.stringify(arr));
+    } catch { /* localStorage write failed — at least the in-memory add wins for this session */ }
+    sp.add(word);
+}
+
+/** Find the word at a given (x,y) point inside a document. Uses
+ *  `caretPositionFromPoint` (Firefox) or `caretRangeFromPoint`
+ *  (WebKit/Blink). Returns the word string + a Range covering it,
+ *  or null if the click was on whitespace / punctuation / outside text. */
+function wordAtPoint(doc: Document, x: number, y: number): { word: string; range: Range } | null {
+    const anyDoc = doc as any;
+    let caretNode: Node | null = null;
+    let caretOffset = 0;
+    if (typeof anyDoc.caretRangeFromPoint === "function") {
+        const r = anyDoc.caretRangeFromPoint(x, y) as Range | null;
+        if (!r) return null;
+        caretNode = r.startContainer;
+        caretOffset = r.startOffset;
+    } else if (typeof anyDoc.caretPositionFromPoint === "function") {
+        const p = anyDoc.caretPositionFromPoint(x, y);
+        if (!p) return null;
+        caretNode = p.offsetNode;
+        caretOffset = p.offset;
+    } else {
+        return null;
+    }
+    if (!caretNode || caretNode.nodeType !== Node.TEXT_NODE) return null;
+    const text = (caretNode as Text).data;
+    // Expand left and right from caret to a word boundary. Hunspell-ish
+    // word characters: letters, digits, apostrophe, hyphen-in-word.
+    const isWordChar = (ch: string): boolean => /[\p{L}\p{N}'’\-]/u.test(ch);
+    let start = caretOffset;
+    let end = caretOffset;
+    while (start > 0 && isWordChar(text[start - 1])) start--;
+    while (end < text.length && isWordChar(text[end])) end++;
+    if (start === end) return null;
+    // Strip leading/trailing punctuation a word boundary regex might
+    // have included (apostrophe at the edge: "'hello" → "hello").
+    let word = text.slice(start, end);
+    while (word.length && /^['’\-]/.test(word)) { word = word.slice(1); start++; }
+    while (word.length && /['’\-]$/.test(word)) { word = word.slice(0, -1); end--; }
+    if (!word) return null;
+    const range = doc.createRange();
+    range.setStart(caretNode, start);
+    range.setEnd(caretNode, end);
+    return { word, range };
+}
+
+/** Show a small floating menu at (x, y) in the parent document
+ *  (NOT inside the editor iframe — the iframe clips to its own bounds,
+ *  and a positioned menu can extend past the iframe edge). Returns
+ *  a remove() function. */
+function showSuggestionsMenu(parentDoc: Document, x: number, y: number, items: Array<{ label: string; action: () => void; emphasized?: boolean }>): void {
+    // Close any prior instance.
+    parentDoc.getElementById("mailx-spell-menu")?.remove();
+    const menu = parentDoc.createElement("div");
+    menu.id = "mailx-spell-menu";
+    menu.style.cssText = `
+        position: fixed;
+        left: ${x}px; top: ${y}px;
+        z-index: 10000;
+        background: var(--color-bg, #fff);
+        color: var(--color-text, #222);
+        border: 1px solid var(--color-border, #ccc);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+        padding: 4px 0;
+        font: 13px system-ui, sans-serif;
+        min-width: 160px;
+        max-width: 320px;
+    `;
+    for (const it of items) {
+        if (it.label === "---") {
+            const sep = parentDoc.createElement("div");
+            sep.style.cssText = "border-top:1px solid var(--color-border,#ddd); margin: 4px 0;";
+            menu.appendChild(sep);
+            continue;
+        }
+        const btn = parentDoc.createElement("button");
+        btn.type = "button";
+        btn.textContent = it.label;
+        btn.style.cssText = `
+            display: block; width: 100%; text-align: left;
+            padding: 5px 12px; border: none; background: none;
+            color: inherit; cursor: pointer; font: inherit;
+            ${it.emphasized ? "font-weight: 600;" : ""}
+        `;
+        btn.addEventListener("mouseenter", () => { btn.style.background = "var(--color-bg-hover, #eef)"; });
+        btn.addEventListener("mouseleave", () => { btn.style.background = "none"; });
+        btn.addEventListener("click", () => {
+            try { it.action(); } finally { menu.remove(); }
+        });
+        menu.appendChild(btn);
+    }
+    parentDoc.body.appendChild(menu);
+    // Clamp into viewport if it would overflow.
+    const r = menu.getBoundingClientRect();
+    if (r.right > window.innerWidth) menu.style.left = `${Math.max(8, window.innerWidth - r.width - 8)}px`;
+    if (r.bottom > window.innerHeight) menu.style.top  = `${Math.max(8, window.innerHeight - r.height - 8)}px`;
+    // Dismiss on next click anywhere or Esc.
+    const dismiss = (e: Event) => {
+        if (e.type === "keydown" && (e as KeyboardEvent).key !== "Escape") return;
+        if (e.type === "mousedown" && menu.contains(e.target as Node)) return;
+        menu.remove();
+        parentDoc.removeEventListener("mousedown", dismiss, true);
+        parentDoc.removeEventListener("keydown", dismiss, true);
+    };
+    setTimeout(() => {
+        parentDoc.addEventListener("mousedown", dismiss, true);
+        parentDoc.addEventListener("keydown", dismiss, true);
+    }, 0);
+}
+
+/** Replace the text covered by `range` with `replacement` via a normal
+ *  Selection edit — TinyMCE observes this through its normal undo /
+ *  dirty-tracking pathway. Document.execCommand("insertText") gives the
+ *  best undo integration; fall back to range mutation if the command
+ *  isn't recognized (older WebViews). */
+function replaceRange(doc: Document, range: Range, replacement: string): void {
+    const sel = doc.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    try {
+        if (!doc.execCommand("insertText", false, replacement)) {
+            range.deleteContents();
+            range.insertNode(doc.createTextNode(replacement));
+        }
+    } catch {
+        range.deleteContents();
+        range.insertNode(doc.createTextNode(replacement));
+    }
+}
+
+/** Wire the right-click spell-suggest flow into a TinyMCE editor instance.
+ *  Idempotent (safe to call multiple times — only attaches once). */
+export function wireSpellcheck(editor: any): void {
+    if ((editor as any).__mailxSpellWired) return;
+    (editor as any).__mailxSpellWired = true;
+
+    const iframeDoc: Document | null = editor.getDoc?.() || null;
+    if (!iframeDoc) return;
+
+    iframeDoc.addEventListener("contextmenu", (ev: Event) => {
+        const e = ev as MouseEvent;
+        // Translate the iframe-internal point to the parent's viewport
+        // for menu positioning. The iframe element's bounding rect plus
+        // the event's clientX/Y inside the iframe gives parent-relative
+        // coords.
+        const iframeEl = editor.iframeElement as HTMLIFrameElement | undefined;
+        if (!iframeEl) return;
+        const found = wordAtPoint(iframeDoc, e.clientX, e.clientY);
+        if (!found) return; // not on a word — let WebView2 default fire
+        // Lazy-load the dictionary. First right-click on a word in any
+        // editor session triggers the load; subsequent are instant.
+        getSpell().then(sp => {
+            if (sp.correct(found.word)) return; // word IS in the dictionary, no menu
+            // Misspelled — suppress default and show suggestions.
+            const sugs = sp.suggest(found.word).slice(0, 7);
+            const iframeRect = iframeEl.getBoundingClientRect();
+            const menuX = iframeRect.left + e.clientX;
+            const menuY = iframeRect.top + e.clientY;
+            const items: Array<{ label: string; action: () => void; emphasized?: boolean }> = [];
+            if (sugs.length === 0) {
+                items.push({ label: "(no suggestions)", action: () => { /* */ } });
+            } else {
+                for (const s of sugs) {
+                    items.push({
+                        label: s,
+                        emphasized: true,
+                        action: () => replaceRange(iframeDoc, found.range, s),
+                    });
+                }
+            }
+            items.push({ label: "---", action: () => { /* */ } });
+            items.push({
+                label: `Add "${found.word}" to dictionary`,
+                action: () => addToUserDict(found.word, sp),
+            });
+            items.push({
+                label: "Ignore (this session)",
+                action: () => sp.add(found.word),
+            });
+            showSuggestionsMenu(document, menuX, menuY, items);
+        }).catch(err => {
+            // Dict load failed (network / corrupt files). Don't intercept
+            // the menu — let WebView2 default fire. Log so it's debuggable.
+            console.error("[spellcheck] dict load failed:", err);
+            return;
+        });
+        // Preempt the browser default ONLY when we're about to show our
+        // own menu. We don't know synchronously whether the word is
+        // misspelled (the load is async), so we have to commit to either
+        // intercepting or not. Compromise: preempt always when on a
+        // word, then dismiss instantly if the word turned out correct.
+        // For the user's typical case (right-click on text), this means
+        // a brief moment where neither menu shows — acceptable.
+        e.preventDefault();
+        e.stopPropagation();
+    }, true);
+}