@bobfrankston/rmfmail 1.2.259 → 1.2.261

package/client/components/message-viewer.ts

@@ -519,12 +519,188 @@ async function translateAndShow(text: string): Promise<void> {
     }
 }
 
+// ── Search-match highlighting ──
+// Opening a hit from a search should show you WHERE the hit is, not hand you
+// a 40-screen newsletter and wish you luck (Bob 2026-08-15). The terms come
+// from the search box (app.ts calls setSearchHighlightTerms); the marks are
+// painted with the CSS Custom Highlight API, which takes plain Ranges and
+// styles them via ::highlight() WITHOUT touching the DOM. That matters here:
+// the message body is sanitized, sandboxed, sometimes progressively appended,
+// and read back for copy/quote — wrapping matches in <mark> would edit the
+// letter itself and leak into every one of those paths.
+const HIGHLIGHT_NAME = "mailx-find";
+/** Cap on painted ranges. A one-letter term in a megabyte newsletter would
+ *  otherwise build tens of thousands of Ranges on the click path. */
+const HIGHLIGHT_MAX = 2000;
+let searchHighlightTerms: string[] = [];
+
+/** Pull the highlightable words out of a search query. Qualifier values that
+ *  address a header (`subject:`) are kept — they're visible in the message —
+ *  while `from:`/`to:`/`date:`/`has:`/`is:`/`folder:` are search plumbing, not
+ *  body text. `NOT foo` is dropped: it says the word is ABSENT. Quoted phrases
+ *  stay whole. Mirrors the qualifier set parsed in mailx-store's db.ts. */
+export function parseHighlightTerms(query: string): string[] {
+    const parts = (query || "").match(/"[^"]*"|\S+/g) || [];
+    const out: string[] = [];
+    let negate = false;
+    for (const raw of parts) {
+        const part = raw.replace(/^"|"$/g, "");
+        if (/^(AND|OR)$/i.test(part)) continue;
+        if (/^NOT$/i.test(part)) { negate = true; continue; }
+        if (negate) { negate = false; continue; }
+        if (part.startsWith("-")) continue;                       // -term = exclude
+        const q = part.match(/^([a-z]+):(.*)$/i);
+        if (q) {
+            const [, field, value] = q;
+            if (/^subject$/i.test(field) && value) out.push(value.replace(/^"|"$/g, ""));
+            continue;                                              // other qualifiers aren't body text
+        }
+        if (part.length >= 2) out.push(part);
+    }
+    // Longest first: with both "fox" and "foxes" in the query, matching the
+    // longer one first stops the shorter from claiming the same start offset
+    // and leaving a stray tail unhighlighted.
+    return Array.from(new Set(out.map(t => t.toLowerCase()))).sort((a, b) => b.length - a.length);
+}
+
+/** Collect a Range per term occurrence in a document's visible text. */
+function collectHighlightRanges(doc: Document, terms: string[]): Range[] {
+    const ranges: Range[] = [];
+    const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, {
+        acceptNode(node: Node) {
+            const tag = (node.parentElement?.tagName || "").toUpperCase();
+            if (tag === "SCRIPT" || tag === "STYLE" || tag === "NOSCRIPT") return NodeFilter.FILTER_REJECT;
+            return node.nodeValue && node.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        },
+    });
+    for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) {
+        const hay = n.data.toLowerCase();
+        // Track claimed spans so two terms can't double-highlight one stretch.
+        const taken: Array<[number, number]> = [];
+        for (const term of terms) {
+            let from = 0;
+            for (;;) {
+                const at = hay.indexOf(term, from);
+                if (at < 0) break;
+                const end = at + term.length;
+                from = end;
+                if (taken.some(([s, e]) => at < e && end > s)) continue;
+                taken.push([at, end]);
+                const r = doc.createRange();
+                r.setStart(n, at);
+                r.setEnd(n, end);
+                ranges.push(r);
+                if (ranges.length >= HIGHLIGHT_MAX) return ranges;
+            }
+        }
+    }
+    return ranges;
+}
+
+/** Paint (or clear) the highlight inside one preview iframe. Returns the
+ *  match count. No-ops on a host without the Custom Highlight API — the
+ *  message still renders, it just isn't marked up. */
+function applySearchHighlight(iframe: HTMLIFrameElement, scrollToFirst = false): number {
+    const doc = iframe.contentDocument;
+    const win = iframe.contentWindow as any;
+    if (!doc?.body || !win?.CSS?.highlights || typeof win.Highlight !== "function") return 0;
+    try {
+        win.CSS.highlights.delete(HIGHLIGHT_NAME);
+        if (searchHighlightTerms.length === 0) return 0;
+        const ranges = collectHighlightRanges(doc, searchHighlightTerms);
+        if (ranges.length === 0) return 0;
+        win.CSS.highlights.set(HIGHLIGHT_NAME, new win.Highlight(...ranges));
+        // Bring the first hit into view when it's below the fold — the point
+        // of the feature is not having to hunt. Never scroll for a match that
+        // is already visible: yanking a preview the user can already read is
+        // the arrival-jump behavior we removed elsewhere.
+        if (scrollToFirst) {
+            const rect = ranges[0].getBoundingClientRect();
+            const h = doc.documentElement.clientHeight || 0;
+            if (rect.height > 0 && (rect.top < 0 || rect.bottom > h)) {
+                const target = (doc.scrollingElement || doc.documentElement).scrollTop + rect.top - h / 3;
+                (doc.scrollingElement || doc.documentElement).scrollTop = Math.max(0, target);
+            }
+        }
+        return ranges.length;
+    } catch { return 0; }   // a torn-down iframe mid-render — nothing to mark
+}
+
+/** Same paint for the viewer's own chrome (subject line lives outside the
+ *  iframe, and it's the field people search most). */
+function applyHeaderHighlight(): void {
+    const anyWin = window as any;
+    if (!anyWin.CSS?.highlights || typeof anyWin.Highlight !== "function") return;
+    try {
+        anyWin.CSS.highlights.delete(HIGHLIGHT_NAME);
+        const subj = document.querySelector(".mv-subject") as HTMLElement | null;
+        if (!subj || searchHighlightTerms.length === 0) return;
+        const ranges = collectHighlightRangesIn(subj, searchHighlightTerms);
+        if (ranges.length) anyWin.CSS.highlights.set(HIGHLIGHT_NAME, new anyWin.Highlight(...ranges));
+    } catch { /* header not rendered yet */ }
+}
+
+/** collectHighlightRanges scoped to one element of the PARENT document. */
+function collectHighlightRangesIn(root: HTMLElement, terms: string[]): Range[] {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const ranges: Range[] = [];
+    for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) {
+        const hay = n.data.toLowerCase();
+        for (const term of terms) {
+            let from = 0;
+            for (;;) {
+                const at = hay.indexOf(term, from);
+                if (at < 0) break;
+                from = at + term.length;
+                const r = document.createRange();
+                r.setStart(n, at);
+                r.setEnd(n, from);
+                ranges.push(r);
+            }
+        }
+    }
+    return ranges;
+}
+
+/** Set the terms to highlight in the open message (empty = clear). Called by
+ *  app.ts whenever the search box changes or a search tab is restored. */
+export function setSearchHighlightTerms(terms: string[]): void {
+    const next = terms.filter(Boolean).map(t => t.toLowerCase());
+    const same = next.length === searchHighlightTerms.length
+        && next.every((t, i) => t === searchHighlightTerms[i]);
+    if (same) return;
+    searchHighlightTerms = next;
+    applyHeaderHighlight();
+    for (const f of Array.from(document.querySelectorAll("iframe"))) {
+        applySearchHighlight(f as HTMLIFrameElement, true);
+    }
+}
+
+/** Re-paint after content lands (initial render, progressive text append). */
+export function refreshSearchHighlight(iframe: HTMLIFrameElement, scrollToFirst = false): void {
+    if (searchHighlightTerms.length === 0) return;
+    applySearchHighlight(iframe, scrollToFirst);
+    applyHeaderHighlight();
+}
+
 function installPreviewControls(iframe: HTMLIFrameElement): void {
     const attach = () => {
         const doc = iframe.contentDocument;
         if (!doc) return;
+        // Idempotent per DOCUMENT. A freshly-appended srcdoc iframe first
+        // exposes a throwaway `about:blank` document whose readyState is
+        // already "complete" — so binding to it is binding to something that
+        // is discarded a frame later, and every path below has to run again
+        // against the real one. Marking the document (not the iframe) lets us
+        // safely attach from both the immediate and the load path.
+        if ((doc as any).__mvControlsBound) return;
+        (doc as any).__mvControlsBound = true;
 
         applyZoom(doc);
+        // Paint search marks as soon as the text exists — `attach` also runs
+        // on `load`, which on a remote-image newsletter is many seconds after
+        // the words are readable.
+        refreshSearchHighlight(iframe, true);
 
         doc.addEventListener("keydown", (e) => {
             const target = e.target as HTMLElement | null;
@@ -579,8 +755,26 @@ function installPreviewControls(iframe: HTMLIFrameElement): void {
         // host; the doc-level handler missed cases where WebView2's native
         // menu fired before our parent listener got installed.
     };
+    // Bind on BOTH paths, not one or the other: `load` is when the real
+    // srcdoc document exists, and the immediate call covers an iframe that
+    // is genuinely already loaded (re-render of a live preview). The
+    // per-document guard in attach() makes the overlap a no-op — where the
+    // old `complete ? attach() : onload` choice could bind the whole set to
+    // the discarded about:blank document and never run against the letter.
+    iframe.addEventListener("load", attach);
     if (iframe.contentDocument?.readyState === "complete") attach();
-    else iframe.addEventListener("load", attach, { once: true });
+    // DOMContentLoaded is the "text is painted" mark (see the _ptick pair at
+    // the render site); highlight there too so marks appear with the words
+    // rather than after the last tracking pixel resolves.
+    queueMicrotask(() => {
+        const doc = iframe.contentDocument;
+        if (!doc) return;
+        if (doc.readyState === "loading") {
+            doc.addEventListener("DOMContentLoaded", () => refreshSearchHighlight(iframe, true), { once: true });
+        } else {
+            refreshSearchHighlight(iframe, true);
+        }
+    });
 }
 
 export function clearViewer(): void {
@@ -2034,6 +2228,9 @@ function appendTextProgressively(iframe: HTMLIFrameElement, rest: string, gen: n
         const span = doc.createElement("span");
         span.innerHTML = linkifyText(chunks[i++]);
         host.appendChild(span);
+        // Matches in a chunk that arrives after the first paint would stay
+        // unmarked — re-collect once the tail is in.
+        if (i >= chunks.length) refreshSearchHighlight(iframe);
         requestAnimationFrame(step);
     };
     // The iframe document may not exist for a frame or two after srcdoc is
@@ -2228,6 +2425,12 @@ ${csp}
         word-break: break-word;
     }
     blockquote { border-left: 3px solid #ccc; padding-left: 1rem; margin-left: 0; color: #666; }
+    /* Search matches. Painted by the parent through the CSS Custom Highlight
+       API (CSS.highlights) — no <mark> in the message DOM, so the letter the
+       user copies, quotes or re-renders is byte-identical to what arrived.
+       Both colors are explicit: a highlight that inherits the body color is
+       invisible against its own background in one theme or the other. */
+    ::highlight(mailx-find) { background: #ffd54a; color: #1a1a2e; }
     @media (prefers-color-scheme: dark) {
         body { color: #cdd6f4; background: #282840; }
         a { color: #89b4fa; }

package/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-client",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "private": true,
   "type": "module",
   "scripts": {

package/client/styles/components.css

@@ -1999,6 +1999,11 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
     .mv-from { font-weight: 600; }
     .mv-to { color: var(--color-text-muted); }
     .mv-subject { font-size: var(--font-size-lg); font-weight: 600; margin-top: var(--gap-xs); }
+    /* Search matches in the subject. Same treatment as the body (which paints
+       its own copy of this rule inside the preview iframe — the iframe can't
+       see this sheet). Literal colors, not tokens: the pair has to stay
+       legible in both themes on its own. */
+    ::highlight(mailx-find) { background: #ffd54a; color: #1a1a2e; }
     .mv-date { color: var(--color-text-muted); font-size: var(--font-size-sm); }
     .mv-unsubscribe {
         font-size: var(--font-size-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.2.259",
+  "version": "1.2.261",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -37,7 +37,7 @@
     "@bobfrankston/mailx-imap": "^0.1.153",
     "@bobfrankston/mailx-store-web": "^0.1.80",
     "@bobfrankston/mailx-sync": "^0.1.29",
-    "@bobfrankston/miscinfo": "^1.0.17",
+    "@bobfrankston/miscinfo": "^1.0.19",
     "@bobfrankston/msger": "^0.1.425",
     "@bobfrankston/node-tcp-transport": "^0.1.10",
     "@bobfrankston/oauthsupport": "^1.0.34",
@@ -117,7 +117,7 @@
       "@bobfrankston/mailx-imap": "^0.1.153",
       "@bobfrankston/mailx-store-web": "^0.1.80",
       "@bobfrankston/mailx-sync": "^0.1.29",
-      "@bobfrankston/miscinfo": "^1.0.17",
+      "@bobfrankston/miscinfo": "^1.0.19",
       "@bobfrankston/msger": "^0.1.425",
       "@bobfrankston/node-tcp-transport": "^0.1.10",
       "@bobfrankston/oauthsupport": "^1.0.34",