From 63c62cae08ec22fe234ae0e1b8c3dcde4ac30bec Mon Sep 17 00:00:00 2001
From: Cillian O'Ruanaidh <contact@cilliano.com>
Date: Fri, 23 Aug 2024 09:47:48 +0100
Subject: [PATCH] Simplify setting of Trix editor translations

Co-authored-by: David Cook <david@redcliffs.net>
---
 .../controllers/trixeditor_controller.js      | 55 -------------------
 app/webpacker/packs/admin.js                  |  5 ++
 2 files changed, 5 insertions(+), 55 deletions(-)

diff --git a/app/webpacker/controllers/trixeditor_controller.js b/app/webpacker/controllers/trixeditor_controller.js
index 7c76c63310..506086fb2b 100644
--- a/app/webpacker/controllers/trixeditor_controller.js
+++ b/app/webpacker/controllers/trixeditor_controller.js
@@ -28,8 +28,6 @@ export default class extends Controller {
     ) {
       this.#addHRButton();
     }
-
-    this.#setTranslations();
   };
 
   #addHRButton = () => {
@@ -44,57 +42,4 @@ export default class extends Controller {
       this.#trixActionInvoke(event);
     });
   };
-
-  #setTranslation(selector, attribute, value) {
-    let element = this.element.parentElement.querySelector(selector);
-    if(element && element.hasAttribute(attribute)) {
-      element.setAttribute(attribute, value);
-    }
-  }
-
-  #setTranslations() {
-    if(I18n.t("js.trix")) {
-      // Calling 'Trix.config.lang = I18n.t("js.trix")' doesn't work due to read-only error, so set
-      // translations one at a time.
-      for (const [key, translation] of Object.entries(I18n.t("js.trix"))) {
-
-        // Set all translations (only works in Firefox for some reason)
-        Trix.config.lang[key] = translation;
-
-        // Set toolbar translations (Chrome)
-        this.#setTranslation(
-          `[data-trix-action="${this.#attributeOrActionForTranslationKey(key)}"]`,
-          "title",
-          translation
-        );
-        this.#setTranslation(
-          `[data-trix-attribute="${this.#attributeOrActionForTranslationKey(key)}"]`,
-          "title",
-          translation
-        );
-      }
-
-      // Set translations for link dialog (Chrome)
-      this.#setTranslation(`[data-trix-dialog="href"] input`,
-                                  "aria-label", I18n.t("js.trix.url"));
-      this.#setTranslation(`[data-trix-dialog="href"] input`,
-                                  "placeholder", I18n.t("js.trix.urlPlaceholder"));
-      this.#setTranslation('.trix-dialog--link input[data-trix-method="setAttribute"]',
-                                  "value", I18n.t("js.trix.link"));
-      this.#setTranslation('.trix-dialog--link input[data-trix-method="removeAttribute"]',
-                                  "value", I18n.t("js.trix.unlink"));
-    }
-  }
-
-  #attributeOrActionForTranslationKey(key) {
-    let mapping = {
-      "bullets": "bullet",
-      "link": "href",
-      "numbers": "number",
-      "indent": "increaseNestingLevel",
-      "outdent": "decreaseNestingLevel"
-    }[key];
-
-    return mapping || key;
-  }
 }
diff --git a/app/webpacker/packs/admin.js b/app/webpacker/packs/admin.js
index dbb68bafc2..9ad33b1a1c 100644
--- a/app/webpacker/packs/admin.js
+++ b/app/webpacker/packs/admin.js
@@ -14,6 +14,11 @@ debounced.initialize({ input: { wait: 300 } });
 
 import Trix from "trix";
 
+document.addEventListener("trix-before-initialize", (event) => {
+  // Set Trix translations
+  Object.assign(Trix.config.lang, I18n.t("js.trix"));
+});
+
 document.addEventListener("trix-file-accept", (event) => {
   event.preventDefault();
 });