From 234cdbdf96fb6063b2f2de1d9adc5aa19e658570 Mon Sep 17 00:00:00 2001
From: Tomas Vondracek <tomasvondrac@gmail.com>
Date: Wed, 7 Oct 2026 15:20:35 +0200
Subject: [PATCH] Translate the html field editor into the backend locale

The html field's Trumbowyg editor always showed its toolbar in English,
although Trumbowyg ships translations for 46 languages. They were never
loaded, and the editor was never told which language to use.

The field template now passes the request locale to the component, the
same locale the rest of the backend UI is rendered in. The component
bundles Trumbowyg's language files and, before the editor initialises,
runs only the one matching the locale and sets it as the editor
language. Locales without a translation keep the built-in English.

Locales are matched from the most to the least specific part
(sr_Latn_RS -> sr_latn -> sr), with aliases for the codes Trumbowyg
names differently from ISO (uk -> ua, sr -> rs, nn -> nb, zh_Hant ->
zh_tw, ...). ISO `my` is Burmese while Trumbowyg's `my` is Malay, so it
is never matched as-is.

The Arabic, Hebrew and Persian translations also switch the editable
area to right-to-left. That direction belongs to the content being
edited, not to the backend language, so it is dropped and only the
labels are used.
---
 assets/js/app/editor/Components/Html.vue  | 59 +++++++++++++++++++++++
 templates/_partials/fields/html.html.twig |  1 +
 2 files changed, 60 insertions(+)

diff --git a/assets/js/app/editor/Components/Html.vue b/assets/js/app/editor/Components/Html.vue
index a17e5c85b0..e8e3c7d1fd 100644
--- a/assets/js/app/editor/Components/Html.vue
+++ b/assets/js/app/editor/Components/Html.vue
@@ -5,10 +5,61 @@
 </template>
 
 <script>
+import jQuery from 'jquery';
 import trumbowyg from 'vue-trumbowyg';
 import 'trumbowyg/dist/ui/trumbowyg.css';
 import { strip } from '../../../filters/string';
 
+// Trumbowyg's UI translations, one langs/<code>.min.js per language. Loading a file
+// registers it on jQuery.trumbowyg.langs. English is built in.
+const langFiles = require.context('trumbowyg/dist/langs', false, /\.min\.js$/);
+
+// Trumbowyg names some languages differently from the ISO codes Bolt uses. Its `my`
+// is Malay, while ISO `my` is Burmese, so that one must not match as-is.
+const langAliases = new Map([
+    ['be', 'by'],
+    ['fil', 'ph'],
+    ['ms', 'my'],
+    ['my', null],
+    ['nn', 'nb'],
+    ['no', 'nb'],
+    ['sr', 'rs'],
+    ['sr_latn', 'rs_latin'],
+    ['tl', 'ph'],
+    ['uk', 'ua'],
+    ['zh', 'zh_cn'],
+    ['zh_hans', 'zh_cn'],
+    ['zh_hant', 'zh_tw'],
+    ['zh_hk', 'zh_tw'],
+    ['zh_mo', 'zh_tw'],
+]);
+
+// Loads the Trumbowyg language matching a Bolt locale and returns its code, or 'en'
+// when Trumbowyg has no translation for it. Tries the whole locale first, then drops
+// one part at a time: `sr_Latn_RS` -> `sr_latn` -> `sr`, `de_AT` -> `de`.
+function loadLang(locale) {
+    const parts = locale.toLowerCase().replace(/-/g, '_').split('_');
+
+    for (let length = parts.length; length > 0; length--) {
+        const candidate = parts.slice(0, length).join('_');
+        const lang = langAliases.has(candidate) ? langAliases.get(candidate) : candidate;
+        const file = `./${lang}.min.js`;
+
+        if (lang && langFiles.keys().includes(file)) {
+            langFiles(file);
+
+            // Arabic, Hebrew and Persian also set `_dir: 'rtl'`, which Trumbowyg applies
+            // to the editable area. The text direction belongs to the content being
+            // edited, not to the backend language, so only the labels are used.
+            delete jQuery.trumbowyg.langs[lang]._dir;
+
+            return lang;
+        }
+    }
+
+    return 'en';
+}
+
 export default {
     name: 'EditorHtml',
     components: {
@@ -19,6 +70,10 @@ export default {
         label: String,
         name: String,
         id: String,
+        locale: {
+            type: String,
+            default: 'en',
+        },
     },
     data: () => {
         return {
@@ -40,6 +95,10 @@ export default {
             },
         };
     },
+    created() {
+        // Must be set before Trumbowyg initialises, which happens when the child mounts.
+        this.config.lang = loadLang(this.locale);
+    },
     mounted() {
         this.val = strip(this.value);
     },
diff --git a/templates/_partials/fields/html.html.twig b/templates/_partials/fields/html.html.twig
index 7d34dc994d..09f8b14a31 100644
--- a/templates/_partials/fields/html.html.twig
+++ b/templates/_partials/fields/html.html.twig
@@ -5,5 +5,6 @@
         :value="{{ value|json_encode }}"
         :name='{{ name|json_encode }}'
         :id='{{ id|json_encode}}'
+        :locale='{{ app.request.locale|json_encode }}'
     ></editor-html>
 {% endblock %}