diff --git a/app/webpacker/controllers/trixeditor_controller.js b/app/webpacker/controllers/trixeditor_controller.js index 205befbc69..ec9bef9b02 100644 --- a/app/webpacker/controllers/trixeditor_controller.js +++ b/app/webpacker/controllers/trixeditor_controller.js @@ -21,15 +21,6 @@ export default class extends Controller { }; #trixInitialize = () => { - // Set I18n translations on Trix. - 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"))) { - Trix.config.lang[key] = translation; - } - } - // Add HR button to the Trix toolbar if it's not already there and the editor is present if ( this.element.editor && @@ -37,6 +28,8 @@ export default class extends Controller { ) { this.#addHRButton(); } + + this.#setTranslations(); }; #addHRButton = () => { @@ -51,4 +44,57 @@ 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.#translationKeyToAttributeMappings(key)}"]`, + "title", + translation + ); + this.#setTranslation( + `[data-trix-attribute="${this.#translationKeyToAttributeMappings(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")); + } + } + + #translationKeyToAttributeMappings(key) { + let mapping = { + "bullets": "bullet", + "link": "href", + "numbers": "number", + "indent": "increaseNestingLevel", + "outdent": "decreaseNestingLevel" + }[key]; + + return mapping || key; + } }