@atlaskit/editor-plugin-table 7.2.3 → 7.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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

@@ -454,7 +454,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 +472,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";
@@ -203,7 +203,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 +237,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/keymap.js

@@ -57,6 +57,7 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)(-1), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(-10, getEditorContainerWidth), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _columnResize.changeColumnWidthByStep)(10, getEditorContainerWidth), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, (0, _columnResize.stopKeyboardColumnResizing)(), list);
   }
   return (0, _keymap.keymap)(list);
 }

package/dist/cjs/pm-plugins/main.js

@@ -12,7 +12,11 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorTables = require("@atlaskit/editor-tables");
+var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
+var _columnResize = require("../commands/column-resize");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
 var _table = require("../nodeviews/table");
@@ -21,7 +25,7 @@ var _TableRow = _interopRequireDefault(require("../nodeviews/TableRow"));
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _transforms2 = require("../transforms");
 var _types = require("../types");
-var _utils3 = require("../utils");
+var _utils4 = require("../utils");
 var _paste = require("../utils/paste");
 var _defaultTableSelection = require("./default-table-selection");
 var _pluginFactory = require("./plugin-factory");
@@ -106,7 +110,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       var domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: function update(view) {
+        update: function update(view, prevState) {
           var state = view.state,
             dispatch = view.dispatch;
           var selection = state.selection;
@@ -117,6 +121,28 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            var tableNode = (0, _utils3.findTable)(state.selection);
+            if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              var pluginPrevState = (0, _pluginFactory.getPluginState)(prevState);
+              var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                var isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
+                if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
+                  var oldRowsNumber = _editorTables.TableMap.get(pluginPrevState.tableNode).height;
+                  var newRowsNumber = _editorTables.TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             (0, _commands.setTableRef)(tableRef)(state, dispatch);
@@ -156,7 +182,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         if (!(0, _coreUtils.insideTable)(editorState) && (0, _paste.isHeaderRowRequired)(editorState)) {
           slice = (0, _misc.transformSliceToAddTableHeaders)(slice, schema);
         }
-        slice = (0, _utils3.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
+        slice = (0, _utils4.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema);
 
         // We do this separately, so it also applies to drag/drop events
         // This needs to go before `transformSliceToRemoveOpenExpand`
@@ -167,14 +193,14 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         slice = (0, _transforms.transformSliceToRemoveOpenExpand)(slice, schema);
 
         /** If a partial paste of table, paste only table's content */
-        slice = (0, _utils3.transformSliceToRemoveOpenTable)(slice, schema);
+        slice = (0, _utils4.transformSliceToRemoveOpenTable)(slice, schema);
 
         /** If a partial paste of bodied extension, paste only text */
         slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = (0, _transforms.transformSliceToRemoveOpenMultiBodiedExtension)(slice, schema);
-        slice = (0, _utils3.transformSliceToCorrectEmptyTableCells)(slice, schema);
+        slice = (0, _utils4.transformSliceToCorrectEmptyTableCells)(slice, schema);
         if (!pluginConfig.allowColumnResizing) {
           slice = (0, _misc.transformSliceToRemoveColumnsWidths)(slice, schema);
         }
@@ -190,7 +216,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
         var decorationSet = _plugin.pluginKey.getState(state);
-        if ((0, _utils3.findControlsHoverDecoration)(decorationSet).length) {
+        if ((0, _utils4.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         }
 
@@ -213,9 +239,17 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         var maybeTr = (0, _utils.closestElement)(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
-        var state = _ref3.state,
-          dispatch = _ref3.dispatch;
+      handleTextInput: function handleTextInput(view, _from, _to, text) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+          var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+            isKeyboardResize = _getPluginState.isKeyboardResize;
+          if (isKeyboardResize) {
+            (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch);
+            return false;
+          }
+        }
         var tr = (0, _transforms2.replaceSelectedTable)(state, text, _analytics.INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);