@atlaskit/editor-plugin-table 5.3.25 → 5.3.27

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

@@ -1,4 +1,5 @@
 import type { MouseEventHandler } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
@@ -12,6 +13,7 @@ type DragHandleProps = {
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
+    editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
 export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
 export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
 export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
 export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
 export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
 export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;

package/dist/types/plugins/table/ui/icons/DragHandleDisabledIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragHandleDisabledIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
 export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/plugins/table/utils/decoration.d.ts

@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types/plugins/table/utils/selection.d.ts

@@ -1,5 +1,5 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
 export declare const normalizeSelection: (tr: Transaction) => Transaction;
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];

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

@@ -293,6 +293,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_BUTTON_CONTAINER: string;
     DRAG_CORNER_BUTTON: string;
     DRAG_CORNER_BUTTON_INNER: string;
+    /** disabled classes */
+    DRAG_HANDLE_DISABLED: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;
@@ -301,6 +303,7 @@ export declare const TableCssClassName: {
     HOVERED_ROW: string;
     HOVERED_TABLE: string;
     HOVERED_CELL: string;
+    HOVERED_DISABLED_CELL: string;
     HOVERED_CELL_IN_DANGER: string;
     HOVERED_CELL_ACTIVE: string;
     HOVERED_CELL_WARNING: string;

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

@@ -1,4 +1,5 @@
 import type { MouseEventHandler } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TableDirection } from '../../types';
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
@@ -12,6 +13,7 @@ type DragHandleProps = {
     onMouseOver?: MouseEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseUp?: MouseEventHandler;
+    editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -13,6 +13,7 @@ export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedV
 export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
 export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
 export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
+export declare const tableCellDisabledColor: "var(--ds-background-accent-gray-subtler-hovered)";
 export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
 export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
 export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragHandleDisabledIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragHandleDisabledIcon: ({ style, }: DragHandleDisabledIconProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

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

@@ -14,6 +14,7 @@ export declare const floatingColumnControls: (props: ThemeProps) => import("@emo
 export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const disabledCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
 export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

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

@@ -8,7 +8,7 @@ import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, isDragAndDropEnable: boolean | undefined, hoveredIndexes: number[], danger?: boolean, selected?: boolean) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

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

@@ -1,5 +1,5 @@
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
 export declare const normalizeSelection: (tr: Transaction) => Transaction;
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.25",
+  "version": "5.3.27",
   "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.18.0",
+    "@atlaskit/editor-common": "^76.20.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugins/table/commands/hover.ts

@@ -6,7 +6,7 @@ import {
   getCellsInRow,
 } from '@atlaskit/editor-tables/utils';
 
-import { createCommand } from '../pm-plugins/plugin-factory';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableDecorations } from '../types';
 import {
@@ -57,13 +57,18 @@ export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
       const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
+
+      const { isDragAndDropEnabled } = getPluginState(state);
       if (!cells) {
         return false;
       }
+
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredColumns,
         isInDanger,
       );
 
@@ -90,10 +95,13 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
         state.tr,
+        isDragAndDropEnabled,
+        hoveredRows,
         isInDanger,
       );
 
@@ -127,10 +135,13 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       if (!cells) {
         return false;
       }
+      const { isDragAndDropEnabled } = getPluginState(state);
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
         state.tr,
+        isDragAndDropEnabled,
+        [],
         isInDanger,
         isSelected,
       );

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

@@ -131,20 +131,44 @@ export const toggleDragMenu = (
     (state) => {
       let {
         isDragMenuOpen: previousOpenState,
-        dragMenuDirection,
-        dragMenuIndex,
+        dragMenuDirection: previousDragMenuDirection,
+        dragMenuIndex: previousDragMenuIndex,
       } = getPluginState(state);
-      if (previousOpenState === isDragMenuOpen) {
+
+      if (
+        previousOpenState === isDragMenuOpen &&
+        previousDragMenuDirection === direction &&
+        previousDragMenuIndex === index
+      ) {
         return false;
       }
 
+      let updatedMenuOpenState;
+      if (isDragMenuOpen !== undefined) {
+        updatedMenuOpenState = isDragMenuOpen;
+      } else {
+        // menu open but menu direction changed, means user clicked on drag handle of different row/column
+        // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+        // 2 scenarios above , menu should remain open.
+        if (
+          (previousOpenState === true &&
+            previousDragMenuDirection !== direction) ||
+          (previousOpenState === true &&
+            previousDragMenuDirection === direction &&
+            previousDragMenuIndex !== index)
+        ) {
+          updatedMenuOpenState = true;
+        } else {
+          updatedMenuOpenState = !previousOpenState;
+        }
+      }
+
       return {
         type: DragAndDropActionType.TOGGLE_DRAG_MENU,
         data: {
-          isDragMenuOpen:
-            isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
-          direction: direction ?? dragMenuDirection,
-          index: index ?? dragMenuIndex,
+          isDragMenuOpen: updatedMenuOpenState,
+          direction: direction ?? previousDragMenuDirection,
+          index: index ?? previousDragMenuIndex,
         },
       };
     },

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 { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -65,10 +66,15 @@ export const createPlugin = (
 
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            // ED-20673 check if it is a cell selection,
+            // when true, a drag handle is clicked and isDragMenuOpen is true here
+            // should not close the drag menu.
+            const isCellSelection = tr.selection instanceof CellSelection;
             if (
               cells &&
               cells.length &&
-              cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)
+              cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) &&
+              !isCellSelection
             ) {
               return tr.setMeta(pluginKey, action);
             } // else NOP

package/src/plugins/table/types.ts

@@ -325,6 +325,9 @@ export const TableCssClassName = {
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
 
+  /** disabled classes */
+  DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
+
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
@@ -334,6 +337,7 @@ export const TableCssClassName = {
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,
   HOVERED_CELL: `${tablePrefixSelector}-hovered-cell`,
+  HOVERED_DISABLED_CELL: `${tablePrefixSelector}-hovered-disabled`,
   HOVERED_CELL_IN_DANGER: 'danger',
   HOVERED_CELL_ACTIVE: 'active',
   HOVERED_CELL_WARNING: `${tablePrefixSelector}-hovered-cell__warning`,

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

@@ -1,16 +1,19 @@
 import type { MouseEventHandler } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 
+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 { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
-import { DragHandleIcon } from '../icons';
+import { DragHandleDisabledIcon, DragHandleIcon } from '../icons';
 
 type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 
@@ -25,6 +28,7 @@ type DragHandleProps = {
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
   onMouseUp?: MouseEventHandler;
+  editorView: EditorView;
 };
 
 export const DragHandle = ({
@@ -38,17 +42,32 @@ export const DragHandle = ({
   onMouseOut,
   onMouseUp,
   onClick,
+  editorView,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
   const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
     null,
   );
+  const { isDragAndDropEnabled } = getPluginState(editorView.state);
+  const { selection } = editorView.state;
+
+  const hasMergedCells = useMemo(
+    () =>
+      direction === 'row'
+        ? hasMergedCellsInRow(indexes[0])(selection)
+        : hasMergedCellsInColumn(indexes[0])(selection),
+    [indexes, direction, selection],
+  );
 
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
+
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
+        canDrag: () => {
+          return !hasMergedCells;
+        },
         getInitialData() {
           return {
             localId: tableLocalId,
@@ -75,11 +94,23 @@ export const DragHandle = ({
         },
       });
     }
-  }, [tableLocalId, direction, indexes]);
+  }, [
+    tableLocalId,
+    direction,
+    indexes,
+    editorView.state.selection,
+    hasMergedCells,
+  ]);
 
   return (
     <button
-      className={classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance)}
+      className={classnames(
+        ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+        appearance,
+        isDragAndDropEnabled &&
+          hasMergedCells &&
+          ClassName.DRAG_HANDLE_DISABLED,
+      )}
       ref={dragHandleDivRef}
       style={{
         transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -91,7 +122,7 @@ export const DragHandle = ({
       onMouseUp={onMouseUp}
       onClick={onClick}
     >
-      <DragHandleIcon />
+      {hasMergedCells ? <DragHandleDisabledIcon /> : <DragHandleIcon />}
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -11,6 +11,7 @@ import {
 } from '@atlaskit/editor-common/ui-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -23,6 +24,7 @@ import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { PluginConfig, TableDirection } from '../../types';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
@@ -132,9 +134,39 @@ export const DragMenu = ({
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
 
+  /**
+   * This function is to check if the menu should be closed or not.
+   * As when continously clicking on drag handle on different rows/columns,
+   * should open the menu corresponding to the position of the drag handle.
+   * @returns true when the menu should be closed, false otherwise
+   */
+  const shouldCloseMenu = (state: EditorState) => {
+    let {
+      isDragMenuOpen: previousOpenState,
+      dragMenuDirection: previousDragMenuDirection,
+      dragMenuIndex: previousDragMenuIndex,
+    } = getPluginState(state);
+
+    // menu open but menu direction changed, means user clicked on drag handle of different row/column
+    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+    // 2 scenarios above , menu should not be closed.
+    if (
+      (previousOpenState === true && previousDragMenuDirection !== direction) ||
+      (previousOpenState === true &&
+        previousDragMenuDirection === direction &&
+        previousDragMenuIndex !== index)
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+
   const closeMenu = () => {
     const { state, dispatch } = editorView;
-    toggleDragMenu(false)(state, dispatch);
+    if (shouldCloseMenu(state)) {
+      toggleDragMenu(false, direction, index)(state, dispatch);
+    }
   };
 
   const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -174,6 +174,7 @@ export const ColumnControls = ({
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
                 onMouseUp={handleMouseUp}
+                editorView={editorView}
               />
             </div>
           )}

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

@@ -180,6 +180,7 @@ const DragControlsComponent = ({
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
             onMouseUp={onMouseUp}
+            editorView={editorView}
           />
         </div>
       )}

package/src/plugins/table/ui/common-styles.ts

@@ -56,6 +56,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  disabledCell,
   dragCornerControlButton,
   dragInsertButtonWrapper,
   floatingColumnControls,
@@ -315,6 +316,7 @@ export const tableStyles = (
     ${columnControlsLineMarker()};
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
+    ${disabledCell(props)};
     ${hoveredWarningCell};
     ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
@@ -779,58 +781,49 @@ export const tableStyles = (
       align-items: center;
       outline: none !important;
 
-      svg {
-        rect {
-          fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-        }
-        g {
-          fill: ${token('color.icon.subtle', '#626F86')};
-        }
-      }
-
-      &:hover {
-        svg {
+      &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+        & > svg {
           rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
           }
           g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+            fill: ${token('color.icon.subtle', '#626F86')};
           }
         }
-      }
 
-      &.selected {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
-          }
-          g {
-            fill: ${token('color.icon.inverse', '#FFF')};
+        &:hover {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#FFF')};
+            }
           }
         }
-      }
 
-      &.danger {
-        svg {
-          rect {
-            fill: ${token(
-              'color.background.accent.red.subtler.pressed',
-              '#F87462',
-            )};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.selected {
+          svg {
+            rect {
+              fill: ${token('color.background.accent.blue.subtle', '#579dff')};
+            }
+            g {
+              fill: ${token('color.icon.inverse', '#fff')};
+            }
           }
         }
-      }
 
-      &.disabled {
-        svg {
-          rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
-          }
-          g {
-            fill: ${token('color.border.inverse', '#FFF')};
+        &.danger {
+          svg {
+            rect {
+              fill: ${token(
+                'color.background.accent.red.subtler.pressed',
+                '#F87462',
+              )};
+            }
+            g {
+              fill: ${token('color.border.inverse', '#FFF')};
+            }
           }
         }
       }

package/src/plugins/table/ui/consts.ts

@@ -97,6 +97,12 @@ export const tableCellDeleteColor = themed({
   light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
   dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
 });
+
+export const tableCellDisabledColor = token(
+  'color.background.accent.gray.subtler.hovered',
+  '#C1C7D0',
+);
+
 export const tableBorderDeleteColor = themed({
   light: token('color.border.danger', R400),
   dark: token('color.border.danger', R400),