@atlaskit/editor-plugin-table 7.0.3 → 7.1.1

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 export interface Props {
     tableRef: HTMLTableElement;
-    stickyTop?: number;
     tableHeight?: number;
     localId?: string;
-    rowHeights?: number[];
     colWidths?: (number | undefined)[];
 }
 export declare const ColumnDropTargets: React.FC<Props>;

package/dist/types/ui/consts.d.ts

@@ -40,7 +40,8 @@ export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;
 export declare const contextualMenuTriggerSize = 16;
-export declare const contextualMenuDropdownWidth: number;
+export declare const contextualMenuDropdownWidth = 180;
+export declare const contextualMenuDropdownWidthDnD = 250;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;

package/dist/types/ui/ui-styles.d.ts

@@ -8,12 +8,12 @@ export declare const insertColumnButtonWrapper: () => import("@emotion/react").S
 export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
 export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
 export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
 export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
 export declare const insertLine: () => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { default as tablesPlugin } from './plugin';
-export type { TablePlugin } from './plugin';
+export type { TablePlugin, TablePluginOptions } from './plugin';

package/dist/types-ts4.5/types.d.ts

@@ -299,6 +299,7 @@ export declare const TableCssClassName: {
     DRAG_COLUMN_DROP_TARGET_CONTROLS: string;
     DRAG_COLUMN_CONTROLS_INNER: string;
     DRAG_HANDLE_BUTTON_CONTAINER: string;
+    DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: string;
     DRAG_CORNER_BUTTON: string;
     DRAG_CORNER_BUTTON_INNER: string;
     /** disabled classes */

package/dist/types-ts4.5/ui/FloatingContextualMenu/styles.d.ts

@@ -1,3 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
 export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
-export declare const tablePopupStyles: import("@emotion/react").SerializedStyles;
+export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 export interface Props {
     tableRef: HTMLTableElement;
-    stickyTop?: number;
     tableHeight?: number;
     localId?: string;
-    rowHeights?: number[];
     colWidths?: (number | undefined)[];
 }
 export declare const ColumnDropTargets: React.FC<Props>;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -40,7 +40,8 @@ export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;
 export declare const contextualMenuTriggerSize = 16;
-export declare const contextualMenuDropdownWidth: number;
+export declare const contextualMenuDropdownWidth = 180;
+export declare const contextualMenuDropdownWidthDnD = 250;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;

package/dist/types-ts4.5/ui/ui-styles.d.ts

@@ -8,12 +8,12 @@ export declare const insertColumnButtonWrapper: () => import("@emotion/react").S
 export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
 export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
 export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
 export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
 export declare const insertLine: () => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.0.3",
+  "version": "7.1.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.1.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -39,16 +39,16 @@
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.4.0",
+    "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/icon": "^22.0.0",
     "@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": "^1.19.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -69,6 +69,7 @@
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
     "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
+    "@atlaskit/editor-test-helpers": "^18.15.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.2",
@@ -110,9 +111,6 @@
     "platform.editor.custom-table-width": {
       "type": "boolean"
     },
-    "platform.editor.table.drag-and-drop": {
-      "type": "boolean"
-    },
     "platform.editor.table.column-controls-styles-updated": {
       "type": "boolean"
     },

package/src/__tests__/unit/event-handlers.ts

@@ -26,7 +26,6 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addResizeHandleDecorations,
@@ -44,15 +43,6 @@ import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { pluginKey } from '../../pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../types';
 
-// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
-jest.mock('@atlaskit/platform-feature-flags', () => ({
-  getBooleanFF: jest.fn().mockImplementation(() => false),
-}));
-
-afterEach(() => {
-  (getBooleanFF as jest.Mock).mockReset();
-});
-
 describe('table plugin: decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) =>
@@ -252,6 +242,9 @@ describe('withCellTracking', () => {
     createEditor({
       doc,
       attachTo: document.body,
+      featureFlags: {
+        tableDragAndDrop: isDragAndDropEnabled,
+      },
       preset: new Preset<LightEditorPlugin>()
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
@@ -264,7 +257,6 @@ describe('withCellTracking', () => {
         .add([
           tablePlugin,
           {
-            dragAndDropEnabled: isDragAndDropEnabled,
             tableOptions: { advanced: true },
           },
         ]),
@@ -272,9 +264,6 @@ describe('withCellTracking', () => {
     });
 
   describe('should fire event handler passed in', () => {
-    (getBooleanFF as jest.Mock).mockImplementation(
-      (name) => name === 'platform.editor.table.drag-and-drop',
-    );
     const { editorView } = editor(
       doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
       true,
@@ -286,9 +275,6 @@ describe('withCellTracking', () => {
   });
 
   it('should correctly set table cell coordinates based on mouse location', () => {
-    (getBooleanFF as jest.Mock).mockImplementation(
-      (name) => name === 'platform.editor.table.drag-and-drop',
-    );
     const { editorView, refs } = editor(
       doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
       true,

package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -1,7 +1,19 @@
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+import type { LightEditorPlugin } from '@atlaskit/editor-core/src/create-editor/get-plugins';
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -9,27 +21,43 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import tablePlugin from '../../../../plugin';
 import { buildColumnControlsDecorations } from '../../../../pm-plugins/decorations/utils';
+import { pluginKey } from '../../../../pm-plugins/plugin-key';
 import { TableDecorations } from '../../../../types';
 
-// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
-jest.mock('@atlaskit/platform-feature-flags', () => ({
-  getBooleanFF: jest.fn().mockImplementation(() => false),
-}));
-
-afterEach(() => {
-  (getBooleanFF as jest.Mock).mockReset();
-});
-
 describe('tables: column controls decorations', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder, isDragAndDropEnabled = false) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      featureFlags: {
+        tableDragAndDrop: isDragAndDropEnabled,
+      },
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(gridPlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            tableOptions: { advanced: true },
+          },
+        ]),
+      pluginKey,
+    });
+
   it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is enabled`, () => {
-    (getBooleanFF as jest.Mock).mockImplementation(
-      (name) => name === 'platform.editor.table.drag-and-drop',
-    );
     const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const editorInstance = editor(doc(table()(tr(tdCursor, tdEmpty))), true);
+    const state = editorInstance.editorView.state;
     const nextDecorationSet = buildColumnControlsDecorations({
       decorationSet: DecorationSet.empty,
       tr: state.tr,
@@ -47,7 +75,8 @@ describe('tables: column controls decorations', () => {
 
   it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is disabled`, () => {
     const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const editorInstance = editor(doc(table()(tr(tdCursor, tdEmpty))), false);
+    const state = editorInstance.editorView.state;
     const nextDecorationSet = buildColumnControlsDecorations({
       decorationSet: DecorationSet.empty,
       tr: state.tr,

package/src/event-handlers.ts

@@ -47,7 +47,10 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import type { ElementContentRects } from './types';
-import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import {
+  TableCssClassName as ClassName,
+  RESIZE_HANDLE_AREA_DECORATION_GAP,
+} from './types';
 import {
   convertHTMLCellIndexToColumnIndex,
   getColumnIndexMappedToColumnIndexInFirstRow,
@@ -91,6 +94,14 @@ const isFocusingDragHandles = (event: Event) =>
   event.relatedTarget.closest('button') &&
   event.relatedTarget.getAttribute('draggable') === 'true';
 
+const isFocusingDragHandlesClickableZone = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.classList.contains(
+    ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+  );
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -100,7 +111,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
     !isFocusingFloatingToolbar(event) &&
-    !isFocusingDragHandles(event)
+    !isFocusingDragHandles(event) &&
+    !isFocusingDragHandlesClickableZone(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }

package/src/index.ts

@@ -1,2 +1,2 @@
 export { default as tablesPlugin } from './plugin';
-export type { TablePlugin } from './plugin';
+export type { TablePlugin, TablePluginOptions } from './plugin';

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

@@ -79,6 +79,7 @@ export const moveSourceWithAnalytics =
     tr?: Transaction,
   ) => {
     return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
       const { totalRowCount, totalColumnCount } =
         getSelectedTableInfo(selection);
       return {
@@ -93,7 +94,9 @@ export const moveSourceWithAnalytics =
           count: sourceIndexes.length,
           // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
           // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-          distance: Math.min(...sourceIndexes.map((v) => targetIndex - v)),
+          distance:
+            Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) *
+            direction,
           // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
           status: sourceIndexes.includes(targetIndex)
             ? TABLE_STATUS.CANCELLED
@@ -130,15 +133,15 @@ export const moveSourceWithAnalyticsViaShortcut =
       ? getSelectedRowIndexes(selectionRect)
       : getSelectedColumnIndexes(selectionRect);
 
-    // FIXME: We can move if only one row/column selected
-    if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+    if (selectedIndexes.length === 0) {
       return false;
     }
 
-    const sourceIndex = selectedIndexes[0];
+    // 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;
+    const targetIndex =
+      Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + 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);
@@ -155,8 +158,8 @@ export const moveSourceWithAnalyticsViaShortcut =
 
     // 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);
+      ? hasMergedCellsInRow(selectedIndexes)(selection)
+      : hasMergedCellsInColumn(selectedIndexes)(selection);
     if (hasMergedCellsInSource) {
       return false;
     }
@@ -171,7 +174,7 @@ export const moveSourceWithAnalyticsViaShortcut =
     return moveSourceWithAnalytics(editorAnalyticsAPI)(
       INPUT_METHOD.SHORTCUT,
       sourceType,
-      [sourceIndex],
+      selectedIndexes,
       targetIndex,
     )(state, dispatch);
   };

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

@@ -2,15 +2,9 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import {
-  moveColumn,
-  moveRow,
-  selectColumn,
-  selectRow,
-} from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
@@ -19,7 +13,6 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
-import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -118,31 +111,10 @@ export const moveSource = (
       if (sourceIndexes.includes(targetIndex)) {
         return nextTr.setMeta('addToHistory', false);
       }
-
-      const anchor = nextTr.selection.anchor;
-      const selectStartOfTable = (newTr: Transaction) =>
-        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-
-      const isTableRow = sourceType === 'table-row';
-      if (isTableRow) {
-        return combineTransforms(
-          [
-            moveRow(state, sourceIndexes, targetIndex),
-            selectStartOfTable,
-            selectRow(targetIndex),
-          ],
-          nextTr,
-        );
-      }
-
-      return combineTransforms(
-        [
-          moveColumn(sourceIndexes, targetIndex),
-          selectStartOfTable,
-          selectColumn(targetIndex),
-        ],
-        nextTr,
-      );
+      const move = sourceType === 'table-row' ? moveRow : moveColumn;
+      return move(state, sourceIndexes, targetIndex, {
+        selectAfterMove: true,
+      })(nextTr);
     },
   );
 

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

@@ -82,9 +82,6 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
         if (
           !indexes ||
           !localId ||
-          // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-          // of more then 1 item.
-          indexes.length !== 1 ||
           !(type === 'table-row' || type === 'table-column')
         ) {
           return false;

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

@@ -45,11 +45,6 @@ export const getDraggableDataFromEvent = ({
     return undefined;
   }
 
-  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
-  if (sourceIndexes.length > 1) {
-    return undefined;
-  }
-
   const targetClosestEdge =
     extractClosestEdge(destination.data) ??
     ((targetType === 'table-row' ? 'top' : 'left') as Edge);

package/src/pm-plugins/keymap.ts

@@ -34,12 +34,7 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import {
-  createTable,
-  goToNextCell,
-  moveCursorBackward,
-  triggerUnlessTableHeader,
-} from '../commands';
+import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import {
   addRowAroundSelection,
   deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut,
@@ -120,7 +115,7 @@ export function keymapPlugin(
 
   bindKeymapWithCommand(
     addColumnBefore.common!,
-    triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)),
+    addColumnBeforeCommand(getEditorContainerWidth),
     list,
   );
 

package/src/types.ts

@@ -330,6 +330,7 @@ export const TableCssClassName = {
   DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
 
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: `${tablePrefixSelector}-drag-handle-button-clickable-zone`,
 
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,

package/src/ui/DragHandle/index.tsx

@@ -11,11 +11,13 @@ 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 { token } from '@atlaskit/tokens';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
 import { HandleIconComponent } from './HandleIconComponent';
@@ -64,17 +66,18 @@ const DragHandleComponent = ({
   const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
+  const isRow = direction === 'row';
+  const isColumn = direction === 'column';
 
-  const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  const isColumnHandleHovered =
-    direction === 'column' && hoveredColumns.length > 0;
+  const isRowHandleHovered = isRow && hoveredRows.length > 0;
+  const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
 
   const hasMergedCells = useMemo(
     () =>
-      direction === 'row'
+      isRow
         ? hasMergedCellsInRow(indexes[0])(selection)
         : hasMergedCellsInColumn(indexes[0])(selection),
-    [indexes, direction, selection],
+    [indexes, isRow, selection],
   );
 
   const handleIconProps = {
@@ -113,7 +116,7 @@ const DragHandleComponent = ({
                 // be generated.
                 container.style.left = `-${rect.width - 0.0001}px`;
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return { x: 12, y: rect.height / 2 };
               } else {
                 return { x: rect.width / 2 + 4, y: 12 };
@@ -132,18 +135,35 @@ const DragHandleComponent = ({
     tableLocalId,
     direction,
     indexes,
+    isRow,
     editorView.state.selection,
     hasMergedCells,
     canDrag,
   ]);
 
-  const showDragMenuAnchorId =
-    direction === 'row'
-      ? 'drag-handle-button-row'
-      : 'drag-handle-button-column';
+  const showDragMenuAnchorId = isRow
+    ? 'drag-handle-button-row'
+    : 'drag-handle-button-column';
 
   return (
     <>
+      <button
+        className={ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE}
+        data-testid="table-drag-handle-clickable-zone-button"
+        style={{
+          height: isRow
+            ? `calc(100% - ${dragTableInsertColumnButtonSize}px)`
+            : `${token('space.200', '16px')}`, // 16px here because it's the size of drag handle button's large side
+          width: isRow
+            ? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
+            : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
+          left: isRow ? '3px' : undefined,
+          bottom: isColumn ? '0' : undefined,
+          alignSelf: isColumn ? 'none' : 'center',
+          zIndex: isColumn ? '-1' : 'auto',
+        }}
+        onClick={onClick}
+      />
       <button
         id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
@@ -155,13 +175,12 @@ const DragHandleComponent = ({
         )}
         ref={dragHandleDivRef}
         style={{
-          transform: direction === 'column' ? 'none' : 'rotate(90deg)',
+          transform: isColumn ? 'none' : 'rotate(90deg)',
+          alignSelf: isColumn ? 'none' : 'center',
         }}
         data-testid="table-drag-handle-button"
         aria-label={formatMessage(
-          direction === 'row'
-            ? messages.rowDragHandle
-            : messages.columnDragHandle,
+          isRow ? messages.rowDragHandle : messages.columnDragHandle,
         )}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -73,7 +73,10 @@ import {
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
 } from '../../utils';
-import { contextualMenuDropdownWidth } from '../consts';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
+} from '../consts';
 import {
   AddColRightIcon,
   AddRowBelowIcon,
@@ -145,7 +148,11 @@ export class ContextualMenu extends Component<
           onMouseEnter={this.handleItemMouseEnter}
           onMouseLeave={this.handleItemMouseLeave}
           fitHeight={188}
-          fitWidth={contextualMenuDropdownWidth}
+          fitWidth={
+            isDragAndDropEnabled
+              ? contextualMenuDropdownWidthDnD
+              : contextualMenuDropdownWidth
+          }
           boundariesElement={boundariesElement}
           offset={offset}
           section={