@atlaskit/editor-plugin-table 5.3.11 → 5.3.13

package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+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 type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -8,6 +9,7 @@ export interface Props {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     isInDanger?: boolean;
     isResizing?: boolean;
@@ -21,6 +23,7 @@ export interface Props {
     hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
+    insertRowButtonIndex?: number;
 }
 interface State {
     tableHeight: number;

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

@@ -50,3 +50,4 @@ export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export declare const dragMenuDropdownWidth = 240;

package/dist/types/plugins/table/utils/drag-menu.d.ts

@@ -0,0 +1,7 @@
+import type { Command, DropdownOptionT } from '@atlaskit/editor-common/types';
+import type { TableMap } from '@atlaskit/editor-tables/table-map';
+import type { TableDirection } from '../types';
+export interface DragMenuConfig extends DropdownOptionT<Command> {
+    id: string;
+}
+export declare const getDragMenuConfig: (direction: TableDirection, tableMap?: TableMap, index?: number) => DragMenuConfig[];

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/actions.d.ts

@@ -1,4 +1,5 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 export interface DragAndDropAction<T, D> {
     type: T;
@@ -7,6 +8,7 @@ export interface DragAndDropAction<T, D> {
 export declare const DragAndDropActionType: {
     readonly SET_DROP_TARGET: "SET_DROP_TARGET";
     readonly CLEAR_DROP_TARGET: "CLEAR_DROP_TARGET";
+    readonly TOGGLE_DRAG_MENU: "TOGGLE_DRAG_MENU";
 };
 export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.SET_DROP_TARGET, {
     type: DropTargetType;
@@ -16,4 +18,9 @@ export type DragAndDropSetDropTargetAction = DragAndDropAction<typeof DragAndDro
 export type DragAndDropClearDropTargetAction = DragAndDropAction<typeof DragAndDropActionType.CLEAR_DROP_TARGET, {
     decorationSet: DecorationSet;
 }>;
-export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction;
+export type DragAndDropToggleDragMenuAction = DragAndDropAction<typeof DragAndDropActionType.TOGGLE_DRAG_MENU, {
+    isDragMenuOpen: boolean;
+    direction: TableDirection;
+    index: number;
+}>;
+export type DragAndDropPluginAction = DragAndDropSetDropTargetAction | DragAndDropClearDropTargetAction | DragAndDropToggleDragMenuAction;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands.d.ts

@@ -1,7 +1,7 @@
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { DraggableType } from '../../types';
+import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
 import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
@@ -9,3 +9,4 @@ export declare const updatePluginStateDecorations: (state: EditorState, decorati
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;
+export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/types.d.ts

@@ -1,7 +1,11 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
 import type { DropTargetType } from './consts';
 export interface DragAndDropPluginState {
     decorationSet: DecorationSet;
     dropTargetType: DropTargetType;
     dropTargetIndex: number;
+    isDragMenuOpen: boolean;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex: number;
 }

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

@@ -373,6 +373,7 @@ export type InvalidNodeAttr = {
     spanValue: number;
     tableLocalId: string;
 };
+export type TableDirection = 'row' | 'column';
 /**
  * Drag and Drop interfaces
  */

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -1,15 +1,17 @@
 import type { MouseEventHandler } from 'react';
+import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
     previewWidth?: number;
     previewHeight?: number;
-    direction?: 'column' | 'row';
+    direction?: TableDirection;
     appearance?: DragHandleAppearance;
     onClick?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/DragPreview/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import type { TableDirection } from '../../types';
 export declare const DragPreview: ({ direction, width, height, }: {
-    direction: 'column' | 'row';
+    direction: TableDirection;
     width: number;
     height: number;
 }) => JSX.Element;

package/dist/types-ts4.5/plugins/table/ui/FloatingDeleteButton/index.d.ts

@@ -3,6 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { TableDirection } from '../../types';
 import type { CellSelectionType } from './types';
 export interface Props {
     editorView: EditorView;
@@ -23,7 +24,7 @@ export interface State {
     position?: string;
     scrollLeft: number;
 }
-export declare function getSelectionType(selection: Selection): 'column' | 'row' | undefined;
+export declare function getSelectionType(selection: Selection): TableDirection | undefined;
 declare class FloatingDeleteButton extends Component<Props, State> {
     static displayName: string;
     wrapper: HTMLElement | null;

package/dist/types-ts4.5/plugins/table/ui/FloatingDeleteButton/types.d.ts

@@ -1 +1,2 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+export type CellSelectionType = TableDirection | undefined;

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginConfig, TableDirection } from '../../types';
+type DragMenuProps = {
+    direction?: TableDirection;
+    index?: number;
+    tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
+    editorView: EditorView;
+    isOpen?: boolean;
+    targetCellPosition?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    pluginConfig?: PluginConfig;
+};
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, }: DragMenuProps) => JSX.Element | null;
+export {};

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TableDirection } from '../../types';
+export interface Props {
+    editorView: EditorView;
+    isOpen: boolean;
+    tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    direction?: TableDirection;
+    index?: number;
+    targetCellPosition?: number;
+}
+declare const FloatingDragMenu: {
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, }: Props): JSX.Element | null;
+    displayName: string;
+};
+export default FloatingDragMenu;

package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/InsertButton.d.ts

@@ -1,8 +1,9 @@
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { TableDirection } from '../../types';
 export interface ButtonProps {
-    type: 'row' | 'column';
+    direction: TableDirection;
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;

package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/getPopupOptions.d.ts

@@ -1,3 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
-declare function getPopupOptions(type: 'column' | 'row', index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+import type { TableDirection } from '../../types';
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
 export default getPopupOptions;

package/dist/types-ts4.5/plugins/table/ui/FloatingInsertButton/index.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     editorView: EditorView;
     getEditorContainerWidth: GetEditorContainerWidth;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+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 type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -8,6 +9,7 @@ export interface Props {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
+    tableNode?: PmNode;
     tableActive?: boolean;
     isInDanger?: boolean;
     isResizing?: boolean;
@@ -21,6 +23,7 @@ export interface Props {
     hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
+    insertRowButtonIndex?: number;
 }
 interface State {
     tableHeight: number;

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

@@ -50,3 +50,4 @@ export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export declare const dragMenuDropdownWidth = 240;

package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts

@@ -0,0 +1,7 @@
+import type { Command, DropdownOptionT } from '@atlaskit/editor-common/types';
+import type { TableMap } from '@atlaskit/editor-tables/table-map';
+import type { TableDirection } from '../types';
+export interface DragMenuConfig extends DropdownOptionT<Command> {
+    id: string;
+}
+export declare const getDragMenuConfig: (direction: TableDirection, tableMap?: TableMap, index?: number) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.11",
+  "version": "5.3.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.13.0",
+    "@atlaskit/editor-common": "^76.15.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -40,7 +40,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
-    "@atlaskit/primitives": "^1.6.7",
+    "@atlaskit/primitives": "^1.7.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",

package/src/plugins/table/index.tsx

@@ -75,6 +75,7 @@ import type { ColumnResizingPluginState, PluginConfig } from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
+import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
@@ -363,6 +364,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               stickyHeadersState,
               tablePluginState,
               tableWidthPluginState,
+              dragAndDropState,
             }) => {
               const { state } = editorView;
               const isColumnResizing = resizingPluginState?.dragging;
@@ -382,6 +384,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 isHeaderColumnEnabled,
                 isHeaderRowEnabled,
                 tableWrapperTarget,
+                isDragAndDropEnabled,
               } = tablePluginState!;
 
               const { allowControls } = pluginConfig;
@@ -467,6 +470,19 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       }
                     />
                   )}
+                  {isDragAndDropEnabled && (
+                    <FloatingDragMenu
+                      editorView={editorView}
+                      mountPoint={popupsMountPoint}
+                      boundariesElement={popupsBoundariesElement}
+                      tableRef={tableRef as HTMLTableElement}
+                      tableNode={tableNode}
+                      targetCellPosition={targetCellPosition}
+                      direction={dragAndDropState?.dragMenuDirection}
+                      index={dragAndDropState?.dragMenuIndex}
+                      isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
+                    />
+                  )}
                   {allowControls && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -416,6 +416,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         <TableFloatingControls
           editorView={view}
           tableRef={tableRef}
+          tableNode={node}
           tableActive={tableActive}
           hoveredRows={hoveredRows}
           hoveredCell={hoveredCell}
@@ -423,7 +424,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           isResizing={isResizing}
           isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
           isHeaderRowEnabled={isHeaderRowEnabled}
-          isDragAndDropEnabled={options?.isDragAndDropEnabled}
+          isDragAndDropEnabled={isDragAndDropEnabled}
           ordering={ordering}
           isHeaderColumnEnabled={isHeaderColumnEnabled}
           hasHeaderRow={hasHeaderRow}

package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts

@@ -1,5 +1,7 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
+import type { TableDirection } from '../../types';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropAction<T, D> {
@@ -10,6 +12,7 @@ export interface DragAndDropAction<T, D> {
 export const DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
   CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
 } as const;
 
 export type DragAndDropSetDropTargetAction = DragAndDropAction<
@@ -28,7 +31,17 @@ export type DragAndDropClearDropTargetAction = DragAndDropAction<
   }
 >;
 
+export type DragAndDropToggleDragMenuAction = DragAndDropAction<
+  typeof DragAndDropActionType.TOGGLE_DRAG_MENU,
+  {
+    isDragMenuOpen: boolean;
+    direction: TableDirection;
+    index: number;
+  }
+>;
+
 // NOTE: This should be a Union of all possible actions
 export type DragAndDropPluginAction =
   | DragAndDropSetDropTargetAction
-  | DragAndDropClearDropTargetAction;
+  | DragAndDropClearDropTargetAction
+  | DragAndDropToggleDragMenuAction;

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

@@ -4,9 +4,14 @@ import type {
 } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import {
+  moveColumn,
+  moveRow,
+  selectColumn,
+  selectRow,
+} from '@atlaskit/editor-tables/utils';
 
-import type { DraggableType } from '../../types';
+import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
 import {
   createColumnInsertLine,
@@ -109,7 +114,41 @@ export const moveSource = (
         return tr.setMeta('addToHistory', false);
       }
 
-      const move = sourceType === 'table-row' ? moveRow : moveColumn;
-      return move(sourceIndex, targetIndex)(tr);
+      const isTableRow = sourceType === 'table-row';
+      const move = isTableRow ? moveRow : moveColumn;
+      const newTr = move(sourceIndex, targetIndex)(tr);
+      const select = isTableRow ? selectRow : selectColumn;
+      return select(targetIndex)(newTr);
+    },
+  );
+
+export const toggleDragMenu = (
+  isDragMenuOpen: boolean | undefined,
+  direction?: TableDirection,
+  index?: number,
+) =>
+  createCommand(
+    (state) => {
+      let {
+        isDragMenuOpen: previousOpenState,
+        dragMenuDirection,
+        dragMenuIndex,
+      } = getPluginState(state);
+      if (previousOpenState === isDragMenuOpen) {
+        return false;
+      }
+
+      return {
+        type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+        data: {
+          isDragMenuOpen:
+            isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
+          direction: direction ?? dragMenuDirection,
+          index: index ?? dragMenuIndex,
+        },
+      };
+    },
+    (tr: Transaction) => {
+      return tr.setMeta('addToHistory', false);
     },
   );

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

@@ -5,6 +5,7 @@ import type {
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
@@ -14,6 +15,7 @@ import {
 } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
+import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -27,12 +29,49 @@ export const createPlugin = (
   return new SafePlugin({
     state: createPluginState(dispatch, (state) => ({
       decorationSet: DecorationSet.empty,
-      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
+      isDragMenuOpen: false,
+      dragMenuIndex: 0,
     })),
     key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      const { targetCellPosition: oldTargetCellPosition } =
+        getTablePluginState(oldState);
+      const { targetCellPosition: newTargetCellPosition } =
+        getTablePluginState(newState);
+      const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          const tr = newState.tr;
+          const action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined,
+            },
+          };
+
+          if (newTargetCellPosition !== undefined) {
+            const cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            if (
+              cells &&
+              cells.length &&
+              cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)
+            ) {
+              return tr.setMeta(pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(pluginKey, action);
+          }
+        }
+      }
+    },
     view: (editorView: EditorView) => {
       return {
         destroy: monitorForElements({

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -22,6 +22,13 @@ export default (
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
       };
+    case DragAndDropActionType.TOGGLE_DRAG_MENU:
+      return {
+        ...pluginState,
+        isDragMenuOpen: action.data.isDragMenuOpen,
+        dragMenuDirection: action.data.direction,
+        dragMenuIndex: action.data.index,
+      };
     default:
       return pluginState;
   }

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -1,9 +1,14 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
+import type { TableDirection } from '../../types';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
   decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
+  isDragMenuOpen: boolean;
+  dragMenuDirection?: TableDirection;
+  dragMenuIndex: number;
 }

package/src/plugins/table/types.ts

@@ -405,6 +405,8 @@ export type InvalidNodeAttr = {
   tableLocalId: string;
 };
 
+export type TableDirection = 'row' | 'column';
+
 /**
  * Drag and Drop interfaces
  */

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 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 type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
@@ -18,11 +19,12 @@ type DragHandleProps = {
   indexes: number[];
   previewWidth?: number;
   previewHeight?: number;
-  direction?: 'column' | 'row';
+  direction?: TableDirection;
   appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
+  onMouseUp?: MouseEventHandler;
 };
 
 export const DragHandle = ({
@@ -34,6 +36,7 @@ export const DragHandle = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
+  onMouseUp,
   onClick,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
@@ -85,6 +88,7 @@ export const DragHandle = ({
       data-testid="table-floating-column-controls-drag-handle"
       onMouseOver={onMouseOver}
       onMouseOut={onMouseOut}
+      onMouseUp={onMouseUp}
       onClick={onClick}
     >
       <DragHandleIcon />

package/src/plugins/table/ui/DragPreview/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, xcss } from '@atlaskit/primitives';
 
+import type { TableDirection } from '../../types';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 
 const boxStyles = xcss({
@@ -17,7 +18,7 @@ export const DragPreview = ({
   width,
   height,
 }: {
-  direction: 'column' | 'row';
+  direction: TableDirection;
   width: number;
   height: number;
 }) => {

package/src/plugins/table/ui/FloatingDeleteButton/index.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   getColumnDeleteButtonParams,
@@ -60,7 +61,7 @@ export interface State {
 
 export function getSelectionType(
   selection: Selection,
-): 'column' | 'row' | undefined {
+): TableDirection | undefined {
   if (!isTableSelected(selection) && selection instanceof CellSelection) {
     if (selection.isRowSelection()) {
       return 'row';