Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-26 04:42:37 +01:00
Code Issues Releases Wiki Activity

Lexical: Added overflow container

Browse Source
This commit is contained in:
Dan Brown 2024-06-27 16:28:06 +01:00
parent 4e2820d6e3
commit f10ec3271a
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 80 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/icons/editor/more-horizontal.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

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

@ -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 {

41
resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts Normal file
View File

@ -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);
}
}

21
resources/js/wysiwyg/ui/framework/core.ts
View File

@ -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);

5
resources/js/wysiwyg/ui/toolbars.ts
View File

@ -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),

4
resources/sass/_editor.scss
View File

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