@atlaskit/editor-plugin-table 5.7.6 → 5.7.8

package/src/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -144,9 +144,9 @@ describe('FloatingDragMenu', () => {
             "Add row aboveCtrl+Alt+↑",
             "Add row belowCtrl+Alt+↓",
             "Clear cells⌫",
-            "Delete row",
-            "Move row up",
-            "Move row down",
+            "Delete rowCtrl+⌫",
+            "Move row upCtrl+Alt+Shift+↑",
+            "Move row downCtrl+Alt+Shift+↓",
           ]
         `);
     });
@@ -180,9 +180,9 @@ describe('FloatingDragMenu', () => {
             "Add column rightCtrl+Alt+→",
             "Distribute columns",
             "Clear cells⌫",
-            "Delete column",
-            "Move column left",
-            "Move column right",
+            "Delete columnCtrl+⌫",
+            "Move column leftCtrl+Alt+Shift+←",
+            "Move column rightCtrl+Alt+Shift+→",
             "Sort increasing",
             "Sort decreasing",
           ]

package/src/commands-with-analytics.ts

@@ -32,6 +32,7 @@ import { insertColumn, insertRow } from './commands/insert';
 import {
   deleteTable,
   deleteTableIfSelected,
+  getTableSelectionType,
   setMultipleCellAttrs,
 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
@@ -283,7 +284,8 @@ export const deleteRowsWithAnalytics =
     inputMethod:
       | INPUT_METHOD.CONTEXT_MENU
       | INPUT_METHOD.BUTTON
-      | INPUT_METHOD.FLOATING_TB,
+      | INPUT_METHOD.FLOATING_TB
+      | INPUT_METHOD.SHORTCUT,
     rect: Rect,
     isHeaderRowRequired: boolean,
   ) =>
@@ -317,7 +319,8 @@ export const deleteColumnsWithAnalytics =
     inputMethod:
       | INPUT_METHOD.CONTEXT_MENU
       | INPUT_METHOD.BUTTON
-      | INPUT_METHOD.FLOATING_TB,
+      | INPUT_METHOD.FLOATING_TB
+      | INPUT_METHOD.SHORTCUT,
     rect: Rect,
   ) =>
     withEditorAnalyticsAPI(({ selection }) => {
@@ -339,6 +342,40 @@ export const deleteColumnsWithAnalytics =
       };
     })(editorAnalyticsAPI)(deleteColumnsCommand(rect));
 
+export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const isCellSelection = selection instanceof CellSelection;
+    if (!isCellSelection) {
+      return false;
+    }
+
+    const rect = getSelectionRect(selection);
+    if (!rect) {
+      return false;
+    }
+
+    const selectionType = getTableSelectionType(selection);
+    if (selectionType === 'row') {
+      const { pluginConfig } = getPluginState(state);
+      const isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
+
+      return deleteRowsWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.SHORTCUT,
+        rect,
+        isHeaderRowRequired,
+      )(state, dispatch);
+    } else if (selectionType === 'column') {
+      return deleteColumnsWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.SHORTCUT,
+        rect,
+      )(state, dispatch);
+    } else {
+      return false;
+    }
+  };
+
 const getTableDeletedAnalytics = (
   selection: Selection,
   inputMethod: INPUT_METHOD.FLOATING_TB | INPUT_METHOD.KEYBOARD,

package/src/plugin.tsx

@@ -245,8 +245,16 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         // plugin as it is currently swallowing backspace events inside tables
         {
           name: 'tableKeymap',
-          plugin: () =>
-            keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI),
+          plugin: () => {
+            const { dragAndDropEnabled } =
+              options || ({} as TablePluginOptions);
+
+            return keymapPlugin(
+              defaultGetEditorContainerWidth,
+              editorAnalyticsAPI,
+              dragAndDropEnabled,
+            );
+          },
         },
         {
           name: 'tableSelectionKeymap',

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -1,20 +1,30 @@
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
+  INPUT_METHOD,
   TABLE_ACTION,
   TABLE_STATUS,
 } from '@atlaskit/editor-common/analytics';
-import type {
-  EditorAnalyticsAPI,
-  INPUT_METHOD,
-} from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
 import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import {
+  findCellRectClosestToPos,
+  getSelectionRect,
+} from '@atlaskit/editor-tables/utils';
 
-import type { DraggableType } from '../../types';
-import { getSelectedTableInfo } from '../../utils';
+import type { DraggableData, DraggableType } from '../../types';
+import {
+  getSelectedColumnIndexes,
+  getSelectedRowIndexes,
+  getSelectedTableInfo,
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+} from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
 
 import { clearDropTarget, moveSource } from './commands';
@@ -59,7 +69,10 @@ export const clearDropTargetWithAnalytics =
 export const moveSourceWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
   (
-    inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP,
+    inputMethod:
+      | INPUT_METHOD.TABLE_CONTEXT_MENU
+      | INPUT_METHOD.DRAG_AND_DROP
+      | INPUT_METHOD.SHORTCUT,
     sourceType: DraggableType,
     sourceIndex: number,
     targetIndex: number,
@@ -98,3 +111,68 @@ export const moveSourceWithAnalytics =
       return true;
     });
   };
+
+export const moveSourceWithAnalyticsViaShortcut =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (sourceType: DraggableType, direction: DraggableData['direction']): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const isCellSelection = selection instanceof CellSelection;
+    const selectionRect = isCellSelection
+      ? getSelectionRect(selection)
+      : findCellRectClosestToPos(selection.$from);
+
+    if (!selectionRect) {
+      return false;
+    }
+
+    const isRow = sourceType === 'table-row';
+    const selectedIndexes = isRow
+      ? getSelectedRowIndexes(selectionRect)
+      : getSelectedColumnIndexes(selectionRect);
+
+    // We can move if only one row/column selected
+    if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+      return false;
+    }
+
+    const sourceIndex = selectedIndexes[0];
+    // we can move only by one row/column
+    // 'direction' can only be 1 (for right or down) or -1 (for left or up)
+    const targetIndex = sourceIndex + direction;
+
+    // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
+    const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
+    const isValidTargetIndex =
+      targetIndex < 0
+        ? false
+        : isRow
+        ? targetIndex <= totalRowCount - 1
+        : targetIndex <= totalColumnCount - 1;
+
+    if (!isValidTargetIndex) {
+      return false;
+    }
+
+    // We can move only if there are no merged cells in the source or target row/column
+    const hasMergedCellsInSource = isRow
+      ? hasMergedCellsInRow(sourceIndex)(selection)
+      : hasMergedCellsInColumn(sourceIndex)(selection);
+    if (hasMergedCellsInSource) {
+      return false;
+    }
+
+    const hasMergedCellsInTarget = isRow
+      ? hasMergedCellsInRow(targetIndex)(selection)
+      : hasMergedCellsInColumn(targetIndex)(selection);
+    if (hasMergedCellsInTarget) {
+      return false;
+    }
+
+    return moveSourceWithAnalytics(editorAnalyticsAPI)(
+      INPUT_METHOD.SHORTCUT,
+      sourceType,
+      sourceIndex,
+      targetIndex,
+    )(state, dispatch);
+  };

package/src/pm-plugins/keymap.ts

@@ -13,6 +13,12 @@ import {
   addRowBefore,
   backspace,
   bindKeymapWithCommand,
+  deleteColumn,
+  deleteRow,
+  moveColumnLeft,
+  moveColumnRight,
+  moveRowDown,
+  moveRowUp,
   nextCell,
   previousCell,
   toggleTable,
@@ -30,6 +36,7 @@ import {
 } from '../commands';
 import {
   addRowAroundSelection,
+  deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut,
   deleteTableIfSelectedWithAnalytics,
   emptyMultipleCellsWithAnalytics,
 } from '../commands-with-analytics';
@@ -37,6 +44,7 @@ import {
   addColumnAfter as addColumnAfterCommand,
   addColumnBefore as addColumnBeforeCommand,
 } from '../commands/insert';
+import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
 
 const createTableWithAnalytics = (
@@ -53,6 +61,7 @@ const createTableWithAnalytics = (
 export function keymapPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  dragAndDropEnabled?: boolean,
 ): SafePlugin {
   const list = {};
 
@@ -110,6 +119,49 @@ export function keymapPlugin(
     list,
   );
 
+  if (dragAndDropEnabled) {
+    // Move row/column shortcuts
+    bindKeymapWithCommand(
+      moveRowDown.common!,
+      moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-row', 1),
+      list,
+    );
+
+    bindKeymapWithCommand(
+      moveRowUp.common!,
+      moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-row', -1),
+      list,
+    );
+
+    bindKeymapWithCommand(
+      moveColumnLeft.common!,
+      moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)(
+        'table-column',
+        -1,
+      ),
+      list,
+    );
+
+    bindKeymapWithCommand(
+      moveColumnRight.common!,
+      moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', 1),
+      list,
+    );
+
+    // Delete row/column shortcuts
+    bindKeymapWithCommand(
+      deleteColumn.common!,
+      deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI),
+      list,
+    );
+
+    bindKeymapWithCommand(
+      deleteRow.common!,
+      deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

package/src/ui/consts.ts

@@ -137,6 +137,6 @@ export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 // BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
 export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 
-export const dragMenuDropdownWidth = 240;
+export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;

package/src/utils/drag-menu.ts

@@ -7,6 +7,12 @@ import {
   addRowAfter,
   addRowBefore,
   backspace,
+  deleteColumn,
+  deleteRow,
+  moveColumnLeft,
+  moveColumnRight,
+  moveRowDown,
+  moveRowUp,
   tooltip,
 } from '@atlaskit/editor-common/keymaps';
 import type {
@@ -121,6 +127,7 @@ export const getDragMenuConfig = (
             offset: -1,
             canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowUpIcon,
+            keymap: moveRowUp,
           },
           {
             label: 'down',
@@ -128,6 +135,7 @@ export const getDragMenuConfig = (
             canMove: (index?: number) =>
               canDrag && canIncrease(index, (tableMap?.height ?? 0) - 1),
             icon: ArrowDownIcon,
+            keymap: moveRowDown,
           },
         ]
       : [
@@ -136,6 +144,7 @@ export const getDragMenuConfig = (
             offset: -1,
             canMove: (index?: number) => canDrag && canDecrease(index),
             icon: ArrowLeftIcon,
+            keymap: moveColumnLeft,
           },
           {
             label: 'right',
@@ -143,6 +152,7 @@ export const getDragMenuConfig = (
             canMove: (index?: number) =>
               canDrag && canIncrease(index, (tableMap?.width ?? 0) - 1),
             icon: ArrowRightIcon,
+            keymap: moveColumnRight,
           },
         ];
 
@@ -229,8 +239,9 @@ export const getDragMenuConfig = (
         return true;
       },
       icon: RemoveIcon,
+      keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn),
     },
-    ...moveOptions.map(({ label, offset, canMove, icon }) => ({
+    ...moveOptions.map(({ label, offset, canMove, icon, keymap }) => ({
       id: `move_${direction}_${label}`,
       title: `Move ${direction} ${label}`,
       disabled: !canMove(index),
@@ -249,6 +260,7 @@ export const getDragMenuConfig = (
         }
         return false;
       },
+      keymap: keymap && tooltip(keymap),
     })),
 
     ...sortOptions.map(({ label, order, icon }) => ({