@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -5,18 +5,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _utils = require("@atlaskit/editor-common/utils");
+var _editorPalette = require("@atlaskit/editor-palette");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
+var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _commands = require("../../commands");
+var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _commands2 = require("../../pm-plugins/drag-and-drop/commands");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
-var _utils2 = require("../../utils");
+var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
+var _types = require("../../types");
+var _utils3 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
+var _styles2 = require("./styles");
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
 var groupedDragMenuConfig = [['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']];
@@ -39,15 +54,14 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? (0, _react.jsx)("div", {
+      elemBefore: item.icon ? (0, _react2.jsx)("div", {
         style: {
-          marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, (0, _react.jsx)(item.icon, {
+      }, (0, _react2.jsx)(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? (0, _react.jsx)("div", {
+      elemAfter: item.keymap ? (0, _react2.jsx)("div", {
         css: _shortcut.shortcutStyle
       }, item.keymap) : undefined
     });
@@ -65,6 +79,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
   };
 };
 var DragMenu = exports.DragMenu = function DragMenu(_ref) {
+  var _pluginConfig$allowBa;
   var _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     index = _ref.index,
@@ -77,23 +92,136 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    pluginConfig = _ref.pluginConfig;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
-  var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
-  var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
+  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSubmenuOpen = _useState2[0],
+    setIsSubmenuOpen = _useState2[1];
+  var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
+  var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var hasMergedCellsInTable = (0, _utils2.getMergedCellsPositions)(state.tr).length > 0;
+  var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
+  var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
+  var handleSubMenuRef = function handleSubMenuRef(ref) {
+    var parent = (0, _utils.closestElement)(editorView.dom, '.fabric-editor-popup-scroll-parent');
+    if (!(parent && ref)) {
+      return;
+    }
+    var boundariesRect = parent.getBoundingClientRect();
+    var rect = ref.getBoundingClientRect();
+    if (rect.left + rect.width > boundariesRect.width) {
+      ref.style.left = "-".concat(rect.width, "px");
+    }
+  };
+  var setColor = function setColor(color) {
+    var _getTablePluginState = (0, _pluginFactory2.getPluginState)(editorView.state),
+      targetCellPosition = _getTablePluginState.targetCellPosition;
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
+    closeMenu();
+    setIsSubmenuOpen(false);
+  };
+  var createBackgroundColorMenuItem = function createBackgroundColorMenuItem() {
+    var _node$attrs;
+    var _getTablePluginState2 = (0, _pluginFactory2.getPluginState)(editorView.state),
+      targetCellPosition = _getTablePluginState2.targetCellPosition;
+    var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
+    var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    return {
+      content: 'Background color',
+      value: {
+        name: 'background'
+      },
+      elemBefore: (0, _react2.jsx)(_backgroundColor.default, {
+        label: 'background color',
+        size: "medium"
+      }),
+      elemAfter: (0, _react2.jsx)("div", {
+        className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
+        css: _styles2.dragMenuBackgroundColorStyles
+      }, (0, _react2.jsx)("div", {
+        css: (0, _styles2.cellColourPreviewStyles)(background),
+        className: _types.TableCssClassName.DRAG_SUBMENU_ICON
+      }), isSubmenuOpen && (0, _react2.jsx)("div", {
+        className: _types.TableCssClassName.DRAG_SUBMENU,
+        ref: handleSubMenuRef
+      }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+        cols: 7,
+        onClick: setColor,
+        selectedColor: background,
+        paletteOptions: {
+          palette: _uiColor.cellBackgroundColorPalette,
+          paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
+          hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
+        }
+      })))
+    };
+  };
+  var toggleHeaderColumn = function toggleHeaderColumn() {
+    (0, _commandsWithAnalytics.toggleHeaderColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+  };
+  var toggleHeaderRow = function toggleHeaderRow() {
+    (0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+  };
+  var toggleRowNumbers = function toggleRowNumbers() {
+    (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+  };
+  var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
+    return direction === 'column' ? {
+      content: 'Header column',
+      value: {
+        name: 'header_column'
+      },
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _styles2.toggleStyles
+      }, (0, _react2.jsx)(_toggle.default, {
+        id: "toggle-header-column",
+        onChange: toggleHeaderColumn,
+        isChecked: (0, _utils3.checkIfHeaderColumnEnabled)(selection)
+      }))
+    } : {
+      content: 'Header row',
+      value: {
+        name: 'header_row'
+      },
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _styles2.toggleStyles
+      }, (0, _react2.jsx)(_toggle.default, {
+        id: "toggle-header-row",
+        onChange: toggleHeaderRow,
+        isChecked: (0, _utils3.checkIfHeaderRowEnabled)(selection)
+      }))
+    };
+  };
+  var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
+    return {
+      content: 'Row numbers',
+      value: {
+        name: 'row_numbers'
+      },
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _styles2.toggleStyles
+      }, (0, _react2.jsx)(_toggle.default, {
+        id: "toggle-row-numbers",
+        onChange: toggleRowNumbers,
+        isChecked: (0, _utils3.checkIfNumberColumnEnabled)(selection)
+      }))
+    };
+  };
 
   /**
    * This function is to check if the menu should be closed or not.
-   * As when continously clicking on drag handle on different rows/columns,
+   * As when continously clicking on tyle handle on different rows/columns,
    * should open the menu corresponding to the position of the drag handle.
    * @returns true when the menu should be closed, false otherwise
    */
@@ -123,18 +251,42 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     var _menuCallback$item$va;
     var item = _ref2.item;
     (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
-    closeMenu();
+    switch (item.value.name) {
+      case 'header_column':
+        toggleHeaderColumn();
+        break;
+      case 'header_row':
+        toggleHeaderRow();
+        break;
+      case 'row_numbers':
+        toggleRowNumbers();
+        break;
+      default:
+        break;
+    }
+    if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
+      closeMenu();
+    }
   };
   var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
     var _item$value$name;
     var item = _ref3.item;
-    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+    if (!selectionRect) {
       return;
     }
-    (item.value.name === 'delete_column' ? (0, _commands.hoverColumns)((0, _utils2.getSelectedColumnIndexes)(selectionRect), true) : (0, _commands.hoverRows)((0, _utils2.getSelectedRowIndexes)(selectionRect), true))(state, dispatch);
+    if (item.value.name === 'background' && !isSubmenuOpen) {
+      setIsSubmenuOpen(true);
+    }
+    if (!((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+      return;
+    }
+    (item.value.name === 'delete_column' ? (0, _commands.hoverColumns)((0, _utils3.getSelectedColumnIndexes)(selectionRect), true) : (0, _commands.hoverRows)((0, _utils3.getSelectedRowIndexes)(selectionRect), true))(state, dispatch);
   };
   var handleItemMouseLeave = function handleItemMouseLeave(_ref4) {
     var item = _ref4.item;
+    if (item.value.name === 'background' && isSubmenuOpen) {
+      setIsSubmenuOpen(false);
+    }
     if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
       (0, _commands.clearHoverSelection)()(state, dispatch);
     }
@@ -142,7 +294,25 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   if (!menuItems) {
     return null;
   }
-  return (0, _react.jsx)(_uiMenu.DropdownMenu, {
+  if (allowBackgroundColor && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling')) {
+    menuItems[0].items.unshift(createBackgroundColorMenuItem());
+  }
+
+  // If first row, add toggle for Hearder row, default is true
+  // If first column, add toggle for Header column, default is false
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+    menuItems.push({
+      items: [createhHeaderRowColumnMenuItem(direction)]
+    });
+  }
+
+  // All rows, add toggle for numbered rows, default is false
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+    index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
+      items: [createRowNumbersMenuItem()]
+    });
+  }
+  return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

package/dist/cjs/ui/FloatingDragMenu/index.js

@@ -24,7 +24,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    stickyHeaders = _ref.stickyHeaders;
+    stickyHeaders = _ref.stickyHeaders,
+    pluginConfig = _ref.pluginConfig;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -62,7 +63,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     canDrag: canDrag,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    pluginConfig: pluginConfig
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/cjs/ui/FloatingDragMenu/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _colors = require("@atlaskit/theme/colors");
+var _types = require("../../types");
+var _consts = require("../consts");
+var _templateObject, _templateObject2, _templateObject3;
+var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
+var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -153,7 +153,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
-    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
         gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
@@ -165,7 +165,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": 'table-floating-column-control'
+      "data-testid": "table-floating-column-".concat(isSelecting ? selectedColIndexes[0] : colIndex, "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -140,7 +140,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     var currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     var isSelecting = isRowsSelected && !isHover;
     var indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
-    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: type,
       style: {
         gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
@@ -150,7 +150,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": 'table-floating-row-drag-handle'
+      "data-testid": "table-floating-row-".concat(isSelecting ? selectedRowIndexes[0] : rowIndex, "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",

package/dist/cjs/ui/consts.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 /**
@@ -54,7 +55,7 @@ var resizeHandlerAreaWidth = exports.resizeHandlerAreaWidth = _types.RESIZE_HAND
 var resizeLineWidth = exports.resizeLineWidth = 2;
 var resizeHandlerZIndex = exports.resizeHandlerZIndex = columnControlsZIndex + _editorSharedStyles.akRichMediaResizeZIndex;
 var contextualMenuTriggerSize = exports.contextualMenuTriggerSize = 16;
-var contextualMenuDropdownWidth = exports.contextualMenuDropdownWidth = 180;
+var contextualMenuDropdownWidth = exports.contextualMenuDropdownWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') ? 250 : 180;
 var stickyRowZIndex = exports.stickyRowZIndex = resizeHandlerZIndex + 2;
 var stickyRowOffsetTop = exports.stickyRowOffsetTop = 8;
 var stickyHeaderBorderBottomWidth = exports.stickyHeaderBorderBottomWidth = 1;

package/dist/cjs/ui/ui-styles.js

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 var _consts = require("./consts");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 var InsertLine = function InsertLine(cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -119,6 +119,10 @@ var resizeHandle = exports.resizeHandle = function resizeHandle() {
 };
 
 // Drag and Drop: drop target insert line
+var tableCellColumnInsertLineStyles = (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n  content: ' ';\n  position: absolute;\n  height: calc(100% + ", "px);\n  width: ", "px;\n  z-index: ", ";\n"])), _styles.tableCellBorderWidth * 2, _consts.insertLineWidth, _consts.columnControlsZIndex * 2);
+var tableCellRowInsertLineStyles = (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  content: ' ';\n  position: absolute;\n  left: ", ";\n  height: ", "px;\n  width: calc(100% + ", "px);\n  z-index: ", ";\n"])), "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.columnControlsZIndex * 2);
+var insertLineActiveColor = (0, _react.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _consts.tableBorderSelectedColor);
+var insertLineInactiveColor = (0, _react.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"));
 var insertLine = exports.insertLine = function insertLine() {
-  return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
+  return (0, _react.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
 };

package/dist/cjs/utils/decoration.js

@@ -459,7 +459,7 @@ var createColumnLineResize = exports.createColumnLineResize = function createCol
     });
   }).filter(_utils.nonNullable);
 };
-var createColumnInsertLine = exports.createColumnInsertLine = function createColumnInsertLine(columnIndex, selection) {
+var createColumnInsertLine = exports.createColumnInsertLine = function createColumnInsertLine(columnIndex, selection, hasMergedCells) {
   var table = (0, _utils2.findTable)(selection);
   if (!table) {
     return [];
@@ -470,7 +470,12 @@ var createColumnInsertLine = exports.createColumnInsertLine = function createCol
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  var decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE;
+  var decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isFirstColumn ? _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE : isLastColumn ? _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE : _types.TableCssClassName.WITH_COLUMN_INSERT_LINE;
+  }
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
   }).filter(function (cellPosition, rowIndex) {
@@ -499,7 +504,7 @@ var createColumnInsertLine = exports.createColumnInsertLine = function createCol
     });
   }).filter(_utils.nonNullable);
 };
-var createRowInsertLine = exports.createRowInsertLine = function createRowInsertLine(rowIndex, selection) {
+var createRowInsertLine = exports.createRowInsertLine = function createRowInsertLine(rowIndex, selection, hasMergedCells) {
   var table = (0, _utils2.findTable)(selection);
   if (!table) {
     return [];
@@ -513,7 +518,12 @@ var createRowInsertLine = exports.createRowInsertLine = function createRowInsert
   if (!cells) {
     return [];
   }
-  var decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE : _types.TableCssClassName.WITH_ROW_INSERT_LINE;
+  var decorationClassName;
+  if (hasMergedCells) {
+    decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE : _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE;
+  } else {
+    decorationClassName = isLastRow ? _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE : _types.TableCssClassName.WITH_ROW_INSERT_LINE;
+  }
   return cells.map(function (cell, index) {
     if (!cell || !cell.node) {
       return;

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

@@ -0,0 +1,149 @@
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/src/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
+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';
+const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHandlePos) => (state, dispatch) => {
+  addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
+  // Currently only 'right' position is used in showResizeHandleLine
+  showResizeHandleLine({
+    left: 0,
+    right: columnIndex
+  })(state, dispatch);
+  tableResizingPluginCreateCommand({
+    type: 'SET_RESIZE_HANDLE_POSITION',
+    data: {
+      resizeHandlePos: nextResizeHandlePos
+    }
+  })(state, dispatch);
+  return false;
+};
+export const initiateKeyboardColumnResizing = (state, dispatch, view) => {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  const {
+    selection
+  } = state;
+  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 false;
+};
+export const activateNextResizeArea = direction => (state, dispatch) => {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  const {
+    resizeHandlePos,
+    dragging
+  } = getTableResizingPluginState(state) || {};
+  // If No resizing has initiated, skip to regular handler
+  if (!resizeHandlePos || !dragging) {
+    return false;
+  }
+  const {
+    selection
+  } = state;
+  const cell = findCellClosestToPos(selection.$from);
+  if (!cell) {
+    // cursor position may be changed by mouse to be outside of table;
+    return false;
+  }
+  const $currentCell = state.doc.resolve(resizeHandlePos);
+  if (!$currentCell) {
+    return false;
+  }
+  const tableNode = $currentCell.node(-1);
+  const closestTable = findTableClosestToPos($currentCell);
+  const tableMap = TableMap.get(tableNode);
+  if (!tableNode || !closestTable || !tableMap) {
+    return false;
+  }
+  const currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
+  const $nextCell = nextCell($currentCell, 'horiz', direction);
+  if ($nextCell) {
+    // 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);
+  } 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);
+    } 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 true;
+};
+export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (state, dispatch, view) => {
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    return false;
+  }
+  const {
+    resizeHandlePos,
+    dragging
+  } = getTableResizingPluginState(state);
+  if (!view || !resizeHandlePos || !dragging) {
+    return false;
+  }
+  const $cell = state.doc.resolve(resizeHandlePos);
+  const tableStartPosition = $cell.start(-1);
+  const originalTable = $cell.node(-1);
+  const map = TableMap.get(originalTable);
+  const domAtPos = view.domAtPos.bind(view);
+  const colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
+  let dom = domAtPos(tableStartPosition).node;
+  if (dom && dom.nodeName !== 'TABLE') {
+    dom = dom.closest('table');
+  }
+  const maxSize = getTableMaxWidth({
+    table: originalTable,
+    tableStart: tableStartPosition,
+    state,
+    layout: originalTable.attrs.layout,
+    getEditorContainerWidth
+  });
+  const initialResizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize,
+    table: originalTable,
+    tableRef: dom,
+    start: tableStartPosition,
+    domAtPos
+  });
+  updateControls()(state);
+  const selectionRect = getSelectionRect(state.selection);
+  const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
+  // 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);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};