@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.3.1
+
+### Patch Changes
+
+- [#69911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69911) [`50161fb5966e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/50161fb5966e) - [ux] Added keyboard shortcut to drag handle and keyboard navigation for drag menu
+- Updated dependencies
+
+## 7.3.0
+
+### Minor Changes
+
+- [#63203](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63203) [`2bf8f7ffabfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2bf8f7ffabfd) - ECA11Y-194: Stop keyboard column resizing when table updated or lost focus
+
 ## 7.2.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -51,6 +51,9 @@
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/menu/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },

package/dist/cjs/commands/column-resize.js

@@ -3,30 +3,66 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
+exports.stopKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
-var _utils2 = require("../pm-plugins/table-resizing/utils");
+var _plugin = require("../pm-plugins/decorations/plugin");
+var _utils2 = require("../pm-plugins/decorations/utils");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginFactory2 = require("../pm-plugins/table-resizing/plugin-factory");
+var _pluginKey = require("../pm-plugins/table-resizing/plugin-key");
+var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _transforms = require("../transforms");
-var _utils3 = require("../utils");
-var _index = require("./index");
+var _types = require("../types");
+var _utils4 = require("../utils");
+var getTablePluginCommand = function getTablePluginCommand(actionPayload, originalTr) {
+  return (0, _pluginFactory.createCommand)(function () {
+    return actionPayload;
+  }, function (tr) {
+    return (originalTr || tr).setMeta('addToHistory', false);
+  });
+};
 var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
   return function (state, dispatch) {
-    (0, _index.addResizeHandleDecorations)(rowIndex, columnIndex, true)(state, dispatch);
-    // Currently only 'right' position is used in showResizeHandleLine
-    (0, _index.showResizeHandleLine)({
-      left: 0,
+    var customTr = state.tr;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState.getIntl;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
+    if (!allowColumnResizing) {
+      return false;
+    }
+    var decorationsWithWidget = (0, _utils2.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl)({
+      tr: customTr,
+      decorationSet: (0, _plugin.getDecorations)(state)
+    });
+    var decorationsWithWidgetAndHandle = (0, _utils4.updateDecorations)(customTr.doc, decorationsWithWidget, (0, _utils4.createColumnLineResize)(state.selection, {
       right: columnIndex
-    })(state, dispatch);
-    (0, _pluginFactory.createCommand)({
+    }), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    getTablePluginCommand({
+      type: 'START_KEYBOARD_COLUMN_RESIZE',
+      data: {
+        resizeHandleRowIndex: rowIndex,
+        resizeHandleColumnIndex: columnIndex,
+        resizeHandleIncludeTooltip: true,
+        isKeyboardResize: true,
+        decorationSet: decorationsWithWidgetAndHandle
+      }
+    }, customTr)(state, fakeDispatch);
+    customTr.setMeta(_pluginKey.pluginKey, {
       type: 'SET_RESIZE_HANDLE_POSITION',
       data: {
         resizeHandlePos: nextResizeHandlePos
       }
-    })(state, dispatch);
+    });
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
     return false;
   };
 };
@@ -38,32 +74,19 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var cell = (0, _utils.findCellClosestToPos)(selection.$from);
   if (selectionRect && cell && view) {
-    var cellAttrs = cell.node.attrs;
-    var width = (0, _utils2.currentColWidth)(view, cell.pos, cellAttrs);
-    updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
-    (0, _pluginFactory.createCommand)({
-      type: 'SET_DRAGGING',
-      data: {
-        dragging: {
-          startX: 0,
-          startWidth: width
-        }
-      }
-    })(state, dispatch);
-    return true;
+    return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
   }
   return false;
 };
 var activateNextResizeArea = exports.activateNextResizeArea = function activateNextResizeArea(direction) {
-  return function (state, dispatch) {
+  return function (state, dispatch, view) {
     if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    var _ref = (0, _pluginFactory.getPluginState)(state) || {},
-      resizeHandlePos = _ref.resizeHandlePos,
-      dragging = _ref.dragging;
+    var _ref = (0, _pluginFactory2.getPluginState)(state) || {},
+      resizeHandlePos = _ref.resizeHandlePos;
     // If No resizing has initiated, skip to regular handler
-    if (!resizeHandlePos || !dragging) {
+    if (!resizeHandlePos) {
       return false;
     }
     var selection = state.selection;
@@ -88,31 +111,35 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
       var rectForNextCell = tableMap.findCell(offset);
-      updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos)(state, dispatch);
+      return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos)(state, dispatch, view);
     } else {
       // current position is in the one of the side columns of the table(left or right)
       if (currentCellRect.left === 0) {
         var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
         var $lastCell = state.doc.resolve(lastCellInCurrentRow);
-        updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch, view);
       } else if (tableMap.width === currentCellRect.right) {
         var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
         var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
-        updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
       }
     }
-    return true;
+    return false;
   };
 };
 var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
   return function (state, dispatch, view) {
+    var customTr = state.tr;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
     if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    var _getTableResizingPlug = (0, _pluginFactory.getPluginState)(state),
-      resizeHandlePos = _getTableResizingPlug.resizeHandlePos,
-      dragging = _getTableResizingPlug.dragging;
-    if (!view || !resizeHandlePos || !dragging) {
+    var _getTableResizingPlug = (0, _pluginFactory2.getPluginState)(state),
+      resizeHandlePos = _getTableResizingPlug.resizeHandlePos;
+    var cell = (0, _utils.findCellClosestToPos)(state.selection.$from);
+    if (!view || !resizeHandlePos || !cell) {
       return false;
     }
     var $cell = state.doc.resolve(resizeHandlePos);
@@ -125,14 +152,25 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
     if (dom && dom.nodeName !== 'TABLE') {
       dom = dom.closest('table');
     }
-    var maxSize = (0, _utils2.getTableMaxWidth)({
+    var cellAttrs = cell === null || cell === void 0 ? void 0 : cell.node.attrs;
+    var width = (0, _utils3.currentColWidth)(view, cell === null || cell === void 0 ? void 0 : cell.pos, cellAttrs);
+    (0, _pluginFactory2.createCommand)({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width
+        }
+      }
+    })(state, fakeDispatch);
+    var maxSize = (0, _utils3.getTableMaxWidth)({
       table: originalTable,
       tableStart: tableStartPosition,
       state: state,
       layout: originalTable.attrs.layout,
       getEditorContainerWidth: getEditorContainerWidth
     });
-    var initialResizeState = (0, _utils2.getResizeState)({
+    var initialResizeState = (0, _utils3.getResizeState)({
       minWidth: _styles.tableCellMinWidth,
       maxSize: maxSize,
       table: originalTable,
@@ -140,16 +178,48 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       start: tableStartPosition,
       domAtPos: domAtPos
     });
-    (0, _utils2.updateControls)()(state);
+    (0, _utils3.updateControls)()(state);
     var selectionRect = (0, _utils.getSelectionRect)(state.selection);
-    var selectedColumns = selectionRect ? (0, _utils3.getSelectedColumnIndexes)(selectionRect) : [];
+    var selectedColumns = selectionRect ? (0, _utils4.getSelectedColumnIndexes)(selectionRect) : [];
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-    var newResizeState = (0, _utils2.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
-    var tr = (0, _transforms.updateColumnWidths)(newResizeState, originalTable, tableStartPosition)(state.tr);
+    var newResizeState = (0, _utils3.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    customTr = (0, _transforms.updateColumnWidths)(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
-      dispatch(tr);
+      dispatch(customTr);
     }
     return true;
   };
+};
+var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function stopKeyboardColumnResizing(originalTr) {
+  return function (state, dispatch) {
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var customTr = originalTr || state.tr;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
+    var decorationWithoutWidget = (0, _utils2.clearColumnResizingDecorations)()({
+      tr: customTr,
+      decorationSet: (0, _plugin.getDecorations)(state)
+    });
+    var decorationWithoutWidgetAndHandle = (0, _utils4.updateDecorations)(customTr.doc, decorationWithoutWidget, [], _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    getTablePluginCommand({
+      type: 'STOP_KEYBOARD_COLUMN_RESIZE',
+      data: {
+        decorationSet: decorationWithoutWidgetAndHandle
+      }
+    }, customTr)(state, fakeDispatch);
+    (0, _pluginFactory2.createCommand)({
+      type: 'STOP_RESIZING'
+    }, function () {
+      return customTr.setMeta('scrollIntoView', false);
+    })(state, fakeDispatch);
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
+    return false;
+  };
 };

package/dist/cjs/commands/go-to-next-cell.js

@@ -10,29 +10,25 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../commands-with-analytics");
-var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
-var _hover = require("./hover");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _columnResize = require("./column-resize");
 // #region Constants
 
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
 var goToNextCell = exports.goToNextCell = function goToNextCell(editorAnalyticsAPI) {
   return function (direction) {
-    return function (state, dispatch) {
+    return function (state, dispatch, view) {
       var table = (0, _utils2.findTable)(state.selection);
       if (!table) {
         return false;
       }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
-        var _getResizePluginState;
-        var isColumnResizing = !!((_getResizePluginState = (0, _pluginFactory.getPluginState)(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+        var _getPluginState;
+        var isColumnResizing = (_getPluginState = (0, _pluginFactory.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
         if (isColumnResizing) {
-          (0, _pluginFactory.createCommand)({
-            type: 'STOP_RESIZING'
-          }, function (originalTr) {
-            return (state.tr || originalTr).setMeta('scrollIntoView', false);
-          })(state, dispatch);
-          (0, _hover.hideResizeHandleLine)()(state, dispatch);
+          (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch, view);
+          return true;
         }
       }
       var map = _tableMap.TableMap.get(table.node);

package/dist/cjs/commands/misc.js

@@ -328,6 +328,7 @@ var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCe
   };
 };
 var selectColumn = exports.selectColumn = function selectColumn(column, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return (0, _pluginFactory.createCommand)(function (state) {
     var cells = (0, _utils2.getCellsInColumn)(column)(state.tr.selection);
     if (!cells || !cells.length || typeof cells[0].pos !== 'number') {
@@ -344,7 +345,7 @@ var selectColumn = exports.selectColumn = function selectColumn(column, expand)
       }
     };
   }, function (tr) {
-    return (0, _utils2.selectColumn)(column, expand)(tr).setMeta('addToHistory', false);
+    return (0, _utils2.selectColumn)(column, expand)(tr).setMeta('addToHistory', false).setMeta('selectedColumnViaKeyboard', triggeredByKeyboard);
   });
 };
 var selectColumns = exports.selectColumns = function selectColumns(columnIndexes) {
@@ -379,6 +380,7 @@ var selectColumns = exports.selectColumns = function selectColumns(columnIndexes
   });
 };
 var selectRow = exports.selectRow = function selectRow(row, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return (0, _pluginFactory.createCommand)(function (state) {
     var targetCellPosition;
     var cells = (0, _utils2.getCellsInRow)(row)(state.tr.selection);
@@ -392,7 +394,7 @@ var selectRow = exports.selectRow = function selectRow(row, expand) {
       }
     };
   }, function (tr) {
-    return (0, _utils2.selectRow)(row, expand)(tr).setMeta('addToHistory', false);
+    return (0, _utils2.selectRow)(row, expand)(tr).setMeta('addToHistory', false).setMeta('selectedRowViaKeyboard', triggeredByKeyboard);
   });
 };
 var selectRows = exports.selectRows = function selectRows(rowIndexes) {
@@ -454,7 +456,7 @@ var hideInsertColumnOrRowButton = exports.hideInsertColumnOrRowButton = function
     return tr.setMeta('addToHistory', false);
   });
 };
-var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
     var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
@@ -472,7 +474,8 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
         }),
         resizeHandleRowIndex: rowIndex,
         resizeHandleColumnIndex: columnIndex,
-        resizeHandleIncludeTooltip: includeTooltip
+        resizeHandleIncludeTooltip: includeTooltip,
+        isKeyboardResize: isKeyboardResize || false
       }
     };
   }, function (tr) {

package/dist/cjs/commands/selection.js

@@ -11,7 +11,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
-var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -88,6 +88,7 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
 };
 var selectColumns = exports.selectColumns = function selectColumns(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = (0, _utils.findTable)(selection);
@@ -100,7 +101,7 @@ var selectColumns = exports.selectColumns = function selectColumns(editorSelecti
         })(state, dispatch);
       }
       if (table && rect) {
-        return (0, _misc.selectColumn)(rect.left)(state, dispatch);
+        return (0, _misc.selectColumn)(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -108,6 +109,7 @@ var selectColumns = exports.selectColumns = function selectColumns(editorSelecti
 };
 var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = (0, _utils.findTable)(selection);
@@ -120,7 +122,7 @@ var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return (0, _misc.selectRow)(rect.top)(state, dispatch);
+        return (0, _misc.selectRow)(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -203,7 +205,7 @@ var arrowLeftFromText = function arrowLeftFromText(editorSelectionAPI) {
         var isColumnResizing = false;
         if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
           var columResizePluginState = (0, _pluginFactory.getPluginState)(state) || {};
-          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
         }
         if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
         // + 3 for: row, cell & paragraph nodes
@@ -237,7 +239,7 @@ var arrowRightFromText = function arrowRightFromText(editorSelectionAPI) {
         var isColumnResizing = false;
         if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
           var columResizePluginState = (0, _pluginFactory.getPluginState)(state) || {};
-          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
         }
         if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
         // + 3 for: row, cell & paragraph nodes

package/dist/cjs/event-handlers.js

@@ -14,6 +14,7 @@ var _state5 = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _pluginFactory = require("./pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("./pm-plugins/plugin-factory");
@@ -172,15 +173,25 @@ var handleMouseOut = exports.handleMouseOut = function handleMouseOut(view, mous
   if ((0, _utils3.isResizeHandleDecoration)(target) && !(0, _utils3.isResizeHandleDecoration)(relatedTarget)) {
     var _state2 = view.state,
       _dispatch3 = view.dispatch;
-    return (0, _commands.hideResizeHandleLine)()(_state2, _dispatch3);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+      var _getPluginState2 = (0, _pluginFactory2.getPluginState)(_state2),
+        isKeyboardResize = _getPluginState2.isKeyboardResize;
+      if (isKeyboardResize) {
+        // no need to hide decoration if column resizing started by keyboard
+        return false;
+      }
+      return (0, _commands.hideResizeHandleLine)()(_state2, _dispatch3);
+    } else {
+      return (0, _commands.hideResizeHandleLine)()(_state2, _dispatch3);
+    }
   }
   return false;
 };
 var handleMouseEnter = exports.handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
-    isTableHovered = _getPluginState2.isTableHovered;
+  var _getPluginState3 = (0, _pluginFactory2.getPluginState)(state),
+    isTableHovered = _getPluginState3.isTableHovered;
   if (!isTableHovered) {
     return (0, _commands.setTableHovered)(true)(state, dispatch);
   }
@@ -192,11 +203,11 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState3 = (0, _pluginFactory2.getPluginState)(state),
-    insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState3.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled,
-    isTableHovered = _getPluginState3.isTableHovered;
+  var _getPluginState4 = (0, _pluginFactory2.getPluginState)(state),
+    insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState4.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled,
+    isTableHovered = _getPluginState4.isTableHovered;
   if (isTableHovered) {
     if (isDragAndDropEnabled) {
       var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
@@ -229,9 +240,9 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState4 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
+    var _getPluginState5 = (0, _pluginFactory2.getPluginState)(state),
+      insertColumnButtonIndex = _getPluginState5.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState5.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -244,8 +255,8 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState5 = (0, _pluginFactory2.getPluginState)(_state3),
-      insertRowButtonIndex = _getPluginState5.insertRowButtonIndex;
+    var _getPluginState6 = (0, _pluginFactory2.getPluginState)(_state3),
+      insertRowButtonIndex = _getPluginState6.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -260,19 +271,21 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState6 = (0, _pluginFactory2.getPluginState)(_state4),
-        resizeHandleColumnIndex = _getPluginState6.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState6.resizeHandleRowIndex;
+      var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state4),
+        resizeHandleColumnIndex = _getPluginState7.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState7.resizeHandleRowIndex;
+      var isKeyboardResize = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz') ? (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize : false;
       var tableCell = (0, _utils.closestElement)(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
       var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
       if (rect) {
         var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
         var rowIndexTarget = rect.top;
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
+        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
           target: element,
           columnEndIndexTarget: columnEndIndexTarget
-        })) {
+        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+        ) {
           return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
         }
       }
@@ -337,8 +350,8 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
           if (isTableSelected) {
             tr = (0, _utils2.removeTable)(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState7 = (0, _pluginFactory2.getPluginState)(newState),
-              isHeaderRowRequired = _getPluginState7.pluginConfig.isHeaderRowRequired;
+            var _getPluginState8 = (0, _pluginFactory2.getPluginState)(newState),
+              isHeaderRowRequired = _getPluginState8.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView)(tr);
@@ -350,8 +363,8 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
   return tr;
 };
 var isTableInFocus = exports.isTableInFocus = function isTableInFocus(view) {
-  var _getPluginState8, _getResizePluginState;
-  return !!((_getPluginState8 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState8 !== void 0 && _getPluginState8.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+  var _getPluginState9, _getResizePluginState;
+  return !!((_getPluginState9 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState9 !== void 0 && _getPluginState9.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
 var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
@@ -365,9 +378,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = (0, _utils.isElementInTableCell)(target);
-  var _getPluginState9 = (0, _pluginFactory2.getPluginState)(view.state),
-    tableNode = _getPluginState9.tableNode,
-    tableRef = _getPluginState9.tableRef;
+  var _getPluginState10 = (0, _pluginFactory2.getPluginState)(view.state),
+    tableNode = _getPluginState10.tableNode,
+    tableRef = _getPluginState10.tableRef;
   var tableElement = (0, _utils.closestElement)(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId

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

@@ -84,6 +84,7 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
   return (0, _pluginFactory.createCommand)(function (state) {
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
@@ -110,7 +111,8 @@ var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenu
       data: {
         isDragMenuOpen: updatedMenuOpenState,
         direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
-        index: index !== null && index !== void 0 ? index : previousDragMenuIndex
+        index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
+        isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
       }
     };
   }, function (tr) {

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

@@ -170,7 +170,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        isKeyboardModeActive: false
       };
     }),
     key: _pluginKey2.pluginKey,
@@ -182,6 +183,20 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
       var _getPluginState = (0, _pluginFactory2.getPluginState)(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex;
+      transactions.forEach(function (transaction) {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          var button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            button.focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          var _button = document.querySelector('#drag-handle-button-column');
+          if (_button) {
+            _button.focus();
+          }
+        }
+      });
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -222,6 +237,23 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
           decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
+      },
+      handleKeyDown: function handleKeyDown(view, event) {
+        var _ref8;
+        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
+        var keysToTrap = ['Enter', ' '];
+        var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        var _getPluginState3 = (0, _pluginFactory2.getPluginState)(view.state),
+          isDragMenuOpen = _getPluginState3.isDragMenuOpen;
+
+        // drag handle is focused, and user presses any key return them back to editing
+        if (isDragHandleFocused && !isDragMenuOpen && !keysToTrap.includes(event.key)) {
+          view.dom.focus();
+          return true;
+        }
+        if (isDragHandleFocused && keysToTrap.includes(event.key) || isDragMenuOpen && keysToTrapWhen.includes(event.key)) {
+          return true;
+        }
       }
     }
   });

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

@@ -30,7 +30,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
-        dragMenuIndex: action.data.index
+        dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive
       });
     default:
       return pluginState;