@bobfrankston/rmfmail 1.2.147 → 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).
@@ -2137,12 +2142,11 @@ async function createTinyMceEditor(container2, opts = {}) {
       relative_urls: false,
       remove_script_host: false,
       paste_data_images: true,
-      // Permissive valid_elements — preserve as much of the source
-      // formatting as possible. The default is more aggressive about
-      // stripping. Empty string for `valid_elements` means accept
-      // everything that the schema allows.
-      paste_word_valid_elements: "@[style|class],-strong/b,-em/i,-u,-s,-sub,-sup,-strike,-p,-ol,-ul,-li,-h1,-h2,-h3,-h4,-h5,-h6,-blockquote,-table[border|cellpadding|cellspacing|width|height|class|style],-tr,-td[colspan|rowspan|width|height|class|style|valign|align|background|bgcolor],-th,-thead,-tbody,-tfoot,-pre,-br,-a[href|target|title],-img[src|alt|width|height|style|class]",
-      paste_retain_style_properties: "color background background-color font-family font-size font-weight font-style text-decoration text-align padding padding-top padding-bottom padding-left padding-right margin margin-top margin-bottom margin-left margin-right border border-top border-bottom border-left border-right",
+      // NOTE: paste_word_valid_elements and paste_retain_style_properties
+      // were REMOVED in TinyMCE 8 (core paste keeps formatting by
+      // default now) — passing them only triggered the deprecation
+      // console warning on every compose load. Removed 2026-07-18; if
+      // TinyMCE is ever pinned back to ≤7, restore them from git.
       // Auto-link bare URLs in pasted content. TinyMCE's `autolink`
       // plugin only fires on TYPED space/enter; URLs that arrive via
       // clipboard (browser address bar, terminal copy) come in as
@@ -2203,6 +2207,65 @@ 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)
+            return;
+          const imgItem = Array.from(cb.items || []).find((i) => i.kind === "file" && i.type.startsWith("image/"));
+          if (!imgItem)
+            return;
+          if ((cb.getData("text/plain") || "").trim())
+            return;
+          const file = imgItem.getAsFile();
+          if (!file)
+            return;
+          e.preventDefault();
+          const reader = new FileReader();
+          reader.onload = () => {
+            try {
+              ed.insertContent(`<img src="${String(reader.result || "")}" alt="${file.name || "pasted image"}">`);
+            } catch {
+            }
+          };
+          reader.readAsDataURL(file);
+        });
         ed.on("GetContent", (e) => {
           if (!e?.content || typeof e.content !== "string" || !e.content.includes("blob:"))
             return;