Made WYSIWYG editor translatable

- Created new translation file for editor view.
- Added simple logic to format for tinymce.
- Aligned some of the custom labels we were using.

resources/js/components/wysiwyg-editor.js

@@ -10,6 +10,7 @@ class WysiwygEditor {
         this.isDarkMode = document.documentElement.classList.contains('dark-mode');
 
         this.tinyMceConfig = buildEditorConfig({
+            language: this.$opts.language,
             containerElement: this.elem,
             darkMode: this.isDarkMode,
             textDirection: this.textDirection,
@@ -18,7 +19,8 @@ class WysiwygEditor {
             translations: {
                 imageUploadErrorText: this.$opts.imageUploadErrorText,
                 serverUploadLimitText: this.$opts.serverUploadLimitText,
-            }
+            },
+            translationMap: window.editor_translations,
         });
 
         window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});

resources/js/wysiwyg/config.js

@@ -9,16 +9,16 @@ import {getPlugin as getCustomhrPlugin} from "./plugins-customhr";
 import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager";
 
 const style_formats = [
-    {title: "Header Large", format: "h2", preview: 'color: blue;'},
-    {title: "Header Medium", format: "h3"},
-    {title: "Header Small", format: "h4"},
-    {title: "Header Tiny", format: "h5"},
+    {title: "Large Header", format: "h2", preview: 'color: blue;'},
+    {title: "Medium Header", format: "h3"},
+    {title: "Small Header", format: "h4"},
+    {title: "Tiny Header", format: "h5"},
     {title: "Paragraph", format: "p", exact: true, classes: ''},
     {title: "Blockquote", format: "blockquote"},
     {title: "Inline Code", inline: "code"},
     {
         title: "Callouts", items: [
-            {title: "Info", format: 'calloutinfo'},
+            {title: "Information", format: 'calloutinfo'},
             {title: "Success", format: 'calloutsuccess'},
             {title: "Warning", format: 'calloutwarning'},
             {title: "Danger", format: 'calloutdanger'}
@@ -174,6 +174,10 @@ function getSetupCallback(options) {
  */
 export function build(options) {
 
+    // Set language
+    window.tinymce.addI18n(options.language, options.translationMap);
+
+    // Return config object
     return {
         width: '100%',
         height: '100%',
@@ -186,6 +190,7 @@ export function build(options) {
         body_class: 'page-content',
         browser_spellcheck: true,
         relative_urls: false,
+        language: options.language,
         directionality: options.textDirection,
         remove_script_host: false,
         document_base_url: window.baseUrl('/'),
@@ -224,9 +229,11 @@ export function build(options) {
 /**
  * @typedef {Object} WysiwygConfigOptions
  * @property {Element} containerElement
+ * @property {string} language
  * @property {boolean} darkMode
  * @property {string} textDirection
  * @property {string} drawioUrl
  * @property {int} pageId
  * @property {Object} translations
+ * @property {Object} translationMap
  */

resources/js/wysiwyg/plugin-codeeditor.js

@@ -69,7 +69,7 @@ function register(editor, url) {
     editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>')
 
     editor.ui.registry.addButton('codeeditor', {
-        title: 'Insert code block',
+        tooltip: 'Insert code block',
         icon: 'codeblock',
         onAction() {
             editor.execCommand('codeeditor');

resources/js/wysiwyg/plugin-drawio.js

@@ -102,7 +102,7 @@ export function getPlugin(providedOptions) {
         editor.ui.registry.addIcon('diagram', `<svg width="24" height="24" fill="${options.darkMode ? '#BBB' : '#000000'}" xmlns="http://www.w3.org/2000/svg"><path d="M20.716 7.639V2.845h-4.794v1.598h-7.99V2.845H3.138v4.794h1.598v7.99H3.138v4.794h4.794v-1.598h7.99v1.598h4.794v-4.794h-1.598v-7.99zM4.736 4.443h1.598V6.04H4.736zm1.598 14.382H4.736v-1.598h1.598zm9.588-1.598h-7.99v-1.598H6.334v-7.99h1.598V6.04h7.99v1.598h1.598v7.99h-1.598zm3.196 1.598H17.52v-1.598h1.598zM17.52 6.04V4.443h1.598V6.04zm-4.21 7.19h-2.79l-.582 1.599H8.643l2.717-7.191h1.119l2.724 7.19h-1.302zm-2.43-1.006h2.086l-1.039-3.06z"/></svg>`)
 
         editor.ui.registry.addSplitButton('drawio', {
-            tooltip: 'Drawing',
+            tooltip: 'Insert/edit drawing',
             icon: 'diagram',
             onAction() {
                 editor.execCommand('drawio');
@@ -111,7 +111,7 @@ export function getPlugin(providedOptions) {
                 callback([
                     {
                         type: 'choiceitem',
-                        text: 'Drawing Manager',
+                        text: 'Drawing manager',
                         value: 'drawing-manager',
                     }
                 ]);

resources/js/wysiwyg/plugins-customhr.js

@@ -12,16 +12,7 @@ function register(editor, url) {
 
     editor.ui.registry.addButton('hr', {
         icon: 'horizontal-rule',
-        tooltip: 'Horizontal line',
-        onAction() {
-            editor.execCommand('InsertHorizontalRule');
-        }
-    });
-
-    editor.ui.registry.addMenuItem('hr', {
-        icon: 'horizontal-rule',
-        text: 'Horizontal line',
-        context: 'insert',
+        tooltip: 'Insert horizontal line',
         onAction() {
             editor.execCommand('InsertHorizontalRule');
         }

resources/js/wysiwyg/plugins-imagemanager.js

@@ -6,9 +6,9 @@ function register(editor, url) {
 
     // Custom Image picker button
     editor.ui.registry.addButton('imagemanager-insert', {
-        title: 'Insert an image',
+        title: 'Insert image',
         icon: 'image',
-        tooltip: 'Insert an image',
+        tooltip: 'Insert image',
         onAction() {
             window.ImageManager.show(function (image) {
                 const imageUrl = image.thumbs.display || image.url;