@bobfrankston/rmfmail 1.2.258 → 1.2.260

package/client/app.ts

@@ -7,7 +7,7 @@ import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced,
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, setLiveFilter, getSelectedMessages, markBodiesCached, getCurrentFocused, releaseFocus, removeMessagesAndReconcile, setRowFlagged, scrollFocusedIntoView, refreshPriorityIndex, revealMessage, getCurrentView, selectAllVisible, exitMultiSelect, getDateBasis, setDateBasis } from "./components/message-list.js";
 import { seenOf, flaggedOf, draftOf, setSeen, setFlagged } from "@bobfrankston/mailx-types";
 import { initTabs, setActiveView as setActiveTabView, openTab, type ViewTab } from "./components/tabs.js";
-import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage, popOutToWindow, printCurrentMessage, toggleFullscreenPreview, showPreviewBodyMenu, wrapHtmlBody } from "./components/message-viewer.js";
+import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage, popOutToWindow, printCurrentMessage, toggleFullscreenPreview, showPreviewBodyMenu, wrapHtmlBody, setSearchHighlightTerms, parseHighlightTerms } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessage, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags, markAsSpamMessages, logClientEvent, sendMessage as apiSendMessage, subscribeStore, cancelServerSearch, installConsoleCapture, getAttachment } from "./lib/api-client.js";
 import * as messageState from "./lib/message-state.js";
 import { editMenuItems } from "./components/edit-menu.js";
@@ -2652,6 +2652,12 @@ function renderSearchHighlight(settled: boolean): void {
 
 function updateSearchHighlight(): void {
     renderSearchHighlight(false);
+    // The message-body marks track the same box. Doing it HERE rather than at
+    // each caller means every path that touches the search input — typing,
+    // clearing, folder switch, tab restore — keeps the viewer in step; there
+    // is no way to add a fourth path that forgets. setSearchHighlightTerms
+    // no-ops when the terms are unchanged, so this is free per keystroke.
+    setSearchHighlightTerms(parseHighlightTerms(searchInput?.value || ""));
     if (searchRegexSettleTimer) clearTimeout(searchRegexSettleTimer);
     searchRegexSettleTimer = setTimeout(() => renderSearchHighlight(true), SEARCH_REGEX_SETTLE_MS);
 }
@@ -2675,6 +2681,10 @@ let serverSearchTimer: ReturnType<typeof setTimeout> | null = null;
 
 function doSearch(immediate = false): void {
     const query = searchInput.value.trim();
+    // Terms to mark in the open message. Set on EVERY doSearch — including the
+    // empty-query exit below, which clears them (Bob 2026-08-15: "search should
+    // highlight the matched text when I view a message").
+    setSearchHighlightTerms(parseHighlightTerms(query));
     if (query.length === 0) {
         // Leaving search — ABORT any in-flight server sweep. A "Server" search is
         // a 90-folder IMAP run on the daemon; if it's still going when you clear

package/client/components/message-viewer.js

@@ -558,12 +558,199 @@ async function translateAndShow(text) {
             status.textContent = `Translate error: ${err?.message || ""}`;
     }
 }
+// ── 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 = [];
+/** 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) {
+    const parts = (query || "").match(/"[^"]*"|\S+/g) || [];
+    const out = [];
+    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, terms) {
+    const ranges = [];
+    const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, {
+        acceptNode(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(); n; n = walker.nextNode()) {
+        const hay = n.data.toLowerCase();
+        // Track claimed spans so two terms can't double-highlight one stretch.
+        const taken = [];
+        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, scrollToFirst = false) {
+    const doc = iframe.contentDocument;
+    const win = iframe.contentWindow;
+    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() {
+    const anyWin = window;
+    if (!anyWin.CSS?.highlights || typeof anyWin.Highlight !== "function")
+        return;
+    try {
+        anyWin.CSS.highlights.delete(HIGHLIGHT_NAME);
+        const subj = document.querySelector(".mv-subject");
+        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, terms) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const ranges = [];
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        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) {
+    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, true);
+    }
+}
+/** Re-paint after content lands (initial render, progressive text append). */
+export function refreshSearchHighlight(iframe, scrollToFirst = false) {
+    if (searchHighlightTerms.length === 0)
+        return;
+    applySearchHighlight(iframe, scrollToFirst);
+    applyHeaderHighlight();
+}
 function installPreviewControls(iframe) {
     const attach = () => {
         const doc = iframe.contentDocument;
         if (!doc)
             return;
         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;
             if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)))
@@ -633,6 +820,20 @@ function installPreviewControls(iframe) {
         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() {
     currentMessage = null;
@@ -2188,6 +2389,10 @@ function appendTextProgressively(iframe, rest, gen) {
         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
@@ -2390,6 +2595,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; }