Lexical: Added UI translation support

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index eed1c61555f79f11f0c3528786a96c1284e33412..56dbe8d7c5f199d06a50facf5394d8e9a1034bc7 100644 (file)
--- 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 6233e6ce64c0b865708b381a97b53ae1e0208ab2..f0f46ddc674d37c14a0c8cb8cb7dc7e9e2eeebcf 100644 (file)
--- 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 80e4934861618dc99f833d2601fe05aed2df9b7a..f86e33c311e4f035460354bf28c9e62c890fa95c 100644 (file)
--- 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 8829d241f160c4d560c69f0aa4db8033d4d7bb6b..77223dac3f7aee294c68e4081876f6ce73d98342 100644 (file)
--- 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 a967ecb2fc026eb32afe0bdcff87587003f0c97a..c3726acf0010bf0cecaefc08b9a4d146b729cb35 100644 (file)
--- 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 44d4e0360947973d0af6f7ae7e164ac7177f3b82..c4392377828e3d2f791427829df58a92b06b6873 100644 (file)
--- 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<string, EditorFormModalDefinition> = {
     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 a2db34dd7a12ade9f94b6a5a4deedbb68e41e7b4..615d5b4ded0362f7c5aace812916a89523158d8b 100644 (file)
--- 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 71a2623d6aa0595205f69a8935ad2d680ffa6b59..8bfdb8965d2ebcf9db50a52b1bad972cf3d86be6 100644 (file)
--- 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 d927a03d3fb1971427062d4bd0a5fb10f2619584..73e6557527f2b53b921002d95da66ba108427338 100644 (file)
--- a/resources/views/pages/parts/wysiwyg-editor.blade.php
+++ b/resources/views/pages/parts/wysiwyg-editor.blade.php
@@ -9,7 +9,7 @@
     <div class="editor-container flex-container-column flex-fill flex" refs="wysiwyg-editor@edit-container">
     </div>
 
-    <div id="lexical-debug" style="white-space: pre-wrap; font-size: 12px; height: 200px; overflow-y: scroll; background-color: #000; padding: 1rem; border-radius: 4px; color: #FFF;"></div>
+{{--    <div id="lexical-debug" style="white-space: pre-wrap; font-size: 12px; height: 200px; overflow-y: scroll; background-color: #000; padding: 1rem; border-radius: 4px; color: #FFF;"></div>--}}
 
     <textarea refs="wysiwyg-editor@input" id="html-editor" hidden="hidden"  name="html" rows="5">{{ old('html') ?? $model->html ?? '' }}</textarea>
 </div>
@@ -18,4 +18,4 @@
     <div class="text-neg text-small">{{ $errors->first('html') }}</div>
 @endif
 
-{{--TODO - @include('form.editor-translations')--}}
\ No newline at end of file
+@include('form.editor-translations')
\ No newline at end of file