@bobfrankston/rmfmail 1.0.502 → 1.0.503

package/client/compose/compose.html

@@ -19,7 +19,7 @@
         </div>
         <div class="compose-field">
             <label for="compose-to">To</label>
-            <input type="text" id="compose-to" autocomplete="off">
+            <textarea id="compose-to" class="compose-addr-input" autocomplete="off" rows="1" spellcheck="false"></textarea>
             <span class="compose-recipient-toggle">
                 <button type="button" class="compose-toggle-btn" id="btn-toggle-cc" tabindex="-1" title="Show/hide Cc">Cc</button>
                 <button type="button" class="compose-toggle-btn" id="btn-toggle-bcc" tabindex="-1" title="Show/hide Bcc">Bcc</button>
@@ -27,11 +27,11 @@
         </div>
         <div class="compose-field" id="compose-cc-row" hidden>
             <label for="compose-cc">Cc</label>
-            <input type="text" id="compose-cc" autocomplete="off">
+            <textarea id="compose-cc" class="compose-addr-input" autocomplete="off" rows="1" spellcheck="false"></textarea>
         </div>
         <div class="compose-field" id="compose-bcc-row" hidden>
             <label for="compose-bcc">Bcc</label>
-            <input type="text" id="compose-bcc" autocomplete="off">
+            <textarea id="compose-bcc" class="compose-addr-input" autocomplete="off" rows="1" spellcheck="false"></textarea>
         </div>
         <div class="compose-field">
             <label for="compose-subject">Subject</label>
@@ -43,6 +43,7 @@
         <button class="tb-btn" id="btn-attach">Attach</button>
         <input type="file" id="compose-file" multiple hidden>
         <button class="tb-btn" id="btn-edit-in-word" title="Open the body in Microsoft Word — saves in Word reload back into the editor">Edit in Word</button>
+        <button class="tb-btn" id="btn-compose-help" title="Editor shortcuts and formatting reference (Quill vs tiptap differences)">?</button>
         <button class="tb-btn" id="btn-discard">Discard</button>
         <span id="compose-status" class="compose-status"></span>
     </div>

package/client/compose/compose.js

@@ -92,34 +92,48 @@ catch { /* private-mode / SecurityError — default quill */ }
     }
     catch { /* non-fatal */ }
 })();
-// Whatever happens in editor init, surface failures to the mailx log
-// AND fall through to a plain-contenteditable fallback so the rest of
-// the compose script (Discard, X, Send, save-draft) still runs. Earlier
-// versions re-threw asset-load failures, which left compose with dead
-// buttons and the user with no recourse — exactly the "Reply window
-// won't close" symptom we hit when Quill's CDN was unreachable.
+// Editor init — try the preferred type first; if its CDN/setup fails,
+// fall back to the OTHER editor before giving up on the toolbar entirely.
+// Both Quill and tiptap fetch from jsdelivr; transient CDN issues used to
+// drop the user into a plain-textarea fallback with no formatting controls.
+// Now we keep trying until either an editor with a toolbar comes up, or
+// both fail and we render the minimal contenteditable as last resort.
 let editor;
-let editorAssetError = null;
-try {
-    await loadEditorAssets(editorType);
-}
-catch (e) {
-    editorAssetError = e;
-    logClientEvent("compose-editor-assets-failed", { type: editorType, error: String(e?.message || e) });
-}
 const container = document.getElementById("compose-editor");
-container.classList.add(editorType === "tiptap" ? "editor-tiptap" : "editor-quill");
-try {
-    if (editorAssetError)
-        throw editorAssetError;
-    editor = await createEditor(container, editorType);
+async function tryEditor(type) {
+    try {
+        await loadEditorAssets(type);
+    }
+    catch (e) {
+        logClientEvent("compose-editor-assets-failed", { type, error: String(e?.message || e) });
+        return null;
+    }
+    container.classList.remove("editor-tiptap", "editor-quill");
+    container.classList.add(type === "tiptap" ? "editor-tiptap" : "editor-quill");
+    try {
+        return await createEditor(container, type);
+    }
+    catch (e) {
+        logClientEvent("compose-editor-create-failed", { type, error: String(e?.message || e) });
+        return null;
+    }
 }
-catch (e) {
-    logClientEvent("compose-editor-create-failed", { type: editorType, error: String(e?.message || e) });
-    // Render a minimal contenteditable fallback so the user can still type
-    // SOMETHING. Without this, an editor failure leaves the compose form
-    // half-functional (To/Cc/Bcc work, body doesn't) and the user doesn't
-    // know why. The fallback is a plain div — no toolbar, no rich text.
+editor = (await tryEditor(editorType));
+if (!editor) {
+    // Preferred editor failed — try the other one before giving up.
+    const fallbackType = editorType === "tiptap" ? "quill" : "tiptap";
+    logClientEvent("compose-editor-fallback-other", { from: editorType, to: fallbackType });
+    container.innerHTML = ""; // clear any partial render from the failed try
+    editor = (await tryEditor(fallbackType));
+    if (editor) {
+        setTimeout(() => showDraftStatus(`${editorType} editor unavailable — using ${fallbackType} instead.`, false), 0);
+    }
+}
+if (!editor) {
+    // Both editors failed — render a minimal contenteditable as last resort.
+    // No toolbar, no rich-text shortcuts; user can still type. Status bar
+    // surfaces the failure so the missing toolbar isn't a silent mystery.
+    logClientEvent("compose-editor-create-failed-both", {});
     container.innerHTML = `<div class="compose-fallback-editor" contenteditable="true" style="border:1px solid #c00;padding:8px;min-height:200px;background:#fff" data-fallback="true"></div>`;
     const fallback = container.querySelector(".compose-fallback-editor");
     editor = {
@@ -144,9 +158,7 @@ catch (e) {
             }
         },
     };
-    // Surface the failure to the user in the status bar so they know
-    // why the toolbar is missing and the editor is plain.
-    setTimeout(() => showDraftStatus(`Editor failed to load (${editorType}). Plain-text fallback in use. Open log for details.`, true), 0);
+    setTimeout(() => showDraftStatus(`Both editors failed to load. Plain-text fallback in use. Check the log; CDN may be unreachable.`, true), 0);
 }
 // Ctrl+scroll / Ctrl+= / Ctrl+- / Ctrl+0 zoom for the compose editor body.
 // Persists per-session in localStorage so zoom survives window pop/close cycles.
@@ -193,10 +205,44 @@ catch (e) {
 // separate "Other..." escape hatch, no hidden custom input toggle.
 const fromInput = document.getElementById("compose-from-input");
 const fromOptions = document.getElementById("compose-from-options");
+// Address fields are textareas (not inputs) so they wrap to multiple lines
+// when the recipient list gets long — single-line inputs scrolled off-screen
+// horizontally. JS auto-grows their height on input below.
 const toInput = document.getElementById("compose-to");
 const ccInput = document.getElementById("compose-cc");
 const bccInput = document.getElementById("compose-bcc");
 const subjectInput = document.getElementById("compose-subject");
+/** Resize an address textarea to fit its content. Called on input + after
+ *  programmatic value sets (applyInit). Caps at 8 lines — beyond that the
+ *  field scrolls to keep the overall compose window manageable. */
+function autoGrowAddrInput(el) {
+    if (!el)
+        return;
+    el.style.height = "auto";
+    const max = 8 * 22; // ~8 lines × line-height
+    el.style.height = Math.min(el.scrollHeight, max) + "px";
+    if (el.scrollHeight > max)
+        el.style.overflowY = "auto";
+    else
+        el.style.overflowY = "hidden";
+}
+for (const el of [toInput, ccInput, bccInput]) {
+    el?.addEventListener("input", () => autoGrowAddrInput(el));
+    // Treat Enter as a recipient separator (split on comma OR newline at
+    // send time), but don't insert a literal newline — that'd break the
+    // implicit "comma-separated list" assumption downstream. Replace with
+    // a comma + space.
+    el?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            const start = el.selectionStart || 0;
+            const v = el.value;
+            el.value = v.slice(0, start).replace(/[,\s]+$/, "") + ", " + v.slice(start).replace(/^[,\s]+/, "");
+            el.selectionStart = el.selectionEnd = start + 2;
+            autoGrowAddrInput(el);
+        }
+    });
+}
 let knownAccounts = [];
 // ── AI ghost text autocomplete ──
 if (appSettings?.autocomplete?.enabled && appSettings.autocomplete.provider !== "off") {
@@ -485,17 +531,18 @@ function setupAutocomplete(input) {
         if (!dropdown)
             return;
         const items = dropdown.querySelectorAll(".ac-item");
-        if (e.key === "ArrowDown") {
+        const ke = e;
+        if (ke.key === "ArrowDown") {
             e.preventDefault();
             activeIndex = Math.min(activeIndex + 1, items.length - 1);
             items.forEach((el, i) => el.classList.toggle("ac-active", i === activeIndex));
         }
-        else if (e.key === "ArrowUp") {
+        else if (ke.key === "ArrowUp") {
             e.preventDefault();
             activeIndex = Math.max(activeIndex - 1, 0);
             items.forEach((el, i) => el.classList.toggle("ac-active", i === activeIndex));
         }
-        else if (e.key === "Tab" || e.key === "Enter") {
+        else if (ke.key === "Tab" || ke.key === "Enter") {
             if (items.length > 0) {
                 e.preventDefault();
                 const idx = activeIndex >= 0 ? activeIndex : 0;
@@ -504,7 +551,7 @@ function setupAutocomplete(input) {
                 return;
             }
         }
-        else if (e.key === "Escape") {
+        else if (ke.key === "Escape") {
             closeDropdown();
         }
     });
@@ -534,6 +581,47 @@ function parseAddrs(s) {
         return { name: "", address: part };
     });
 }
+/** Expand any group names in a recipient string against the user's
+ *  contacts.jsonc → groups map. Recipients that match a group name (case
+ *  insensitive) get replaced by their member list, recursively. Unresolved
+ *  tokens are left in place so the user sees them and can fix the typo.
+ *  Loaded once per send via `getContactsConfig`; cached for the session. */
+let _groupsCache = null;
+async function loadGroupsMap() {
+    if (_groupsCache)
+        return _groupsCache;
+    try {
+        const { readJsoncFile } = await import("../lib/api-client.js");
+        const r = await readJsoncFile("contacts.jsonc");
+        if (!r?.content) {
+            _groupsCache = {};
+            return _groupsCache;
+        }
+        // Use a loose JSONC parse: strip // comments + trailing commas.
+        const stripped = r.content.replace(/^\s*\/\/.*$/gm, "").replace(/,(\s*[}\]])/g, "$1");
+        const cfg = JSON.parse(stripped);
+        _groupsCache = (cfg && typeof cfg.groups === "object" && cfg.groups) ? cfg.groups : {};
+        return _groupsCache;
+    }
+    catch {
+        _groupsCache = {};
+        return _groupsCache;
+    }
+}
+/** Expand the raw recipient string against the loaded groups map. */
+async function expandGroups(raw) {
+    if (!raw.trim())
+        return raw;
+    const groups = await loadGroupsMap();
+    if (Object.keys(groups).length === 0)
+        return raw;
+    const { expandRecipients } = await import("@bobfrankston/mailx-types");
+    const r = expandRecipients(raw, groups);
+    if (r.unresolved.length > 0) {
+        console.warn(`[groups] unresolved recipients: ${r.unresolved.join(", ")}`);
+    }
+    return r.addresses.join(", ");
+}
 function applyInit(init) {
     // Populate the From datalist with known accounts
     populateFromOptions(init.accounts, init.accountId);
@@ -547,6 +635,12 @@ function applyInit(init) {
     toInput.value = formatAddrs(init.to);
     ccInput.value = formatAddrs(init.cc);
     subjectInput.value = init.subject;
+    // Resize the textareas to match the freshly-loaded recipient lists —
+    // without this the textareas stay 1-row even when the To: contains a
+    // 200-character reply-all address list.
+    autoGrowAddrInput(toInput);
+    autoGrowAddrInput(ccInput);
+    autoGrowAddrInput(bccInput);
     // Auto-expand Cc row if the init already has Cc content (reply-all, draft-with-cc)
     if (ccInput.value.trim()) {
         const ccRowEl = document.getElementById("compose-cc-row");
@@ -837,18 +931,24 @@ window.addEventListener("blur", () => {
     }
     catch { /* */ }
 });
-document.getElementById("btn-send")?.addEventListener("click", () => {
+document.getElementById("btn-send")?.addEventListener("click", async () => {
     // Loud tracing through the whole send pipeline. Every step ships a
     // `[client] compose-send-*` event to the Node log so a "vanished message"
     // report can be traced end-to-end without devtools. If the log stops
     // at any step, that's where the pipeline broke.
     logClientEvent("compose-send-click");
+    // Group expansion — replace any group names (family, neighbors, etc.)
+    // with their address lists from contacts.jsonc → groups before parsing
+    // into the validated {name, address}[] shape the service expects.
+    const toExpanded = await expandGroups(toInput.value);
+    const ccExpanded = await expandGroups(ccInput.value);
+    const bccExpanded = await expandGroups(bccInput.value);
     const body = {
         from: getFromAccountId(),
         fromAddress: getFromAddress(),
-        to: parseAddrs(toInput.value),
-        cc: parseAddrs(ccInput.value),
-        bcc: parseAddrs(bccInput.value),
+        to: parseAddrs(toExpanded),
+        cc: parseAddrs(ccExpanded),
+        bcc: parseAddrs(bccExpanded),
         subject: subjectInput.value,
         bodyHtml: editor.getHtml(),
         bodyText: editor.getText(),
@@ -1170,11 +1270,163 @@ document.getElementById("btn-edit-in-word")?.addEventListener("click", async ()
             result.opener === "libreoffice" ? "LibreOffice" :
                 "your default editor";
         showDraftStatus(`Editing in ${label} — saves there will reload here.`, false);
+        showExternalEditHint(label);
     }
     catch (e) {
         showDraftStatus(`Edit-in-Word failed: ${e?.message || e}`, true);
     }
 });
+// Editor help button — opens a reference modal with shortcuts and the
+// Quill / tiptap differences. Source content lives in app/docs/editor.md
+// (and is mirrored in editor-help.ts for runtime embed).
+document.getElementById("btn-compose-help")?.addEventListener("click", async () => {
+    try {
+        const { EDITOR_HELP_MD } = await import("./editor-help.js");
+        showEditorHelpModal(EDITOR_HELP_MD);
+    }
+    catch (e) {
+        showDraftStatus(`Couldn't open help: ${e?.message || e}`, true);
+    }
+});
+/** Render a markdown string in a centered modal. Click outside / Esc /
+ *  Close button dismiss. Lightweight markdown rendering — handles headings,
+ *  paragraphs, lists, tables, inline code, bold/italic. Intentionally
+ *  doesn't pull a full markdown library since this is one document. */
+function showEditorHelpModal(md) {
+    if (document.getElementById("mailx-editor-help-modal"))
+        return;
+    const backdrop = document.createElement("div");
+    backdrop.id = "mailx-editor-help-modal";
+    backdrop.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10001;display:flex;align-items:center;justify-content:center;padding:24px;";
+    const panel = document.createElement("div");
+    panel.style.cssText = "background:var(--color-bg, #fff);color:var(--color-text, #000);border-radius:8px;max-width:780px;max-height:88vh;width:100%;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.4);";
+    const header = document.createElement("div");
+    header.style.cssText = "display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--color-border, #ddd);";
+    header.innerHTML = `<span style="font-weight:600;">Editor help</span><button id="mailx-editor-help-close" style="background:none;border:0;font-size:18px;cursor:pointer;color:var(--color-text);padding:2px 8px;" aria-label="Close">&times;</button>`;
+    const body = document.createElement("div");
+    body.style.cssText = "flex:1;overflow:auto;padding:18px 22px;font:14px/1.55 system-ui;";
+    body.innerHTML = renderMarkdownLite(md);
+    panel.appendChild(header);
+    panel.appendChild(body);
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    header.querySelector("#mailx-editor-help-close")?.addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+}
+/** Compact markdown renderer. Handles headings, paragraphs, code blocks,
+ *  inline code, bold, italic, links, lists, and pipe-tables. Built for the
+ *  editor help doc shape — not a general-purpose markdown engine. */
+function renderMarkdownLite(md) {
+    const esc = (s) => s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+    const inline = (s) => esc(s)
+        .replace(/`([^`]+)`/g, '<code style="background:var(--color-bg-surface,#f3f3f3);padding:1px 4px;border-radius:3px;">$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/(?<![*\w])\*([^*\n]+)\*(?!\w)/g, "<em>$1</em>")
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    const lines = md.split(/\r?\n/);
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        const h = /^(#{1,6})\s+(.*)$/.exec(line);
+        if (h) {
+            out.push(`<h${h[1].length} style="margin:18px 0 8px 0;">${inline(h[2])}</h${h[1].length}>`);
+            i++;
+            continue;
+        }
+        if (/^\s*$/.test(line)) {
+            i++;
+            continue;
+        }
+        // Pipe-table
+        if (line.includes("|") && /^\s*\|/.test(line)) {
+            const rows = [];
+            while (i < lines.length && /^\s*\|/.test(lines[i])) {
+                rows.push(lines[i].trim().split("|").slice(1, -1).map(s => s.trim()));
+                i++;
+            }
+            if (rows.length >= 2 && /^[\s\-:]+$/.test(rows[1].join(""))) {
+                const head = rows[0];
+                const data = rows.slice(2);
+                out.push(`<table style="border-collapse:collapse;margin:8px 0;">`);
+                out.push(`<thead><tr>${head.map(h => `<th style="border-bottom:2px solid var(--color-border,#ccc);padding:4px 10px;text-align:left;">${inline(h)}</th>`).join("")}</tr></thead>`);
+                out.push(`<tbody>${data.map(r => `<tr>${r.map(c => `<td style="border-bottom:1px solid var(--color-border,#eee);padding:4px 10px;">${inline(c)}</td>`).join("")}</tr>`).join("")}</tbody>`);
+                out.push(`</table>`);
+                continue;
+            }
+        }
+        // Bullet / numbered list
+        if (/^\s*[-*]\s+/.test(line)) {
+            const items = [];
+            while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
+                items.push(lines[i].replace(/^\s*[-*]\s+/, ""));
+                i++;
+            }
+            out.push(`<ul style="margin:6px 0 6px 22px;">${items.map(it => `<li style="margin:3px 0;">${inline(it)}</li>`).join("")}</ul>`);
+            continue;
+        }
+        // Default: paragraph
+        out.push(`<p style="margin:6px 0;">${inline(line)}</p>`);
+        i++;
+    }
+    return out.join("\n");
+}
+/** Modal hint shown when Edit-in-Word launches. The user is about to lose
+ *  focus to Word and may not know what to do next, so spell it out: save in
+ *  Word → switch back here → click Send. Dismissed by Esc, the close button,
+ *  or any click outside the panel. */
+function showExternalEditHint(editorLabel) {
+    if (document.getElementById("mailx-extedit-hint"))
+        return; // don't stack
+    const backdrop = document.createElement("div");
+    backdrop.id = "mailx-extedit-hint";
+    backdrop.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:10001;display:flex;align-items:center;justify-content:center;";
+    const panel = document.createElement("div");
+    panel.style.cssText = "background:var(--color-bg, #fff);color:var(--color-text, #000);border:1px solid var(--color-border, #ccc);border-radius:8px;padding:18px 22px;max-width:480px;box-shadow:0 8px 32px rgba(0,0,0,0.4);font:14px/1.5 system-ui;";
+    panel.innerHTML = `
+        <div style="font-weight:600;font-size:16px;margin-bottom:10px;">Editing in ${escapeHtml(editorLabel)}</div>
+        <ol style="margin:0 0 12px 18px;padding:0;">
+            <li>Edit your message in <b>${escapeHtml(editorLabel)}</b>.</li>
+            <li>Save (<b>Ctrl+S</b>). Today, choose <b>"Web Page, Filtered (.htm)"</b> if Word asks for a format — keep the same filename.</li>
+            <li>Switch back to this window (<b>Alt+Tab</b>). The body will reload here.</li>
+            <li>Click <b>Send</b> in this window when ready.</li>
+        </ol>
+        <div style="text-align:right;margin-top:8px;">
+            <button type="button" id="mailx-extedit-hint-ok" style="padding:6px 16px;border:1px solid var(--color-border, #ccc);background:var(--color-bg-surface, #f6f6f6);border-radius:4px;cursor:pointer;font:inherit;">Got it</button>
+        </div>
+    `;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector("#mailx-extedit-hint-ok")?.addEventListener("click", close);
+    // Click outside the panel (i.e. on the backdrop) dismisses.
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+}
 // Listen for external-editor saves. Only react to events for this compose's
 // editId — multiple compose windows can be open and should not stomp each
 // other's bodies.