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