@bobfrankston/rmfmail 1.0.650 → 1.0.652

package/bin/build-rmf-tiny.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+// Copy @bobfrankston/rmf-tiny's adapter.js into client/lib/ so the compose
+// page can dynamic-import it at runtime. msger's custom protocol serves
+// files only from contentDir (client/), and `node_modules/` lives at
+// app/node_modules — outside that root. A build-time copy keeps the public
+// adapter entry reachable without changing msger's served root or messing
+// with junctions that npm install would clobber.
+import fs from "node:fs";
+import path from "node:path";
+
+const root = path.resolve(import.meta.dirname, "..");
+const src = path.join(root, "node_modules", "@bobfrankston", "rmf-tiny", "src", "adapter.js");
+const dst = path.join(root, "client", "lib", "rmf-tiny.js");
+
+if (!fs.existsSync(src)) {
+    console.error(`build-rmf-tiny: source not found at ${src} — run npm install first`);
+    process.exit(1);
+}
+fs.copyFileSync(src, dst);
+console.log(`build-rmf-tiny: copied ${path.relative(root, src)} → ${path.relative(root, dst)}`);

package/client/compose/compose.ts

@@ -130,8 +130,28 @@ function setActiveEditorBadge(type: EditorTypeChoice | "fallback"): void {
         tinymce: "TinyMCE",
         fallback: "plain (fallback)",
     };
+    const docs: Record<string, string> = {
+        quill: "https://quilljs.com/docs/quickstart",
+        tiptap: "https://tiptap.dev/docs/editor/introduction",
+        tinymce: "https://www.tiny.cloud/docs/tinymce/6/",
+        fallback: "https://github.com/BobFrankston/mailx/blob/master/app/docs/editor.md",
+    };
     el.textContent = labels[type] || type;
     el.dataset.editor = type;
+    const url = docs[type];
+    if (url) {
+        el.style.cursor = "pointer";
+        el.title = `Open ${labels[type]} documentation`;
+        el.onclick = () => {
+            const api = (window as any).mailxapi;
+            if (api?.openExternal) api.openExternal(url);
+            else window.open(url, "_blank", "noopener,noreferrer");
+        };
+    } else {
+        el.style.cursor = "";
+        el.title = "";
+        el.onclick = null;
+    }
 }
 
 async function tryEditor(type: EditorTypeChoice): Promise<MailxEditor | null> {

package/client/compose/editor.ts

@@ -651,7 +651,12 @@ async function createTinyMceEditor(container: HTMLElement): Promise<MailxEditor>
         cdnUrl = localStorage.getItem("mailx-tinymce-cdn") || DEFAULT_TINYMCE_CDN;
         apiKey = localStorage.getItem("mailx-tinymce-apikey") || undefined;
     } catch { /* private mode — use defaults */ }
-    const m = (await import("@bobfrankston/rmf-tiny" as any)) as {
+    // Build step copies node_modules/@bobfrankston/rmf-tiny/src/adapter.js
+    // → client/lib/rmf-tiny.js. Bare-name `@bobfrankston/rmf-tiny` resolution
+    // would target `node_modules/`, which msger's custom protocol can't reach
+    // (outside contentDir=client/). The relative path stays inside the
+    // served root.
+    const m = (await import("../lib/rmf-tiny.js" as any)) as {
         createTinyMceEditor(container: HTMLElement, opts: { cdnUrl?: string; apiKey?: string }): Promise<MailxEditor>;
     };
     const ed = await m.createTinyMceEditor(container, { cdnUrl, apiKey });

package/client/lib/rmf-tiny.js

@@ -0,0 +1,141 @@
+/**
+ * @bobfrankston/rmf-tiny — TinyMCE adapter for rmfmail.
+ *
+ * MIT-licensed adapter glue. Imports TinyMCE at runtime; ships no
+ * TinyMCE bytes. The user is responsible for making TinyMCE reachable
+ * to their environment:
+ *
+ *   - Desktop / Node-side install:  `npm install tinymce`
+ *     (rmfmail's createEditor("tinymce") branch dynamically imports
+ *     this adapter, which dynamically imports tinymce from
+ *     node_modules.)
+ *
+ *   - Android / browser-only WebView: pass `cdnUrl` in the options to
+ *     have the adapter inject a <script src=…> tag. The bytes are
+ *     fetched directly from Tiny's CDN (or whatever URL the user
+ *     configured); the host APK / page never carries them.
+ *
+ * The adapter implements the same `MailxEditor` shape as the Quill /
+ * tiptap factories in rmfmail's editor.ts, so the host code path is
+ * identical regardless of which editor is in use.
+ */
+/** Load tinymce. Tries native module import first (desktop / npm-installed);
+ *  falls back to script-tag injection from cdnUrl. Resolves to whatever's
+ *  on `window.tinymce`. */
+async function loadTinymce(opts) {
+    // 1. Try the npm-installed path. Wrapped in try because in browser-only
+    //    environments the module specifier won't resolve and we want to
+    //    fall through to CDN injection.
+    try {
+        const mod = await import(/* @vite-ignore */ "tinymce");
+        const tinymce = mod.default || mod;
+        // Pull in the plugins TinyMCE's paste-from-Word handler needs. These
+        // are side-effect imports — they register themselves on the global.
+        await Promise.all([
+            import("tinymce/themes/silver").catch(() => { }),
+            import("tinymce/icons/default").catch(() => { }),
+            import("tinymce/models/dom").catch(() => { }),
+            import("tinymce/plugins/paste").catch(() => { }),
+            import("tinymce/plugins/lists").catch(() => { }),
+            import("tinymce/plugins/link").catch(() => { }),
+            import("tinymce/plugins/table").catch(() => { }),
+            import("tinymce/plugins/code").catch(() => { }),
+            import("tinymce/plugins/image").catch(() => { }),
+        ]);
+        return tinymce;
+    }
+    catch {
+        // Fall through.
+    }
+    // 2. Already loaded by a prior call.
+    const w = window;
+    if (w.tinymce)
+        return w.tinymce;
+    // 3. Inject from CDN if provided.
+    if (!opts.cdnUrl) {
+        throw new Error("rmf-tiny: tinymce not installed (npm install tinymce) and no cdnUrl supplied. See README for Android setup.");
+    }
+    const url = opts.apiKey && !opts.cdnUrl.includes("api-key")
+        ? `${opts.cdnUrl}${opts.cdnUrl.includes("?") ? "&" : "?"}apiKey=${encodeURIComponent(opts.apiKey)}`
+        : opts.cdnUrl;
+    await new Promise((resolve, reject) => {
+        const s = document.createElement("script");
+        s.src = url;
+        s.referrerPolicy = "origin";
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error(`rmf-tiny: failed to load TinyMCE from ${url}`));
+        document.head.appendChild(s);
+    });
+    if (!w.tinymce)
+        throw new Error("rmf-tiny: TinyMCE script loaded but window.tinymce is missing");
+    return w.tinymce;
+}
+/** Create a TinyMCE-backed MailxEditor in `container`. */
+export async function createTinyMceEditor(container, opts = {}) {
+    const tinymce = await loadTinymce(opts);
+    // TinyMCE attaches to a target element by id selector; create one
+    // inside the host container so multiple editors on a page don't
+    // collide and so we don't pollute the caller's element with TinyMCE
+    // attributes directly.
+    const target = document.createElement("div");
+    target.id = `rmf-tiny-${Math.random().toString(36).slice(2, 10)}`;
+    target.style.cssText = "width:100%;height:100%;";
+    container.appendChild(target);
+    const editor = await new Promise((resolve) => {
+        tinymce.init({
+            target,
+            // Word-paste fidelity is the entire point of using TinyMCE here.
+            // `paste_as_text: false` keeps formatting; powerpaste isn't in
+            // OSS but the standard paste plugin handles Word reasonably well.
+            plugins: "paste lists link table code image preview searchreplace",
+            toolbar: [
+                "undo redo | bold italic underline strikethrough | forecolor backcolor",
+                "bullist numlist outdent indent | link table image code",
+            ].join(" | "),
+            menubar: "file edit view insert format",
+            // Right-click menu — TinyMCE's built-in context menu plugin.
+            // Without this set, the WebView's default context menu fires
+            // (browser-level cut/copy/paste only). The string lists which
+            // contextmenu items show up; "link image table" are stock
+            // TinyMCE entries that pick up automatically when the user
+            // right-clicks on each kind of element.
+            contextmenu: "link image table | cut copy paste | undo redo",
+            statusbar: false,
+            branding: false,
+            license_key: "gpl",
+            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",
+            content_style: "body { font-family: system-ui, sans-serif; font-size: 14px; }",
+            init_instance_callback: (ed) => resolve(ed),
+            setup: (ed) => {
+                if (opts.initialHtml)
+                    ed.on("init", () => ed.setContent(opts.initialHtml));
+            },
+        });
+    });
+    return {
+        setHtml(html) { editor.setContent(html); },
+        getHtml() { return editor.getContent(); },
+        getText() { return editor.getContent({ format: "text" }); },
+        focus() { editor.focus(); },
+        setCursor(_pos) {
+            // TinyMCE addresses positions through ranges; rmfmail callers
+            // mostly use this for "put cursor at end" semantics. Approximate
+            // by selecting the end of body content.
+            try {
+                editor.selection.select(editor.getBody(), true);
+                editor.selection.collapse(false);
+            }
+            catch { /* */ }
+        },
+        get root() { return editor.getContainer(); },
+        on(event, handler) { editor.on(event, handler); },
+        off(event, handler) { editor.off(event, handler); },
+    };
+}
+//# sourceMappingURL=adapter.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.0.650",
+  "version": "1.0.652",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -23,7 +23,7 @@
     "client"
   ],
   "scripts": {
-    "build": "tsc -p bin && node bin/build-icon-ico.js && node bin/build-rmfmailto-exe.js",
+    "build": "tsc -p bin && node bin/build-icon-ico.js && node bin/build-rmfmailto-exe.js && node bin/build-rmf-tiny.js",
     "watch": "tsc -w",
     "start": "node --watch packages/mailx-server/index.js",
     "start:prod": "node packages/mailx-server/index.js",