Simplified wysiwyg toolbar with a overflow groups

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: "Inline Code", inline: "code"},
     {
         title: "Callouts", items: [
             {title: "Information", format: 'calloutinfo'},
@@ -61,24 +60,45 @@ function file_picker_callback(callback, value, meta) {
 
 /**
  * @param {WysiwygConfigOptions} options
- * @return {string}
+ * @return {{toolbar: string, groupButtons: Object<string, Object>}}
  */
 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',
-        'bold italic underline strikethrough superscript subscript',
+        'bold italic underline formatoverflow',
         'forecolor backcolor',
         'alignleft aligncenter alignright alignjustify',
-        'bullist numlist outdent indent',
+        'bullist numlist listoverflow',
         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});
+
+        // 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);
 
+    const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
+
     // Return config object
     return {
         width: '100%',
@@ -207,7 +238,7 @@ export function build(options) {
         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,
@@ -225,7 +256,12 @@ export function build(options) {
         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);
+        },
     };
 }
 

resources/lang/en/editor.php

@@ -23,6 +23,7 @@ return [
     'bottom' => 'Bottom',
     'width' => 'Width',
     'height' => 'Height',
+    'More' => 'More',
 
     // Toolbar
     'formats' => 'Formats',
@@ -32,7 +33,7 @@ return [
     'header_tiny' => 'Tiny Header',
     'paragraph' => 'Paragraph',
     'blockquote' => 'Blockquote',
-    'inline_code' => 'Inline Code',
+    'inline_code' => 'Inline code',
     'callouts' => 'Callouts',
     'callout_information' => 'Information',
     'callout_success' => 'Success',
@@ -132,6 +133,7 @@ return [
     '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.',

resources/sass/_tinymce.scss

@@ -30,6 +30,9 @@
 /**
  * Format Menu Hacks
  */
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  width: 6em !important;
+}
 .tox-menu .tox-collection__item blockquote::before {
   content: none;
 }