@bobfrankston/rmfmail 1.2.237 → 1.2.239

package/client/components/message-viewer.js

@@ -1559,43 +1559,22 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
             installPreviewControls(iframe);
         }
         else if (msg.bodyText) {
-            const pre = document.createElement("pre");
-            // Match the HTML-body branch's typography: sans-serif system
-            // font, same size + line-height. Default `<pre>` rendering is
-            // monospace, which on some platforms substitutes to a serif
-            // fallback (Bob 2026-05-12: "why the font change") and looks
-            // like a different message from the same conversation.
-            // height:100% + overflow:auto make the <pre> its own scroll
-            // container. Without them the <pre> grows to its full content
-            // height and the parent .mv-body (overflow:hidden) silently
-            // clips everything below the fold — no scrollbar, wheel dead
-            // (Bob 2026-05-22). The HTML-body branch gets this for free via
-            // the iframe; plain-text bodies need it explicitly.
-            pre.style.cssText = "padding: 1rem; white-space: pre-wrap; word-break: break-word; "
-                + "font-family: system-ui, sans-serif; font-size: 17.5px; line-height: 1.5; "
-                + "color: #1a1a2e; background: #fff; margin: 0; height: 100%; overflow: auto;";
-            // Auto-linkify URLs in plain text.
+            // Plain text renders through the SAME sandboxed iframe as an HTML
+            // body, as a <pre> of linkified text.
             //
-            // For a big body this ONE STATEMENT is what makes the window look
-            // dead: linkifyText walks the whole string three times, then
-            // innerHTML parses megabytes of markup, then layout runs over tens
-            // of thousands of lines — all synchronous on the main thread, so
-            // nothing repaints and WebView2 eventually reports the renderer as
-            // unresponsive (kind=2). It does finish, hence "oh — just took
-            // forever" (Bob 2026-08-08).
+            // It used to be a <pre> in the PARENT document, and that is why
+            // "hovering over a URL or right mousing isn't working" in a
+            // plain-text message (Bob 2026-08-09): every link affordance the
+            // preview has — hover target, the right-click link menu (Open /
+            // Copy link address / search), tap-to-open-externally — is
+            // implemented for the iframe, by its injected script and its
+            // contextmenu → previewContextMenu bridge. A detected URL isn't
+            // "less of a URL" than an <a> the sender wrote, so it goes through
+            // the same path and behaves identically, instead of the parent
+            // document's generic fallback menu.
             //
-            // A Web Worker can't help: workers have no DOM, and the expensive
-            // half IS the DOM. What works is refusing to do it in one gulp —
-            // paint the first screenful immediately, then append the rest in
-            // line-aligned chunks across animation frames. Same content, same
-            // links, but the main thread comes up for air between chunks so
-            // the app stays live and the text streams in visibly.
-            if (msg.bodyText.length > PROGRESSIVE_TEXT_THRESHOLD) {
-                renderTextProgressively(pre, msg.bodyText, gen);
-            }
-            else {
-                pre.innerHTML = linkifyText(msg.bodyText);
-            }
+            // Same reason as every other unification today: two renderers for
+            // one job means every fix lands in one of them.
             // Oversized body: the service sent only the head, because the IPC
             // channel marshals replies through evaluate_script and a multi-MB
             // body takes the WebView2 renderer down with it. Say so — showing
@@ -1614,7 +1593,29 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                     <code style="user-select:all;font-size:0.9em">${escapeHtml(trunc.emlPath || "(path unavailable)")}</code></div>`;
                 bodyEl.appendChild(note);
             }
-            bodyEl.appendChild(pre);
+            const iframe = document.createElement("iframe");
+            iframe.sandbox.add("allow-same-origin");
+            iframe.sandbox.add("allow-popups");
+            iframe.sandbox.add("allow-popups-to-escape-sandbox");
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
+            iframe.sandbox.add("allow-scripts");
+            // `rmf-plain` is styled by wrapHtmlBody so the typography matches
+            // what the parent <pre> used to produce.
+            const head = msg.bodyText.length > PROGRESSIVE_TEXT_THRESHOLD
+                ? msg.bodyText.slice(0, firstChunkEnd(msg.bodyText))
+                : msg.bodyText;
+            iframe.srcdoc = wrapHtmlBody(`<pre class="rmf-plain" id="rmf-plain">${linkifyText(head)}</pre>`, false);
+            iframe.addEventListener("load", () => _ptick("iframe load (all resources)"), { once: true });
+            bodyEl.appendChild(iframe);
+            _ptick("iframe srcdoc set (plain text)");
+            installPreviewControls(iframe);
+            // Big body: stream the remainder into the iframe across animation
+            // frames rather than parsing megabytes in one blocking gulp
+            // (v1.2.229's reason, preserved — the work just happens inside the
+            // iframe document now).
+            if (msg.bodyText.length > head.length) {
+                appendTextProgressively(iframe, msg.bodyText.slice(head.length), gen);
+            }
         }
         else {
             // No bodyHtml AND no bodyText. The daemon thinks the body is
@@ -1968,47 +1969,73 @@ const PROGRESSIVE_TEXT_THRESHOLD = 200 * 1024;
  *  16 ms budget on a slow machine; large enough that a 1.4 MB body finishes in
  *  a couple of dozen frames rather than hundreds. */
 const TEXT_CHUNK_BYTES = 64 * 1024;
+/** Where the first chunk of a large plain-text body ends — cut on a newline
+ *  so a URL is never split across chunks (half a URL linkifies wrong). */
+function firstChunkEnd(text) {
+    const end = Math.min(TEXT_CHUNK_BYTES, text.length);
+    if (end >= text.length)
+        return text.length;
+    const nl = text.lastIndexOf("\n", end);
+    return nl > 0 ? nl + 1 : end;
+}
 /**
- * Append `text` to `pre` in line-aligned chunks, one chunk per animation
- * frame, linkifying each chunk as it goes.
+ * Stream the rest of a large plain-text body into the preview iframe, one
+ * line-aligned chunk per animation frame, linkifying each chunk as it goes.
  *
- * Chunks are cut on newlines so a URL is never split across two chunks (which
- * would linkify half of it). Each chunk goes in as its own inline <span>, so
- * the parent's `white-space: pre-wrap` keeps the text flowing exactly as a
- * single insert would.
+ * Why chunked at all: linkify + HTML parse + layout over a multi-megabyte
+ * body is synchronous, so doing it in one statement freezes the window long
+ * enough for WebView2 to report the renderer unresponsive (Bob 2026-08-08,
+ * "oh — just took forever"). A Web Worker cannot help: workers have no DOM,
+ * and the DOM work IS the expensive half. Coming up for air between chunks is
+ * what keeps the app live, and the text visibly streams in.
  *
- * Aborts if the user moves to another message mid-render — `gen` is compared
- * against showMessageGeneration, the same staleness guard the IPC path uses.
+ * Aborts if the user moves to another message mid-render (`gen` against
+ * showMessageGeneration, the same staleness guard the IPC path uses) or if
+ * the iframe is torn out from under us.
  */
-function renderTextProgressively(pre, text, gen) {
+function appendTextProgressively(iframe, rest, gen) {
     const chunks = [];
     let at = 0;
-    while (at < text.length) {
-        let end = Math.min(at + TEXT_CHUNK_BYTES, text.length);
-        if (end < text.length) {
-            const nl = text.lastIndexOf("\n", end);
+    while (at < rest.length) {
+        let end = Math.min(at + TEXT_CHUNK_BYTES, rest.length);
+        if (end < rest.length) {
+            const nl = rest.lastIndexOf("\n", end);
             if (nl > at)
                 end = nl + 1;
         }
-        chunks.push(text.slice(at, end));
+        chunks.push(rest.slice(at, end));
         at = end;
     }
     let i = 0;
     const step = () => {
-        // Stale — another message is on screen now; stop appending to a <pre>
-        // nobody is looking at.
         if (gen !== showMessageGeneration)
-            return;
+            return; // another message is on screen
+        const doc = iframe.contentDocument;
+        const host = doc?.getElementById("rmf-plain");
+        if (!doc || !host)
+            return; // iframe replaced or not ready
         if (i >= chunks.length)
             return;
-        const span = document.createElement("span");
+        const span = doc.createElement("span");
         span.innerHTML = linkifyText(chunks[i++]);
-        pre.appendChild(span);
+        host.appendChild(span);
         requestAnimationFrame(step);
     };
-    // First chunk synchronously so the user sees text immediately rather than
-    // an empty pane for one frame.
-    step();
+    // The iframe document may not exist for a frame or two after srcdoc is
+    // set; poll briefly rather than dropping the tail on the floor.
+    let waits = 0;
+    const begin = () => {
+        if (gen !== showMessageGeneration)
+            return;
+        if (iframe.contentDocument?.getElementById("rmf-plain")) {
+            step();
+            return;
+        }
+        if (waits++ > 120)
+            return; // ~2 s at 60 fps — give up quietly
+        requestAnimationFrame(begin);
+    };
+    requestAnimationFrame(begin);
 }
 function linkifyText(text) {
     // Escape HTML first
@@ -2180,6 +2207,19 @@ ${csp}
     img { max-width: 100%; }
     a { color: #1a6dd4; }
     pre, code { white-space: pre-wrap; }
+    /* Plain-text bodies render as this <pre>. Sans-serif at the same size and
+       line-height as an HTML body, so two messages in one thread don't look
+       like they came from different apps (Bob 2026-05-12: "why the font
+       change"). */
+    .rmf-plain {
+        margin: 0;
+        padding: 0;
+        font-family: system-ui, sans-serif;
+        font-size: 17.5px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
     blockquote { border-left: 3px solid #ccc; padding-left: 1rem; margin-left: 0; color: #666; }
     @media (prefers-color-scheme: dark) {
         body { color: #cdd6f4; background: #282840; }