diff --git a/resources/icons/editor/more-horizontal.svg b/resources/icons/editor/more-horizontal.svg new file mode 100644 index 000000000..ce09d9855 --- /dev/null +++ b/resources/icons/editor/more-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts b/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts index a419b92b2..b24b4c16c 100644 --- a/resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts +++ b/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 { diff --git a/resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts b/resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts new file mode 100644 index 000000000..2c188471e --- /dev/null +++ b/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); + } + + +} \ No newline at end of file diff --git a/resources/js/wysiwyg/ui/framework/core.ts b/resources/js/wysiwyg/ui/framework/core.ts index d437b36bd..5e29a0f9e 100644 --- a/resources/js/wysiwyg/ui/framework/core.ts +++ b/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); diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts index a8ba52c5f..02e46549e 100644 --- a/resources/js/wysiwyg/ui/toolbars.ts +++ b/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,13 +61,15 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement { new EditorButton(taskList), // Insert types - new EditorButton(link), - new EditorDropdownButton(table, [ - new EditorTableCreator(), + new EditorOverflowContainer(6, [ + new EditorButton(link), + new EditorDropdownButton(table, [ + new EditorTableCreator(), + ]), + new EditorButton(image), + new EditorButton(horizontalRule), + new EditorButton(details), ]), - new EditorButton(image), - new EditorButton(horizontalRule), - new EditorButton(details), // Meta elements new EditorButton(source), diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss index a4b0e632f..e0a2bac90 100644 --- a/resources/sass/_editor.scss +++ b/resources/sass/_editor.scss @@ -65,6 +65,10 @@ min-width: 320px; } +.editor-overflow-container { + display: flex; +} + // Modals .editor-modal-wrapper { position: fixed;