@atlaskit/editor-plugin-table 7.2.3 → 7.3.0

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -11,12 +11,14 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _columnResize = require("../../commands/column-resize");
 var _misc = require("../../commands/misc");
 var _transforms = require("../../transforms");
 var _utils2 = require("../../utils");
+var _pluginFactory = require("../plugin-factory");
 var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
-var _pluginFactory = require("./plugin-factory");
+var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
@@ -26,6 +28,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
@@ -92,9 +96,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var clientX = event.clientX;
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+    var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
+    var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return (0, _commands.stopResizing)()(state, dispatch);
     }
@@ -107,9 +113,20 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var start = $cell.start(-1);
     var table = $cell.node(-1);
 
-    // If we let go in the same place we started, dont need to do anything.
+    // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      return (0, _commands.stopResizing)()(state, dispatch);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return (0, _columnResize.stopKeyboardColumnResizing)()(state, dispatch, view);
+        } else {
+          return (0, _commands.stopResizing)()(state, dispatch);
+        }
+      } else {
+        return (0, _commands.stopResizing)()(state, dispatch);
+      }
     }
     var tr = state.tr;
     if (dragging) {
@@ -143,17 +160,30 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           })(tr);
         }
       }
-      return (0, _commands.stopResizing)(tr)(state, dispatch);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return (0, _columnResize.stopKeyboardColumnResizing)(tr)(state, dispatch, view);
+        } else {
+          return (0, _commands.stopResizing)(tr)(state, dispatch);
+        }
+      } else {
+        return (0, _commands.stopResizing)(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
     var clientX = event.clientX,
       which = event.which;
     var state = view.state;
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+    var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos))) {
+    var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
+    if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos)) || !isTableHovered && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);

package/dist/cjs/pm-plugins/table-resizing/plugin.js

@@ -8,10 +8,12 @@ exports.createPlugin = createPlugin;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../types");
+var _pluginFactory = require("../plugin-factory");
 var _commands = require("./commands");
 var _eventHandlers = require("./event-handlers");
-var _pluginFactory = require("./plugin-factory");
+var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
 function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
@@ -19,7 +21,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
-    state: (0, _pluginFactory.createPluginState)(dispatch, {
+    state: (0, _pluginFactory2.createPluginState)(dispatch, {
       lastColumnResizable: lastColumnResizable,
       resizeHandlePos: null,
       dragging: null,
@@ -28,7 +30,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
     props: {
       attributes: function attributes(state) {
         var _classnames;
-        var pluginState = (0, _pluginFactory.getPluginState)(state);
+        var pluginState = (0, _pluginFactory2.getPluginState)(state);
         return {
           class: (0, _classnames2.default)(_types.TableCssClassName.RESIZING_PLUGIN, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.RESIZE_CURSOR, pluginState.resizeHandlePos !== null), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.IS_RESIZING, !!pluginState.dragging), _classnames))
         };
@@ -38,10 +40,22 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
           var state = view.state;
           var resizeHandlePos =
           // we're setting `resizeHandlePos` via command in unit tests
-          (0, _pluginFactory.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event);
-          var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+          (0, _pluginFactory2.getPluginState)(state).resizeHandlePos || (0, _utils.getResizeCellPos)(view, event);
+          var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
             dragging = _getPluginState.dragging;
-          if (resizeHandlePos !== null && !dragging) {
+          var isColumnKeyboardResizeStarted = false;
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
+            /*
+              We need to start listening mouse events if column resize started from keyboard.
+              This will allow continue resizing via mouse
+            */
+            var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+              isKeyboardResize = _getTablePluginState.isKeyboardResize;
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;

package/dist/cjs/reducer.js

@@ -64,8 +64,9 @@ var _default = exports.default = function _default(pluginState, action) {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined
       });
+    case 'START_KEYBOARD_COLUMN_RESIZE':
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip) {
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip && action.data.isKeyboardResize === pluginState.isKeyboardResize) {
         return pluginState;
       }
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
@@ -84,6 +85,7 @@ var _default = exports.default = function _default(pluginState, action) {
         resizeHandleRowIndex: resizeHandleRowIndex !== null && resizeHandleRowIndex !== void 0 ? resizeHandleRowIndex : pluginState.resizeHandleRowIndex,
         resizeHandleIncludeTooltip: resizeHandleIncludeTooltip !== null && resizeHandleIncludeTooltip !== void 0 ? resizeHandleIncludeTooltip : pluginState.resizeHandleIncludeTooltip
       });
+    case 'STOP_KEYBOARD_COLUMN_RESIZE':
     case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
       if (!pluginState.isResizeHandleWidgetAdded) {
         return pluginState;
@@ -91,7 +93,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false
+        isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined
       });
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

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

@@ -2,24 +2,59 @@ 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';
+const getTablePluginCommand = (actionPayload, originalTr) => {
+  return createCommand(() => actionPayload, tr => (originalTr || tr).setMeta('addToHistory', false));
+};
 const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHandlePos) => (state, dispatch) => {
-  addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
-  // Currently only 'right' position is used in showResizeHandleLine
-  showResizeHandleLine({
-    left: 0,
+  let customTr = state.tr;
+  const {
+    pluginConfig: {
+      allowColumnResizing
+    },
+    getIntl
+  } = getPluginState(state);
+  const fakeDispatch = tr => {
+    customTr = tr;
+  };
+  if (!allowColumnResizing) {
+    return false;
+  }
+  const decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl)({
+    tr: customTr,
+    decorationSet: getDecorations(state)
+  });
+  const 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;
 };
 export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
@@ -32,32 +67,19 @@ export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const cell = findCellClosestToPos(selection.$from);
   if (selectionRect && cell && view) {
-    const cellAttrs = cell.node.attrs;
-    const 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 const activateNextResizeArea = direction => (state, dispatch) => {
+export const activateNextResizeArea = direction => (state, dispatch, view) => {
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
   const {
-    resizeHandlePos,
-    dragging
+    resizeHandlePos
   } = getTableResizingPluginState(state) || {};
   // If No resizing has initiated, skip to regular handler
-  if (!resizeHandlePos || !dragging) {
+  if (!resizeHandlePos) {
     return false;
   }
   const {
@@ -84,30 +106,34 @@ export const activateNextResizeArea = direction => (state, dispatch) => {
     // we are somewhere in between the side columns of the table
     const offset = $nextCell.pos - $nextCell.start(-1);
     const 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) {
       const lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
       const $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) {
       const firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
       const $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 const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (state, dispatch, view) => {
+  let customTr = state.tr;
+  const fakeDispatch = tr => {
+    customTr = tr;
+  };
   if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     return false;
   }
   const {
-    resizeHandlePos,
-    dragging
+    resizeHandlePos
   } = getTableResizingPluginState(state);
-  if (!view || !resizeHandlePos || !dragging) {
+  const cell = findCellClosestToPos(state.selection.$from);
+  if (!view || !resizeHandlePos || !cell) {
     return false;
   }
   const $cell = state.doc.resolve(resizeHandlePos);
@@ -120,6 +146,17 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (s
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
+  const cellAttrs = cell === null || cell === void 0 ? void 0 : cell.node.attrs;
+  const 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);
   const maxSize = getTableMaxWidth({
     table: originalTable,
     tableStart: tableStartPosition,
@@ -141,9 +178,37 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (s
   // only selected (or selected - 1) columns should be distributed
   const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
   const newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
-  const tr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(state.tr);
+  customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
   if (dispatch) {
-    dispatch(tr);
+    dispatch(customTr);
   }
   return true;
+};
+export const stopKeyboardColumnResizing = originalTr => (state, dispatch) => {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  let customTr = originalTr || state.tr;
+  const fakeDispatch = tr => {
+    customTr = tr;
+  };
+  const decorationWithoutWidget = clearColumnResizingDecorations()({
+    tr: customTr,
+    decorationSet: getDecorations(state)
+  });
+  const 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'
+  }, () => customTr.setMeta('scrollIntoView', false))(state, fakeDispatch);
+  if (dispatch) {
+    dispatch(customTr);
+    return true;
+  }
+  return false;
 };

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

@@ -6,23 +6,21 @@ 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';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
-export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch) => {
+export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    var _getResizePluginState;
-    const isColumnResizing = !!((_getResizePluginState = getResizePluginState(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+    var _getPluginState;
+    const isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
     if (isColumnResizing) {
-      tableResizingPluginCreateCommand({
-        type: 'STOP_RESIZING'
-      }, originalTr => (state.tr || originalTr).setMeta('scrollIntoView', false))(state, dispatch);
-      hideResizeHandleLine()(state, dispatch);
+      stopKeyboardColumnResizing()(state, dispatch, view);
+      return true;
     }
   }
   const map = TableMap.get(table.node);

package/dist/es2019/commands/misc.js

@@ -423,7 +423,7 @@ export const showInsertRowButton = rowIndex => createCommand(_ => rowIndex > -1
 export const hideInsertColumnOrRowButton = () => createCommand({
   type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON'
 }, tr => tr.setMeta('addToHistory', false));
-export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip) => createCommand(state => {
+export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip, isKeyboardResize) => createCommand(state => {
   const tableNode = findTable(state.selection);
   const {
     pluginConfig: {
@@ -443,7 +443,8 @@ export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip
       }),
       resizeHandleRowIndex: rowIndex,
       resizeHandleColumnIndex: columnIndex,
-      resizeHandleIncludeTooltip: includeTooltip
+      resizeHandleIncludeTooltip: includeTooltip,
+      isKeyboardResize: isKeyboardResize || false
     }
   };
 }, tr => tr.setMeta('addToHistory', false));

package/dist/es2019/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 let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -179,8 +179,8 @@ const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) =
     } = selection;
     let isColumnResizing = false;
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getResizePluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+      const 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
@@ -211,8 +211,8 @@ const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch)
     } = selection;
     let isColumnResizing = false;
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getResizePluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+      const 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/es2019/event-handlers.js

@@ -4,6 +4,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';
@@ -164,7 +165,18 @@ export const handleMouseOut = (view, mouseEvent) => {
       state,
       dispatch
     } = view;
-    return hideResizeHandleLine()(state, dispatch);
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const {
+        isKeyboardResize
+      } = getPluginState(state);
+      if (isKeyboardResize) {
+        // no need to hide decoration if column resizing started by keyboard
+        return false;
+      }
+      return hideResizeHandleLine()(state, dispatch);
+    } else {
+      return hideResizeHandleLine()(state, dispatch);
+    }
   }
   return false;
 };
@@ -265,16 +277,18 @@ export const handleMouseMove = (view, event, elementContentRects) => {
         resizeHandleColumnIndex,
         resizeHandleRowIndex
       } = getPluginState(state);
+      const isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? getPluginState(state).isKeyboardResize : false;
       const tableCell = closestElement(element, 'td, th');
       const cellStartPosition = view.posAtDOM(tableCell, 0);
       const rect = findCellRectClosestToPos(state.doc.resolve(cellStartPosition));
       if (rect) {
         const columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
         const rowIndexTarget = rect.top;
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
           target: element,
           columnEndIndexTarget
-        })) {
+        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+        ) {
           return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(state, dispatch);
         }
       }

package/dist/es2019/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';
@@ -48,6 +48,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);
 }

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

@@ -4,7 +4,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
+import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
@@ -91,7 +95,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       const domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: view => {
+        update: (view, prevState) => {
           const {
             state,
             dispatch
@@ -106,6 +110,28 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            const tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              const pluginPrevState = getPluginState(prevState);
+              const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                const 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) {
+                  const oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
+                  const newRowsNumber = TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    stopKeyboardColumnResizing()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  stopKeyboardColumnResizing()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
@@ -208,10 +234,20 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         const maybeTr = closestElement(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: ({
-        state,
-        dispatch
-      }, _from, _to, text) => {
+      handleTextInput: (view, _from, _to, text) => {
+        const {
+          state,
+          dispatch
+        } = view;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          const {
+            isKeyboardResize
+          } = getPluginState(state);
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);