@bobfrankston/rmfmail 1.2.228 → 1.2.230

package/client/app.bundle.js

@@ -717,6 +717,276 @@ var init_api_client = __esm({
   }
 });
 
+// client/components/edit-menu.js
+function isTinyEngine(ne) {
+  return !!ne && typeof ne.execCommand === "function" && !!ne.selection;
+}
+function describeEditTarget(target) {
+  const none = { el: null, editable: false, selection: "", canRead: true, isField: false };
+  const node = target;
+  if (!node)
+    return { ...none, selection: pageSelection() };
+  const start = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+  if (!start)
+    return { ...none, selection: pageSelection() };
+  const field = start.closest("input, textarea");
+  if (field) {
+    const type = (field instanceof HTMLInputElement ? field.type : "text").toLowerCase();
+    if (!TEXTUAL_INPUT_TYPES.has(type))
+      return { ...none, selection: pageSelection() };
+    const s = field.selectionStart ?? 0, e = field.selectionEnd ?? 0;
+    return {
+      el: field,
+      editable: !field.readOnly && !field.disabled,
+      selection: e > s ? field.value.slice(s, e) : "",
+      canRead: type !== "password",
+      isField: true
+    };
+  }
+  const ce = start.closest("[contenteditable]");
+  const editable = !!ce && ce.isContentEditable;
+  return { el: ce || start, editable, selection: pageSelection(), canRead: true, isField: false };
+}
+function pageSelection() {
+  try {
+    return window.getSelection()?.toString() || "";
+  } catch {
+    return "";
+  }
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+}
+async function readClipboard() {
+  let html = "", text = "";
+  if (navigator.clipboard?.read) {
+    for (const item of await navigator.clipboard.read()) {
+      if (item.types.includes("text/html"))
+        html = await (await item.getType("text/html")).text();
+      if (item.types.includes("text/plain"))
+        text = await (await item.getType("text/plain")).text();
+    }
+    if (!html && !text)
+      text = await navigator.clipboard.readText();
+  } else {
+    text = await navigator.clipboard.readText();
+  }
+  return { html, text };
+}
+async function writeClipboard(text, html) {
+  if (html && typeof ClipboardItem === "function" && navigator.clipboard?.write) {
+    await navigator.clipboard.write([new ClipboardItem({
+      "text/html": new Blob([html], { type: "text/html" }),
+      "text/plain": new Blob([text], { type: "text/plain" })
+    })]);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+}
+function expandToWord(ne) {
+  if (isTinyEngine(ne)) {
+    try {
+      if (ne.selection.isCollapsed() && typeof ne.selection.expand === "function") {
+        ne.selection.expand({ type: "word" });
+      }
+    } catch {
+    }
+    return;
+  }
+  if (ne && typeof ne.getSelection === "function" && typeof ne.setSelection === "function") {
+    const sel = ne.getSelection();
+    if (!sel || sel.length > 0)
+      return;
+    const text = ne.getText();
+    let a = sel.index, b = sel.index;
+    while (a > 0 && /\S/.test(text[a - 1]))
+      a--;
+    while (b < text.length && /\S/.test(text[b]))
+      b++;
+    if (b > a)
+      ne.setSelection(a, b - a);
+  }
+}
+function replaceFieldSelection(field, text) {
+  const s = field.selectionStart ?? field.value.length;
+  const e = field.selectionEnd ?? field.value.length;
+  field.value = field.value.slice(0, s) + text + field.value.slice(e);
+  field.selectionStart = field.selectionEnd = s + text.length;
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+}
+async function runClipboard(ctx, id) {
+  if (ctx.engine)
+    return runEngineClipboard(ctx.engine, id);
+  const info = describeEditTarget(ctx.target);
+  if (id === "paste") {
+    if (!info.editable || !info.el)
+      throw new Error("nothing here accepts a paste");
+    const { html, text } = await readClipboard();
+    if (info.isField) {
+      if (!text && !html)
+        return;
+      replaceFieldSelection(info.el, text || stripHtml(html));
+      return;
+    }
+    const content = html || (text ? escapeHtml(text).replace(/\r?\n/g, "<br>") : "");
+    if (!content)
+      return;
+    insertHtmlAtSelection(info.el, content);
+    return;
+  }
+  if (!info.canRead)
+    throw new Error("this field's contents can't be copied");
+  if (!info.selection)
+    return;
+  if (info.isField) {
+    await writeClipboard(info.selection);
+  } else {
+    await writeClipboard(info.selection, selectionHtml());
+  }
+  if (id !== "cut")
+    return;
+  if (!info.editable)
+    throw new Error("this text is read-only \u2014 copied instead of cut");
+  if (info.isField) {
+    replaceFieldSelection(info.el, "");
+    return;
+  }
+  try {
+    window.getSelection()?.deleteFromDocument();
+  } catch {
+  }
+}
+async function runEngineClipboard(ne, id) {
+  const isTiny = isTinyEngine(ne);
+  if (id === "paste") {
+    const { html: html2, text: text2 } = await readClipboard();
+    const content = html2 || (text2 ? escapeHtml(text2).replace(/\r?\n/g, "<br>") : "");
+    if (!content)
+      return;
+    if (isTiny) {
+      ne.execCommand("mceInsertContent", false, content);
+      return;
+    }
+    if (ne?.clipboard?.dangerouslyPasteHTML) {
+      const sel = ne.getSelection(true);
+      ne.clipboard.dangerouslyPasteHTML(sel?.index ?? 0, content);
+      return;
+    }
+    throw new Error("editor doesn't support paste");
+  }
+  expandToWord(ne);
+  let html = "", text = "";
+  if (isTiny) {
+    html = ne.selection.getContent({ format: "html" });
+    text = ne.selection.getContent({ format: "text" });
+  } else {
+    text = pageSelection();
+    html = selectionHtml();
+  }
+  if (!text && !html)
+    return;
+  await writeClipboard(text, html || void 0);
+  if (id !== "cut")
+    return;
+  if (isTiny) {
+    ne.execCommand("Delete");
+    return;
+  }
+  if (typeof ne?.deleteText === "function") {
+    const sel = ne.getSelection();
+    if (sel?.length)
+      ne.deleteText(sel.index, sel.length);
+  }
+}
+function selectionHtml() {
+  try {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed)
+      return "";
+    const div = document.createElement("div");
+    div.appendChild(sel.getRangeAt(0).cloneContents());
+    return div.innerHTML;
+  } catch {
+    return "";
+  }
+}
+function stripHtml(html) {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || "";
+}
+function insertHtmlAtSelection(host, html) {
+  const sel = window.getSelection();
+  const frag = document.createRange().createContextualFragment(html);
+  if (!sel || sel.rangeCount === 0) {
+    host?.appendChild(frag);
+    return;
+  }
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  const last = frag.lastChild;
+  range.insertNode(frag);
+  if (last) {
+    range.setStartAfter(last);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}
+function selectAll(info) {
+  if (info.isField && info.el) {
+    info.el.select();
+    return;
+  }
+  const host = info.el;
+  if (!host)
+    return;
+  const range = document.createRange();
+  range.selectNodeContents(host);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
+function editMenuItems(ctx, opts = {}) {
+  const report = opts.onError || ((m) => console.warn(`[edit-menu] ${m}`));
+  const info = ctx.engine ? { el: null, editable: true, selection: pageSelection(), canRead: true, isField: false } : describeEditTarget(ctx.target);
+  if (!ctx.engine && !info.editable && !info.selection)
+    return [];
+  const run = (id) => () => {
+    void runClipboard(ctx, id).catch((e) => {
+      const key = id === "cut" ? "Ctrl+X" : id === "copy" ? "Ctrl+C" : "Ctrl+V";
+      const what = id[0].toUpperCase() + id.slice(1);
+      report(`${what} failed: ${e?.message || e}. ${key} still works.`);
+    });
+  };
+  const hasSel = !!ctx.engine || !!info.selection;
+  const items = [
+    { label: "Cut", action: run("cut"), disabled: !info.editable || !hasSel || !info.canRead },
+    { label: "Copy", action: run("copy"), disabled: !hasSel || !info.canRead },
+    { label: "Paste", action: run("paste"), disabled: !info.editable }
+  ];
+  if (opts.selectAll !== false && !ctx.engine) {
+    items.push({ label: "Select all", action: () => selectAll(info) });
+  }
+  return items;
+}
+var TEXTUAL_INPUT_TYPES;
+var init_edit_menu = __esm({
+  "client/components/edit-menu.js"() {
+    "use strict";
+    TEXTUAL_INPUT_TYPES = /* @__PURE__ */ new Set([
+      "text",
+      "search",
+      "email",
+      "url",
+      "tel",
+      "number",
+      "password",
+      ""
+    ]);
+  }
+});
+
 // client/components/context-menu.js
 var context_menu_exports = {};
 __export(context_menu_exports, {
@@ -783,8 +1053,15 @@ function openSubmenu(parentRow, items) {
   sub.style.top = `${Math.max(4, top)}px`;
   activeSubmenu = sub;
 }
-function showContextMenu(x, y, items) {
+function showContextMenu(x, y, items, opts = {}) {
   closeContextMenu();
+  if (opts.editTarget !== void 0 || opts.editEngine) {
+    const edit = editMenuItems({ target: opts.editTarget, engine: opts.editEngine }, { onError: opts.onEditError });
+    if (edit.length > 0) {
+      items = items.length > 0 ? [...edit, { label: "", action: () => {
+      }, separator: true }, ...items] : edit;
+    }
+  }
   const menu = document.createElement("div");
   menu.className = "ctx-menu";
   for (const item of items) {
@@ -871,6 +1148,7 @@ var activeMenu, dismissListener, escapeListener, activeSubmenu;
 var init_context_menu = __esm({
   "client/components/context-menu.js"() {
     "use strict";
+    init_edit_menu();
     activeMenu = null;
     dismissListener = null;
     escapeListener = null;
@@ -1132,9 +1410,9 @@ async function openAddressBook(prefillSearch) {
                 <span class="ab-actions"></span>
             </div>` + items.map((c) => `
             <div class="ab-row" data-email="${escapeAttr(c.email)}">
-                <span class="ab-name" title="${escapeAttr(cardSummary(c))}">${escapeHtml(c.name || "")}${cardSummary(c) ? ' <span class="ab-hascard" aria-hidden="true">\u2022</span>' : ""}</span>
-                <span class="ab-email">${escapeHtml(c.email)}</span>
-                <span class="ab-source">${escapeHtml(c.source)}</span>
+                <span class="ab-name" title="${escapeAttr(cardSummary(c))}">${escapeHtml2(c.name || "")}${cardSummary(c) ? ' <span class="ab-hascard" aria-hidden="true">\u2022</span>' : ""}</span>
+                <span class="ab-email">${escapeHtml2(c.email)}</span>
+                <span class="ab-source">${escapeHtml2(c.source)}</span>
                 <span class="ab-count-cell">${c.useCount || 0}</span>
                 <span class="ab-last">${fmtDate(c.lastUsed)}</span>
                 <span class="ab-actions">
@@ -1171,8 +1449,8 @@ async function openAddressBook(prefillSearch) {
                     <input type="email" class="mailx-modal-input" value="${escapeAttr(c.email)}" disabled
                            title="The address identifies the contact \u2014 delete and re-add to change it"></label>
                 ${CONTACT_FIELDS.map((f) => `
-                <label class="ab-field"><span>${escapeHtml(f.label)}</span>
-                    ${f.multiline ? `<textarea class="mailx-modal-input" rows="2" data-field="${f.key}">${escapeHtml(c[f.key] || "")}</textarea>` : `<input type="${f.type || "text"}" class="mailx-modal-input" data-field="${f.key}"
+                <label class="ab-field"><span>${escapeHtml2(f.label)}</span>
+                    ${f.multiline ? `<textarea class="mailx-modal-input" rows="2" data-field="${f.key}">${escapeHtml2(c[f.key] || "")}</textarea>` : `<input type="${f.type || "text"}" class="mailx-modal-input" data-field="${f.key}"
                                   value="${escapeAttr(c[f.key] || "")}"
                                   ${f.placeholder ? `placeholder="${escapeAttr(f.placeholder)}"` : ""}>`}
                 </label>`).join("")}
@@ -1259,7 +1537,7 @@ async function openAddressBook(prefillSearch) {
       const r = await listContacts(searchInput2.value, 1, 200);
       render2(r.items, r.total);
     } catch (e) {
-      listEl.innerHTML = `<div class="ab-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
+      listEl.innerHTML = `<div class="ab-empty">Load failed: ${escapeHtml2(e?.message || String(e))}</div>`;
     }
   };
   const scheduleReload = () => {
@@ -1308,11 +1586,11 @@ async function openAddressBook(prefillSearch) {
 function cardSummary(c) {
   return CONTACT_FIELDS.map((f) => ({ label: f.label, value: (c[f.key] || "").trim() })).filter((x) => x.value).map((x) => `${x.label}: ${x.value.replace(/\s+/g, " ")}`).join("\n");
 }
-function escapeHtml(s) {
+function escapeHtml2(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 function escapeAttr(s) {
-  return escapeHtml(s);
+  return escapeHtml2(s);
 }
 var CONTACT_FIELDS, isOpen;
 var init_address_book = __esm({
@@ -1855,7 +2133,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
     }
     if (!cachedMsg) {
       const previewText = (cached.preview || "").trim();
-      bodyEl.innerHTML = previewText ? `<div class="mv-preview-placeholder">${escapeHtml2(previewText)}</div>` : `<div class="mv-empty">Loading body\u2026</div>`;
+      bodyEl.innerHTML = previewText ? `<div class="mv-preview-placeholder">${escapeHtml3(previewText)}</div>` : `<div class="mv-empty">Loading body\u2026</div>`;
     }
   } else if (!cachedMsg) {
     bodyEl.innerHTML = `<div class="mv-empty">Loading body\u2026</div>`;
@@ -1868,7 +2146,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
             <div class="mv-system-tag">mailx</div>
             <div class="mv-system-title">Render failed for this message</div>
             <div class="mv-system-body">The display engine stopped while drawing this message last time, so it hasn't been drawn again automatically.
-            Usually this means an unusually large body.${emlHint ? `<br><code style="user-select:all;font-size:0.9em">${escapeHtml2(emlHint)}</code>` : ""}
+            Usually this means an unusually large body.${emlHint ? `<br><code style="user-select:all;font-size:0.9em">${escapeHtml3(emlHint)}</code>` : ""}
             <br><br><button type="button" id="mv-render-anyway" class="mailx-modal-btn">Try anyway</button></div>
         </div>`;
     document.getElementById("mv-render-anyway")?.addEventListener("click", () => {
@@ -1901,7 +2179,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
       const previewText = (msg.preview || cached?.preview || "").trim();
       const waitStart = Date.now();
       const indicatorHtml = `<span class="mv-wait-elapsed" data-start="${waitStart}">(0s)</span>`;
-      bodyEl.innerHTML = previewText ? `<div class="mv-preview-placeholder">${escapeHtml2(previewText)}<div class="mv-tear-line" aria-label="snippet ends here, full message loading"><span>\u2702 snippet \u2014 fetching full message \u2702</span></div><div class="mv-wait-line">Fetching body from server\u2026 ${indicatorHtml}</div></div>` : `<div class="mv-empty">Fetching body from server\u2026 ${indicatorHtml}</div>`;
+      bodyEl.innerHTML = previewText ? `<div class="mv-preview-placeholder">${escapeHtml3(previewText)}<div class="mv-tear-line" aria-label="snippet ends here, full message loading"><span>\u2702 snippet \u2014 fetching full message \u2702</span></div><div class="mv-wait-line">Fetching body from server\u2026 ${indicatorHtml}</div></div>` : `<div class="mv-empty">Fetching body from server\u2026 ${indicatorHtml}</div>`;
       const captureGen = gen;
       const tick = setInterval(() => {
         if (captureGen !== showMessageGeneration) {
@@ -1945,7 +2223,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
       bodyEl.innerHTML = `<div class="mv-system-message mv-system-error">
                 <div class="mv-system-tag">mailx</div>
                 <div class="mv-system-title">Body fetch failed</div>
-                <div class="mv-system-body">${escapeHtml2(msg.bodyError)}<br><span style="color:var(--color-text-muted);font-size:0.9em">${transient ? "Reopen this message to retry." : "The server reports this message no longer exists (deleted or moved by another client)."}</span></div>
+                <div class="mv-system-body">${escapeHtml3(msg.bodyError)}<br><span style="color:var(--color-text-muted);font-size:0.9em">${transient ? "Reopen this message to retry." : "The server reports this message no longer exists (deleted or moved by another client)."}</span></div>
             </div>`;
       currentMessage = msg;
       currentAccountId = accountId;
@@ -2415,7 +2693,11 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
     } else if (msg.bodyText) {
       const pre = document.createElement("pre");
       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;";
-      pre.innerHTML = linkifyText(msg.bodyText);
+      if (msg.bodyText.length > PROGRESSIVE_TEXT_THRESHOLD) {
+        renderTextProgressively(pre, msg.bodyText, gen);
+      } else {
+        pre.innerHTML = linkifyText(msg.bodyText);
+      }
       const trunc = msg.bodyTruncated;
       if (trunc) {
         const mb = (n) => `${(n / 1048576).toFixed(1)} MB`;
@@ -2426,7 +2708,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
                     <div class="mv-system-title">Showing the first ${mb(trunc.sentBytes)} of a ${mb(trunc.totalBytes)} message</div>
                     <div class="mv-system-body">This message has no MIME structure, so its entire payload is one plain-text part; the remainder is almost always the base64 of a returned attachment.
                     The complete message is on disk:<br>
-                    <code style="user-select:all;font-size:0.9em">${escapeHtml2(trunc.emlPath || "(path unavailable)")}</code></div>`;
+                    <code style="user-select:all;font-size:0.9em">${escapeHtml3(trunc.emlPath || "(path unavailable)")}</code></div>`;
         bodyEl.appendChild(note);
       }
       bodyEl.appendChild(pre);
@@ -2436,7 +2718,7 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
         bodyEl.innerHTML = `<div class="mv-system-message mv-system-error">
                     <div class="mv-system-tag">mailx</div>
                     <div class="mv-system-title">Body fetch failed</div>
-                    <div class="mv-system-body">${escapeHtml2(fetchErr.error)}<br><span style="color:var(--color-text-muted);font-size:0.9em">Recorded ${Math.round((Date.now() - fetchErr.when) / 1e3)}s ago. ${fetchErr.transient ? "Will retry automatically." : "Permanent \u2014 server-side delete may have raced."}</span></div>
+                    <div class="mv-system-body">${escapeHtml3(fetchErr.error)}<br><span style="color:var(--color-text-muted);font-size:0.9em">Recorded ${Math.round((Date.now() - fetchErr.when) / 1e3)}s ago. ${fetchErr.transient ? "Will retry automatically." : "Permanent \u2014 server-side delete may have raced."}</span></div>
                 </div>`;
       } else {
         const emlPath = msg.emlPath || "";
@@ -2445,8 +2727,8 @@ async function showMessage(accountId, uid, folderId, specialUse, isRetry = false
         const headline = attCount > 0 ? "This message has attachments but no body text." : "This message has no body text \u2014 only a subject.";
         const crumbs = `mailx${appVer ? " " + appVer : ""} \xB7 ${accountId}/${uid}${emlPath ? " \xB7 " + emlPath : ""}`;
         bodyEl.innerHTML = `<div class="mv-system-message">
-                    <div class="mv-system-body">${escapeHtml2(headline)}</div>
-                    <div class="mv-system-body" style="color:var(--color-text-muted);font-size:0.8em;margin-top:8px">${escapeHtml2(crumbs)}</div>
+                    <div class="mv-system-body">${escapeHtml3(headline)}</div>
+                    <div class="mv-system-body" style="color:var(--color-text-muted);font-size:0.8em;margin-top:8px">${escapeHtml3(crumbs)}</div>
                 </div>`;
       }
     }
@@ -2678,9 +2960,35 @@ function renderHeaderFromEnvelope(headerEl, env) {
     }
   }
 }
-function escapeHtml2(s) {
+function escapeHtml3(s) {
   return (s || "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
+function renderTextProgressively(pre, text, 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);
+      if (nl > at)
+        end = nl + 1;
+    }
+    chunks.push(text.slice(at, end));
+    at = end;
+  }
+  let i = 0;
+  const step = () => {
+    if (gen !== showMessageGeneration)
+      return;
+    if (i >= chunks.length)
+      return;
+    const span = document.createElement("span");
+    span.innerHTML = linkifyText(chunks[i++]);
+    pre.appendChild(span);
+    requestAnimationFrame(step);
+  };
+  step();
+}
 function linkifyText(text) {
   const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   return escaped.replace(/(https?:\/\/[^\s<>"')\]]+)/g, (match) => {
@@ -3318,7 +3626,7 @@ function spawnDesktopPopout(msg, accountId) {
 function escapeHtmlLocal(s) {
   return (s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-var currentMessage, currentAccountId, dragOutUrls, showMessageGeneration, retryCount, lastEnvelope, PARSED_CACHE_LIMIT, parsedCache, sessionAllowedRemote, recentFetchErrors, ZOOM_KEY, ZOOM_MIN, ZOOM_MAX, ZOOM_STEP, previewZoom, RENDER_MARK_KEY, RENDER_MARK_MAX_AGE_MS, poisonedMessages, renderKey;
+var currentMessage, currentAccountId, dragOutUrls, showMessageGeneration, retryCount, lastEnvelope, PARSED_CACHE_LIMIT, parsedCache, sessionAllowedRemote, recentFetchErrors, ZOOM_KEY, ZOOM_MIN, ZOOM_MAX, ZOOM_STEP, previewZoom, RENDER_MARK_KEY, RENDER_MARK_MAX_AGE_MS, poisonedMessages, renderKey, PROGRESSIVE_TEXT_THRESHOLD, TEXT_CHUNK_BYTES;
 var init_message_viewer = __esm({
   "client/components/message-viewer.js"() {
     "use strict";
@@ -3385,6 +3693,8 @@ var init_message_viewer = __esm({
       } catch {
       }
     })();
+    PROGRESSIVE_TEXT_THRESHOLD = 200 * 1024;
+    TEXT_CHUNK_BYTES = 64 * 1024;
     subscribeStore("*", (ev) => {
       if (ev.kind !== "bodyFetchError")
         return;
@@ -4799,7 +5109,7 @@ function formatDate(epochMs) {
     return d.toLocaleString(void 0, dateFmtSameYear);
   return d.toLocaleString(void 0, dateFmt);
 }
-function escapeHtml3(s) {
+function escapeHtml4(s) {
   const div = document.createElement("div");
   div.textContent = s;
   return div.innerHTML;
@@ -4952,7 +5262,7 @@ var init_message_list = __esm({
         }
         const subject = document.createElement("span");
         subject.className = "ml-subject";
-        subject.innerHTML = escapeHtml3(msg.subject);
+        subject.innerHTML = escapeHtml4(msg.subject);
         if (threadHead && threadCount > 1 && msg.threadId) {
           const threadPill = document.createElement("span");
           threadPill.className = "ml-thread-pill";
@@ -5368,7 +5678,7 @@ var init_message_list = __esm({
             }
           }
         ];
-        showContextMenu(e.clientX, e.clientY, items);
+        showContextMenu(e.clientX, e.clientY, items, { editTarget: e.target });
       }
     };
     onEvent((ev) => {
@@ -5432,19 +5742,19 @@ async function openOutboxView() {
       return `
             <div class="ob-row ob-pink" data-idx="${i}">
                 <div class="ob-row-hdr">
-                    <span class="ob-acct">${escapeHtml4(m.accountId)}</span>
-                    <span class="ob-subject">${escapeHtml4(m.subject || "(no subject)")}</span>
+                    <span class="ob-acct">${escapeHtml5(m.accountId)}</span>
+                    <span class="ob-subject">${escapeHtml5(m.subject || "(no subject)")}</span>
                     <span class="ob-created">${fmtDate(m.createdAt)}</span>
                     ${claimBadge}
                     ${m.attempts > 0 ? `<span class="ob-badge ob-retry" title="Retry attempts made so far">retry \xD7${m.attempts}</span>` : ""}
                 </div>
                 <div class="ob-row-meta">
-                    <span class="ob-from">${escapeHtml4(m.from || "")}</span>
-                    \u2192 <span class="ob-to">${escapeHtml4(m.to || "")}</span>
-                    ${m.cc ? ` \xB7 Cc: ${escapeHtml4(m.cc)}` : ""}
+                    <span class="ob-from">${escapeHtml5(m.from || "")}</span>
+                    \u2192 <span class="ob-to">${escapeHtml5(m.to || "")}</span>
+                    ${m.cc ? ` \xB7 Cc: ${escapeHtml5(m.cc)}` : ""}
                     <span class="ob-size">\xB7 ${(m.sizeBytes / 1024).toFixed(1)}kB</span>
                 </div>
-                <div class="ob-row-path">${escapeHtml4(m.path)}</div>
+                <div class="ob-row-path">${escapeHtml5(m.path)}</div>
                 <div class="ob-row-actions">
                     <button type="button" class="ob-cancel">Cancel</button>
                 </div>
@@ -5480,7 +5790,7 @@ Subject: ${m.subject}`;
       const items = await listQueuedOutgoing();
       renderList(items || []);
     } catch (e) {
-      listEl.innerHTML = `<div class="ob-empty">Load failed: ${escapeHtml4(e?.message || String(e))}</div>`;
+      listEl.innerHTML = `<div class="ob-empty">Load failed: ${escapeHtml5(e?.message || String(e))}</div>`;
     }
   };
   const close = () => {
@@ -5505,7 +5815,7 @@ Subject: ${m.subject}`;
   });
   await reload();
 }
-function escapeHtml4(s) {
+function escapeHtml5(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 var isOpen2;
@@ -5544,7 +5854,7 @@ function calendarKind(id, primary) {
 }
 function calIconHtml(info) {
   const kind = calendarKind(info.id, info.primary);
-  const t = escapeHtml5(info.name);
+  const t = escapeHtml6(info.name);
   if (kind === "personal")
     return `<span class="cal-ico cal-ico-dot" title="${t}"></span>`;
   if (kind === "usHoliday")
@@ -5555,9 +5865,9 @@ function calIconHtml(info) {
     return `<span class="cal-ico cal-ico-emoji" title="${t}">\u{1F382}</span>`;
   if (kind === "otherHoliday")
     return `<span class="cal-ico cal-ico-emoji" title="${t}">\u2726</span>`;
-  const letter = escapeHtml5((info.name.trim()[0] || "?").toUpperCase());
+  const letter = escapeHtml6((info.name.trim()[0] || "?").toUpperCase());
   const color = info.color || "#7a7a7a";
-  return `<span class="cal-ico cal-ico-mono" style="background:${escapeHtml5(color)}" title="${t}">${letter}</span>`;
+  return `<span class="cal-ico cal-ico-mono" style="background:${escapeHtml6(color)}" title="${t}">${letter}</span>`;
 }
 function calInfoFor(calendarId) {
   const id = calendarId || "primary";
@@ -5606,10 +5916,10 @@ async function renderCalendarList() {
       host.innerHTML = "";
     } else {
       const sorted = [...list].sort((a, b) => (a.primary ? 0 : 1) - (b.primary ? 0 : 1) || a.name.localeCompare(b.name));
-      host.innerHTML = sorted.map((c) => `<label class="cal-side-cal-row" title="${escapeHtml5(c.name)}">
-                <input type="checkbox" class="cal-side-cal-check" data-cal-id="${escapeHtml5(c.id)}" ${hiddenCalendars.has(c.id) ? "" : "checked"}>
+      host.innerHTML = sorted.map((c) => `<label class="cal-side-cal-row" title="${escapeHtml6(c.name)}">
+                <input type="checkbox" class="cal-side-cal-check" data-cal-id="${escapeHtml6(c.id)}" ${hiddenCalendars.has(c.id) ? "" : "checked"}>
                 ${calIconHtml(c)}
-                <span class="cal-side-cal-name">${escapeHtml5(c.name)}</span>
+                <span class="cal-side-cal-name">${escapeHtml6(c.name)}</span>
             </label>`).join("");
       host.querySelectorAll(".cal-side-cal-check").forEach((cb) => {
         cb.addEventListener("change", async () => {
@@ -5696,7 +6006,7 @@ function formatTime(e) {
     return "all day";
   return new Date(e.start).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false });
 }
-function escapeHtml5(s) {
+function escapeHtml6(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 function renderHead() {
@@ -5713,10 +6023,10 @@ function overdueTaskRowHtml(t) {
     const sameYear = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
     dueLabel = sameYear ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
   }
-  return `<div class="cal-side-task cal-side-task-overdue" data-uuid="${escapeHtml5(t.uuid)}">
+  return `<div class="cal-side-task cal-side-task-overdue" data-uuid="${escapeHtml6(t.uuid)}">
         <input type="checkbox" class="cal-side-overdue-check" title="Mark done">
-        <span class="cal-side-task-title" title="${escapeHtml5(t.title)}">${escapeHtml5(t.title)}</span>
-        <span class="cal-side-task-due overdue">${escapeHtml5(dueLabel)}</span>
+        <span class="cal-side-task-title" title="${escapeHtml6(t.title)}">${escapeHtml6(t.title)}</span>
+        <span class="cal-side-task-due overdue">${escapeHtml6(dueLabel)}</span>
     </div>`;
 }
 function renderEvents(events) {
@@ -5773,10 +6083,10 @@ function renderEvents(events) {
     html += `<div class="cal-side-day cal-side-day-daily">Daily</div>`;
     for (const e of dailyHeads) {
       const link = e.htmlLink || "";
-      html += `<div class="cal-side-event" data-id="${e.id}" data-link="${escapeHtml5(link)}" ${link ? 'title="Click to open in Google Calendar"' : ""}>
+      html += `<div class="cal-side-event" data-id="${e.id}" data-link="${escapeHtml6(link)}" ${link ? 'title="Click to open in Google Calendar"' : ""}>
                 ${calIconHtml(calInfoFor(e.calendarId))}
-                <span class="cal-side-event-time">${escapeHtml5(formatTime(e))}</span>
-                <span class="cal-side-event-title" title="${escapeHtml5(e.title)}">${escapeHtml5(e.title)}<span class="cal-side-event-recur" title="Daily">\u21BB</span></span>
+                <span class="cal-side-event-time">${escapeHtml6(formatTime(e))}</span>
+                <span class="cal-side-event-title" title="${escapeHtml6(e.title)}">${escapeHtml6(e.title)}<span class="cal-side-event-recur" title="Daily">\u21BB</span></span>
             </div>`;
     }
   }
@@ -5794,7 +6104,7 @@ function renderEvents(events) {
     const d = new Date(e.start);
     const dayKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
     if (dayKey !== lastDayKey) {
-      html += `<div class="cal-side-day">${escapeHtml5(formatDayHeader(d, today, tomorrow))}</div>`;
+      html += `<div class="cal-side-day">${escapeHtml6(formatDayHeader(d, today, tomorrow))}</div>`;
       lastDayKey = dayKey;
     }
     const recurMark = e.recurringEventId ? `<span class="cal-side-event-recur" title="Recurring event">\u21BB</span>` : "";
@@ -5802,14 +6112,14 @@ function renderEvents(events) {
     const recurAttr = e.recurringEventId ? ' data-recurring="1"' : "";
     if (isHolidayKind || kind === "birthday") {
       html += `<div class="cal-side-event" data-holiday="1" data-holiday-kind="${kind}" data-id="${e.id}">
-                <span class="cal-side-event-title cal-side-event-holiday-title" title="${escapeHtml5(e.title)}">${calIconHtml(info)} ${escapeHtml5(e.title)}</span>
+                <span class="cal-side-event-title cal-side-event-holiday-title" title="${escapeHtml6(e.title)}">${calIconHtml(info)} ${escapeHtml6(e.title)}</span>
             </div>`;
     } else {
       const titleAttr = link ? 'title="Click to open in Google Calendar"' : "";
-      html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} data-link="${escapeHtml5(link)}" ${titleAttr}>
+      html += `<div class="cal-side-event" data-id="${e.id}"${recurAttr} data-link="${escapeHtml6(link)}" ${titleAttr}>
                 ${calIconHtml(info)}
-                <span class="cal-side-event-time">${escapeHtml5(formatTime(e))}</span>
-                <span class="cal-side-event-title" title="${escapeHtml5(e.title)}">${escapeHtml5(e.title)}${recurMark}</span>
+                <span class="cal-side-event-time">${escapeHtml6(formatTime(e))}</span>
+                <span class="cal-side-event-title" title="${escapeHtml6(e.title)}">${escapeHtml6(e.title)}${recurMark}</span>
             </div>`;
     }
   }
@@ -5861,7 +6171,7 @@ function renderEvents(events) {
         action: () => openInBrowser("https://calendar.google.com/")
       });
       if (items.length > 0)
-        showContextMenu(e.clientX, e.clientY, items);
+        showContextMenu(e.clientX, e.clientY, items, { editTarget: e.target });
     });
   });
 }
@@ -5894,7 +6204,7 @@ async function renderTasks(prefetched) {
     const sel = selectedTaskUuids.has(t.uuid) ? " selected" : "";
     html += `<div class="cal-side-task${sel}" data-uuid="${t.uuid}">
             <input type="checkbox" ${done ? "checked" : ""} class="cal-side-task-check">
-            <span class="cal-side-task-title${done ? " done" : ""}" title="${escapeHtml5(t.title)}">${escapeHtml5(t.title)}</span>
+            <span class="cal-side-task-title${done ? " done" : ""}" title="${escapeHtml6(t.title)}">${escapeHtml6(t.title)}</span>
             ${dueHtml}
             <button class="cal-side-task-delete" title="Delete task" aria-label="Delete task">\xD7</button>
         </div>`;
@@ -5979,7 +6289,7 @@ async function refresh() {
   } catch (e) {
     const body = document.getElementById("cal-side-body");
     if (body)
-      body.innerHTML = `<div class="cal-side-empty cal-side-quota-error">Couldn't load calendar: ${escapeHtml5(e?.message || String(e))}</div>`;
+      body.innerHTML = `<div class="cal-side-empty cal-side-quota-error">Couldn't load calendar: ${escapeHtml6(e?.message || String(e))}</div>`;
   }
   renderTasks(prefetchedTasks);
 }
@@ -6276,14 +6586,14 @@ function initCalendarSidebar() {
           const host = event.feature === "tasks" ? document.getElementById("cal-side-tasks") : document.getElementById("cal-side-body");
           if (host && !host.querySelector(".cal-side-quota-error")) {
             const msg = event.message || `Google ${event.feature} quota exceeded \u2014 try again later.`;
-            host.innerHTML = `<div class="cal-side-empty cal-side-quota-error">${escapeHtml5(msg)}</div>`;
+            host.innerHTML = `<div class="cal-side-empty cal-side-quota-error">${escapeHtml6(msg)}</div>`;
           }
         } else if (event?.type === "authScopeError") {
           const host = event.feature === "tasks" ? document.getElementById("cal-side-tasks") : document.getElementById("cal-side-body");
           if (host && !host.querySelector(".cal-side-auth-error")) {
             const msg = event.message || "Google access needs re-consent.";
             host.innerHTML = `<div class="cal-side-empty cal-side-auth-error">
-                            <div style="margin-bottom:0.6em">${escapeHtml5(msg)}</div>
+                            <div style="margin-bottom:0.6em">${escapeHtml6(msg)}</div>
                             <button type="button" class="cal-side-reauth-btn" style="padding:0.3em 0.8em;border-radius:4px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:0.9em">Re-authenticate Now</button>
                         </div>`;
             const btn = host.querySelector(".cal-side-reauth-btn");
@@ -6591,7 +6901,7 @@ function retractSuppressedPopups() {
     }
   }
 }
-function escapeHtml6(s) {
+function escapeHtml7(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 function showInWebViewPopup(opts, onRegisterClose) {
@@ -6600,11 +6910,11 @@ function showInWebViewPopup(opts, onRegisterClose) {
     overlay.className = "alarm-overlay";
     const panel = document.createElement("div");
     panel.className = "alarm-panel";
-    const buttonsHtml = opts.buttons.map((b) => `<button type="button" class="alarm-btn${b === "Open" || b === "Dismiss" ? " alarm-btn-primary" : ""}" data-button="${escapeHtml6(b)}">${escapeHtml6(b)}</button>`).join("");
+    const buttonsHtml = opts.buttons.map((b) => `<button type="button" class="alarm-btn${b === "Open" || b === "Dismiss" ? " alarm-btn-primary" : ""}" data-button="${escapeHtml7(b)}">${escapeHtml7(b)}</button>`).join("");
     panel.innerHTML = `
             <div class="alarm-head">
                 <span class="alarm-icon">\u23F0</span>
-                <span class="alarm-title">${escapeHtml6(opts.title)}</span>
+                <span class="alarm-title">${escapeHtml7(opts.title)}</span>
                 <button type="button" class="alarm-close" data-button="" aria-label="Close">&times;</button>
             </div>
             <div class="alarm-body">${opts.html}</div>
@@ -6663,7 +6973,7 @@ async function firePopupForItem(item) {
   const actionBtns = ["Dismiss", "Open"];
   if (item.kind === "calendar")
     actionBtns.push("Delete");
-  const actionHtml = actionBtns.map((b) => `<button type="button" class="action" data-btn="${escapeHtml6(b)}">${escapeHtml6(b)}</button>`).join("");
+  const actionHtml = actionBtns.map((b) => `<button type="button" class="action" data-btn="${escapeHtml7(b)}">${escapeHtml7(b)}</button>`).join("");
   const html = `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><style>
   html, body { height: 100%; }
@@ -6689,8 +6999,8 @@ async function firePopupForItem(item) {
   .actions button.action[data-btn="Delete"] { background: #b00; }
   .actions button.action[data-btn="Delete"]:hover { background: #800; }
 </style></head><body>
-  <div class="title"><span class="icon">${icon}</span>${escapeHtml6(item.title)}</div>
-  <div class="when">${escapeHtml6(formatWhen(item.whenMs))}</div>
+  <div class="title"><span class="icon">${icon}</span>${escapeHtml7(item.title)}</div>
+  <div class="when">${escapeHtml7(formatWhen(item.whenMs))}</div>
   <div class="kind">${kindLabel}</div>
   <div class="row">
     <span class="row-label">Snooze:</span>
@@ -7532,7 +7842,7 @@ function renderNode(node, container, depth) {
         }
       } });
     }
-    showContextMenu(e.clientX, e.clientY, items);
+    showContextMenu(e.clientX, e.clientY, items, { editTarget: e.target });
   });
   if (node.id !== -1) {
     let dragExpandTimer = null;
@@ -8103,7 +8413,7 @@ async function loadFolderTree(container) {
             }
           } }
         ];
-        showContextMenu(e.clientX, e.clientY, items);
+        showContextMenu(e.clientX, e.clientY, items, { editTarget: e.target });
       });
       accountEl.appendChild(header);
       if (accountExpanded && folders.length > 0) {
@@ -8327,6 +8637,8 @@ init_mailx_types();
 init_message_viewer();
 init_api_client();
 init_message_state();
+init_edit_menu();
+init_context_menu();
 installConsoleCapture();
 (function installStallWatchdog() {
   const EXPECTED_MS = 1e3;
@@ -8386,7 +8698,10 @@ window.__btick && window.__btick("app.ts module body executing");
     }
   }, true);
   document.addEventListener("contextmenu", (e) => {
-    if (!e.defaultPrevented) e.preventDefault();
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    const items = editMenuItems({ target: e.target });
+    if (items.length > 0) showContextMenu(e.clientX, e.clientY, items);
   });
 })();
 var baseTitle = APP_NAME;
@@ -10064,11 +10379,11 @@ document.addEventListener("mailx-share-intent", ((e) => {
       const bcc = sp.get("bcc");
       if (bcc) init.bcc = bcc.split(",").map((s) => s.trim()).filter(Boolean);
     } catch {
-      init.bodyHtml = `<p>${escapeHtml7(detail.mailto)}</p>`;
+      init.bodyHtml = `<p>${escapeHtml8(detail.mailto)}</p>`;
     }
   } else {
     if (detail.subject) init.subject = detail.subject;
-    if (detail.text) init.bodyHtml = `<p>${escapeHtml7(String(detail.text)).replace(/\n/g, "<br>")}</p>`;
+    if (detail.text) init.bodyHtml = `<p>${escapeHtml8(String(detail.text)).replace(/\n/g, "<br>")}</p>`;
   }
   if (Array.isArray(detail.attachments) && detail.attachments.length) {
     init.attachments = detail.attachments.filter((a) => a?.filename && a?.dataBase64);
@@ -12391,13 +12706,13 @@ async function openAboutDialog() {
     rows.push(["Window", `${window.innerWidth}\xD7${window.innerHeight}`]);
     body.innerHTML = `
             <dl class="mailx-about-dl">
-              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${k === "Version" ? val : escapeHtml7(val)}</dd>`).join("")}
+              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${k === "Version" ? val : escapeHtml8(val)}</dd>`).join("")}
             </dl>
             ${(accounts || []).length ? `
             <div class="mailx-about-accounts">
               <div class="mailx-about-section">Accounts</div>
               <ul>
-                ${accounts.map((a) => `<li>${escapeHtml7(a.email || a.id)}${a.name ? ` \u2014 ${escapeHtml7(a.name)}` : ""}</li>`).join("")}
+                ${accounts.map((a) => `<li>${escapeHtml8(a.email || a.id)}${a.name ? ` \u2014 ${escapeHtml8(a.name)}` : ""}</li>`).join("")}
               </ul>
             </div>` : ""}
             <div class="mailx-about-foot">${APP_NAME} \u2014 local-first mail client</div>`;
@@ -12405,7 +12720,7 @@ async function openAboutDialog() {
     body.textContent = `Failed to load: ${e.message}`;
   }
 }
-function escapeHtml7(s) {
+function escapeHtml8(s) {
   return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 optThreaded?.addEventListener("change", () => {