@atlaskit/editor-plugin-table 5.3.24 → 5.3.26

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- [#42925](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42925) [`8ea16423505`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ea16423505) - Removes FF platform.editor.update-table-cell-width-via-step
+
 ## 5.3.24
 
 ### 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/transforms/column-width.js

@@ -67,52 +67,19 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
     }
 
     // updating all cells with new attributes
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.update-table-cell-width-via-step')) {
-      var seen = {};
-      for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
-        for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
-          var _mapIndex = _rowIndex * map.width + _columnIndex;
-          var pos = map.map[_mapIndex];
-          var cell = table.nodeAt(pos);
-          if (!seen[pos] && cell) {
-            if (updatedCellsAttrs[pos]) {
-              tr.step(new _transform.AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
-            }
-            seen[pos] = true;
+    var seen = {};
+    for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
+      for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
+        var _mapIndex = _rowIndex * map.width + _columnIndex;
+        var pos = map.map[_mapIndex];
+        var cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          if (updatedCellsAttrs[pos]) {
+            tr.step(new _transform.AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
           }
+          seen[pos] = true;
         }
       }
-    } else {
-      var rows = [];
-      var _seen = {};
-      for (var _rowIndex2 = 0; _rowIndex2 < map.height; _rowIndex2++) {
-        var row = table.child(_rowIndex2);
-        var cells = [];
-        for (var _columnIndex2 = 0; _columnIndex2 < map.width; _columnIndex2++) {
-          var _mapIndex2 = _rowIndex2 * map.width + _columnIndex2;
-          var _pos = map.map[_mapIndex2];
-          var _cell = table.nodeAt(_pos);
-          if (!_seen[_pos] && _cell) {
-            cells.push(_cell.type.createChecked(updatedCellsAttrs[_pos] || _cell.attrs, _cell.content, _cell.marks));
-            _seen[_pos] = true;
-          }
-        }
-        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
-      }
-      var tablePos = start - 1;
-      var selectionBookmark = tr.selection.getBookmark();
-      tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-      /**
-       * We want to restore to the original selection but w/o applying the mapping. Function
-       * tr.replaceWith puts the selection after the inserted content. We need to manually
-       * set the selection back to original state. Mapping in this case doesn't quite work
-       * e.g. if we change the content before a selection. This is because mapping
-       * means moving it if the content in front of it changed. Instead we can get
-       * bookmark of selection.
-       *
-       * @see https://github.com/ProseMirror/prosemirror/issues/645
-       */
-      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
     return tr;
   };

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/transforms/column-width.js

@@ -60,52 +60,19 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
   }
 
   // updating all cells with new attributes
-  if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
-    const seen = {};
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-        const mapIndex = rowIndex * map.width + columnIndex;
-        const pos = map.map[mapIndex];
-        const cell = table.nodeAt(pos);
-        if (!seen[pos] && cell) {
-          if (updatedCellsAttrs[pos]) {
-            tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
-          }
-          seen[pos] = true;
-        }
-      }
-    }
-  } else {
-    const rows = [];
-    const seen = {};
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const row = table.child(rowIndex);
-      const cells = [];
-      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-        const mapIndex = rowIndex * map.width + columnIndex;
-        const pos = map.map[mapIndex];
-        const cell = table.nodeAt(pos);
-        if (!seen[pos] && cell) {
-          cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
-          seen[pos] = true;
+  const seen = {};
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+      const mapIndex = rowIndex * map.width + columnIndex;
+      const pos = map.map[mapIndex];
+      const cell = table.nodeAt(pos);
+      if (!seen[pos] && cell) {
+        if (updatedCellsAttrs[pos]) {
+          tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
         }
+        seen[pos] = true;
       }
-      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
     }
-    const tablePos = start - 1;
-    const selectionBookmark = tr.selection.getBookmark();
-    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-    /**
-     * We want to restore to the original selection but w/o applying the mapping. Function
-     * tr.replaceWith puts the selection after the inserted content. We need to manually
-     * set the selection back to original state. Mapping in this case doesn't quite work
-     * e.g. if we change the content before a selection. This is because mapping
-     * means moving it if the content in front of it changed. Instead we can get
-     * bookmark of selection.
-     *
-     * @see https://github.com/ProseMirror/prosemirror/issues/645
-     */
-    tr.setSelection(selectionBookmark.resolve(tr.doc));
   }
   return tr;
 };

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/transforms/column-width.js

@@ -61,52 +61,19 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
     }
 
     // updating all cells with new attributes
-    if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
-      var seen = {};
-      for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
-        for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
-          var _mapIndex = _rowIndex * map.width + _columnIndex;
-          var pos = map.map[_mapIndex];
-          var cell = table.nodeAt(pos);
-          if (!seen[pos] && cell) {
-            if (updatedCellsAttrs[pos]) {
-              tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
-            }
-            seen[pos] = true;
+    var seen = {};
+    for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
+      for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
+        var _mapIndex = _rowIndex * map.width + _columnIndex;
+        var pos = map.map[_mapIndex];
+        var cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          if (updatedCellsAttrs[pos]) {
+            tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
           }
+          seen[pos] = true;
         }
       }
-    } else {
-      var rows = [];
-      var _seen = {};
-      for (var _rowIndex2 = 0; _rowIndex2 < map.height; _rowIndex2++) {
-        var row = table.child(_rowIndex2);
-        var cells = [];
-        for (var _columnIndex2 = 0; _columnIndex2 < map.width; _columnIndex2++) {
-          var _mapIndex2 = _rowIndex2 * map.width + _columnIndex2;
-          var _pos = map.map[_mapIndex2];
-          var _cell = table.nodeAt(_pos);
-          if (!_seen[_pos] && _cell) {
-            cells.push(_cell.type.createChecked(updatedCellsAttrs[_pos] || _cell.attrs, _cell.content, _cell.marks));
-            _seen[_pos] = true;
-          }
-        }
-        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
-      }
-      var tablePos = start - 1;
-      var selectionBookmark = tr.selection.getBookmark();
-      tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-      /**
-       * We want to restore to the original selection but w/o applying the mapping. Function
-       * tr.replaceWith puts the selection after the inserted content. We need to manually
-       * set the selection back to original state. Mapping in this case doesn't quite work
-       * e.g. if we change the content before a selection. This is because mapping
-       * means moving it if the content in front of it changed. Instead we can get
-       * bookmark of selection.
-       *
-       * @see https://github.com/ProseMirror/prosemirror/issues/645
-       */
-      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
     return tr;
   };

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.24",
+  "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",
@@ -118,9 +118,6 @@
     "platform.editor.table.column-controls-styles-updated": {
       "type": "boolean"
     },
-    "platform.editor.update-table-cell-width-via-step": {
-      "type": "boolean"
-    },
     "platform.editor.resizing-table-height-improvement": {
       "type": "boolean"
     },

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