@bobfrankston/rmfmail 1.2.248 → 1.2.250

package/client/components/message-viewer.ts

@@ -17,6 +17,41 @@ import { updateMessageFlags as stateUpdateFlags } from "../lib/message-state.js"
 import { setRowSeen } from "./message-list.js";
 import { setSeen, seenOf } from "@bobfrankston/mailx-types";
 
+// ── "Copy image" bridge ──
+// The preview iframe encodes the image and posts the bytes back; these track
+// the outstanding request. Keyed by id because a user can hit Copy image on a
+// second picture before the first encode finishes.
+const pendingImageCopies = new Map<number, (r: { blob?: Blob; error?: string }) => void>();
+let imageCopySeq = 0;
+const IMAGE_COPY_TIMEOUT_MS = 8000;
+
+window.addEventListener("message", (e) => {
+    const d: any = e.data;
+    if (!d || d.type !== "previewImageBytes") return;
+    const resolve = pendingImageCopies.get(d.reqId);
+    if (!resolve) return;               // timed out already
+    pendingImageCopies.delete(d.reqId);
+    resolve({ blob: d.blob, error: d.error });
+});
+
+/** Ask the preview iframe to encode the image the user right-clicked. Resolves
+ *  with a PNG blob, or an error string when the iframe can't read it (a remote
+ *  image taints the canvas — caller falls back to the daemon). */
+function requestImageFromPreview(sourceWindow: Window | null, src: string): Promise<{ blob?: Blob; error?: string }> {
+    if (!sourceWindow) return Promise.resolve({ error: "preview window is gone" });
+    const reqId = ++imageCopySeq;
+    return new Promise(resolve => {
+        const done = (r: { blob?: Blob; error?: string }): void => { clearTimeout(timer); resolve(r); };
+        const timer = setTimeout(() => {
+            pendingImageCopies.delete(reqId);
+            resolve({ error: "the preview did not answer in time" });
+        }, IMAGE_COPY_TIMEOUT_MS);
+        pendingImageCopies.set(reqId, done);
+        try { sourceWindow.postMessage({ type: "previewCommand", cmd: "copyImage", reqId, src }, "*"); }
+        catch (err: any) { pendingImageCopies.delete(reqId); done({ error: err?.message || String(err) }); }
+    });
+}
+
 /** Currently displayed message (for reply/forward) */
 let currentMessage: any = null;
 let currentAccountId: string = "";
@@ -165,24 +200,71 @@ export function showPreviewBodyMenu(absX: number, absY: number, selectedText: st
         })();
         items.push(
             { label: "Copy image", action: async () => {
-                try {
-                    const resp = await fetch(imgSrc);
-                    const blob = await resp.blob();
-                    // Transcode to PNG via canvas — WebView2's clipboard image
-                    // write is reliable for PNG; arbitrary source types (webp,
-                    // gif, jpeg) may not round-trip directly.
+                // Three ways in, because no single one covers every image a
+                // letter can carry (Bob 2026-08-11: right-click → copy just
+                // failed). In order of what works most often:
+                //   1. the preview iframe encodes its own already-decoded
+                //      <img> — the only path that works for inline cid:/data:
+                //      images, and it costs no network at all;
+                //   2. the parent fetches the src — fine for data: and for
+                //      hosts that send CORS headers;
+                //   3. the daemon fetches it — remote images are cross-origin
+                //      with no CORS headers, so the WebView can never read
+                //      their bytes, but Node has no such restriction.
+                const attempts: string[] = [];
+
+                const writePng = async (png: Blob): Promise<void> => {
+                    await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+                };
+                // Transcode to PNG via canvas — WebView2's clipboard image
+                // write is reliable for PNG; arbitrary source types (webp,
+                // gif, jpeg) may not round-trip directly.
+                const toPng = async (blob: Blob): Promise<Blob> => {
+                    if (blob.type === "image/png") return blob;
                     const bmp = await createImageBitmap(blob);
                     const canvas = document.createElement("canvas");
                     canvas.width = bmp.width; canvas.height = bmp.height;
                     canvas.getContext("2d")!.drawImage(bmp, 0, 0);
-                    const png: Blob = await new Promise((res, rej) =>
+                    return await new Promise((res, rej) =>
                         canvas.toBlob(b => b ? res(b) : rej(new Error("toBlob failed")), "image/png"));
-                    await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+                };
+
+                // 1. Ask the preview to encode it.
+                const fromPreview = await requestImageFromPreview(sourceWindow, imgSrc);
+                if (fromPreview.blob) {
+                    try { await writePng(fromPreview.blob); return; }
+                    catch (e: any) { attempts.push(`clipboard write: ${e?.message || e}`); }
+                } else {
+                    attempts.push(`preview: ${fromPreview.error}`);
+                }
+
+                // 2. Fetch it from here.
+                try {
+                    const resp = await fetch(imgSrc);
+                    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+                    await writePng(await toPng(await resp.blob()));
+                    return;
                 } catch (e: any) {
-                    // cid: inline images can't be fetched from the parent
-                    // context — surface rather than fail silently.
-                    alert(`Couldn't copy image: ${e?.message || e}${imgSrc.startsWith("cid:") ? " (inline cid: image — try Save instead, or right-click → save in the message)" : ""}`);
+                    attempts.push(`direct fetch: ${e?.message || e}`);
                 }
+
+                // 3. Let the daemon fetch it (remote images, no CORS).
+                if (/^https?:/i.test(imgSrc)) {
+                    try {
+                        const { fetchRemoteImage } = await import("../lib/api-client.js");
+                        const r = await fetchRemoteImage(imgSrc);
+                        if (!r?.base64) throw new Error(r?.error || "no data returned");
+                        const bytes = Uint8Array.from(atob(r.base64), c => c.charCodeAt(0));
+                        await writePng(await toPng(new Blob([bytes], { type: r.contentType || "image/png" })));
+                        return;
+                    } catch (e: any) {
+                        attempts.push(`via rmfmail: ${e?.message || e}`);
+                    }
+                }
+
+                // Name what was tried — a bare "couldn't copy" leaves nothing
+                // to act on, and these three failure modes need different fixes.
+                alert(`Couldn't copy that image.\n\n${attempts.map(a => `• ${a}`).join("\n")}`);
             } },
             { label: `Save image as "${guessImgName}"…`, action: () => {
                 const a = document.createElement("a"); a.href = imgSrc;
@@ -2219,6 +2301,9 @@ ${csp}
     // dismissers it sees. The parent's debounced 500 ms show-timer still
     // suppresses flicker.
     var lastHoveredHref = "";
+    // The <img> under the most recent right-click, kept so a later
+    // "copyImage" command can encode that exact element (see below).
+    var lastContextImg = null;
     function postLinkHover(href, rect, mouse) {
         // Only post on transitions to avoid spamming the parent on every
         // mousemove inside a link.
@@ -2294,6 +2379,45 @@ ${csp}
                     s.addRange(r);
                 }
             } catch (_) {}
+        } else if (d.cmd === "copyImage") {
+            // Encode the right-clicked image HERE and hand the parent the
+            // bytes. The parent can't fetch it itself: an inline image is a
+            // multi-megabyte data: URI it would have to re-download through
+            // the message channel, and a remote one is cross-origin with no
+            // CORS headers, so a parent-side fetch rejects. This img is
+            // already decoded here, so a canvas draw needs no network at all.
+            // (A remote image DOES taint the canvas — toBlob then throws and
+            // the parent falls back to fetching it through the daemon.)
+            var target = lastContextImg;
+            if (!target && d.src) {
+                var all = document.getElementsByTagName("img");
+                for (var i = 0; i < all.length; i++) {
+                    if (all[i].currentSrc === d.src || all[i].src === d.src) { target = all[i]; break; }
+                }
+            }
+            if (!target) {
+                window.parent.postMessage({ type: "previewImageBytes", reqId: d.reqId, error: "image element not found" }, "*");
+                return;
+            }
+            try {
+                var cv = document.createElement("canvas");
+                cv.width = target.naturalWidth || target.width;
+                cv.height = target.naturalHeight || target.height;
+                if (!cv.width || !cv.height) throw new Error("image has no decoded size yet");
+                cv.getContext("2d").drawImage(target, 0, 0);
+                cv.toBlob(function (b) {
+                    if (!b) {
+                        window.parent.postMessage({ type: "previewImageBytes", reqId: d.reqId, error: "encode failed" }, "*");
+                        return;
+                    }
+                    window.parent.postMessage({ type: "previewImageBytes", reqId: d.reqId, blob: b }, "*");
+                }, "image/png");
+            } catch (err) {
+                window.parent.postMessage({
+                    type: "previewImageBytes", reqId: d.reqId,
+                    error: (err && err.message) ? err.message : String(err)
+                }, "*");
+            }
         }
     });
 
@@ -2312,6 +2436,10 @@ ${csp}
         try { rect = e.target.getBoundingClientRect ? e.target.getBoundingClientRect() : rect; } catch (_) {}
         var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
         var img = e.target && e.target.closest ? e.target.closest("img") : null;
+        // Remember the element itself, not just its src — "Copy image" encodes
+        // this exact <img>, and matching by src would pick the wrong one when
+        // a letter repeats the same image (spacers, logos, tracking pixels).
+        lastContextImg = img;
         var sel = (window.getSelection && window.getSelection()) ? window.getSelection().toString() : "";
         window.parent.postMessage({
             type: "previewContextMenu",

package/client/compose/compose.bundle.js

@@ -1049,6 +1049,7 @@ __export(api_client_exports, {
   drainStoreSync: () => drainStoreSync,
   emptyFolder: () => emptyFolder,
   fetchImageAsDataUri: () => fetchImageAsDataUri,
+  fetchRemoteImage: () => fetchRemoteImage,
   flagSenderOrDomain: () => flagSenderOrDomain,
   formatJsonc: () => formatJsonc,
   getAccounts: () => getAccounts,
@@ -1611,6 +1612,16 @@ function readConfigHelp(name) {
 function unsubscribeOneClick(url) {
   return ipc().unsubscribeOneClick?.(url);
 }
+async function fetchRemoteImage(url) {
+  const fn = ipc().fetchRemoteImage;
+  if (!fn)
+    return { error: "this host can't fetch remote images" };
+  try {
+    return await fn(url);
+  } catch (e) {
+    return { error: e?.message || String(e) };
+  }
+}
 function openInWord(editId, html, popoutId = "") {
   return ipc().openInWord?.(editId, html, popoutId) ?? Promise.resolve({ ok: false, path: "", opener: "none" });
 }