Lexical: Added UI translation support

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: {
+                translations,
-                    imageUploadErrorText: this.$opts.imageUploadErrorText,
-                    serverUploadLimitText: this.$opts.serverUploadLimitText,
-                },
             });
         });
 

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'));

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(

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');

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,

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: {

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'});

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

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')--}}
+@include('form.editor-translations')