@atlaskit/editor-plugin-table 4.1.1 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 4.2.1
+
+### Patch Changes
+
+- [#40795](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40795) [`fec7aa5c761`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fec7aa5c761) - [ux] Fix distribute column resize will not been override when undefined
+
+## 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

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/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,10 +4,10 @@ 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");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -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);
@@ -69,7 +76,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
           var cell = table.nodeAt(pos);
           if (!seen[pos] && cell) {
             if (updatedCellsAttrs[pos]) {
-              tr.step(new _steps.SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+              tr.step(new _transform.AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
             }
             seen[pos] = true;
           }
@@ -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/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)) {

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

@@ -1,7 +1,7 @@
-import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { TableMap, tableNewColumnMinWidth } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
@@ -9,6 +9,14 @@ import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { insertColumnButtonOffset } from '../ui/common-styles';
+
+/**
+ * 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
+ */
 export const updateColumnWidths = (resizeState, table, start) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {};
@@ -61,7 +69,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
         const cell = table.nodeAt(pos);
         if (!seen[pos] && cell) {
           if (updatedCellsAttrs[pos]) {
-            tr.step(new SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+            tr.step(new AttrStep(pos + start, 'colwidth', updatedCellsAttrs[pos].colwidth));
           }
           seen[pos] = true;
         }
@@ -112,8 +120,94 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = getEditorContainerWidth => (table, view) => tr => {
-  var _tableRef$parentEleme;
+export const rescaleColumnsNew = () => (table, view) => tr => {
+  var _tableRef$parentEleme, _tableRef$parentEleme2;
+  if (!view) {
+    return tr;
+  }
+  const newTable = tr.doc.nodeAt(table.pos);
+  const domAtPos = view.domAtPos.bind(view);
+  const maybeTable = domAtPos(table.start).node;
+  const tableRef = maybeTable.closest('table');
+  if (!tableRef || !newTable) {
+    return tr;
+  }
+  const isResized = hasTableBeenResized(table.node);
+  // get current table info
+  const 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: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset - 1,
+    isResized
+  };
+
+  // determine the new table, based on new width
+  const newTableInfo = {
+    noOfColumns: TableMap.get(newTable).width
+  };
+  if (!newTableInfo.noOfColumns || newTableInfo.noOfColumns <= 0) {
+    return tr;
+  }
+  const 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 > tableCellMinWidth) {
+    return tr;
+  }
+  const 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 <= tableCellMinWidth || previousTableInfo.isResized && isMinCellWidthTable(table.node)) {
+    const widths = new Array(newTableInfo.noOfColumns).fill(tableCellMinWidth);
+    const cols = widths.map((_, index) => ({
+      width: tableCellMinWidth,
+      minWidth: tableCellMinWidth,
+      index
+    }));
+    const minWidthResizeState = {
+      cols,
+      widths,
+      maxSize: previousTableInfo.possibleMaxWidth,
+      tableWidth: previousTableInfo.width,
+      overflow: wasTableInOverflow
+    };
+    return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+  }
+  let resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    table: table.node,
+    start: table.start,
+    tableRef,
+    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 = 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
+ */
+export const rescaleColumnsOld = getEditorContainerWidth => (table, view) => tr => {
+  var _tableRef$parentEleme3;
   if (!view) {
     return tr;
   }
@@ -138,7 +232,7 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     getEditorContainerWidth
   });
   const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
-  let tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0;
+  let tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
   tableMaxWidth -= insertColumnButtonOffset;
   const newTableMap = TableMap.get(newTable);
   const noOfColumns = newTableMap.width;
@@ -190,4 +284,10 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     resizeState = scaleTableTo(resizeState, maxSize);
   }
   return updateColumnWidths(resizeState, table.node, table.start)(tr);
+};
+export const rescaleColumns = getEditorContainerWidth => {
+  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
+    return rescaleColumnsNew();
+  }
+  return rescaleColumnsOld(getEditorContainerWidth);
 };

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

@@ -3,7 +3,9 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { META_KEYS } from '../pm-plugins/table-analytics';
+import { rescaleColumns } from './column-width';
 import { splitCellsInColumns } from './split';
 const deleteColumnsCustomStep = rect => tr => {
   const table = findTable(tr.selection);
@@ -191,12 +193,21 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowAddColumnCustomStep = false) => tr => {
-  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+export const deleteColumns = (rect, allowCustomStep, view) => tr => {
+  let updatedTr = tr;
+  updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
   });
-  if (allowAddColumnCustomStep) {
-    return deleteColumnsCustomStep(rect)(tr);
+  if (allowCustomStep) {
+    updatedTr = deleteColumnsCustomStep(rect)(updatedTr);
+  } else {
+    updatedTr = deleteColumnsLegacy(rect)(updatedTr);
+  }
+  const table = findTable(updatedTr.selection);
+  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
+    if (table) {
+      updatedTr = rescaleColumns()(table, view)(updatedTr);
+    }
   }
-  return deleteColumnsLegacy(rect)(tr);
+  return updatedTr;
 };

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

@@ -300,7 +300,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'delete_column':
-          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
+          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'delete_row':

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

@@ -108,7 +108,7 @@ class FloatingDeleteButton extends Component {
         switch (this.state.selectionType) {
           case 'column':
             {
-              deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(state, dispatch);
+              deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(state, dispatch, this.props.editorView);
               return;
             }
           case 'row':

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

@@ -169,7 +169,6 @@ const tableWrapperStyles = () => {
         position: relative;
 
         > table[data-number-column='true'] {
-          margin-left: 1px;
           width: calc(100% - 1px);
         }
       }

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

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