@atlaskit/editor-plugin-table 5.3.25 → 5.3.26

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.26
+
+### Patch Changes
+
+- [#42815](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42815) [`7fac5fb48e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fac5fb48e7) - ED-20673: Fixed drag menu is not open when clicking on different drag handles consecutively.
+- Updated dependencies
+
 ## 5.3.25
 
 ### Patch Changes

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -87,17 +87,30 @@ var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenu
   return (0, _pluginFactory.createCommand)(function (state) {
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
-      dragMenuDirection = _getPluginState3.dragMenuDirection,
-      dragMenuIndex = _getPluginState3.dragMenuIndex;
-    if (previousOpenState === isDragMenuOpen) {
+      previousDragMenuDirection = _getPluginState3.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState3.dragMenuIndex;
+    if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
       return false;
     }
+    var 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: _actions.DragAndDropActionType.TOGGLE_DRAG_MENU,
       data: {
-        isDragMenuOpen: isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
-        direction: direction !== null && direction !== void 0 ? direction : dragMenuDirection,
-        index: index !== null && index !== void 0 ? index : dragMenuIndex
+        isDragMenuOpen: updatedMenuOpenState,
+        direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
+        index: index !== null && index !== void 0 ? index : previousDragMenuIndex
       }
     };
   }, function (tr) {

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -8,6 +8,7 @@ exports.createPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
@@ -56,7 +57,11 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
           };
           if (newTargetCellPosition !== undefined) {
             var cells = (0, _utils.getCellsInRow)(dragMenuIndex)(tr.selection);
-            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+            // 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.
+            var isCellSelection = tr.selection instanceof _cellSelection.CellSelection;
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
               return tr.setMeta(_pluginKey.pluginKey, action);
             } // else NOP
           } else {

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -13,6 +13,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../commands");
 var _commands2 = require("../../pm-plugins/drag-and-drop/commands");
+var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _utils2 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
@@ -84,10 +85,34 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
+
+  /**
+   * 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
+   */
+  var shouldCloseMenu = function shouldCloseMenu(state) {
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      previousOpenState = _getPluginState.isDragMenuOpen,
+      previousDragMenuDirection = _getPluginState.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState.dragMenuIndex;
+
+    // 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;
+    }
+  };
   var closeMenu = function closeMenu() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    (0, _commands2.toggleDragMenu)(false)(state, dispatch);
+    if (shouldCloseMenu(state)) {
+      (0, _commands2.toggleDragMenu)(false, direction, index)(state, dispatch);
+    }
   };
   var handleMenuItemActivated = function handleMenuItemActivated(_ref2) {
     var _menuCallback$item$va;

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -71,18 +71,31 @@ export const moveSource = (sourceType, sourceIndex, targetIndex) => createComman
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(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 !== null && direction !== void 0 ? direction : dragMenuDirection,
-      index: index !== null && index !== void 0 ? index : dragMenuIndex
+      isDragMenuOpen: updatedMenuOpenState,
+      direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
+      index: index !== null && index !== void 0 ? index : previousDragMenuIndex
     }
   };
 }, tr => {

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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';
@@ -49,7 +50,11 @@ export const createPlugin = (dispatch, eventDispatcher) => {
           };
           if (newTargetCellPosition !== undefined) {
             const cells = getCellsInRow(dragMenuIndex)(tr.selection);
-            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+            // 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) && !isCellSelection) {
               return tr.setMeta(pluginKey, action);
             } // else NOP
           } else {

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -6,6 +6,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 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 { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -76,12 +77,37 @@ export const DragMenu = ({
     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 => {
+    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

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -82,17 +82,30 @@ export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, i
   return createCommand(function (state) {
     var _getPluginState3 = getPluginState(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
-      dragMenuDirection = _getPluginState3.dragMenuDirection,
-      dragMenuIndex = _getPluginState3.dragMenuIndex;
-    if (previousOpenState === isDragMenuOpen) {
+      previousDragMenuDirection = _getPluginState3.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState3.dragMenuIndex;
+    if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
       return false;
     }
+    var 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 !== null && direction !== void 0 ? direction : dragMenuDirection,
-        index: index !== null && index !== void 0 ? index : dragMenuIndex
+        isDragMenuOpen: updatedMenuOpenState,
+        direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
+        index: index !== null && index !== void 0 ? index : previousDragMenuIndex
       }
     };
   }, function (tr) {

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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';
@@ -49,7 +50,11 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
           };
           if (newTargetCellPosition !== undefined) {
             var cells = getCellsInRow(dragMenuIndex)(tr.selection);
-            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+            // 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.
+            var isCellSelection = tr.selection instanceof CellSelection;
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition) && !isCellSelection) {
               return tr.setMeta(pluginKey, action);
             } // else NOP
           } else {

package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -7,6 +7,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 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 { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -76,10 +77,34 @@ export var DragMenu = function DragMenu(_ref) {
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
+
+  /**
+   * 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
+   */
+  var shouldCloseMenu = function shouldCloseMenu(state) {
+    var _getPluginState = getPluginState(state),
+      previousOpenState = _getPluginState.isDragMenuOpen,
+      previousDragMenuDirection = _getPluginState.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState.dragMenuIndex;
+
+    // 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;
+    }
+  };
   var closeMenu = function closeMenu() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    toggleDragMenu(false)(state, dispatch);
+    if (shouldCloseMenu(state)) {
+      toggleDragMenu(false, direction, index)(state, dispatch);
+    }
   };
   var handleMenuItemActivated = function handleMenuItemActivated(_ref2) {
     var _menuCallback$item$va;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.25",
+  "version": "5.3.26",
   "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.19.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/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/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 }) => {