@bobfrankston/rmfmail 1.2.276 → 1.2.277

package/client/app.ts

@@ -5670,6 +5670,65 @@ document.getElementById("opt-compose-font-size")?.addEventListener("change", (e)
     }).catch(() => {});
 });
 
+// TinyMCE UI-language picker. The options are whatever language packs
+// build-tinymce.js actually copied next to the script (langs/index.json), so
+// the menu can never offer a pack that would 404 at editor init — TinyMCE
+// raises a visible error notification for a missing langs/<code>.js.
+//
+// These translate the editor CHROME only. Content, the spellcheck dictionary
+// and Harper are untouched and stay English, which is why the control sits
+// under Editor rather than anywhere that reads as a global language setting.
+//
+// TinyMCE itself has no detection — "Auto" is ours, resolving the browser's
+// ordered language list against the shipped packs. The Auto row names what it
+// currently resolves to so the choice is not a guess. (Claude Code 2026-08-23)
+const optEditorLanguage = document.getElementById("opt-editor-language") as HTMLSelectElement;
+if (optEditorLanguage) {
+    (async () => {
+        const scriptUrl = localStorage.getItem("mailx-tinymce-cdn") || "lib/tinymce/tinymce.min.js";
+        const { availableLanguages, resolveLanguage, languageLabel, LANGUAGE_AUTO, LANGUAGE_ENGLISH } =
+            await import("./lib/tinymce-langs.js");
+        const available = await availableLanguages(scriptUrl);
+        const autoPick = resolveLanguage(LANGUAGE_AUTO, available);
+        const add = (value: string, text: string) => {
+            const o = document.createElement("option");
+            o.value = value;
+            o.textContent = text;
+            optEditorLanguage.appendChild(o);
+        };
+        add(LANGUAGE_AUTO, `Auto — ${languageLabel(autoPick)}`);
+        add(LANGUAGE_ENGLISH, languageLabel(LANGUAGE_ENGLISH));
+        for (const code of [...available].sort((a, b) => languageLabel(a).localeCompare(languageLabel(b)))) {
+            add(code, `${languageLabel(code)} (${code})`);
+        }
+        if (!available.length) {
+            optEditorLanguage.disabled = true;
+            optEditorLanguage.title = "No language packs found next to tinymce.min.js — English only";
+        }
+        let current = LANGUAGE_AUTO;
+        try { current = localStorage.getItem("mailx-editor-language") || LANGUAGE_AUTO; } catch { /* */ }
+        try {
+            const settings: any = await getSettings();
+            if (typeof settings?.ui?.editorLanguage === "string" && settings.ui.editorLanguage) current = settings.ui.editorLanguage;
+        } catch { /* cache value stands */ }
+        optEditorLanguage.value = current;
+        // A pinned pack that is no longer shipped would leave the select on
+        // nothing at all; say so rather than showing a blank control.
+        if (!optEditorLanguage.value) optEditorLanguage.value = LANGUAGE_AUTO;
+    })().catch((e: any) => console.error("[settings] editor-language menu failed:", e?.message || e));
+
+    optEditorLanguage.addEventListener("change", () => {
+        const value = optEditorLanguage.value;
+        // Synchronous cache write for the same reason as saveEditorSetting:
+        // compose reads it at module load, so the next compose-open is right.
+        try { localStorage.setItem("mailx-editor-language", value); } catch { /* private mode */ }
+        getSettings().then((settings: any) => {
+            settings.ui = { ...settings.ui, editorLanguage: value };
+            saveSettings(settings);
+        }).catch((e: any) => console.error("[settings] editor language save failed:", e?.message || e));
+    });
+}
+
 // Save editor choice to server settings
 function saveEditorSetting(editor: string): void {
     // Update the localStorage cache SYNCHRONOUSLY. compose.ts reads

package/client/compose/compose.bundle.js

@@ -2714,6 +2714,9 @@ async function createTinyMceEditor(container2, opts = {}) {
       // Adding Text first so it's the default; rest are the modern
       // languages we actually paste.
       codesample_languages: CODE_LANGS,
+      // UI language. Left unset (TinyMCE default "en") when the host
+      // passes nothing, which also skips the langs/ fetch entirely.
+      ...opts.language && opts.language !== "en" ? { language: opts.language } : {},
       // 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
@@ -3428,6 +3431,67 @@ var init_rmf_tiny = __esm({
   }
 });
 
+// client/lib/tinymce-langs.js
+var tinymce_langs_exports = {};
+__export(tinymce_langs_exports, {
+  LANGUAGE_AUTO: () => LANGUAGE_AUTO,
+  LANGUAGE_ENGLISH: () => LANGUAGE_ENGLISH,
+  availableLanguages: () => availableLanguages,
+  langManifestUrl: () => langManifestUrl,
+  languageLabel: () => languageLabel,
+  resolveLanguage: () => resolveLanguage
+});
+function langManifestUrl(tinymceScriptUrl) {
+  return new URL("langs/index.json", new URL(tinymceScriptUrl, location.href)).href;
+}
+async function availableLanguages(tinymceScriptUrl) {
+  try {
+    const r = await fetch(langManifestUrl(tinymceScriptUrl));
+    if (!r.ok)
+      return [];
+    const list = await r.json();
+    return Array.isArray(list) ? list.filter((x) => typeof x === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function resolveLanguage(setting, available, preferred = navigator.languages || [navigator.language]) {
+  const byLower = new Map(available.map((code) => [code.toLowerCase(), code]));
+  if (setting && setting !== LANGUAGE_AUTO) {
+    if (setting === LANGUAGE_ENGLISH)
+      return LANGUAGE_ENGLISH;
+    return byLower.get(setting.toLowerCase()) || LANGUAGE_ENGLISH;
+  }
+  for (const tag of preferred) {
+    if (!tag)
+      continue;
+    const lower = tag.toLowerCase();
+    const base = lower.split("-")[0];
+    if (base === LANGUAGE_ENGLISH)
+      return LANGUAGE_ENGLISH;
+    const hit = byLower.get(lower) || byLower.get(base) || available.find((code) => code.toLowerCase().split("-")[0] === base);
+    if (hit)
+      return hit;
+  }
+  return LANGUAGE_ENGLISH;
+}
+function languageLabel(code) {
+  try {
+    const names = new Intl.DisplayNames(navigator.languages || void 0, { type: "language" });
+    return names.of(code) || code;
+  } catch {
+    return code;
+  }
+}
+var LANGUAGE_AUTO, LANGUAGE_ENGLISH;
+var init_tinymce_langs = __esm({
+  "client/lib/tinymce-langs.js"() {
+    "use strict";
+    LANGUAGE_AUTO = "auto";
+    LANGUAGE_ENGLISH = "en";
+  }
+});
+
 // client/compose/spellcheck.js
 var spellcheck_exports = {};
 __export(spellcheck_exports, {
@@ -5074,7 +5138,15 @@ async function createTinyMceEditor2(container2, opts = {}) {
   }
   const m = await Promise.resolve().then(() => (init_rmf_tiny(), rmf_tiny_exports));
   const cssPx = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--compose-font-size"));
-  const ed = await m.createTinyMceEditor(container2, { cdnUrl, apiKey, onFiles: opts.onFiles, fontSizePx: Number.isFinite(cssPx) ? cssPx : void 0 });
+  let language;
+  try {
+    const { availableLanguages: availableLanguages2, resolveLanguage: resolveLanguage2, LANGUAGE_ENGLISH: LANGUAGE_ENGLISH2 } = await Promise.resolve().then(() => (init_tinymce_langs(), tinymce_langs_exports));
+    const resolved = resolveLanguage2(opts.language || "auto", await availableLanguages2(cdnUrl));
+    if (resolved !== LANGUAGE_ENGLISH2)
+      language = resolved;
+  } catch {
+  }
+  const ed = await m.createTinyMceEditor(container2, { cdnUrl, apiKey, onFiles: opts.onFiles, fontSizePx: Number.isFinite(cssPx) ? cssPx : void 0, language });
   try {
     const native = ed.nativeEditor;
     const body = native?.getBody?.();
@@ -5161,6 +5233,15 @@ if (__bootUi?.editor === "tiptap" || __bootUi?.editor === "quill" || __bootUi?.e
   } catch {
   }
 }
+var editorLanguage = "auto";
+if (typeof __bootUi?.editorLanguage === "string" && __bootUi.editorLanguage) {
+  editorLanguage = __bootUi.editorLanguage;
+} else {
+  try {
+    editorLanguage = localStorage.getItem("mailx-editor-language") || "auto";
+  } catch {
+  }
+}
 var COMPOSE_FONT_MIN_PX = 8;
 var COMPOSE_FONT_MAX_PX = 32;
 var COMPOSE_FONT_DEFAULT_PX = 20;
@@ -5183,6 +5264,13 @@ try {
       localStorage.setItem("mailx-editor-type", next);
     } catch {
     }
+    const lang = appSettings?.ui?.editorLanguage;
+    if (typeof lang === "string" && lang) {
+      try {
+        localStorage.setItem("mailx-editor-language", lang);
+      } catch {
+      }
+    }
     const fontPx = Number(appSettings?.ui?.composeFontSize);
     if (Number.isFinite(fontPx) && fontPx >= COMPOSE_FONT_MIN_PX && fontPx <= COMPOSE_FONT_MAX_PX) {
       try {
@@ -5243,7 +5331,7 @@ async function tryEditor(type) {
   try {
     const ed = await createEditor(container, type, { onFiles: (files) => {
       void ingestFiles(files);
-    } });
+    }, language: editorLanguage });
     if (type === "tinymce" && ed && ed.nativeEditor) {
       const native = ed.nativeEditor;
       const attach = () => {