@bobfrankston/rmfmail 1.2.148 → 1.2.149

package/client/lib/rmf-tiny.js

@@ -146,7 +146,12 @@ export async function createTinyMceEditor(container, opts = {}) {
             // clutters more than it helps in an email composer.
             quickbars_selection_toolbar: "bold italic underline | forecolor | quicklink blockquote",
             quickbars_insert_toolbar: false,
-            quickbars_image_toolbar: "alignleft aligncenter alignright",
+            // Word-style layout buttons (registered in setup below): in-line
+            // with text, image-left/text-wraps-right, image-right/text-wraps-
+            // 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",
             // 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).
@@ -284,6 +289,48 @@ export async function createTinyMceEditor(container, opts = {}) {
             setup: (ed) => {
                 if (opts.initialHtml)
                     ed.on("init", () => ed.setContent(opts.initialHtml));
+                // ── Image layout buttons (Word "Layout Options" style) ──
+                // Icons mimic Word's glyphs: an arch (the image) among text
+                // lines, so each button SHOWS its result instead of a generic
+                // align arrow. Three cases: in line with text, image left
+                // (text wraps right), image right (text wraps left).
+                const ln = (x1, x2, y) => `<rect x="${x1}" y="${y}" width="${x2 - x1}" height="1.5" rx="0.75" fill="currentColor"/>`;
+                const arch = (cx, base) => `<path d="M ${cx - 4.5} ${base} a 4.5 4.5 0 0 1 9 0 z" fill="currentColor"/>`;
+                const svg = (body) => `<svg width="24" height="24" viewBox="0 0 24 24">${body}</svg>`;
+                ed.ui.registry.addIcon("rmf-wrap-inline", svg(ln(3, 21, 4.5) + ln(3, 6.5, 14.5) + arch(12, 16) + ln(17.5, 21, 14.5) + ln(3, 21, 19.5)));
+                ed.ui.registry.addIcon("rmf-wrap-left", svg(ln(3, 21, 4.5) + arch(7.5, 16) + ln(14, 21, 9.5) + ln(14, 21, 14.5) + ln(3, 21, 19.5)));
+                ed.ui.registry.addIcon("rmf-wrap-right", svg(ln(3, 21, 4.5) + ln(3, 10, 9.5) + ln(3, 10, 14.5) + arch(16.5, 16) + ln(3, 21, 19.5)));
+                const applyWrap = (mode) => {
+                    const node = ed.selection.getNode();
+                    if (!node || node.nodeName !== "IMG")
+                        return;
+                    ed.undoManager.transact(() => {
+                        ed.dom.setStyles(node, {
+                            float: mode === "inline" ? "" : mode,
+                            margin: mode === "inline" ? "" :
+                                mode === "left" ? "0 12px 8px 0" : "0 0 8px 12px",
+                        });
+                    });
+                    ed.nodeChanged();
+                };
+                const wrapButton = (name, icon, tip, mode) => {
+                    ed.ui.registry.addToggleButton(name, {
+                        icon, tooltip: tip,
+                        onAction: () => applyWrap(mode),
+                        onSetup: (api) => {
+                            const update = () => {
+                                const node = ed.selection.getNode();
+                                const f = node?.nodeName === "IMG" ? (node.style.float || "inline") : "";
+                                api.setActive(f === mode || (mode === "inline" && f === "none"));
+                            };
+                            ed.on("NodeChange", update);
+                            return () => ed.off("NodeChange", update);
+                        },
+                    });
+                };
+                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");
                 // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.2.148",
+  "version": "1.2.149",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -43,7 +43,7 @@
     "@bobfrankston/msger": "^0.1.398",
     "@bobfrankston/node-tcp-transport": "^0.1.10",
     "@bobfrankston/oauthsupport": "^1.0.34",
-    "@bobfrankston/rmf-tiny": "^0.1.39",
+    "@bobfrankston/rmf-tiny": "^0.1.40",
     "@bobfrankston/smtp-direct": "^0.1.9",
     "@bobfrankston/tcp-transport": "^0.1.8",
     "@capacitor/android": "^8.3.0",
@@ -121,7 +121,7 @@
       "@bobfrankston/msger": "^0.1.398",
       "@bobfrankston/node-tcp-transport": "^0.1.10",
       "@bobfrankston/oauthsupport": "^1.0.34",
-      "@bobfrankston/rmf-tiny": "^0.1.39",
+      "@bobfrankston/rmf-tiny": "^0.1.40",
       "@bobfrankston/smtp-direct": "^0.1.9",
       "@bobfrankston/tcp-transport": "^0.1.8",
       "@capacitor/android": "^8.3.0",