Lexical: Worked on toolbar styling, got format submenu working

resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts

@@ -7,10 +7,12 @@ export class EditorDropdownButton extends EditorContainerUiElement {
     protected button: EditorButton;
     protected childItems: EditorUiElement[];
     protected open: boolean = false;
+    protected showOnHover: boolean = false;
 
-    constructor(button: EditorBasicButtonDefinition|EditorButton, children: EditorUiElement[]) {
+    constructor(button: EditorBasicButtonDefinition|EditorButton, showOnHover: boolean, children: EditorUiElement[]) {
         super(children);
-        this.childItems = children
+        this.childItems = children;
+        this.showOnHover = showOnHover;
 
         if (button instanceof EditorButton) {
             this.button = button;
@@ -47,13 +49,15 @@ export class EditorDropdownButton extends EditorContainerUiElement {
             class: 'editor-dropdown-menu-container',
         }, [button, menu]);
 
-        handleDropdown(button, menu, () => {
+        handleDropdown({toggle : button, menu : menu,
+            showOnHover: this.showOnHover,
+            onOpen : () => {
             this.open = true;
             this.getContext().manager.triggerStateUpdateForElement(this.button);
-        }, () => {
+        }, onClose : () => {
             this.open = false;
             this.getContext().manager.triggerStateUpdateForElement(this.button);
-        });
+        }});
 
         return wrapper;
     }

resources/js/wysiwyg/ui/framework/blocks/format-menu.ts

@@ -20,7 +20,7 @@ export class EditorFormatMenu extends EditorContainerUiElement {
             class: 'editor-format-menu editor-dropdown-menu-container',
         }, [toggle, menu]);
 
-        handleDropdown(toggle, menu);
+        handleDropdown({toggle : toggle, menu : menu});
 
         return wrapper;
     }
@@ -33,6 +33,15 @@ export class EditorFormatMenu extends EditorContainerUiElement {
                 this.updateToggleLabel(child.getLabel());
                 return;
             }
+
+            if (child instanceof EditorContainerUiElement) {
+                for (const grandchild of child.getChildren()) {
+                    if (grandchild instanceof EditorButton && grandchild.isActive()) {
+                        this.updateToggleLabel(grandchild.getLabel());
+                        return;
+                    }
+                }
+            }
         }
 
         this.updateToggleLabel(this.trans('Formats'));

resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts

@@ -17,13 +17,14 @@ export class EditorOverflowContainer extends EditorContainerUiElement {
         this.overflowButton = new EditorDropdownButton({
             label: 'More',
             icon: moreHorizontal,
-        }, []);
+        }, false, []);
         this.addChildren(this.overflowButton);
     }
 
     protected buildDOM(): HTMLElement {
-        const visibleChildren = this.content.slice(0, this.size);
-        const invisibleChildren = this.content.slice(this.size);
+        const slicePosition = this.content.length > this.size ? this.size - 1 : this.size;
+        const visibleChildren = this.content.slice(0, slicePosition);
+        const invisibleChildren = this.content.slice(slicePosition);
 
         const visibleElements = visibleChildren.map(child => child.getDOMElement());
         if (invisibleChildren.length > 0) {

resources/js/wysiwyg/ui/framework/helpers/dropdowns.ts

@@ -1,7 +1,16 @@
 
 
 
-export function handleDropdown(toggle: HTMLElement, menu: HTMLElement, onOpen: Function|undefined = undefined, onClose: Function|undefined = undefined) {
+interface HandleDropdownParams {
+    toggle: HTMLElement;
+    menu: HTMLElement;
+    showOnHover?: boolean,
+    onOpen?: Function | undefined;
+    onClose?: Function | undefined;
+}
+
+export function handleDropdown(options: HandleDropdownParams) {
+    const {menu, toggle, onClose, onOpen, showOnHover} = options;
     let clickListener: Function|null = null;
 
     const hide = () => {
@@ -27,8 +36,13 @@ export function handleDropdown(toggle: HTMLElement, menu: HTMLElement, onOpen: F
         }
     };
 
-    toggle.addEventListener('click', event => {
+    const toggleShowing = (event: MouseEvent) => {
         menu.hasAttribute('hidden') ? show() : hide();
-    });
+    };
+    toggle.addEventListener('click', toggleShowing);
+    if (showOnHover) {
+        toggle.addEventListener('mouseenter', toggleShowing);
+    }
+
     menu.addEventListener('mouseleave', hide);
 }

resources/js/wysiwyg/ui/toolbars.ts

@@ -21,9 +21,12 @@ import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
 
 export function getMainEditorFullToolbar(): EditorContainerUiElement {
     return new EditorSimpleClassContainer('editor-toolbar-main', [
+
         // History state
-        new EditorButton(undo),
-        new EditorButton(redo),
+        new EditorOverflowContainer(2, [
+            new EditorButton(undo),
+            new EditorButton(redo),
+        ]),
 
         // Block formats
         new EditorFormatMenu([
@@ -33,37 +36,43 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new FormatPreviewButton(el('h5'), h5),
             new FormatPreviewButton(el('blockquote'), blockquote),
             new FormatPreviewButton(el('p'), paragraph),
-            new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
-            new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
-            new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
-            new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
+            new EditorDropdownButton({label: 'Callouts'}, true, [
+                new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
+                new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
+                new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
+                new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
+            ]),
         ]),
 
         // Inline formats
-        new EditorButton(bold),
-        new EditorButton(italic),
-        new EditorButton(underline),
-        new EditorDropdownButton(new EditorColorButton(textColor, 'color'), [
-            new EditorColorPicker('color'),
+        new EditorOverflowContainer(6, [
+            new EditorButton(bold),
+            new EditorButton(italic),
+            new EditorButton(underline),
+            new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
+                new EditorColorPicker('color'),
+            ]),
+            new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
+                new EditorColorPicker('background-color'),
+            ]),
+            new EditorButton(strikethrough),
+            new EditorButton(superscript),
+            new EditorButton(subscript),
+            new EditorButton(code),
+            new EditorButton(clearFormating),
         ]),
-        new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), [
-            new EditorColorPicker('background-color'),
-        ]),
-        new EditorButton(strikethrough),
-        new EditorButton(superscript),
-        new EditorButton(subscript),
-        new EditorButton(code),
-        new EditorButton(clearFormating),
 
         // Lists
-        new EditorButton(bulletList),
-        new EditorButton(numberList),
-        new EditorButton(taskList),
+        new EditorOverflowContainer(3, [
+            new EditorButton(bulletList),
+            new EditorButton(numberList),
+            new EditorButton(taskList),
+        ]),
 
         // Insert types
         new EditorOverflowContainer(6, [
             new EditorButton(link),
-            new EditorDropdownButton(table, [
+            new EditorDropdownButton(table, false, [
                 new EditorTableCreator(),
             ]),
             new EditorButton(image),
@@ -73,21 +82,23 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         ]),
 
         // Meta elements
-        new EditorButton(source),
-        new EditorButton(fullscreen),
+        new EditorOverflowContainer(3, [
+            new EditorButton(source),
+            new EditorButton(fullscreen),
 
-        // Test
-        new EditorButton({
-            label: 'Test button',
-            action(context: EditorUiContext) {
-                context.editor.update(() => {
-                    // Do stuff
-                });
-            },
-            isActive() {
-                return false;
-            }
-        })
+            // Test
+            new EditorButton({
+                label: 'Test button',
+                action(context: EditorUiContext) {
+                    context.editor.update(() => {
+                        // Do stuff
+                    });
+                },
+                isActive() {
+                    return false;
+                }
+            })
+        ]),
     ]);
 }