@bobfrankston/rmfmail 1.0.677 → 1.0.679

package/client/compose/spellcheck.ts

@@ -0,0 +1,383 @@
+/**
+ * Live 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 — the comment claims it leaves
+ * defaults for spell-suggest menus, 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.
+ *
+ * Two layers:
+ *   1. Live decoration — words that nspell flags get wrapped in a
+ *      `<span data-mailx-spellerror="1">` while editing. CSS gives them
+ *      a wavy red underline (text-decoration: underline wavy #d33). The
+ *      markers are stripped at serialization time so they never reach
+ *      the sent message or the saved draft.
+ *   2. Right-click — clicking on a marker shows our own popup with
+ *      suggestions plus "Add to dictionary" / "Ignore (this session)".
+ *
+ * Decoration runs:
+ *   - Once after the editor inits + dict loads (initial scan of pre-
+ *     populated quote / signature, though we skip blockquote content).
+ *   - Debounced after every input (~500 ms idle).
+ *   - After setContent (paste, reply-quote insertion, …).
+ *
+ * The decoration walker:
+ *   - Skips `<blockquote>` (the quoted reply — not the user's words),
+ *     `<code>`, `<pre>`, `<a>` (URLs aren't natural-language words),
+ *     and content inside any existing marker (so re-scans don't double-
+ *     wrap).
+ *   - Uses TinyMCE's `undoManager.ignore` + selection bookmarks so the
+ *     decoration mutations don't pollute undo and don't move the caret.
+ *
+ * Dictionary persistence:
+ *   - User additions: `localStorage["mailx-user-dict"]` (a JSON array).
+ *   - "Ignore this session": in-memory only via `nspell.add()`.
+ */
+// @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";
+const MARKER_ATTR = "data-mailx-spellerror";
+const DECORATE_DEBOUNCE_MS = 500;
+const MIN_WORD_LEN = 3;
+const SKIP_TAGS = new Set(["BLOCKQUOTE", "CODE", "PRE", "A", "SCRIPT", "STYLE", "KBD", "SAMP", "VAR"]);
+
+let spellPromise: Promise<NSpell> | null = null;
+async function getSpell(): Promise<NSpell> {
+    if (spellPromise) return spellPromise;
+    spellPromise = (async () => {
+        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 });
+        try {
+            const raw = localStorage.getItem(USER_DICT_KEY);
+            if (raw) for (const w of JSON.parse(raw) as string[]) sp.add(w);
+        } catch { /* corrupt 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 { /* */ }
+    sp.add(word);
+}
+
+// ── Live decoration ───────────────────────────────────────────────
+
+/** Walk the editor body, wrap newly-misspelled words, unwrap markers
+ *  that are now correct. Mutations are wrapped in undoManager.ignore so
+ *  they don't pollute undo history; selection is preserved via a
+ *  TinyMCE bookmark. */
+function decorate(editor: any, sp: NSpell): void {
+    const body: HTMLElement | null = editor.getBody?.();
+    const doc: Document | null = editor.getDoc?.();
+    if (!body || !doc) return;
+
+    // Don't fight active typing — if the caret is INSIDE a current
+    // misspelling marker, the user is mid-correction. Let them finish.
+    // We'll re-scan after the debounce on their next pause.
+    const sel = doc.getSelection();
+    if (sel && sel.rangeCount > 0) {
+        const focus = sel.focusNode as Node | null;
+        let p: Node | null = focus;
+        while (p && p !== body) {
+            if (p.nodeType === Node.ELEMENT_NODE && (p as Element).hasAttribute?.(MARKER_ATTR)) {
+                // Cursor inside a marker — skip this pass; re-decorate
+                // when they next stop typing.
+                return;
+            }
+            p = p.parentNode;
+        }
+    }
+
+    const bookmark = editor.selection?.getBookmark?.(2);
+    try {
+        editor.undoManager?.ignore?.(() => {
+            // 1. Unwrap any existing markers — we'll re-wrap fresh based
+            //    on the current content. Cheaper than incremental update
+            //    and avoids stale markers if the user fixed a word
+            //    without going through our menu (just retyped it).
+            const old = body.querySelectorAll(`span[${MARKER_ATTR}]`);
+            for (const m of old) {
+                const parent = m.parentNode;
+                if (!parent) continue;
+                while (m.firstChild) parent.insertBefore(m.firstChild, m);
+                parent.removeChild(m);
+            }
+            // Merge text nodes that were split by the now-removed spans.
+            body.normalize();
+
+            // 2. Walk text nodes and collect words to wrap.
+            const walker = doc.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
+                acceptNode(node) {
+                    let p: Node | null = node.parentNode;
+                    while (p && p !== body) {
+                        if (p.nodeType === Node.ELEMENT_NODE && SKIP_TAGS.has((p as Element).tagName)) {
+                            return NodeFilter.FILTER_REJECT;
+                        }
+                        p = p.parentNode;
+                    }
+                    return NodeFilter.FILTER_ACCEPT;
+                },
+            });
+            type Hit = { node: Text; start: number; end: number };
+            const hits: Hit[] = [];
+            let n: Node | null = walker.nextNode();
+            // Letter / digit / apostrophe / hyphen — tokenize words via
+            // Unicode-aware regex so we don't false-flag accented words.
+            const WORD_RE = /[\p{L}][\p{L}'’\-]*/gu;
+            while (n) {
+                const tn = n as Text;
+                const text = tn.data;
+                let m: RegExpExecArray | null;
+                WORD_RE.lastIndex = 0;
+                while ((m = WORD_RE.exec(text)) !== null) {
+                    const word = m[0];
+                    if (word.length < MIN_WORD_LEN) continue;
+                    if (sp.correct(word)) continue;
+                    hits.push({ node: tn, start: m.index, end: m.index + word.length });
+                }
+                n = walker.nextNode();
+            }
+
+            // 3. Wrap hits in reverse order — wrapping a span splits the
+            //    text node, which would invalidate earlier offsets. Going
+            //    right-to-left keeps the not-yet-touched offsets valid.
+            hits.reverse();
+            for (const h of hits) {
+                const range = doc.createRange();
+                range.setStart(h.node, h.start);
+                range.setEnd(h.node, h.end);
+                const span = doc.createElement("span");
+                span.setAttribute(MARKER_ATTR, "1");
+                try { range.surroundContents(span); }
+                catch { /* range spans a node boundary — rare; skip */ }
+            }
+        });
+    } finally {
+        if (bookmark) try { editor.selection?.moveToBookmark?.(bookmark); } catch { /* */ }
+    }
+}
+
+/** Inject the wavy-red CSS into the editor iframe. */
+function installDecorationStyle(editor: any): void {
+    const doc: Document | null = editor.getDoc?.();
+    if (!doc) return;
+    if (doc.getElementById("mailx-spell-style")) return;
+    const style = doc.createElement("style");
+    style.id = "mailx-spell-style";
+    style.textContent = `
+        span[${MARKER_ATTR}] {
+            text-decoration: underline wavy #d33;
+            text-decoration-skip-ink: none;
+            text-underline-offset: 2px;
+            /* No background — keeps the styling subtle, like a native
+             * spell underline, not a Find-highlight. */
+            background: transparent;
+        }
+    `;
+    doc.head.appendChild(style);
+}
+
+/** Strip decoration markers from serialized output. TinyMCE fires
+ *  attribute filters during getContent / draft-save; this filter
+ *  unwraps the span so the saved/sent HTML carries only the text. */
+function installSerializerFilter(editor: any): void {
+    if ((editor as any).__mailxSpellSerializerWired) return;
+    (editor as any).__mailxSpellSerializerWired = true;
+    try {
+        editor.serializer.addAttributeFilter(MARKER_ATTR, (nodes: any[]) => {
+            for (const node of nodes) {
+                // TinyMCE's html-node API: `unwrap()` replaces the node
+                // with its children. Exactly what we want — keep the
+                // text, drop the span.
+                if (typeof node.unwrap === "function") node.unwrap();
+            }
+        });
+    } catch (e) {
+        console.warn("[spellcheck] serializer filter setup failed:", e);
+    }
+}
+
+// ── Context menu ──────────────────────────────────────────────────
+
+function showSuggestionsMenu(
+    parentDoc: Document, x: number, y: number,
+    items: Array<{ label: string; action: () => void; emphasized?: boolean; separator?: boolean }>,
+): void {
+    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: 180px;
+        max-width: 320px;
+    `;
+    for (const it of items) {
+        if (it.separator) {
+            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);
+    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`;
+    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 a misspelling marker span with the correction. Done via
+ *  range-based selection + insertText so TinyMCE's undo stack and
+ *  dirty-tracking pick it up properly. */
+function replaceMarker(editor: any, marker: HTMLElement, replacement: string): void {
+    const doc: Document = editor.getDoc();
+    const range = doc.createRange();
+    range.selectNode(marker);
+    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));
+    }
+}
+
+// ── Public entry point ────────────────────────────────────────────
+
+/** Wire the spell-check into a TinyMCE editor instance. Idempotent. */
+export function wireSpellcheck(editor: any): void {
+    if ((editor as any).__mailxSpellWired) return;
+    (editor as any).__mailxSpellWired = true;
+
+    let sp: NSpell | null = null;
+    let decorateTimer: ReturnType<typeof setTimeout> | null = null;
+    const scheduleDecorate = (): void => {
+        if (!sp) return;
+        if (decorateTimer) clearTimeout(decorateTimer);
+        decorateTimer = setTimeout(() => {
+            decorateTimer = null;
+            if (sp) decorate(editor, sp);
+        }, DECORATE_DEBOUNCE_MS);
+    };
+
+    // Kick off the dictionary load. First decoration runs as soon as
+    // it resolves; subsequent runs are triggered by editor events.
+    getSpell().then((loaded) => {
+        sp = loaded;
+        installDecorationStyle(editor);
+        installSerializerFilter(editor);
+        decorate(editor, loaded);
+    }).catch((err) => {
+        console.error("[spellcheck] dict load failed:", err);
+    });
+
+    // Re-decorate on edits / paste / content swap. `nodechange` covers
+    // most of these; `input` catches typing in finer-grained events on
+    // some TinyMCE versions.
+    editor.on("input nodechange setcontent paste keyup", scheduleDecorate);
+
+    // Right-click handler. If the click landed on a marker span, show
+    // suggestions; otherwise let the default menu (WebView2's) fire.
+    const iframeDoc: Document = editor.getDoc();
+    iframeDoc.addEventListener("contextmenu", (ev: Event) => {
+        const e = ev as MouseEvent;
+        const target = e.target as HTMLElement | null;
+        if (!target) return;
+        const marker = target.closest?.(`span[${MARKER_ATTR}]`) as HTMLElement | null;
+        if (!marker) return; // not on a misspelled word — default menu fires
+        const word = marker.textContent || "";
+        if (!word || !sp) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const sugs: string[] = sp.suggest(word).slice(0, 7);
+        const iframeEl = editor.iframeElement as HTMLIFrameElement | undefined;
+        const iframeRect = iframeEl ? iframeEl.getBoundingClientRect() : { left: 0, top: 0 };
+        const items: Array<{ label: string; action: () => void; emphasized?: boolean; separator?: boolean }> = [];
+        if (sugs.length === 0) {
+            items.push({ label: "(no suggestions)", action: () => { /* */ } });
+        } else {
+            for (const s of sugs) {
+                items.push({
+                    label: s,
+                    emphasized: true,
+                    action: () => {
+                        replaceMarker(editor, marker, s);
+                        // Re-decorate so the replacement is checked too.
+                        scheduleDecorate();
+                    },
+                });
+            }
+        }
+        items.push({ label: "", action: () => { /* */ }, separator: true });
+        items.push({
+            label: `Add "${word}" to dictionary`,
+            action: () => { if (sp) addToUserDict(word, sp); scheduleDecorate(); },
+        });
+        items.push({
+            label: "Ignore (this session)",
+            action: () => { if (sp) sp.add(word); scheduleDecorate(); },
+        });
+        showSuggestionsMenu(document, iframeRect.left + e.clientX, iframeRect.top + e.clientY, items);
+    }, true);
+}

package/client/lib/dict/en.aff

@@ -0,0 +1,205 @@
+SET UTF-8
+TRY esianrtolcdugmphbyfvkwzESIANRTOLCDUGMPHBYFVKWZ'
+ICONV 1
+ICONV ’ '
+NOSUGGEST !
+
+# ordinal numbers
+COMPOUNDMIN 1
+# only in compounds: 1th, 2th, 3th
+ONLYINCOMPOUND c
+# compound rules:
+# 1. [0-9]*1[0-9]th (10th, 11th, 12th, 56714th, etc.)
+# 2. [0-9]*[02-9](1st|2nd|3rd|[4-9]th) (21st, 22nd, 123rd, 1234th, etc.)
+COMPOUNDRULE 2
+COMPOUNDRULE n*1t
+COMPOUNDRULE n*mp
+WORDCHARS 0123456789
+
+PFX A Y 1
+PFX A   0     re         .
+
+PFX I Y 1
+PFX I   0     in         .
+
+PFX U Y 1
+PFX U   0     un         .
+
+PFX C Y 1
+PFX C   0     de          .
+
+PFX E Y 1
+PFX E   0     dis         .
+
+PFX F Y 1
+PFX F   0     con         .
+
+PFX K Y 1
+PFX K   0     pro         .
+
+SFX V N 2
+SFX V   e     ive        e
+SFX V   0     ive        [^e]
+
+SFX N Y 3
+SFX N   e     ion        e
+SFX N   y     ication    y
+SFX N   0     en         [^ey]
+
+SFX X Y 3
+SFX X   e     ions       e
+SFX X   y     ications   y
+SFX X   0     ens        [^ey]
+
+SFX H N 2
+SFX H   y     ieth       y
+SFX H   0     th         [^y]
+
+SFX Y Y 1
+SFX Y   0     ly         .
+
+SFX G Y 2
+SFX G   e     ing        e
+SFX G   0     ing        [^e]
+
+SFX J Y 2
+SFX J   e     ings       e
+SFX J   0     ings       [^e]
+
+SFX D Y 4
+SFX D   0     d          e
+SFX D   y     ied        [^aeiou]y
+SFX D   0     ed         [^ey]
+SFX D   0     ed         [aeiou]y
+
+SFX T N 4
+SFX T   0     st         e
+SFX T   y     iest       [^aeiou]y
+SFX T   0     est        [aeiou]y
+SFX T   0     est        [^ey]
+
+SFX R Y 4
+SFX R   0     r          e
+SFX R   y     ier        [^aeiou]y
+SFX R   0     er         [aeiou]y
+SFX R   0     er         [^ey]
+
+SFX Z Y 4
+SFX Z   0     rs         e
+SFX Z   y     iers       [^aeiou]y
+SFX Z   0     ers        [aeiou]y
+SFX Z   0     ers        [^ey]
+
+SFX S Y 4
+SFX S   y     ies        [^aeiou]y
+SFX S   0     s          [aeiou]y
+SFX S   0     es         [sxzh]
+SFX S   0     s          [^sxzhy]
+
+SFX P Y 3
+SFX P   y     iness      [^aeiou]y
+SFX P   0     ness       [aeiou]y
+SFX P   0     ness       [^y]
+
+SFX M Y 1
+SFX M   0     's         .
+
+SFX B Y 3
+SFX B   0     able       [^aeiou]
+SFX B   0     able       ee
+SFX B   e     able       [^aeiou]e
+
+SFX L Y 1
+SFX L   0     ment       .
+
+REP 90
+REP a ei
+REP ei a
+REP a ey
+REP ey a
+REP ai ie
+REP ie ai
+REP alot a_lot
+REP are air
+REP are ear
+REP are eir
+REP air are
+REP air ere
+REP ere air
+REP ere ear
+REP ere eir
+REP ear are
+REP ear air
+REP ear ere
+REP eir are
+REP eir ere
+REP ch te
+REP te ch
+REP ch ti
+REP ti ch
+REP ch tu
+REP tu ch
+REP ch s
+REP s ch
+REP ch k
+REP k ch
+REP f ph
+REP ph f
+REP gh f
+REP f gh
+REP i igh
+REP igh i
+REP i uy
+REP uy i
+REP i ee
+REP ee i
+REP j di
+REP di j
+REP j gg
+REP gg j
+REP j ge
+REP ge j
+REP s ti
+REP ti s
+REP s ci
+REP ci s
+REP k cc
+REP cc k
+REP k qu
+REP qu k
+REP kw qu
+REP o eau
+REP eau o
+REP o ew
+REP ew o
+REP oo ew
+REP ew oo
+REP ew ui
+REP ui ew
+REP oo ui
+REP ui oo
+REP ew u
+REP u ew
+REP oo u
+REP u oo
+REP u oe
+REP oe u
+REP u ieu
+REP ieu u
+REP ue ew
+REP ew ue
+REP uff ough
+REP oo ieu
+REP ieu oo
+REP ier ear
+REP ear ier
+REP ear air
+REP air ear
+REP w qu
+REP qu w
+REP z ss
+REP ss z
+REP shun tion
+REP shun sion
+REP shun cion
+REP size cise