@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/dist/es2019/ui/consts.js

@@ -68,4 +68,5 @@ export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
-export const dropTargetExtendedWidth = 150;
+export const dropTargetExtendedWidth = 150;
+export const colorPalletteColumns = 7;

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

@@ -2,25 +2,61 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getDecorations } from '../pm-plugins/decorations/plugin';
+import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../pm-plugins/decorations/utils';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
+import { pluginKey as tableResizingPK } from '../pm-plugins/table-resizing/plugin-key';
 import { currentColWidth, getResizeState, getTableMaxWidth, resizeColumn, updateControls } from '../pm-plugins/table-resizing/utils';
 import { updateColumnWidths } from '../transforms';
-import { getSelectedColumnIndexes } from '../utils';
-import { addResizeHandleDecorations, showResizeHandleLine } from './index';
+import { TableDecorations } from '../types';
+import { createColumnLineResize, getSelectedColumnIndexes, updateDecorations } from '../utils';
+var getTablePluginCommand = function getTablePluginCommand(actionPayload, originalTr) {
+  return createCommand(function () {
+    return actionPayload;
+  }, function (tr) {
+    return (originalTr || tr).setMeta('addToHistory', false);
+  });
+};
 var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
   return function (state, dispatch) {
-    addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
-    // Currently only 'right' position is used in showResizeHandleLine
-    showResizeHandleLine({
-      left: 0,
+    var customTr = state.tr;
+    var _getPluginState = getPluginState(state),
+      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState.getIntl;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
+    if (!allowColumnResizing) {
+      return false;
+    }
+    var decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl)({
+      tr: customTr,
+      decorationSet: getDecorations(state)
+    });
+    var decorationsWithWidgetAndHandle = updateDecorations(customTr.doc, decorationsWithWidget, createColumnLineResize(state.selection, {
       right: columnIndex
-    })(state, dispatch);
-    tableResizingPluginCreateCommand({
+    }), 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(tableResizingPK, {
       type: 'SET_RESIZE_HANDLE_POSITION',
       data: {
         resizeHandlePos: nextResizeHandlePos
       }
-    })(state, dispatch);
+    });
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
     return false;
   };
 };
@@ -32,32 +68,19 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var cell = findCellClosestToPos(selection.$from);
   if (selectionRect && cell && view) {
-    var cellAttrs = cell.node.attrs;
-    var width = currentColWidth(view, cell.pos, cellAttrs);
-    updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
-    tableResizingPluginCreateCommand({
-      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;
 };
 export var activateNextResizeArea = function activateNextResizeArea(direction) {
-  return function (state, dispatch) {
+  return function (state, dispatch, view) {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
     var _ref = getTableResizingPluginState(state) || {},
-      resizeHandlePos = _ref.resizeHandlePos,
-      dragging = _ref.dragging;
+      resizeHandlePos = _ref.resizeHandlePos;
     // If No resizing has initiated, skip to regular handler
-    if (!resizeHandlePos || !dragging) {
+    if (!resizeHandlePos) {
       return false;
     }
     var selection = state.selection;
@@ -82,31 +105,35 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
       // 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;
   };
 };
 export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
   return function (state, dispatch, view) {
+    var customTr = state.tr;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
     var _getTableResizingPlug = getTableResizingPluginState(state),
-      resizeHandlePos = _getTableResizingPlug.resizeHandlePos,
-      dragging = _getTableResizingPlug.dragging;
-    if (!view || !resizeHandlePos || !dragging) {
+      resizeHandlePos = _getTableResizingPlug.resizeHandlePos;
+    var cell = findCellClosestToPos(state.selection.$from);
+    if (!view || !resizeHandlePos || !cell) {
       return false;
     }
     var $cell = state.doc.resolve(resizeHandlePos);
@@ -119,6 +146,17 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
     if (dom && dom.nodeName !== 'TABLE') {
       dom = dom.closest('table');
     }
+    var cellAttrs = cell === null || cell === void 0 ? void 0 : cell.node.attrs;
+    var width = currentColWidth(view, cell === null || cell === void 0 ? void 0 : cell.pos, cellAttrs);
+    tableResizingPluginCreateCommand({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width
+        }
+      }
+    })(state, fakeDispatch);
     var maxSize = getTableMaxWidth({
       table: originalTable,
       tableStart: tableStartPosition,
@@ -140,10 +178,42 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
     var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
-    var tr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(state.tr);
+    customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
-      dispatch(tr);
+      dispatch(customTr);
     }
     return true;
   };
+};
+export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(originalTr) {
+  return function (state, dispatch) {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var customTr = originalTr || state.tr;
+    var fakeDispatch = function fakeDispatch(tr) {
+      customTr = tr;
+    };
+    var decorationWithoutWidget = clearColumnResizingDecorations()({
+      tr: customTr,
+      decorationSet: getDecorations(state)
+    });
+    var decorationWithoutWidgetAndHandle = updateDecorations(customTr.doc, decorationWithoutWidget, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    getTablePluginCommand({
+      type: 'STOP_KEYBOARD_COLUMN_RESIZE',
+      data: {
+        decorationSet: decorationWithoutWidgetAndHandle
+      }
+    }, customTr)(state, fakeDispatch);
+    tableResizingPluginCreateCommand({
+      type: 'STOP_RESIZING'
+    }, function () {
+      return customTr.setMeta('scrollIntoView', false);
+    })(state, fakeDispatch);
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
+    return false;
+  };
 };

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

@@ -6,27 +6,23 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertRowWithAnalytics } from '../commands-with-analytics';
-import { getPluginState as getResizePluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
-import { hideResizeHandleLine } from './hover';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { stopKeyboardColumnResizing } from './column-resize';
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
 export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
   return function (direction) {
-    return function (state, dispatch) {
+    return function (state, dispatch, view) {
       var table = findTable(state.selection);
       if (!table) {
         return false;
       }
       if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-        var _getResizePluginState;
-        var isColumnResizing = !!((_getResizePluginState = getResizePluginState(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+        var _getPluginState;
+        var isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
         if (isColumnResizing) {
-          tableResizingPluginCreateCommand({
-            type: 'STOP_RESIZING'
-          }, function (originalTr) {
-            return (state.tr || originalTr).setMeta('scrollIntoView', false);
-          })(state, dispatch);
-          hideResizeHandleLine()(state, dispatch);
+          stopKeyboardColumnResizing()(state, dispatch, view);
+          return true;
         }
       }
       var map = TableMap.get(table.node);

package/dist/esm/commands/misc.js

@@ -321,6 +321,7 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCel
   };
 };
 export var selectColumn = function selectColumn(column, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return createCommand(function (state) {
     var cells = getCellsInColumn(column)(state.tr.selection);
     if (!cells || !cells.length || typeof cells[0].pos !== 'number') {
@@ -337,7 +338,7 @@ export var selectColumn = function selectColumn(column, expand) {
       }
     };
   }, function (tr) {
-    return selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false);
+    return selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false).setMeta('selectedColumnViaKeyboard', triggeredByKeyboard);
   });
 };
 export var selectColumns = function selectColumns(columnIndexes) {
@@ -372,6 +373,7 @@ export var selectColumns = function selectColumns(columnIndexes) {
   });
 };
 export var selectRow = function selectRow(row, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return createCommand(function (state) {
     var targetCellPosition;
     var cells = getCellsInRow(row)(state.tr.selection);
@@ -385,7 +387,7 @@ export var selectRow = function selectRow(row, expand) {
       }
     };
   }, function (tr) {
-    return selectRowTransform(row, expand)(tr).setMeta('addToHistory', false);
+    return selectRowTransform(row, expand)(tr).setMeta('addToHistory', false).setMeta('selectedRowViaKeyboard', triggeredByKeyboard);
   });
 };
 export var selectRows = function selectRows(rowIndexes) {
@@ -447,7 +449,7 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
     return tr.setMeta('addToHistory', false);
   });
 };
-export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState2 = getPluginState(state),
@@ -465,7 +467,8 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
         }),
         resizeHandleRowIndex: rowIndex,
         resizeHandleColumnIndex: columnIndex,
-        resizeHandleIncludeTooltip: includeTooltip
+        resizeHandleIncludeTooltip: includeTooltip,
+        isKeyboardResize: isKeyboardResize || false
       }
     };
   }, function (tr) {

package/dist/esm/commands/selection.js

@@ -5,7 +5,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { selectColumn, selectRow } from '../commands/misc';
-import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -82,6 +82,7 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
 };
 export var 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 = findTable(selection);
@@ -94,7 +95,7 @@ export var selectColumns = function selectColumns(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return selectColumn(rect.left)(state, dispatch);
+        return selectColumn(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -102,6 +103,7 @@ export var selectColumns = function selectColumns(editorSelectionAPI) {
 };
 export var 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 = findTable(selection);
@@ -114,7 +116,7 @@ export var selectRows = function selectRows(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return selectRow(rect.top)(state, dispatch);
+        return selectRow(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -196,8 +198,8 @@ var arrowLeftFromText = function arrowLeftFromText(editorSelectionAPI) {
         var $from = selection.$from;
         var isColumnResizing = false;
         if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-          var columResizePluginState = getResizePluginState(state) || {};
-          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+          var columResizePluginState = getPluginState(state) || {};
+          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
@@ -230,8 +232,8 @@ var arrowRightFromText = function arrowRightFromText(editorSelectionAPI) {
         var $to = selection.$to;
         var isColumnResizing = false;
         if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-          var columResizePluginState = getResizePluginState(state) || {};
-          isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+          var columResizePluginState = getPluginState(state) || {};
+          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/esm/event-handlers.js

@@ -5,6 +5,7 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -163,15 +164,25 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
   if (isResizeHandleDecoration(target) && !isResizeHandleDecoration(relatedTarget)) {
     var _state2 = view.state,
       _dispatch3 = view.dispatch;
-    return hideResizeHandleLine()(_state2, _dispatch3);
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      var _getPluginState2 = getPluginState(_state2),
+        isKeyboardResize = _getPluginState2.isKeyboardResize;
+      if (isKeyboardResize) {
+        // no need to hide decoration if column resizing started by keyboard
+        return false;
+      }
+      return hideResizeHandleLine()(_state2, _dispatch3);
+    } else {
+      return hideResizeHandleLine()(_state2, _dispatch3);
+    }
   }
   return false;
 };
 export var handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = getPluginState(state),
-    isTableHovered = _getPluginState2.isTableHovered;
+  var _getPluginState3 = getPluginState(state),
+    isTableHovered = _getPluginState3.isTableHovered;
   if (!isTableHovered) {
     return setTableHovered(true)(state, dispatch);
   }
@@ -183,11 +194,11 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState3 = getPluginState(state),
-    insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState3.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled,
-    isTableHovered = _getPluginState3.isTableHovered;
+  var _getPluginState4 = getPluginState(state),
+    insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState4.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled,
+    isTableHovered = _getPluginState4.isTableHovered;
   if (isTableHovered) {
     if (isDragAndDropEnabled) {
       var _getDragDropPluginSta = getDragDropPluginState(state),
@@ -220,9 +231,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState4 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
+    var _getPluginState5 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState5.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState5.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -235,8 +246,8 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState5 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState5.insertRowButtonIndex;
+    var _getPluginState6 = getPluginState(_state3),
+      insertRowButtonIndex = _getPluginState6.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -251,19 +262,21 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState6 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState6.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState6.resizeHandleRowIndex;
+      var _getPluginState7 = getPluginState(_state4),
+        resizeHandleColumnIndex = _getPluginState7.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState7.resizeHandleRowIndex;
+      var isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? getPluginState(_state4).isKeyboardResize : false;
       var tableCell = closestElement(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
       var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
       if (rect) {
         var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
         var rowIndexTarget = rect.top;
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
           target: element,
           columnEndIndexTarget: columnEndIndexTarget
-        })) {
+        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+        ) {
           return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
         }
       }
@@ -328,8 +341,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
           if (isTableSelected) {
             tr = removeTable(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState7 = getPluginState(newState),
-              isHeaderRowRequired = _getPluginState7.pluginConfig.isHeaderRowRequired;
+            var _getPluginState8 = getPluginState(newState),
+              isHeaderRowRequired = _getPluginState8.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
@@ -341,8 +354,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
   return tr;
 };
 export var isTableInFocus = function isTableInFocus(view) {
-  var _getPluginState8, _getResizePluginState;
-  return !!((_getPluginState8 = getPluginState(view.state)) !== null && _getPluginState8 !== void 0 && _getPluginState8.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+  var _getPluginState9, _getResizePluginState;
+  return !!((_getPluginState9 = getPluginState(view.state)) !== null && _getPluginState9 !== void 0 && _getPluginState9.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
 export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
@@ -356,9 +369,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  var _getPluginState9 = getPluginState(view.state),
-    tableNode = _getPluginState9.tableNode,
-    tableRef = _getPluginState9.tableRef;
+  var _getPluginState10 = getPluginState(view.state),
+    tableNode = _getPluginState10.tableNode,
+    tableRef = _getPluginState10.tableRef;
   var tableElement = closestElement(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId

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

@@ -6,7 +6,6 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-
 // TODO: This command is a placeholder example. Please replace this if required.
 export var getDecorations = function getDecorations(state) {
   var _pluginKey$getState;
@@ -79,6 +78,7 @@ export var moveSource = function moveSource(sourceType, sourceIndexes, targetInd
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
   return createCommand(function (state) {
     var _getPluginState3 = getPluginState(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
@@ -105,7 +105,8 @@ export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, i
       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/esm/pm-plugins/drag-and-drop/plugin.js

@@ -164,7 +164,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        isKeyboardModeActive: false
       };
     }),
     key: pluginKey,
@@ -176,6 +177,20 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
       var _getPluginState = 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.
@@ -216,6 +231,23 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
         var _getPluginState2 = 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 = 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/esm/pm-plugins/drag-and-drop/reducer.js

@@ -23,7 +23,8 @@ export default (function (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;

package/dist/esm/pm-plugins/keymap.js

@@ -1,11 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
-import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
+import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
@@ -50,6 +50,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
     bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth), list);
     bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth), list);
+    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
   }
   return keymap(list);
 }