@bobfrankston/rmfmail 1.2.254 → 1.2.257

package/client/lib/rmf-tiny.js

@@ -173,7 +173,11 @@ export async function createTinyMceEditor(container, opts = {}) {
             // left. Replaced the generic alignleft/center/right icons, which
             // don't communicate wrapping (Bob 2026-07-18: "the align is
             // confusing, better to use the Word icons for the three cases").
-            quickbars_image_toolbar: "rmfwrapinline rmfwrapleft rmfwrapright",
+            // …plus a border control (Bob 2026-08-13: "image editing should have
+            // an option to put a border around the image. It could be a check box
+            // or a width size"). Split button: click = 1px border on/off, ▾ = pick
+            // the width. Registered in setup below.
+            quickbars_image_toolbar: "rmfwrapinline rmfwrapleft rmfwrapright | rmfborder",
             // Code-sample dropdown languages. TinyMCE's default list omits
             // "Text" / plain — every option triggers syntax highlighting
             // which mangles unrelated paste content (Bob 2026-05-24).
@@ -192,6 +196,11 @@ export async function createTinyMceEditor(container, opts = {}) {
             // OS file-picker the compose Attach button uses (<input type=file>,
             // which works in the msger WebView), then inlines the chosen image as
             // a base64 data URL — matching the drag-drop-an-image behavior.
+            // Insert/Edit Image → Advanced tab: border width + style, and the
+            // vertical/horizontal spacing that goes with a framed image. This is
+            // the precise-control half of the border feature; the quickbar split
+            // button below is the one-click half.
+            image_advtab: true,
             file_picker_types: "image",
             file_picker_callback: (cb, _value, meta) => {
                 if (meta && meta.filetype && meta.filetype !== "image")
@@ -353,6 +362,74 @@ export async function createTinyMceEditor(container, opts = {}) {
                 wrapButton("rmfwrapinline", "rmf-wrap-inline", "In line with text", "inline");
                 wrapButton("rmfwrapleft", "rmf-wrap-left", "Image left — text wraps around the right", "left");
                 wrapButton("rmfwrapright", "rmf-wrap-right", "Image right — text wraps around the left", "right");
+                // ── Image border ──
+                // Gray rather than black: a border's job here is to separate the
+                // image from the text around it, and #888 stays visible whether
+                // the recipient reads on a white or a dark background — a black
+                // frame disappears into a dark-mode message body.
+                const BORDER_COLOR = "#888888";
+                const BORDER_WIDTHS = [1, 2, 3, 5];
+                ed.ui.registry.addIcon("rmf-border", `<svg width="24" height="24" viewBox="0 0 24 24">`
+                    + `<rect x="3.5" y="4.5" width="17" height="15" rx="1" fill="none" stroke="currentColor" stroke-width="2"/>`
+                    + arch(12, 16.5)
+                    + `</svg>`);
+                /** Current visible border width in px — 0 when there is none.
+                 *  A width with `border-style: none` draws nothing, so it counts
+                 *  as no border. */
+                const borderWidthOf = (node) => {
+                    if (!node || node.nodeName !== "IMG")
+                        return 0;
+                    const style = node.style?.borderStyle || "";
+                    if (!style || style === "none")
+                        return 0;
+                    const w = parseFloat(node.style?.borderWidth || "");
+                    return Number.isFinite(w) ? w : 0;
+                };
+                const applyBorder = (px) => {
+                    const node = ed.selection.getNode();
+                    if (!node || node.nodeName !== "IMG")
+                        return;
+                    ed.undoManager.transact(() => {
+                        ed.dom.setStyles(node, px > 0
+                            ? { border: `${px}px solid ${BORDER_COLOR}` }
+                            : { border: "" });
+                    });
+                    ed.nodeChanged();
+                };
+                ed.ui.registry.addSplitButton("rmfborder", {
+                    icon: "rmf-border",
+                    tooltip: "Border around the image — click to toggle, ▾ to pick the width",
+                    // Click toggles: bordered → none, unbordered → 1px hairline.
+                    onAction: () => applyBorder(borderWidthOf(ed.selection.getNode()) > 0 ? 0 : 1),
+                    onItemAction: (_api, value) => applyBorder(Number(value)),
+                    select: (value) => Number(value) === borderWidthOf(ed.selection.getNode()),
+                    fetch: (cb) => cb([
+                        { type: "choiceitem", text: "No border", value: "0" },
+                        ...BORDER_WIDTHS.map((w) => ({ type: "choiceitem", text: `${w} px`, value: String(w) })),
+                    ]),
+                    onSetup: (api) => {
+                        const update = () => api.setActive(borderWidthOf(ed.selection.getNode()) > 0);
+                        ed.on("NodeChange", update);
+                        return () => ed.off("NodeChange", update);
+                    },
+                });
+                // The image dialog's Advanced tab takes a border WIDTH and a border
+                // STYLE as separate fields, and CSS defaults the style to `none` —
+                // so typing "2" and leaving the style dropdown alone produced an
+                // image with an invisible border and no hint why. A width the user
+                // asked for means a border they can see: fill in `solid`.
+                ed.on("NodeChange", () => {
+                    const n = ed.selection.getNode();
+                    if (!n || n.nodeName !== "IMG")
+                        return;
+                    const w = parseFloat(n.style?.borderWidth || "");
+                    const s = n.style?.borderStyle || "";
+                    if (Number.isFinite(w) && w > 0 && (!s || s === "none")) {
+                        ed.dom.setStyle(n, "border-style", "solid");
+                        if (!n.style.borderColor)
+                            ed.dom.setStyle(n, "border-color", BORDER_COLOR);
+                    }
+                });
                 // Bitmap-first paste. An image copied from a web app (Gemini,
                 // browser "Copy image") puts BOTH a bitmap file item and an
                 // html flavor on the clipboard — and the html flavor is a
@@ -920,7 +997,29 @@ export async function createTinyMceEditor(container, opts = {}) {
 function openSourceDialog(editor) {
     const SENTINEL = ""; // private-use area — never in real mail text
     let offset = -1;
+    let bookmark = null;
     try {
+        // The sentinel must be INSERTED, never SUBSTITUTED. selection.setContent()
+        // replaces whatever is selected — and right-clicking an image selects the
+        // <img>, so "view source" swallowed the image (Bob 2026-08-13: "if I right
+        // mouse view source on an image the image disappears"). Same loss for any
+        // non-collapsed text selection, and undoManager.ignore kept it out of the
+        // undo stack, so Ctrl+Z couldn't bring it back either. Collapse to the
+        // range START first (that's the caret the source view should land on), then
+        // restore the user's original selection once the sentinel is out again.
+        const sel = editor.selection;
+        // Bookmark type 2 = non-intrusive path+offset (no marker nodes). A saved
+        // Range object is NOT good enough: setContent re-parses the block, so the
+        // saved range's container node is detached by the time we restore and the
+        // selection came back as the whole paragraph. The path is resolved at
+        // restore time, against a DOM the sentinel strip has put back as it was.
+        bookmark = sel.getBookmark(2, true);
+        const rng = sel.getRng();
+        if (rng && !rng.collapsed) {
+            const collapsed = rng.cloneRange();
+            collapsed.collapse(true);
+            sel.setRng(collapsed);
+        }
         // Insert the sentinel at the caret without polluting undo history.
         const insert = () => editor.selection.setContent(SENTINEL);
         if (typeof editor.undoManager?.ignore === "function")
@@ -945,6 +1044,14 @@ function openSourceDialog(editor) {
             }
         }
         catch { /* sentinel cleanup is best-effort */ }
+        // Put the selection back where the user left it (the selected image
+        // stays selected, so closing the dialog leaves the quickbar up).
+        if (bookmark) {
+            try {
+                editor.selection.moveToBookmark(bookmark);
+            }
+            catch { /* path no longer resolves — caret stays where the sentinel was */ }
+        }
     }
     catch { /* fall through to a plain source view at offset 0 */ }
     // Display the pristine source (sentinel already stripped from the DOM);

package/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-client",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "private": true,
   "type": "module",
   "scripts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.2.254",
+  "version": "1.2.257",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -34,14 +34,14 @@
   "dependencies": {
     "@bobfrankston/iflow-direct": "^0.1.65",
     "@bobfrankston/mailx-host": "^0.1.15",
-    "@bobfrankston/mailx-imap": "^0.1.152",
-    "@bobfrankston/mailx-store-web": "^0.1.79",
+    "@bobfrankston/mailx-imap": "^0.1.153",
+    "@bobfrankston/mailx-store-web": "^0.1.80",
     "@bobfrankston/mailx-sync": "^0.1.29",
     "@bobfrankston/miscinfo": "^1.0.17",
-    "@bobfrankston/msger": "^0.1.424",
+    "@bobfrankston/msger": "^0.1.425",
     "@bobfrankston/node-tcp-transport": "^0.1.10",
     "@bobfrankston/oauthsupport": "^1.0.34",
-    "@bobfrankston/rmf-tiny": "^0.1.46",
+    "@bobfrankston/rmf-tiny": "^0.1.48",
     "@bobfrankston/smtp-direct": "^0.1.9",
     "@bobfrankston/tcp-transport": "^0.1.8",
     "@capacitor/android": "^8.3.0",
@@ -114,14 +114,14 @@
     "dependencies": {
       "@bobfrankston/iflow-direct": "^0.1.65",
       "@bobfrankston/mailx-host": "^0.1.15",
-      "@bobfrankston/mailx-imap": "^0.1.152",
-      "@bobfrankston/mailx-store-web": "^0.1.79",
+      "@bobfrankston/mailx-imap": "^0.1.153",
+      "@bobfrankston/mailx-store-web": "^0.1.80",
       "@bobfrankston/mailx-sync": "^0.1.29",
       "@bobfrankston/miscinfo": "^1.0.17",
-      "@bobfrankston/msger": "^0.1.424",
+      "@bobfrankston/msger": "^0.1.425",
       "@bobfrankston/node-tcp-transport": "^0.1.10",
       "@bobfrankston/oauthsupport": "^1.0.34",
-      "@bobfrankston/rmf-tiny": "^0.1.46",
+      "@bobfrankston/rmf-tiny": "^0.1.48",
       "@bobfrankston/smtp-direct": "^0.1.9",
       "@bobfrankston/tcp-transport": "^0.1.8",
       "@capacitor/android": "^8.3.0",