1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00

Lexical: Started table menu options

Updated UI elements to handle new scenarios needed in more complex table
menu
This commit is contained in:
Dan Brown
2024-08-02 11:16:54 +01:00
parent 13f8f39dd5
commit 6b06d490c5
9 changed files with 101 additions and 43 deletions

View File

@ -1,6 +1,6 @@
import {EditorButton} from "./framework/buttons";
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
import {el} from "../helpers";
import {$selectionContainsNodeType, el} from "../helpers";
import {EditorFormatMenu} from "./framework/blocks/format-menu";
import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
@ -11,7 +11,7 @@ import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
import {
deleteColumn,
deleteRow,
deleteTable, insertColumnAfter,
deleteTable, deleteTableMenuAction, insertColumnAfter,
insertColumnBefore,
insertRowAbove,
insertRowBelow,
@ -50,6 +50,7 @@ import {
link, media,
unlink
} from "./defaults/buttons/objects";
import {$isTableNode} from "@lexical/table";
export function getMainEditorFullToolbar(): EditorContainerUiElement {
return new EditorSimpleClassContainer('editor-toolbar-main', [
@ -68,7 +69,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
new FormatPreviewButton(el('h5'), h5),
new FormatPreviewButton(el('blockquote'), blockquote),
new FormatPreviewButton(el('p'), paragraph),
new EditorDropdownButton({label: 'Callouts'}, true, [
new EditorDropdownButton({button: {label: 'Callouts'}, showOnHover: true, direction: 'vertical'}, [
new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
@ -81,10 +82,10 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
new EditorButton(bold),
new EditorButton(italic),
new EditorButton(underline),
new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
new EditorDropdownButton({ button: new EditorColorButton(textColor, 'color') }, [
new EditorColorPicker('color'),
]),
new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
new EditorDropdownButton({button: new EditorColorButton(highlightColor, 'background-color')}, [
new EditorColorPicker('background-color'),
]),
new EditorButton(strikethrough),
@ -112,9 +113,14 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
// Insert types
new EditorOverflowContainer(8, [
new EditorButton(link),
new EditorDropdownButton(table, false, [
new EditorTableCreator(),
new EditorDropdownButton({button: table, direction: 'vertical'}, [
new EditorDropdownButton({button: {...table, format: 'long'}, showOnHover: true}, [
new EditorTableCreator(),
]),
new EditorButton(deleteTableMenuAction),
]),
new EditorButton(image),
new EditorButton(horizontalRule),
new EditorButton(codeBlock),