Lexical: Completed out table menu elements, logic pending

[bookstack] / resources / js / wysiwyg / ui / toolbars.ts

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index 5d40578a5b1962b4bcc23adb19f541e8616b4458..3346e0a0724ca78cfaf3fa73bde56838fdb8e288 100644 (file)
--- a/resources/js/wysiwyg/ui/toolbars.ts
+++ b/resources/js/wysiwyg/ui/toolbars.ts
@@ -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";
@@ -9,13 +9,27 @@ import {EditorTableCreator} from "./framework/blocks/table-creator";
 import {EditorColorButton} from "./framework/blocks/color-button";
 import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
 import {
+    cellProperties, clearTableFormatting,
+    copyColumn,
+    copyRow,
+    cutColumn,
+    cutRow,
     deleteColumn,
     deleteRow,
-    deleteTable, insertColumnAfter,
+    deleteTable,
+    deleteTableMenuAction,
+    insertColumnAfter,
     insertColumnBefore,
     insertRowAbove,
     insertRowBelow,
-    table
+    mergeCells,
+    pasteColumnAfter,
+    pasteColumnBefore,
+    pasteRowAfter,
+    pasteRowBefore, resizeTableToContents,
+    rowProperties,
+    splitCell,
+    table, tableProperties
 } from "./defaults/buttons/tables";
 import {fullscreen, redo, source, undo} from "./defaults/buttons/controls";
 import {
@@ -47,9 +61,10 @@ import {
     editCodeBlock,
     horizontalRule,
     image,
-    link,
+    link, media,
     unlink
 } from "./defaults/buttons/objects";
+import {$isTableNode} from "@lexical/table";
 
 export function getMainEditorFullToolbar(): EditorContainerUiElement {
     return new EditorSimpleClassContainer('editor-toolbar-main', [
@@ -68,7 +83,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 +96,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),
@@ -110,15 +125,48 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         ]),
 
         // Insert types
-        new EditorOverflowContainer(6, [
+        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 EditorDropdownButton({button: {label: 'Cell'}, direction: 'vertical', showOnHover: true}, [
+                    new EditorButton(cellProperties),
+                    new EditorButton(mergeCells),
+                    new EditorButton(splitCell),
+                ]),
+                new EditorDropdownButton({button: {label: 'Row'}, direction: 'vertical', showOnHover: true}, [
+                    new EditorButton({...insertRowAbove, format: 'long'}),
+                    new EditorButton({...insertRowBelow, format: 'long'}),
+                    new EditorButton({...deleteRow, format: 'long'}),
+                    new EditorButton(rowProperties),
+                    new EditorButton(cutRow),
+                    new EditorButton(copyRow),
+                    new EditorButton(pasteRowBefore),
+                    new EditorButton(pasteRowAfter),
+                ]),
+                new EditorDropdownButton({button: {label: 'Column'}, direction: 'vertical', showOnHover: true}, [
+                    new EditorButton({...insertColumnBefore, format: 'long'}),
+                    new EditorButton({...insertColumnAfter, format: 'long'}),
+                    new EditorButton({...deleteColumn, format: 'long'}),
+                    new EditorButton(cutColumn),
+                    new EditorButton(copyColumn),
+                    new EditorButton(pasteColumnBefore),
+                    new EditorButton(pasteColumnAfter),
+                ]),
+                new EditorButton({...tableProperties, format: 'long'}),
+                new EditorButton(clearTableFormatting),
+                new EditorButton(resizeTableToContents),
+                new EditorButton(deleteTableMenuAction),
             ]),
+
             new EditorButton(image),
             new EditorButton(horizontalRule),
             new EditorButton(codeBlock),
             new EditorButton(diagram),
+            new EditorButton(media),
             new EditorButton(details),
         ]),
 
@@ -163,7 +211,7 @@ export function getCodeToolbarContent(): EditorUiElement[] {
 export function getTableToolbarContent(): EditorUiElement[] {
     return [
         new EditorOverflowContainer(2, [
-            // Todo - Table properties
+            new EditorButton(tableProperties),
             new EditorButton(deleteTable),
         ]),
         new EditorOverflowContainer(3, [