@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

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

@@ -2,8 +2,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getSelectedColumnIndexes, getSelectedRowIndexes, getSelectedTableInfo } from '../../utils';
 import { withEditorAnalyticsAPI } from '../../utils/analytics';
+import { canMove, getTargetIndex } from '../../utils/drag-menu';
 import { clearDropTarget, moveSource } from './commands';
 export var clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
@@ -84,30 +85,13 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       if (selectedIndexes.length === 0) {
         return false;
       }
-
-      // const sourceIndex = selectedIndexes[0];
-      // we can move only by one row/column
-      // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-      var targetIndex = Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
-
-      // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
       var _getSelectedTableInfo3 = getSelectedTableInfo(selection),
         totalRowCount = _getSelectedTableInfo3.totalRowCount,
         totalColumnCount = _getSelectedTableInfo3.totalColumnCount;
-      var isValidTargetIndex = targetIndex < 0 ? false : isRow ? targetIndex <= totalRowCount - 1 : targetIndex <= totalColumnCount - 1;
-      if (!isValidTargetIndex) {
-        return false;
-      }
-
-      // We can move only if there are no merged cells in the source or target row/column
-      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
-      if (hasMergedCellsInSource) {
-        return false;
-      }
-      var hasMergedCellsInTarget = isRow ? hasMergedCellsInRow(targetIndex)(selection) : hasMergedCellsInColumn(targetIndex)(selection);
-      if (hasMergedCellsInTarget) {
+      if (!canMove(sourceType, direction, isRow ? totalRowCount : totalColumnCount, selection, selectionRect)) {
         return false;
       }
+      var targetIndex = getTargetIndex(selectedIndexes, direction);
       return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
     };
   };

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);
 }

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

@@ -7,7 +7,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';
@@ -99,7 +103,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       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;
@@ -110,6 +114,28 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            var tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              var pluginPrevState = 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 = TableMap.get(pluginPrevState.tableNode).height;
+                  var 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);
@@ -206,9 +232,17 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         var maybeTr = 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 (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          var _getPluginState = getPluginState(state),
+            isKeyboardResize = _getPluginState.isKeyboardResize;
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);

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

@@ -5,9 +5,11 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes } from '../../utils';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -20,6 +22,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  var _getTablePluginState = getTablePluginState(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -89,6 +93,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState = getPluginState(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
+    var _getTablePluginState2 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
@@ -101,9 +107,20 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     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 stopResizing()(state, dispatch);
+      if (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 stopKeyboardColumnResizing()(state, dispatch, view);
+        } else {
+          return stopResizing()(state, dispatch);
+        }
+      } else {
+        return stopResizing()(state, dispatch);
+      }
     }
     var tr = state.tr;
     if (dragging) {
@@ -137,7 +154,18 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           })(tr);
         }
       }
-      return stopResizing(tr)(state, dispatch);
+      if (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 stopKeyboardColumnResizing(tr)(state, dispatch, view);
+        } else {
+          return stopResizing(tr)(state, dispatch);
+        }
+      } else {
+        return stopResizing(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
@@ -147,7 +175,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState2 = getPluginState(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos))) {
+    var _getTablePluginState3 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);

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

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import classnames from 'classnames';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -34,7 +36,19 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
           getPluginState(state).resizeHandlePos || getResizeCellPos(view, event);
           var _getPluginState = getPluginState(state),
             dragging = _getPluginState.dragging;
-          if (resizeHandlePos !== null && !dragging) {
+          var isColumnKeyboardResizeStarted = false;
+          if (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 = getTablePluginState(state),
+              isKeyboardResize = _getTablePluginState.isKeyboardResize;
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;

package/dist/esm/reducer.js

@@ -57,8 +57,9 @@ export default (function (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), {}, {
@@ -77,6 +78,7 @@ export default (function (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;
@@ -84,7 +86,8 @@ export default (function (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/esm/utils/drag-menu.js

@@ -19,14 +19,36 @@ import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizi
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
+import { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
-var canDecrease = function canDecrease(index) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index > min;
+export var getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
+  return Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
 };
-var canIncrease = function canIncrease(index) {
-  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return index !== undefined && index < max;
+export var canMove = function canMove(sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) {
+  if (!selectionRect) {
+    return false;
+  }
+  var isRow = sourceType === 'table-row';
+  var selectedIndexes = isRow ? getSelectedRowIndexes(selectionRect) : getSelectedColumnIndexes(selectionRect);
+  var targetIndex = getTargetIndex(selectedIndexes, direction);
+  var isValidTargetIndex = targetIndex >= 0 && targetIndex < totalItemsOfSourceTypeCount;
+  if (!isValidTargetIndex) {
+    return false;
+  }
+
+  // We can't move column when target has merges with other columns
+  // We can't move row when target has merges with other rows
+  var hasMergedCellsInTarget = isRow ? hasMergedCellsWithRowNextToRowIndex(targetIndex, selection) : hasMergedCellsWithColumnNextToColumnIndex(targetIndex, selection);
+  if (hasMergedCellsInTarget) {
+    return false;
+  }
+
+  // Currently we can't move in any direction if there are merged cells in the source
+  var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
+  if (hasMergedCellsInSource) {
+    return false;
+  }
+  return true;
 };
 var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   var rect = getClosestSelectionRect(state);
@@ -37,6 +59,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   return false;
 };
 export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) {
+  var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -58,13 +81,12 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
+  var selection = editorView.state.selection;
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
     keymap: moveRowUp,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top);
-    },
+    canMove: canDrag && canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.top - 1;
@@ -73,10 +95,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'down',
     icon: ArrowDownIcon,
     keymap: moveRowDown,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$bottom, _tableMap$height;
-      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedRowIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.bottom;
@@ -85,9 +104,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'left',
     icon: ArrowLeftIcon,
     keymap: moveColumnLeft,
-    canMove: function canMove(selectionRect) {
-      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left);
-    },
+    canMove: canDrag && canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.left - 1;
@@ -96,10 +113,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     label: 'right',
     icon: ArrowRightIcon,
     keymap: moveColumnRight,
-    canMove: function canMove(selectionRect) {
-      var _selectionRect$right, _tableMap$width;
-      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
+    canMove: canDrag && canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: getSelectedColumnIndexes,
     getTargetIndex: function getTargetIndex(selectionRect) {
       return selectionRect.right;
@@ -184,10 +198,10 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(selectionRect),
+      disabled: !canMove,
       icon: icon,
       onClick: function onClick(state, dispatch) {
-        if (canMove(selectionRect)) {
+        if (canMove) {
           requestAnimationFrame(function () {
             moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
           });

package/dist/esm/utils/merged-cells.js

@@ -130,4 +130,69 @@ export var hasMergedCellsInBetween = function hasMergedCellsInBetween(indexes, t
       return mergedCellsInRectArr[1].includes(cell);
     });
   };
+};
+
+// Checks if any cell in the column with colIndex is merged with a cell in a column to the left or to the right of it.
+// colIndex is a logical index of the column. It starts at 0 and goes up to tableMap.width - 1.
+export var hasMergedCellsWithColumnNextToColumnIndex = function hasMergedCellsWithColumnNextToColumnIndex(colIndex, selection) {
+  var table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = TableMap.get(table.node);
+  var width = tableMap.width;
+  if (width <= 1) {
+    return false;
+  }
+  if (colIndex < 0 || colIndex > width - 1) {
+    return false;
+  }
+  var map = tableMap.map;
+  // j is an index in the tableMap.map array. tableMap.map is a flat array.
+  // Each item of this array contains a number.
+  // The number represents the position of the corresponding cell in the tableMap. It exists for each cell.
+  // If there are merged cells, their positions will be represented by the same number.
+  var isFirstColumn = colIndex === 0;
+  var isLastColumn = colIndex === width - 1;
+  for (var j = colIndex; j < map.length; j += width) {
+    if (!isFirstColumn && map[j] === map[j - 1] ||
+    // compare with a cell in the column on the left
+    !isLastColumn && map[j] === map[j + 1] // compare with a cell in the column on the right
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
+// Checks if any cell in the row with rowIndex is merged with a cell in a row above or below it.
+export var hasMergedCellsWithRowNextToRowIndex = function hasMergedCellsWithRowNextToRowIndex(rowIndex, selection) {
+  var table = findTable(selection);
+  if (!table) {
+    return false;
+  }
+  var tableMap = TableMap.get(table.node);
+  var height = tableMap.height;
+  if (height <= 1) {
+    return false;
+  }
+  if (rowIndex < 0 || rowIndex > height - 1) {
+    return false;
+  }
+  var map = tableMap.map,
+    width = tableMap.width; // map is a flat array representing position of each cell in the table.
+  var indexOfFirstCellInTheRow = rowIndex * width;
+  var indexOfLastCellInTheRow = indexOfFirstCellInTheRow + width - 1;
+  var isFirstRow = rowIndex === 0;
+  var isLastRow = rowIndex === height - 1;
+  // j is an index of a cell in a row
+  for (var j = indexOfFirstCellInTheRow; j <= indexOfLastCellInTheRow; j++) {
+    if (!isFirstRow && map[j] === map[j - width] ||
+    // compare with a cell in the row above
+    !isLastRow && map[j] === map[j + width] // compare with a cell in the row below
+    ) {
+      return true;
+    }
+  }
+  return false;
 };

package/dist/types/commands/column-resize.d.ts

@@ -1,5 +1,7 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;

package/dist/types/commands/misc.d.ts

@@ -26,7 +26,7 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
 export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {

package/dist/types/types.d.ts

@@ -74,6 +74,7 @@ export interface TablePluginState {
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
     resizeHandleIncludeTooltip?: boolean;
+    isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
@@ -134,6 +135,15 @@ export type TablePluginAction = {
         hoveredColumns: number[];
         isInDanger?: boolean;
     };
+} | {
+    type: 'START_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
+    };
 } | {
     type: 'ADD_RESIZE_HANDLE_DECORATIONS';
     data: {
@@ -141,6 +151,7 @@ export type TablePluginAction = {
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
         resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
     };
 } | {
     type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
@@ -155,6 +166,11 @@ export type TablePluginAction = {
     data: {
         decorationSet: DecorationSet;
     };
+} | {
+    type: 'STOP_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+    };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
     data: {

package/dist/types/utils/drag-menu.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
-import type { TableDirection } from '../types';
+import type { DraggableData, DraggableType, TableDirection } from '../types';
+export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
+export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;

package/dist/types/utils/merged-cells.d.ts

@@ -3,4 +3,6 @@ type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
 export {};

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -1,5 +1,7 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;

package/dist/types-ts4.5/commands/misc.d.ts

@@ -26,7 +26,7 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
 export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {

package/dist/types-ts4.5/types.d.ts

@@ -74,6 +74,7 @@ export interface TablePluginState {
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
     resizeHandleIncludeTooltip?: boolean;
+    isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
@@ -134,6 +135,15 @@ export type TablePluginAction = {
         hoveredColumns: number[];
         isInDanger?: boolean;
     };
+} | {
+    type: 'START_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
+    };
 } | {
     type: 'ADD_RESIZE_HANDLE_DECORATIONS';
     data: {
@@ -141,6 +151,7 @@ export type TablePluginAction = {
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
         resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
     };
 } | {
     type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
@@ -155,6 +166,11 @@ export type TablePluginAction = {
     data: {
         decorationSet: DecorationSet;
     };
+} | {
+    type: 'STOP_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+    };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
     data: {

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
-import type { TableDirection } from '../types';
+import type { DraggableData, DraggableType, TableDirection } from '../types';
+export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
+export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;

package/dist/types-ts4.5/utils/merged-cells.d.ts

@@ -3,4 +3,6 @@ type MergeType = 'row' | 'column';
 export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
+export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
+export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;
 export {};