From ef3de1050f880d6848e2382c5df13cf48131c02e Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 22 Sep 2024 12:29:06 +0100 Subject: [PATCH] Lexical: Added UI translation support --- resources/js/components/wysiwyg-editor.js | 11 +++++++---- .../js/wysiwyg/ui/defaults/buttons/alignments.ts | 2 +- .../js/wysiwyg/ui/defaults/buttons/block-formats.ts | 2 +- resources/js/wysiwyg/ui/defaults/buttons/controls.ts | 2 +- .../js/wysiwyg/ui/defaults/buttons/inline-formats.ts | 4 ++-- resources/js/wysiwyg/ui/defaults/modals.ts | 2 +- resources/js/wysiwyg/ui/framework/forms.ts | 2 +- resources/js/wysiwyg/ui/index.ts | 5 ++++- resources/views/pages/parts/wysiwyg-editor.blade.php | 4 ++-- 9 files changed, 20 insertions(+), 14 deletions(-) diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index eed1c6155..56dbe8d7c 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -10,6 +10,12 @@ export class WysiwygEditor extends Component { /** @var {SimpleWysiwygEditorInterface|null} */ this.editor = null; + const translations = { + ...window.editor_translations, + imageUploadErrorText: this.$opts.imageUploadErrorText, + serverUploadLimitText: this.$opts.serverUploadLimitText, + }; + window.importVersioned('wysiwyg').then(wysiwyg => { const editorContent = this.input.value; this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, { @@ -17,10 +23,7 @@ export class WysiwygEditor extends Component { pageId: Number(this.$opts.pageId), darkMode: document.documentElement.classList.contains('dark-mode'), textDirection: this.$opts.textDirection, - translations: { - imageUploadErrorText: this.$opts.imageUploadErrorText, - serverUploadLimitText: this.$opts.serverUploadLimitText, - }, + translations, }); }); diff --git a/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts b/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts index 6233e6ce6..f0f46ddc6 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts @@ -84,7 +84,7 @@ export const alignRight: EditorButtonDefinition = { }; export const alignJustify: EditorButtonDefinition = { - label: 'Align justify', + label: 'Justify', icon: alignJustifyIcon, action(context: EditorUiContext) { context.editor.update(() => setAlignmentForSelection(context, 'justify')); diff --git a/resources/js/wysiwyg/ui/defaults/buttons/block-formats.ts b/resources/js/wysiwyg/ui/defaults/buttons/block-formats.ts index 80e493486..f86e33c31 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/block-formats.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/block-formats.ts @@ -17,7 +17,7 @@ import { function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition { return { - label: `${name} Callout`, + label: name, action(context: EditorUiContext) { context.editor.update(() => { $toggleSelectionBlockNodeType( diff --git a/resources/js/wysiwyg/ui/defaults/buttons/controls.ts b/resources/js/wysiwyg/ui/defaults/buttons/controls.ts index 8829d241f..77223dac3 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/controls.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/controls.ts @@ -56,7 +56,7 @@ export const redo: EditorButtonDefinition = { export const source: EditorButtonDefinition = { - label: 'Source code', + label: 'Source', icon: sourceIcon, async action(context: EditorUiContext) { const modal = context.manager.createModal('source'); diff --git a/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts b/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts index a967ecb2f..c3726acf0 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts @@ -30,12 +30,12 @@ export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', bo export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon); export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon); export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon}; -export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color', icon: highlightIcon}; +export const highlightColor: EditorBasicButtonDefinition = {label: 'Background color', icon: highlightIcon}; export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon); export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon); export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript', subscriptIcon); -export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code', codeIcon); +export const code: EditorButtonDefinition = buildFormatButton('Inline code', 'code', codeIcon); export const clearFormating: EditorButtonDefinition = { label: 'Clear formatting', icon: formatClearIcon, diff --git a/resources/js/wysiwyg/ui/defaults/modals.ts b/resources/js/wysiwyg/ui/defaults/modals.ts index 44d4e0360..c43923778 100644 --- a/resources/js/wysiwyg/ui/defaults/modals.ts +++ b/resources/js/wysiwyg/ui/defaults/modals.ts @@ -5,7 +5,7 @@ import {cellProperties, rowProperties, tableProperties} from "./forms/tables"; export const modals: Record = { link: { - title: 'Insert/Edit link', + title: 'Insert/Edit Link', form: link, }, image: { diff --git a/resources/js/wysiwyg/ui/framework/forms.ts b/resources/js/wysiwyg/ui/framework/forms.ts index a2db34dd7..615d5b4de 100644 --- a/resources/js/wysiwyg/ui/framework/forms.ts +++ b/resources/js/wysiwyg/ui/framework/forms.ts @@ -54,7 +54,7 @@ export class EditorFormField extends EditorUiElement { if (this.definition.type === 'select') { const options = (this.definition as EditorSelectFormFieldDefinition).valuesByLabel const labels = Object.keys(options); - const optionElems = labels.map(label => el('option', {value: options[label]}, [label])); + const optionElems = labels.map(label => el('option', {value: options[label]}, [this.trans(label)])); input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems); } else if (this.definition.type === 'textarea') { input = el('textarea', {id, name: this.definition.name, class: 'editor-form-field-input'}); diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts index 71a2623d6..8bfdb8965 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -19,7 +19,10 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro editorDOM: element, scrollDOM: scrollContainer, manager, - translate: (text: string): string => text, // TODO - Implement + translate(text: string): string { + const translations = options.translations; + return translations[text] || text; + }, error(error: string|Error): void { const message = error instanceof Error ? error.message : error; window.$events.error(message); // TODO - Translate diff --git a/resources/views/pages/parts/wysiwyg-editor.blade.php b/resources/views/pages/parts/wysiwyg-editor.blade.php index d927a03d3..73e655752 100644 --- a/resources/views/pages/parts/wysiwyg-editor.blade.php +++ b/resources/views/pages/parts/wysiwyg-editor.blade.php @@ -9,7 +9,7 @@
-
+{{--
--}} @@ -18,4 +18,4 @@
{{ $errors->first('html') }}
@endif -{{--TODO - @include('form.editor-translations')--}} \ No newline at end of file +@include('form.editor-translations') \ No newline at end of file