Lexical: Added overflow container

resources/icons/editor/more-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>

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

@@ -26,7 +26,12 @@ export class EditorDropdownButton extends EditorContainerUiElement {
             });
         }
 
-        this.children.push(this.button);
+        this.addChildren(this.button);
+    }
+
+    insertItems(...items: EditorUiElement[]) {
+        this.addChildren(...items);
+        this.childItems.push(...items);
     }
 
     protected buildDOM(): HTMLElement {

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

@@ -0,0 +1,41 @@
+import {EditorContainerUiElement, EditorUiElement} from "../core";
+import {el} from "../../../helpers";
+import {EditorDropdownButton} from "./dropdown-button";
+import moreHorizontal from "@icons/editor/more-horizontal.svg"
+
+
+export class EditorOverflowContainer extends EditorContainerUiElement {
+
+    protected size: number;
+    protected overflowButton: EditorDropdownButton;
+    protected content: EditorUiElement[];
+
+    constructor(size: number, children: EditorUiElement[]) {
+        super(children);
+        this.size = size;
+        this.content = children;
+        this.overflowButton = new EditorDropdownButton({
+            label: 'More',
+            icon: moreHorizontal,
+        }, []);
+        this.addChildren(this.overflowButton);
+    }
+
+    protected buildDOM(): HTMLElement {
+        const visibleChildren = this.content.slice(0, this.size);
+        const invisibleChildren = this.content.slice(this.size);
+
+        const visibleElements = visibleChildren.map(child => child.getDOMElement());
+        if (invisibleChildren.length > 0) {
+            this.removeChildren(...invisibleChildren);
+            this.overflowButton.insertItems(...invisibleChildren);
+            visibleElements.push(this.overflowButton.getDOMElement());
+        }
+
+        return el('div', {
+            class: 'editor-overflow-container',
+        }, visibleElements);
+    }
+
+
+}

resources/js/wysiwyg/ui/framework/core.ts

@@ -50,11 +50,11 @@ export abstract class EditorUiElement {
 }
 
 export class EditorContainerUiElement extends EditorUiElement {
-    protected children : EditorUiElement[];
+    protected children : EditorUiElement[] = [];
 
     constructor(children: EditorUiElement[]) {
         super();
-        this.children = children;
+        this.children.push(...children);
     }
 
     protected buildDOM(): HTMLElement {
@@ -65,6 +65,23 @@ export class EditorContainerUiElement extends EditorUiElement {
         return this.children;
     }
 
+    protected addChildren(...children: EditorUiElement[]): void {
+        this.children.push(...children);
+    }
+
+    protected removeChildren(...children: EditorUiElement[]): void {
+        for (const child of children) {
+            this.removeChild(child);
+        }
+    }
+
+    protected removeChild(child: EditorUiElement) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+        }
+    }
+
     updateState(state: EditorUiStateUpdate): void {
         for (const child of this.children) {
             child.updateState(state);

resources/js/wysiwyg/ui/toolbars.ts

@@ -17,8 +17,7 @@ import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
 import {EditorColorPicker} from "./framework/blocks/color-picker";
 import {EditorTableCreator} from "./framework/blocks/table-creator";
 import {EditorColorButton} from "./framework/blocks/color-button";
-import {$isCustomTableNode, $setTableColumnWidth, CustomTableNode} from "../nodes/custom-table";
-import {$getRoot} from "lexical";
+import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
 
 export function getMainEditorFullToolbar(): EditorContainerUiElement {
     return new EditorSimpleClassContainer('editor-toolbar-main', [
@@ -62,6 +61,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         new EditorButton(taskList),
 
         // Insert types
+        new EditorOverflowContainer(6, [
             new EditorButton(link),
             new EditorDropdownButton(table, [
                 new EditorTableCreator(),
@@ -69,6 +69,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new EditorButton(image),
             new EditorButton(horizontalRule),
             new EditorButton(details),
+        ]),
 
         // Meta elements
         new EditorButton(source),

resources/sass/_editor.scss

@@ -65,6 +65,10 @@
   min-width: 320px;
 }
 
+.editor-overflow-container {
+  display: flex;
+}
+
 // Modals
 .editor-modal-wrapper {
   position: fixed;