@bobfrankston/rmfmail 1.2.148 → 1.2.149

package/client/compose/compose.bundle.js

@@ -2064,7 +2064,12 @@ async function createTinyMceEditor(container2, 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).
@@ -2202,6 +2207,43 @@ async function createTinyMceEditor(container2, opts = {}) {
       setup: (ed) => {
         if (opts.initialHtml)
           ed.on("init", () => ed.setContent(opts.initialHtml));
+        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 \u2014 text wraps around the right", "left");
+        wrapButton("rmfwrapright", "rmf-wrap-right", "Image right \u2014 text wraps around the left", "right");
         ed.on("paste", (e) => {
           const cb = e.clipboardData;
           if (!cb)