Simplified wysiwyg toolbar with a overflow groups

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 11090ce4bd6f0874bbfa4d4037c8b5988c9778a1..519e85a5f1ffcb93877ea378e5c20fc7c5a17cd8 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -16,7 +16,6 @@ const style_formats = [
     {title: "Tiny Header", format: "h5"},
     {title: "Paragraph", format: "p", exact: true, classes: ''},
     {title: "Blockquote", format: "blockquote"},
     {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: "Information", format: 'calloutinfo'},
     {
         title: "Callouts", items: [
             {title: "Information", format: 'calloutinfo'},


@@ -61,24 +60,45 @@ function file_picker_callback(callback, value, meta) {
 
 /**
  * @param {WysiwygConfigOptions} options
 
 /**
  * @param {WysiwygConfigOptions} options

- * @return {string}
+ * @return {{toolbar: string, groupButtons: Object<string, Object>}}

  */
 function buildToolbar(options) {
     const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
 
  */
 function buildToolbar(options) {
     const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
 

+    const groupButtons = {
+        formatoverflow: {
+            icon: 'more-drawer',
+            tooltip: 'More',
+            items: 'strikethrough superscript subscript inlinecode removeformat'
+        },
+        listoverflow: {
+            icon: 'more-drawer',
+            tooltip: 'More',
+            items: 'outdent indent'
+        },
+        insertoverflow: {
+            icon: 'more-drawer',
+            tooltip: 'More',
+            items: 'hr codeeditor drawio media'
+        }
+    };
+

     const toolbar = [
         'undo redo',
         'styleselect',
     const toolbar = [
         'undo redo',
         'styleselect',

-        'bold italic underline strikethrough superscript subscript',
+        'bold italic underline formatoverflow',

         'forecolor backcolor',
         'alignleft aligncenter alignright alignjustify',
         'forecolor backcolor',
         'alignleft aligncenter alignright alignjustify',

-        'bullist numlist outdent indent',
+        'bullist numlist listoverflow',

         textDirPlugins,
         textDirPlugins,

-        'table imagemanager-insert link hr codeeditor drawio media',
-        'removeformat code about fullscreen'
+        'link table imagemanager-insert insertoverflow',
+        'code about fullscreen'

     ];
 
     ];
 

-    return toolbar.filter(row => Boolean(row)).join(' | ');
+    return {
+        toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
+        groupButtons,
+    };

 }
 
 /**
 }
 
 /**


@@ -168,6 +188,15 @@ function getSetupCallback(options) {
 
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
 
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});

+
+        // Inline code format button
+        editor.ui.registry.addButton('inlinecode', {
+            tooltip: 'Inline code',
+            icon: 'sourcecode',
+            onAction() {
+                editor.execCommand('mceToggleFormat', false, 'code');
+            }
+        })

     }
 }
 
     }
 }
 


@@ -180,6 +209,8 @@ export function build(options) {
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 

+    const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
+

     // Return config object
     return {
         width: '100%',
     // Return config object
     return {
         width: '100%',


@@ -207,7 +238,7 @@ export function build(options) {
         plugins: gatherPlugins(options),
         imagetools_toolbar: 'imageoptions',
         contextmenu: false,
         plugins: gatherPlugins(options),
         imagetools_toolbar: 'imageoptions',
         contextmenu: false,

-        toolbar: buildToolbar(options),
+        toolbar: toolbar,

         content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
         style_formats,
         style_formats_merge: false,
         content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
         style_formats,
         style_formats_merge: false,


@@ -225,7 +256,12 @@ export function build(options) {
         init_instance_callback(editor) {
             loadCustomHeadContent(editor);
         },
         init_instance_callback(editor) {
             loadCustomHeadContent(editor);
         },

-        setup: getSetupCallback(options),
+        setup(editor) {
+            for (const [key, config] of Object.entries(toolBarGroupButtons)) {
+                editor.ui.registry.addGroupToolbarButton(key, config);
+            }
+            getSetupCallback(options)(editor);
+        },

     };
 }
 
     };
 }
 

diff --git a/resources/lang/en/editor.php b/resources/lang/en/editor.php
index ed40133e418a4d852edb38b0cfaf17aec2f0234c..4a21f17f6f5b78626e090f8aa08cbf0622bc28b4 100644 (file)
--- a/resources/lang/en/editor.php
+++ b/resources/lang/en/editor.php
@@ -23,6 +23,7 @@ return [
     'bottom' => 'Bottom',
     'width' => 'Width',
     'height' => 'Height',
     'bottom' => 'Bottom',
     'width' => 'Width',
     'height' => 'Height',

+    'More' => 'More',

 
     // Toolbar
     'formats' => 'Formats',
 
     // Toolbar
     'formats' => 'Formats',


@@ -32,7 +33,7 @@ return [
     'header_tiny' => 'Tiny Header',
     'paragraph' => 'Paragraph',
     'blockquote' => 'Blockquote',
     'header_tiny' => 'Tiny Header',
     'paragraph' => 'Paragraph',
     'blockquote' => 'Blockquote',

-    'inline_code' => 'Inline Code',
+    'inline_code' => 'Inline code',

     'callouts' => 'Callouts',
     'callout_information' => 'Information',
     'callout_success' => 'Success',
     'callouts' => 'Callouts',
     'callout_information' => 'Information',
     'callout_success' => 'Success',


@@ -132,6 +133,7 @@ return [
     'open_link_new' => 'New window',
 
     // About view
     'open_link_new' => 'New window',
 
     // About view

+    'about_title' => 'About the WYSIWYG Editor',

     'editor_license' => 'Editor License & Copyright',
     'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under an LGPLv2.1 license.',
     'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',
     'editor_license' => 'Editor License & Copyright',
     'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under an LGPLv2.1 license.',
     'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 4f979147702be60a4dd0589221630870b79b2aef..d64e0e63d0cfb2668010f9610ffdc236d6bad20d 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -30,6 +30,9 @@
 /**
  * Format Menu Hacks
  */
 /**
  * Format Menu Hacks
  */

+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  width: 6em !important;
+}

 .tox-menu .tox-collection__item blockquote::before {
   content: none;
 }
 .tox-menu .tox-collection__item blockquote::before {
   content: none;
 }