@bobfrankston/rmfmail 1.2.254 → 1.2.256

package/client/compose/compose.bundle.js

@@ -2699,7 +2699,11 @@ async function createTinyMceEditor(container2, 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).
@@ -2718,6 +2722,11 @@ async function createTinyMceEditor(container2, 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")
@@ -2874,6 +2883,56 @@ async function createTinyMceEditor(container2, opts = {}) {
         wrapButton("rmfwrapinline", "rmf-wrap-inline", "In line with text", "inline");
         wrapButton("rmfwrapleft", "rmf-wrap-left", "Image left \u2014 text wraps around the right", "left");
         wrapButton("rmfwrapright", "rmf-wrap-right", "Image right \u2014 text wraps around the left", "right");
+        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>`);
+        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 \u2014 click to toggle, \u25BE 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);
+          }
+        });
+        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);
+          }
+        });
         ed.on("paste", (e) => {
           const cb = e.clipboardData;
           if (!cb)
@@ -3268,7 +3327,18 @@ async function createTinyMceEditor(container2, opts = {}) {
 function openSourceDialog(editor2) {
   const SENTINEL = "\uE000";
   let offset = -1;
+  let savedRng = null;
   try {
+    const sel = editor2.selection;
+    const rng = sel.getRng();
+    if (rng) {
+      savedRng = rng.cloneRange();
+      if (!rng.collapsed) {
+        const collapsed = rng.cloneRange();
+        collapsed.collapse(true);
+        sel.setRng(collapsed);
+      }
+    }
     const insert = () => editor2.selection.setContent(SENTINEL);
     if (typeof editor2.undoManager?.ignore === "function")
       editor2.undoManager.ignore(insert);
@@ -3289,6 +3359,12 @@ function openSourceDialog(editor2) {
       }
     } catch {
     }
+    if (savedRng) {
+      try {
+        editor2.selection.setRng(savedRng);
+      } catch {
+      }
+    }
   } catch {
   }
   const source = editor2.getContent();