@bobfrankston/rmfmail 1.1.202 → 1.1.204

package/client/lib/rmf-tiny.js

@@ -81,6 +81,31 @@ export async function createTinyMceEditor(container, opts = {}) {
     target.id = `rmf-tiny-${Math.random().toString(36).slice(2, 10)}`;
     target.style.cssText = "width:100%;height:100%;";
     container.appendChild(target);
+    // Code-block languages — shared by the stock codesample dialog
+    // (codesample_languages) AND our custom "Insert code" dialog below, so a
+    // language added here shows up in both. "Text" first = default (no
+    // highlighting, which would mangle plain pasted snippets — Bob 2026-05-24).
+    // PowerShell added 2026-05-31 (Bob: ".ps1 is another file type").
+    const CODE_LANGS = [
+        { text: "Text", value: "text" },
+        { text: "HTML/XML", value: "markup" },
+        { text: "JavaScript", value: "javascript" },
+        { text: "TypeScript", value: "typescript" },
+        { text: "CSS", value: "css" },
+        { text: "JSON", value: "json" },
+        { text: "Python", value: "python" },
+        { text: "Java", value: "java" },
+        { text: "C", value: "c" },
+        { text: "C++", value: "cpp" },
+        { text: "C#", value: "csharp" },
+        { text: "Go", value: "go" },
+        { text: "Rust", value: "rust" },
+        { text: "Ruby", value: "ruby" },
+        { text: "PHP", value: "php" },
+        { text: "Shell", value: "bash" },
+        { text: "PowerShell", value: "powershell" },
+        { text: "SQL", value: "sql" },
+    ];
     const editor = await new Promise((resolve) => {
         tinymce.init({
             target,
@@ -93,7 +118,7 @@ export async function createTinyMceEditor(container, opts = {}) {
             plugins: "paste lists advlist link table code codesample image searchreplace autolink wordcount emoticons charmap insertdatetime quickbars nonbreaking directionality help",
             toolbar: [
                 "undo redo | bold italic underline strikethrough | forecolor backcolor",
-                "bullist numlist outdent indent | link table image code codesample | emoticons charmap | help",
+                "bullist numlist outdent indent | link table image code rmfcode | emoticons charmap | help",
             ].join(" | "),
             // Include "tools" so wordcount and searchreplace are reachable.
             menubar: "file edit view insert format tools",
@@ -120,25 +145,7 @@ export async function createTinyMceEditor(container, opts = {}) {
             // which mangles unrelated paste content (Bob 2026-05-24).
             // Adding Text first so it's the default; rest are the modern
             // languages we actually paste.
-            codesample_languages: [
-                { text: "Text", value: "text" },
-                { text: "HTML/XML", value: "markup" },
-                { text: "JavaScript", value: "javascript" },
-                { text: "TypeScript", value: "typescript" },
-                { text: "CSS", value: "css" },
-                { text: "JSON", value: "json" },
-                { text: "Python", value: "python" },
-                { text: "Java", value: "java" },
-                { text: "C", value: "c" },
-                { text: "C++", value: "cpp" },
-                { text: "C#", value: "csharp" },
-                { text: "Go", value: "go" },
-                { text: "Rust", value: "rust" },
-                { text: "Ruby", value: "ruby" },
-                { text: "PHP", value: "php" },
-                { text: "Shell", value: "bash" },
-                { text: "SQL", value: "sql" },
-            ],
+            codesample_languages: CODE_LANGS,
             // WebView's native spell-check (red underlines, right-click
             // "Add to dictionary"). Free; same UX as Quill's spellcheck=true.
             // Premium tinymcespellchecker plugin would replace this with a
@@ -156,6 +163,17 @@ export async function createTinyMceEditor(container, opts = {}) {
             statusbar: false,
             branding: false,
             license_key: "gpl",
+            // Keep URLs verbatim. TinyMCE defaults to convert_urls:true +
+            // relative_urls:true, which rewrites an absolute href
+            // (https://github.com/…) to be RELATIVE to the editor's base URL
+            // (the msger custom-protocol page). A link that worked in the
+            // original message arrives in the reply quote rewritten/dead
+            // (Bob 2026-05-31: "URL works in the original but not in the
+            // reply"). false on both = hrefs travel into the sent message
+            // exactly as the sender wrote them.
+            convert_urls: false,
+            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
@@ -250,6 +268,67 @@ export async function createTinyMceEditor(container, opts = {}) {
                     applyZoom();
                     saveZoom();
                 };
+                // Custom "Insert code" — wraps the stock codesample plugin
+                // (keeps its Prism highlighting + edit-in-place) but adds a
+                // "Box it in" border checkbox so a snippet is visually
+                // demarcated from surrounding prose. The border is applied as
+                // an INLINE style on the <pre>, NOT a content_style class, so
+                // it survives into the sent email where the recipient has none
+                // of our editor CSS. Bob 2026-05-31.
+                const BORDER_STYLES = { "border": "1px solid #888", "border-radius": "4px", "padding": "10px" };
+                const openCodeDialog = () => {
+                    const cs = ed.plugins.codesample;
+                    const preEl = ed.dom.getParent(ed.selection.getNode(), "pre");
+                    let curLang = "text";
+                    let curBorder = false;
+                    if (preEl) {
+                        const m = (preEl.className || "").match(/language-([\w-]+)/);
+                        if (m)
+                            curLang = m[1];
+                        curBorder = !!(preEl.style && preEl.style.border && preEl.style.border !== "none");
+                    }
+                    const curCode = (cs && cs.getCurrentCode) ? (cs.getCurrentCode(ed) || "") : "";
+                    ed.windowManager.open({
+                        title: "Insert code",
+                        size: "large",
+                        body: {
+                            type: "panel",
+                            items: [
+                                { type: "listbox", name: "language", label: "Language", items: CODE_LANGS },
+                                { type: "textarea", name: "code", label: "Code" },
+                                { type: "checkbox", name: "border", label: "Box it in (border around the code)" },
+                            ],
+                        },
+                        initialData: { language: curLang, code: curCode, border: curBorder },
+                        buttons: [
+                            { type: "cancel", text: "Cancel" },
+                            { type: "submit", text: "Save", primary: true },
+                        ],
+                        onSubmit: (api) => {
+                            const data = api.getData();
+                            if (cs && cs.insertCodeSample)
+                                cs.insertCodeSample(data.language, data.code);
+                            const pre = ed.dom.getParent(ed.selection.getNode(), "pre");
+                            if (pre) {
+                                if (data.border)
+                                    ed.dom.setStyles(pre, BORDER_STYLES);
+                                else
+                                    ed.dom.setStyles(pre, { "border": "", "border-radius": "", "padding": "" });
+                            }
+                            api.close();
+                        },
+                    });
+                };
+                ed.ui.registry.addButton("rmfcode", {
+                    icon: "code-sample",
+                    tooltip: "Insert/edit code block",
+                    onAction: openCodeDialog,
+                });
+                ed.ui.registry.addMenuItem("rmfcode", {
+                    icon: "code-sample",
+                    text: "Code block…",
+                    onAction: openCodeDialog,
+                });
                 ed.ui.registry.addMenuItem("zoomIn", {
                     text: "Zoom in", shortcut: "Ctrl+=",
                     onAction: () => bumpZoom(ZOOM_STEP),
@@ -326,11 +405,28 @@ export async function createTinyMceEditor(container, opts = {}) {
                         }
                         if (tail.toString().length > 0)
                             return;
-                        const after = doc.createRange();
-                        after.setStartAfter(link);
-                        after.collapse(true);
-                        sel.removeAllRanges();
-                        sel.addRange(after);
+                        // Move the caret to just after the link. Use TinyMCE's
+                        // own selection API rather than a raw
+                        // removeAllRanges/addRange: the raw mutation ran ahead
+                        // of TinyMCE's beforeinput handling and desynced its
+                        // UndoManager, leaving Ctrl+Z erratic (Bob 2026-05-31:
+                        // "^z is very broken in TinyMCE"). Going through
+                        // ed.selection keeps TinyMCE's selection + undo state
+                        // consistent. Raw range as a fallback if it throws.
+                        const parent = link.parentNode;
+                        const idx = parent ? Array.prototype.indexOf.call(parent.childNodes, link) + 1 : -1;
+                        if (parent && idx >= 0) {
+                            try {
+                                ed.selection.setCursorLocation(parent, idx);
+                            }
+                            catch {
+                                const after = doc.createRange();
+                                after.setStartAfter(link);
+                                after.collapse(true);
+                                sel.removeAllRanges();
+                                sel.addRange(after);
+                            }
+                        }
                     }, true);
                 };
                 ed.on("init", installLinkEscape);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.1.202",
+  "version": "1.1.204",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",