@atlaskit/editor-plugin-table 5.7.5 → 5.7.7

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/FloatingInsertButton/index.tsx

@@ -21,7 +21,7 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorTableInsertButtonOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -192,9 +192,7 @@ export class FloatingInsertButton extends React.Component<
     // Only when inserting a column, otherwise set to undefined
     // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
     const zIndex: number | undefined =
-      type === 'column'
-        ? akEditorTableInsertButtonOnStickyHeaderZIndex
-        : undefined;
+      type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
 
     return (
       <Popup

package/src/ui/common-styles.ts

@@ -7,7 +7,6 @@ import {
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import {
-  akEditorFloatingDialogZIndex,
   akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
   akEditorStickyHeaderZIndex,
@@ -1053,7 +1052,8 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 
     .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
       position: fixed;
-      z-index: ${akEditorFloatingDialogZIndex};
+      /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
+      z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
     }
 
     ${tableWrapperStyles()}

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 }) => ({