@atlaskit/editor-plugin-table 4.1.0 → 4.2.0

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 { 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 = {};
@@ -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;
+  };
+};

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

@@ -7,6 +7,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';
@@ -14,10 +15,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';
 var TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,
   wide: TABLE_BREAKOUT.WIDE,
@@ -251,12 +251,7 @@ export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(edit
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(function (state, dispatch) {
-      if (dispatch) {
-        dispatch(deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr));
-      }
-      return true;
-    });
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect));
   };
 };
 var getTableDeletedAnalytics = function getTableDeletedAnalytics(selection, inputMethod) {

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

@@ -250,7 +250,7 @@ export function handleTripleClick(view, pos) {
   }
   return false;
 }
-export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI) {
+export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -293,7 +293,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
               isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
             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/esm/plugins/table/nodeviews/TableContainer.js

@@ -34,7 +34,7 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-test-id": "table-container"
   }, children);
 });
-export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
+export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -84,7 +84,6 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     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
@@ -93,10 +92,13 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     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 (!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]);
@@ -120,7 +122,9 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   var 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);
+    }
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   var tableResizerProps = {
@@ -142,7 +146,21 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       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 var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     className: className,
     node: node
   }, children)));
-};
+});
 export var TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
     node = _ref3.node,

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

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

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 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';
@@ -12,6 +12,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 var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
@@ -114,10 +122,102 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+export var rescaleColumnsNew = function rescaleColumnsNew() {
   return function (table, view) {
     return function (tr) {
-      var _tableRef$parentEleme;
+      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 = 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: 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) - insertColumnButtonOffset - 1,
+        isResized: isResized
+      };
+
+      // determine the new table, based on new width
+      var newTableInfo = {
+        noOfColumns: 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 > 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 <= tableCellMinWidth || previousTableInfo.isResized && isMinCellWidthTable(table.node)) {
+        var widths = new Array(newTableInfo.noOfColumns).fill(tableCellMinWidth);
+        var cols = widths.map(function (_, index) {
+          return {
+            width: tableCellMinWidth,
+            minWidth: 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 = getResizeState({
+        minWidth: 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 = 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 var rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
+  return function (table, view) {
+    return function (tr) {
+      var _tableRef$parentEleme3;
       if (!view) {
         return tr;
       }
@@ -140,7 +240,7 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
         getEditorContainerWidth: getEditorContainerWidth
       });
       var tableWidth = tableRef.clientWidth || 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 -= insertColumnButtonOffset;
       var newTableMap = TableMap.get(newTable);
       var noOfColumns = newTableMap.width;
@@ -196,4 +296,10 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
       return updateColumnWidths(resizeState, table.node, table.start)(tr);
     };
   };
+};
+export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
+    return rescaleColumnsNew();
+  }
+  return rescaleColumnsOld(getEditorContainerWidth);
 };

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

@@ -7,7 +7,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';
 var deleteColumnsCustomStep = function deleteColumnsCustomStep(rect) {
   return function (tr) {
@@ -203,15 +205,23 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export var deleteColumns = function deleteColumns(rect) {
-  var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export var deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
   return function (tr) {
-    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    var 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);
+    }
+    var 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/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -298,7 +298,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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/esm/plugins/table/ui/FloatingDeleteButton/index.js

@@ -114,7 +114,7 @@ var FloatingDeleteButton = /*#__PURE__*/function (_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/esm/plugins/table/ui/common-styles.js

@@ -49,7 +49,7 @@ var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeader
 };
 var tableWrapperStyles = function tableWrapperStyles() {
   if (getBooleanFF('platform.editor.custom-table-width')) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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    "])), ClassName.TABLE_NODE_WRAPPER);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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    "])), ClassName.TABLE_NODE_WRAPPER);
   } else {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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    "])), ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
   }

package/dist/types/plugins/table/commands/delete.d.ts

@@ -0,0 +1,3 @@
+import type { Command } from '@atlaskit/editor-common/types';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+export declare const deleteColumnsCommand: (rect: Rect) => Command;

package/dist/types/plugins/table/event-handlers.d.ts

@@ -11,5 +11,5 @@ export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => bo
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
-export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI) => Transaction;
+export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView) => Transaction;
 export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -8,7 +8,7 @@ type InnerContainerProps = {
     className: string;
     style?: {
         width: number | 'inherit';
-        marginLeft: number | undefined;
+        marginLeft?: number;
     };
     node: PMNode;
 };
@@ -17,7 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
-    lineLength: number;
+    lineLength?: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -26,7 +26,7 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts

@@ -16,5 +16,5 @@ interface getTableMaxWidthProps {
     layout: TableLayout;
     getEditorContainerWidth: GetEditorContainerWidth;
 }
-export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => any;
+export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;
 export {};