@atlaskit/editor-plugin-table 7.3.8 → 7.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.3.8",
+  "version": "7.3.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,23 +30,23 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.1",
     "@atlaskit/custom-steps": "^0.0.13",
-    "@atlaskit/editor-common": "^78.3.0",
+    "@atlaskit/editor-common": "^78.4.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
     "@atlaskit/editor-plugin-guideline": "^1.0.0",
-    "@atlaskit/editor-plugin-selection": "^1.0.0",
+    "@atlaskit/editor-plugin-selection": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.5.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
+    "@atlaskit/primitives": "^2.1.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.38.0",

package/src/nodeviews/ExternalDropTargets.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { tableMarginTop } from '@atlaskit/editor-common/styles';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../types';
 import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';

package/src/nodeviews/TableComponent.tsx

@@ -31,8 +31,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -8,10 +8,13 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import {
+  getCellsInRow,
+  getSelectedCellInfo,
+} from '@atlaskit/editor-tables/utils';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../types';
 import {
@@ -313,17 +316,49 @@ export const createPlugin = (
         return decorationSet;
       },
       handleKeyDown: (view, event) => {
-        const isDragHandleFocused = [
-          'drag-handle-button-row',
-          'drag-handle-button-column',
-        ].includes(((event.target as HTMLElement) || null)?.id);
-        const keysToTrap = ['Enter', ' '];
+        const {
+          state: { tr },
+        } = view;
+
         const keysToTrapWhen = [
           'ArrowUp',
           'ArrowDown',
           'ArrowLeft',
           'ArrowRight',
         ];
+
+        /** fix for NCS spam update where the user is holding down the move column / row keyboard shortcut
+         * if the user is holding down shortcut (ctrl + shift + alt + arrowKey), we want to move the selection only once
+         * See ticket ED-22154 https://product-fabric.atlassian.net/browse/ED-22154
+         */
+
+        // Do early check for the keys we want to trap here so we can abort early
+        if (event.ctrlKey && event.shiftKey && event.altKey) {
+          const {
+            verticalCells,
+            horizontalCells,
+            totalRowCount,
+            totalColumnCount,
+          } = getSelectedCellInfo(tr.selection);
+
+          const isRowOrColumnSelected =
+            horizontalCells === totalColumnCount ||
+            verticalCells === totalRowCount;
+          if (
+            isRowOrColumnSelected &&
+            keysToTrapWhen.includes(event.key) &&
+            event.repeat
+          ) {
+            return true;
+          }
+        }
+
+        const isDragHandleFocused = [
+          'drag-handle-button-row',
+          'drag-handle-button-column',
+        ].includes(((event.target as HTMLElement) || null)?.id);
+        const keysToTrap = ['Enter', ' '];
+
         const { isDragMenuOpen } = getPluginState(view.state);
 
         // drag handle is focused, and user presses any key return them back to editing

package/src/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -1,6 +1,6 @@
-import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type {
   DraggableData,

package/src/pm-plugins/keymap.ts

@@ -129,6 +129,13 @@ export function keymapPlugin(
 
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
+    /**
+     * NOTE: If the keyboard shortcut for moving rows or columns is changed, we need to update the handleKeyDown function
+     * in packages/editor/editor-plugin-table/src/pm-plugins/drag-and-drop/plugin.ts
+     * to make sure the logic for holding the shortcut keys is valid
+     * See ticket ED-22154 https://product-fabric.atlassian.net/browse/ED-22154
+     */
+
     bindKeymapWithCommand(
       moveRowDown.common!,
       moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-row', 1),

package/src/types.ts

@@ -14,7 +14,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
 import type tablePlugin from './plugin';
 

package/src/ui/DragHandle/index.tsx

@@ -9,8 +9,8 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { token } from '@atlaskit/tokens';
 
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../../types';
 

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,7 +5,7 @@ import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData } from '../../types';

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -16,7 +16,7 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';

package/src/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { DraggableSourceData } from '../../../types';