raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue where Trix editor translations were not being set correctly in Chrome

Browse Source
This commit is contained in:
Cillian O'Ruanaidh
2024-08-16 15:44:09 +01:00
parent 70ca03173c
commit 429e2b0a86
1 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/webpacker/controllers/trixeditor_controller.js
View File

@@ -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;
}
}