@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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/ui/ui-styles.d.ts

@@ -3,6 +3,7 @@ export declare const InsertMarker: (props: ThemeProps, cssString?: string) => im
 export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;

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

@@ -8,10 +8,13 @@ export declare const getColumnOrRowIndex: (target: HTMLElement) => [
 ];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
-export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
+/** drag-and-drop classes */
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
+export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
+export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;

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/dist/types-ts4.5/plugins/table/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.12",
+  "version": "5.3.14",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,8 @@
     "@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/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.4",
+    "@atlaskit/primitives": "^1.7.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -23,7 +23,6 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../../plugins/table';
 import { selectColumn } from '../../../../plugins/table/commands';
@@ -55,141 +54,27 @@ describe('decorations plugin', () => {
   // ED-8457
   describe('when there is a selection pointer set', () => {
     describe('should remove the column selected decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
       );
-    });
-  });
 
-  describe('when the hovered cell state changes', () => {
-    describe('should not add column control decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
+      selectColumn(1)(editorView.state, editorView.dispatch);
 
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
-
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
+      const { tr: transaction } = editorView.state;
 
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      transaction.setMeta('pointer', true);
+      transaction.setSelection(Selection.atStart(transaction.doc));
+      editorView.dispatch(transaction);
 
-          expect(columnDecorations).toHaveLength(0);
-        },
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
+      const decorationSet = getDecorations(editorView.state);
 
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
-
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(columnDecorations).toHaveLength(2);
-        },
+      const columnSelectedDecorations = decorationSet.find(
+        undefined,
+        undefined,
+        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
       );
+
+      expect(columnSelectedDecorations).toHaveLength(0);
     });
   });
 
@@ -220,75 +105,36 @@ describe('decorations plugin', () => {
 
   describe('when the table changed', () => {
     describe('should not re-create the column controls decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
-
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
-
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(decorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+      const { state } = editorView;
 
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
+      const nextPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        DecorationSet.empty,
+        editorView.state,
+        state,
+      );
 
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      const { tr: transaction } = state;
+      editorView.dispatch(addColumnAt(2)(transaction));
 
-          expect(decorations).toHaveLength(3);
-        },
+      const newState = handleDocOrSelectionChanged(
+        transaction,
+        nextPluginState,
+        editorView.state,
+        state,
       );
+      const expectedDecorationSet = newState;
+      const decorations = expectedDecorationSet.find(
+        undefined,
+        undefined,
+        (spec) =>
+          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
+      );
+
+      expect(decorations).toHaveLength(3);
     });
   });
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
 import type { DocBuilder } from '@atlaskit/editor-common/types';
@@ -29,7 +29,7 @@ import {
 
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+// import { TableCssClassName as ClassName } from '../../../plugins/table/types';
 import { DragControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 
 describe('NumberColumn', () => {
@@ -63,7 +63,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -77,11 +77,9 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
-    );
+    const dragHandle = screen.getAllByTestId('table-floating-row-drag-handle');
 
-    expect(dragHandleContainer?.children.length).toBe(1);
+    expect(dragHandle.length).toBe(1);
   });
 
   it('should not render any drag handle containers if hoveredCell is undefined', () => {
@@ -98,7 +96,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -115,10 +113,10 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
+    const dragHandle = screen.queryAllByTestId(
+      'table-floating-row-drag-handle',
     );
 
-    expect(dragHandleContainer?.children.length).toBe(0);
+    expect(dragHandle.length).toBe(0);
   });
 });

package/src/plugins/table/event-handlers.ts

@@ -55,6 +55,8 @@ import {
   isCell,
   isColumnControlsDecorations,
   isCornerButton,
+  isDragColumnFloatingInsertDot,
+  isDragRowFloatingInsertDot,
   isInsertRowButton,
   isResizeHandleDecoration,
   isRowControlsButton,
@@ -78,6 +80,12 @@ const isFocusingFloatingToolbar = (event: Event) =>
   event.relatedTarget instanceof HTMLElement &&
   event.relatedTarget.closest('[role="toolbar"]');
 
+const isFocusingDragHandles = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.getAttribute('draggable') === 'true';
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -86,7 +94,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     browser.ie_version !== 11 &&
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
-    !isFocusingFloatingToolbar(event)
+    !isFocusingFloatingToolbar(event) &&
+    !isFocusingDragHandles(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }
@@ -312,7 +321,10 @@ export const handleMouseMove = (
   }
   const element = event.target;
 
-  if (isColumnControlsDecorations(element)) {
+  if (
+    isColumnControlsDecorations(element) ||
+    isDragColumnFloatingInsertDot(element)
+  ) {
     const { state, dispatch } = view;
     const { insertColumnButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
@@ -330,7 +342,7 @@ export const handleMouseMove = (
     }
   }
 
-  if (isRowControlsButton(element)) {
+  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     const { state, dispatch } = view;
     const { insertRowButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);

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;
@@ -381,6 +383,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 insertRowButtonIndex,
                 isHeaderColumnEnabled,
                 isHeaderRowEnabled,
+                isDragAndDropEnabled,
                 tableWrapperTarget,
               } = tablePluginState!;
 
@@ -441,6 +444,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       insertRowButtonIndex={insertRowButtonIndex}
                       isHeaderColumnEnabled={isHeaderColumnEnabled}
                       isHeaderRowEnabled={isHeaderRowEnabled}
+                      isDragAndDropEnabled={isDragAndDropEnabled}
                       editorView={editorView}
                       mountPoint={popupsMountPoint}
                       boundariesElement={popupsBoundariesElement}
@@ -467,7 +471,20 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       }
                     />
                   )}
-                  {allowControls && !isResizing && (
+                  {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 && !isDragAndDropEnabled && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}
                       selection={editorView.state.selection}

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/decorations/plugin.ts

@@ -40,8 +40,7 @@ export const handleDocOrSelectionChanged = (
   } else if (
     tr.docChanged ||
     tr.selection instanceof CellSelection ||
-    changedResizing ||
-    tr.getMeta(tablePluginKey)?.type === 'HOVER_CELL'
+    changedResizing
   ) {
     return buildColumnControlsDecorations({
       decorationSet,
@@ -72,11 +71,6 @@ export const createPlugin = () => {
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
-        const previousHover = tablePluginKey.getState(oldState)?.hoveredCell;
-        const newHover = tablePluginKey.getState(newState)?.hoveredCell;
-        const changedCellHover =
-          previousHover?.colIndex !== newHover?.colIndex ||
-          previousHover?.rowIndex !== newHover?.rowIndex;
 
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
@@ -85,8 +79,7 @@ export const createPlugin = () => {
         if (
           tr.docChanged ||
           tr.selectionSet ||
-          tr.getMeta(tableWidthPluginKey) ||
-          changedCellHover
+          tr.getMeta(tableWidthPluginKey)
         ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -15,7 +15,6 @@ import {
   findControlsHoverDecoration,
   updateDecorations,
 } from '../../../utils/decoration';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
 
 import { composeDecorations } from './compose-decorations';
 import type { DecorationTransformer } from './types';
@@ -50,10 +49,9 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   tr,
 }): DecorationSet => {
   const table = findTable(tr.selection);
-  const meta = tr.getMeta(tablePluginKey);
 
   // avoid re-drawing state if dnd decorations don't need to be updated
-  if (!table && meta?.type !== 'HOVER_CELL') {
+  if (!table) {
     return decorationSet;
   }
 

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;