Merge pull request #5917 from BookStackApp/copy_references

[bookstack] / resources / js / wysiwyg / ui / defaults / buttons / tables.ts

diff --git a/resources/js/wysiwyg/ui/defaults/buttons/tables.ts b/resources/js/wysiwyg/ui/defaults/buttons/tables.ts
index 69d811ce2475531e4b4539d11f09448418dc1ffd..2e4883d88e6806ae2d30c80b81ac15118c805a2d 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/buttons/tables.ts
+++ b/resources/js/wysiwyg/ui/defaults/buttons/tables.ts
@@ -9,22 +9,36 @@ import insertRowAboveIcon from "@icons/editor/table-insert-row-above.svg";
 import insertRowBelowIcon from "@icons/editor/table-insert-row-below.svg";
 import {EditorUiContext} from "../../framework/core";
 import {$getSelection, BaseSelection} from "lexical";
-import {$isCustomTableNode} from "../../../nodes/custom-table";
 import {
     $deleteTableColumn__EXPERIMENTAL,
     $deleteTableRow__EXPERIMENTAL,
     $insertTableColumn__EXPERIMENTAL,
-    $insertTableRow__EXPERIMENTAL,
+    $insertTableRow__EXPERIMENTAL, $isTableCellNode,
     $isTableNode, $isTableRowNode, $isTableSelection, $unmergeCell, TableCellNode,
 } from "@lexical/table";
 import {$getNodeFromSelection, $selectionContainsNodeType} from "../../../utils/selection";
 import {$getParentOfType} from "../../../utils/nodes";
-import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell-node";
-import {showCellPropertiesForm} from "../forms/tables";
-import {$mergeTableCellsInSelection} from "../../../utils/tables";
+import {$showCellPropertiesForm, $showRowPropertiesForm, $showTablePropertiesForm} from "../forms/tables";
+import {
+    $clearTableFormatting,
+    $clearTableSizes, $getTableFromSelection,
+    $getTableRowsFromSelection,
+    $mergeTableCellsInSelection
+} from "../../../utils/tables";
+import {
+    $copySelectedColumnsToClipboard,
+    $copySelectedRowsToClipboard,
+    $cutSelectedColumnsToClipboard,
+    $cutSelectedRowsToClipboard,
+    $pasteClipboardRowsBefore,
+    $pasteClipboardRowsAfter,
+    isColumnClipboardEmpty,
+    isRowClipboardEmpty,
+    $pasteClipboardColumnsBefore, $pasteClipboardColumnsAfter
+} from "../../../utils/table-copy-paste";
 
 const neverActive = (): boolean => false;
-const cellNotSelected = (selection: BaseSelection|null) => !$selectionContainsNodeType(selection, $isCustomTableCellNode);
+const cellNotSelected = (selection: BaseSelection|null) => !$selectionContainsNodeType(selection, $isTableCellNode);
 
 export const table: EditorBasicButtonDefinition = {
     label: 'Table',
@@ -36,15 +50,10 @@ export const tableProperties: EditorButtonDefinition = {
     icon: tableIcon,
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
-            if (!$isCustomTableCellNode(cell)) {
-                return;
+            const table = $getTableFromSelection($getSelection());
+            if ($isTableNode(table)) {
+                $showTablePropertiesForm(table, context);
             }
-
-            const table = $getParentOfType(cell, $isTableNode);
-            const modalForm = context.manager.createModal('table_properties');
-            modalForm.show({});
-            // TODO
         });
     },
     isActive: neverActive,
@@ -55,14 +64,16 @@ export const clearTableFormatting: EditorButtonDefinition = {
     label: 'Clear table formatting',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
-            if (!$isCustomTableCellNode(cell)) {
+        context.editor.update(() => {
+            const cell = $getNodeFromSelection($getSelection(), $isTableCellNode);
+            if (!$isTableCellNode(cell)) {
                 return;
             }
 
             const table = $getParentOfType(cell, $isTableNode);
-            // TODO
+            if ($isTableNode(table)) {
+                $clearTableFormatting(table);
+            }
         });
     },
     isActive: neverActive,
@@ -73,22 +84,15 @@ export const resizeTableToContents: EditorButtonDefinition = {
     label: 'Resize to contents',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
-            if (!$isCustomTableCellNode(cell)) {
-                return;
-            }
-
-            const table = $getParentOfType(cell, $isCustomTableNode);
-            if (!$isCustomTableNode(table)) {
+        context.editor.update(() => {
+            const cell = $getNodeFromSelection($getSelection(), $isTableCellNode);
+            if (!$isTableCellNode(cell)) {
                 return;
             }
 
-            for (const row of table.getChildren()) {
-                if ($isTableRowNode(row)) {
-                    // TODO - Come back later as this may depend on if we
-                    //   are using a custom table row
-                }
+            const table = $getParentOfType(cell, $isTableNode);
+            if ($isTableNode(table)) {
+                $clearTableSizes(table);
             }
         });
     },
@@ -101,7 +105,7 @@ export const deleteTable: EditorButtonDefinition = {
     icon: deleteIcon,
     action(context: EditorUiContext) {
         context.editor.update(() => {
-            const table = $getNodeFromSelection($getSelection(), $isCustomTableNode);
+            const table = $getNodeFromSelection($getSelection(), $isTableNode);
             if (table) {
                 table.remove();
             }
@@ -161,15 +165,10 @@ export const rowProperties: EditorButtonDefinition = {
     format: 'long',
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
-            if (!$isCustomTableCellNode(cell)) {
-                return;
+            const rows = $getTableRowsFromSelection($getSelection());
+            if ($isTableRowNode(rows[0])) {
+                $showRowPropertiesForm(rows[0], context);
             }
-
-            const row = $getParentOfType(cell, $isTableRowNode);
-            const modalForm = context.manager.createModal('row_properties');
-            modalForm.show({});
-            // TODO
         });
     },
     isActive: neverActive,
@@ -180,8 +179,12 @@ export const cutRow: EditorButtonDefinition = {
     label: 'Cut row',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $cutSelectedRowsToClipboard();
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
@@ -193,7 +196,11 @@ export const copyRow: EditorButtonDefinition = {
     format: 'long',
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            // TODO
+            try {
+                $copySelectedRowsToClipboard();
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
@@ -204,32 +211,44 @@ export const pasteRowBefore: EditorButtonDefinition = {
     label: 'Paste row before',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $pasteClipboardRowsBefore(context.editor);
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
-    isDisabled: cellNotSelected,
+    isDisabled: (selection) => cellNotSelected(selection) || isRowClipboardEmpty(),
 };
 
 export const pasteRowAfter: EditorButtonDefinition = {
     label: 'Paste row after',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $pasteClipboardRowsAfter(context.editor);
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
-    isDisabled: cellNotSelected,
+    isDisabled: (selection) => cellNotSelected(selection) || isRowClipboardEmpty(),
 };
 
 export const cutColumn: EditorButtonDefinition = {
     label: 'Cut column',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $cutSelectedColumnsToClipboard();
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
@@ -241,7 +260,11 @@ export const copyColumn: EditorButtonDefinition = {
     format: 'long',
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            // TODO
+            try {
+                $copySelectedColumnsToClipboard();
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
@@ -252,24 +275,32 @@ export const pasteColumnBefore: EditorButtonDefinition = {
     label: 'Paste column before',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $pasteClipboardColumnsBefore(context.editor);
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
-    isDisabled: cellNotSelected,
+    isDisabled: (selection) => cellNotSelected(selection) || isColumnClipboardEmpty(),
 };
 
 export const pasteColumnAfter: EditorButtonDefinition = {
     label: 'Paste column after',
     format: 'long',
     action(context: EditorUiContext) {
-        context.editor.getEditorState().read(() => {
-            // TODO
+        context.editor.update(() => {
+            try {
+                $pasteClipboardColumnsAfter(context.editor);
+            } catch (e: any) {
+                context.error(e);
+            }
         });
     },
     isActive: neverActive,
-    isDisabled: cellNotSelected,
+    isDisabled: (selection) => cellNotSelected(selection) || isColumnClipboardEmpty(),
 };
 
 export const insertColumnBefore: EditorButtonDefinition = {
@@ -313,11 +344,12 @@ export const deleteColumn: EditorButtonDefinition = {
 
 export const cellProperties: EditorButtonDefinition = {
     label: 'Cell properties',
+    format: 'long',
     action(context: EditorUiContext) {
         context.editor.getEditorState().read(() => {
-            const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
-            if ($isCustomTableCellNode(cell)) {
-                showCellPropertiesForm(cell, context);
+            const cell = $getNodeFromSelection($getSelection(), $isTableCellNode);
+            if ($isTableCellNode(cell)) {
+                $showCellPropertiesForm(cell, context);
             }
         });
     },
@@ -327,6 +359,7 @@ export const cellProperties: EditorButtonDefinition = {
 
 export const mergeCells: EditorButtonDefinition = {
     label: 'Merge cells',
+    format: 'long',
     action(context: EditorUiContext) {
         context.editor.update(() => {
             const selection = $getSelection();
@@ -343,6 +376,7 @@ export const mergeCells: EditorButtonDefinition = {
 
 export const splitCell: EditorButtonDefinition = {
     label: 'Split cell',
+    format: 'long',
     action(context: EditorUiContext) {
         context.editor.update(() => {
             $unmergeCell();
@@ -350,7 +384,7 @@ export const splitCell: EditorButtonDefinition = {
     },
     isActive: neverActive,
     isDisabled(selection) {
-        const cell = $getNodeFromSelection(selection, $isCustomTableCellNode) as TableCellNode|null;
+        const cell = $getNodeFromSelection(selection, $isTableCellNode) as TableCellNode|null;
         if (cell) {
             const merged = cell.getRowSpan() > 1 || cell.getColSpan() > 1;
             return !merged;