@atlaskit/editor-plugin-table 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 4.2.0
+
+### Minor Changes
+
+- [#40780](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40780) [`981ad6038e9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/981ad6038e9) - Fixes a bug when deleting a table column will cause column resizing to become unresponsive and lag. Delete columns operation will now update the table column widths to avoid this, under a new feature flag.
+
+## 4.1.1
+
+### Patch Changes
+
+- [#41220](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41220) [`9e66f4b0610`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9e66f4b0610) - Add a new feature flag (platform.editor.table.update-table-resizer-styles) that uses display: flex; to center resizable tables in full page editor. This replaces the current method which uses margin to calculate an offset
+- Updated dependencies
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/commands/delete.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deleteColumnsCommand = void 0;
+var _deleteColumns = require("../transforms/delete-columns");
+var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
+var deleteColumnsCommand = exports.deleteColumnsCommand = function deleteColumnsCommand(rect) {
+  return function (state, dispatch, view) {
+    var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+};

package/dist/cjs/plugins/table/commands-with-analytics.js

@@ -12,6 +12,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _clear = require("./commands/clear");
 var _collapse = require("./commands/collapse");
+var _delete = require("./commands/delete");
 var _insert = require("./commands/insert");
 var _misc = require("./commands/misc");
 var _sort = require("./commands/sort");
@@ -22,7 +23,6 @@ var _commands = require("./pm-plugins/table-resizing/commands");
 var _transforms = require("./transforms");
 var _utils2 = require("./utils");
 var _analytics2 = require("./utils/analytics");
-var _getAllowAddColumnCustomStep = require("./utils/get-allow-add-column-custom-step");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TABLE_BREAKOUT_NAME_MAPPING = {
@@ -258,12 +258,7 @@ var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function d
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(function (state, dispatch) {
-      if (dispatch) {
-        dispatch((0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state))(state.tr));
-      }
-      return true;
-    });
+    })(editorAnalyticsAPI)((0, _delete.deleteColumnsCommand)(rect));
   };
 };
 var getTableDeletedAnalytics = function getTableDeletedAnalytics(selection, inputMethod) {

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

@@ -259,7 +259,7 @@ function handleTripleClick(view, pos) {
   }
   return false;
 }
-var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI) {
+var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof _cellSelection.CellSelection) {
@@ -302,7 +302,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
               isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState))(tr);
+            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView)(tr);
           }
         }
       }

package/dist/cjs/plugins/table/nodeviews/TableContainer.js

@@ -44,7 +44,7 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     "data-test-id": "table-container"
   }, children);
 });
-var ResizableTableContainer = exports.ResizableTableContainer = function ResizableTableContainer(_ref2) {
+var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -94,7 +94,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     if (!containerRef.current) {
       return;
     }
-    var marginLeft = getMarginLeft(lineLength, width);
 
     // make sure during resizing
     // the pm-table-resizer-container width is the same as its child div resizer-item
@@ -103,10 +102,13 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     if (containerRef.current.style.width !== "".concat(width, "px")) {
       containerRef.current.style.width = "".concat(width, "px");
     }
-    if (marginLeftRef.current !== marginLeft) {
-      marginLeftRef.current = marginLeft;
-      if (Number.isFinite(marginLeft)) {
-        containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles')) {
+      var marginLeft = getMarginLeft(lineLength, width);
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+        }
       }
     }
   }, [lineLength]);
@@ -130,7 +132,9 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles')) {
+      marginLeftRef.current = getMarginLeft(lineLength, width);
+    }
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   var tableResizerProps = {
@@ -152,7 +156,21 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
       onResizeStop: onResizeStop
     });
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: tableWidthRef.current
+    },
+    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)))) : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
       width: tableWidthRef.current
@@ -163,7 +181,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     className: className,
     node: node
   }, children)));
-};
+});
 var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
     node = _ref3.node,

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

@@ -100,7 +100,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       }
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        var updatedTr = (0, _eventHandlers.handleCut)(tr, oldState, newState, editorAnalyticsAPI);
+        var updatedTr = (0, _eventHandlers.handleCut)(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined);
         return (0, _transforms2.fixTables)(updatedTr) || updatedTr;
       }
       if (transactions.find(function (tr) {

package/dist/cjs/plugins/table/transforms/column-width.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateColumnWidths = exports.rescaleColumns = void 0;
+exports.updateColumnWidths = exports.rescaleColumnsOld = exports.rescaleColumnsNew = exports.rescaleColumns = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -19,6 +19,13 @@ var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _commonStyles = require("../ui/common-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
+ * @param resizeState
+ * @param table
+ * @param start
+ * @returns
+ */
 var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = _tableMap.TableMap.get(table);
@@ -121,10 +128,102 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew() {
+  return function (table, view) {
+    return function (tr) {
+      var _tableRef$parentEleme, _tableRef$parentEleme2;
+      if (!view) {
+        return tr;
+      }
+      var newTable = tr.doc.nodeAt(table.pos);
+      var domAtPos = view.domAtPos.bind(view);
+      var maybeTable = domAtPos(table.start).node;
+      var tableRef = maybeTable.closest('table');
+      if (!tableRef || !newTable) {
+        return tr;
+      }
+      var isResized = (0, _utils.hasTableBeenResized)(table.node);
+      // get current table info
+      var previousTableInfo = {
+        // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
+        width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
+        /** the is the width the table can reach before overflowing */
+        possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset - 1,
+        isResized: isResized
+      };
+
+      // determine the new table, based on new width
+      var newTableInfo = {
+        noOfColumns: _tableMap.TableMap.get(newTable).width
+      };
+      if (!newTableInfo.noOfColumns || newTableInfo.noOfColumns <= 0) {
+        return tr;
+      }
+      var averageColumnWidth = previousTableInfo.width / newTableInfo.noOfColumns;
+
+      // If the table has not been resized (i.e. all columns will have the same width) and every column width is bigger than the minimum column width
+      // we skip updating the size of columns here.
+      if (!previousTableInfo.isResized && averageColumnWidth > _styles.tableCellMinWidth) {
+        return tr;
+      }
+      var wasTableInOverflow = previousTableInfo.width > previousTableInfo.possibleMaxWidth;
+
+      // If the table has not been resized, and each column width is smaller than the minimum column width
+      // Or if the table has been resized, but each column width is either 48px or null
+      // we update the table to have 48px for each column
+      if (!previousTableInfo.isResized && averageColumnWidth <= _styles.tableCellMinWidth || previousTableInfo.isResized && (0, _colgroup.isMinCellWidthTable)(table.node)) {
+        var widths = new Array(newTableInfo.noOfColumns).fill(_styles.tableCellMinWidth);
+        var cols = widths.map(function (_, index) {
+          return {
+            width: _styles.tableCellMinWidth,
+            minWidth: _styles.tableCellMinWidth,
+            index: index
+          };
+        });
+        var minWidthResizeState = {
+          cols: cols,
+          widths: widths,
+          maxSize: previousTableInfo.possibleMaxWidth,
+          tableWidth: previousTableInfo.width,
+          overflow: wasTableInOverflow
+        };
+        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+      }
+      var resizeState = (0, _resizeState.getResizeState)({
+        minWidth: _styles.tableCellMinWidth,
+        table: table.node,
+        start: table.start,
+        tableRef: tableRef,
+        domAtPos: domAtPos,
+        maxSize: previousTableInfo.possibleMaxWidth
+      });
+
+      // Two scenarios that require scaling:
+      //   1. If the new table width will result in the table going into overflow
+      //      we resize the cells to avoid it (e.g. adding a column)
+      //   2. If the new table width will be shorter than the parent width, scale columns to fit parent
+      if (!wasTableInOverflow && resizeState.overflow || resizeState.tableWidth < resizeState.maxSize) {
+        resizeState = (0, _scaleTable.scaleTableTo)(resizeState, previousTableInfo.possibleMaxWidth);
+      }
+      return updateColumnWidths(resizeState, table.node, table.start)(tr);
+    };
+  };
+};
+
+/**
+ * This function is called when user inserts/deletes a column in a table to;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
+ * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @param view
+ * @returns Updated transaction with rescaled columns for a given table
+ */
+var rescaleColumnsOld = exports.rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
   return function (table, view) {
     return function (tr) {
-      var _tableRef$parentEleme;
+      var _tableRef$parentEleme3;
       if (!view) {
         return tr;
       }
@@ -147,7 +246,7 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorC
         getEditorContainerWidth: getEditorContainerWidth
       });
       var tableWidth = tableRef.clientWidth || _editorSharedStyles.akEditorDefaultLayoutWidth;
-      var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0;
+      var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
       tableMaxWidth -= _commonStyles.insertColumnButtonOffset;
       var newTableMap = _tableMap.TableMap.get(newTable);
       var noOfColumns = newTableMap.width;
@@ -192,7 +291,7 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorC
         domAtPos: domAtPos,
         maxSize: maxSize
       });
-      var previousTableWidth = resizeState.tableWidth - _styles.tableNewColumnMinWidth;
+      var previousTableWidth = resizeState.tableWidth - _tableMap.tableNewColumnMinWidth;
       var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
 
       // If the new table width will result in the table going into an overflow state
@@ -203,4 +302,10 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorC
       return updateColumnWidths(resizeState, table.node, table.start)(tr);
     };
   };
+};
+var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
+    return rescaleColumnsNew();
+  }
+  return rescaleColumnsOld(getEditorContainerWidth);
 };

package/dist/cjs/plugins/table/transforms/delete-columns.js

@@ -12,7 +12,9 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
+var _columnWidth = require("./column-width");
 var _split = require("./split");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -210,15 +212,23 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-var deleteColumns = exports.deleteColumns = function deleteColumns(rect) {
-  var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
   return function (tr) {
-    tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+    var updatedTr = tr;
+    updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
     });
-    if (allowAddColumnCustomStep) {
-      return deleteColumnsCustomStep(rect)(tr);
+    if (allowCustomStep) {
+      updatedTr = deleteColumnsCustomStep(rect)(updatedTr);
+    } else {
+      updatedTr = deleteColumnsLegacy(rect)(updatedTr);
+    }
+    var table = (0, _utils.findTable)(updatedTr.selection);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
+      if (table) {
+        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
+      }
     }
-    return deleteColumnsLegacy(rect)(tr);
+    return updatedTr;
   };
 };

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -304,7 +304,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'delete_column':
-          (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
+          (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'delete_row':

package/dist/cjs/plugins/table/ui/FloatingDeleteButton/index.js

@@ -125,7 +125,7 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
         switch (_this.state.selectionType) {
           case 'column':
             {
-              (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.BUTTON, rect)(state, dispatch);
+              (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.BUTTON, rect)(state, dispatch, _this.props.editorView);
               return;
             }
           case 'row':

package/dist/cjs/plugins/table/ui/common-styles.js

@@ -56,7 +56,7 @@ var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeader
 };
 var tableWrapperStyles = function tableWrapperStyles() {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
-    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        padding-bottom: 0px;\n        /* fixes gap cursor height */\n        overflow: auto;\n        overflow-y: hidden;\n        position: relative;\n\n        > table[data-number-column='true'] {\n          margin-left: 1px;\n          width: calc(100% - 1px);\n        }\n      }\n    "])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        padding-bottom: 0px;\n        /* fixes gap cursor height */\n        overflow: auto;\n        overflow-y: hidden;\n        position: relative;\n\n        > table[data-number-column='true'] {\n          width: calc(100% - 1px);\n        }\n      }\n    "])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
   } else {
     return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        padding-right: ", "px;\n        margin-right: -", "px;\n        padding-bottom: 0px;\n        /* fixes gap cursor height */\n        overflow: auto;\n        overflow-y: hidden;\n        position: relative;\n      }\n    "])), _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
   }

package/dist/es2019/plugins/table/commands/delete.js

@@ -0,0 +1,10 @@
+import { deleteColumns } from '../transforms/delete-columns';
+import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
+export const deleteColumnsCommand = rect => (state, dispatch, view) => {
+  const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view)(state.tr);
+  if (dispatch) {
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -4,6 +4,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
+import { deleteColumnsCommand } from './commands/delete';
 import { insertColumn, insertRow } from './commands/insert';
 import { deleteTable, deleteTableIfSelected, setMultipleCellAttrs } from './commands/misc';
 import { sortByColumn } from './commands/sort';
@@ -11,10 +12,9 @@ import { splitCell } from './commands/split-cell';
 import { getNextLayout, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './commands/toggle';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
-import { deleteColumns, deleteRows, mergeCells } from './transforms';
+import { deleteRows, mergeCells } from './transforms';
 import { checkIfNumberColumnEnabled, getSelectedCellInfo, getSelectedTableInfo } from './utils';
 import { withEditorAnalyticsAPI } from './utils/analytics';
-import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 const TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,
   wide: TABLE_BREAKOUT.WIDE,
@@ -231,12 +231,7 @@ export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, re
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)((state, dispatch) => {
-  if (dispatch) {
-    dispatch(deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr));
-  }
-  return true;
-});
+})(editorAnalyticsAPI)(deleteColumnsCommand(rect));
 const getTableDeletedAnalytics = (selection, inputMethod) => {
   const {
     totalRowCount,

package/dist/es2019/plugins/table/event-handlers.js

@@ -263,7 +263,7 @@ export function handleTripleClick(view, pos) {
   }
   return false;
 }
-export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
+export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView) => {
   const oldSelection = oldState.tr.selection;
   let {
     tr
@@ -312,7 +312,7 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
             } = getPluginState(newState);
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState))(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
           }
         }
       }

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -32,7 +32,7 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-test-id": "table-container"
   }, children);
 });
-export const ResizableTableContainer = ({
+export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
   node,
@@ -83,7 +83,6 @@ export const ResizableTableContainer = ({
     if (!containerRef.current) {
       return;
     }
-    const marginLeft = getMarginLeft(lineLength, width);
 
     // make sure during resizing
     // the pm-table-resizer-container width is the same as its child div resizer-item
@@ -92,10 +91,13 @@ export const ResizableTableContainer = ({
     if (containerRef.current.style.width !== `${width}px`) {
       containerRef.current.style.width = `${width}px`;
     }
-    if (marginLeftRef.current !== marginLeft) {
-      marginLeftRef.current = marginLeft;
-      if (Number.isFinite(marginLeft)) {
-        containerRef.current.style.marginLeft = `${marginLeft}px`;
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      const marginLeft = getMarginLeft(lineLength, width);
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = `${marginLeft}px`;
+        }
       }
     }
   }, [lineLength]);
@@ -119,7 +121,9 @@ export const ResizableTableContainer = ({
   const width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      marginLeftRef.current = getMarginLeft(lineLength, width);
+    }
   }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   let tableResizerProps = {
@@ -142,7 +146,21 @@ export const ResizableTableContainer = ({
       onResizeStop: onResizeStop
     };
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: tableWidthRef.current
+    },
+    className: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)))) : /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
       width: tableWidthRef.current
@@ -153,7 +171,7 @@ export const ResizableTableContainer = ({
     className: className,
     node: node
   }, children)));
-};
+});
 export const TableContainer = ({
   children,
   node,

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

@@ -82,7 +82,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       }
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI);
+        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(tr => tr.docChanged)) {