@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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

@@ -20,7 +20,7 @@ var createTableWithAnalytics = function createTableWithAnalytics(editorAnalytics
     eventType: EVENT_TYPE.TRACK
   })(editorAnalyticsAPI)(createTable());
 };
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled) {
   var list = {};
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
@@ -52,11 +52,14 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+      _ref$tablePreserveWid = _ref.tablePreserveWidth,
+      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
     bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing, list);
     bindKeymapWithCommand(moveRight.common, activateNextResizeArea(1), list);
     bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth, tablePreserveWidth), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth, tablePreserveWidth), list);
     bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing(), list);
   }
   return keymap(list);

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

@@ -88,9 +88,12 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           }
         });
       }
+      var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+        tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
-        var updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined);
+        var updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, tablePreserveWidth);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(function (tr) {

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

@@ -19,6 +19,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -64,7 +67,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     table: originalTable,
     tableRef: dom,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   if (evenColumns({
     resizeState: resizeState,
@@ -136,7 +140,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
+        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -184,7 +188,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var table = $cell.node(-1);
     var map = TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
+    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, undefined, tablePreserveWidth);
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js

@@ -4,6 +4,7 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { MAX_SCALING_PERCENT } from './consts';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
  * than the table and table wrapper elements. This is necessary as there is no longer
@@ -13,7 +14,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
   return colwidth - 1 / tableColumnCount;
 };
-export var generateColgroup = function generateColgroup(table) {
+export var generateColgroup = function generateColgroup(table, tableRef) {
   var cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
     var map = TableMap.get(table);
@@ -22,11 +23,27 @@ export var generateColgroup = function generateColgroup(table) {
       if (Array.isArray(cell.attrs.colwidth)) {
         // We slice here to guard against our colwidth array having more entries
         // Than the we actually span. We'll patch the document at a later point.
-        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
-          cols.push(['col', {
-            style: "width: ".concat(getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width), "px;")
-          }]);
-        });
+        if (tableRef) {
+          var _tableRef$parentEleme;
+          var tableWidth = table.attrs && table.attrs.width;
+          var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
+          var scalePercent = renderWidth / tableWidth;
+          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+            var fixedColWidth = getColWidthFix(width, map.width);
+            var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+            cols.push(['col', {
+              style: "width: ".concat(finalWidth, "px;")
+            }]);
+          });
+        } else {
+          cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+            cols.push(['col', {
+              style: "width: ".concat(getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width), "px;")
+            }]);
+          });
+        }
       } else {
         // When we have merged cells on the first row (firstChild),
         // We want to ensure we're creating the appropriate amount of
@@ -66,12 +83,16 @@ export var generateColgroup = function generateColgroup(table) {
   return cols;
 };
 export var insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var colgroup = tableRef.querySelector('colgroup');
-  if (colgroup) {
+  if (colgroup && shouldRemove) {
     tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table);
-  tableRef.insertBefore(colgroup, tableRef.firstChild);
+  colgroup = renderColgroupFromNode(table, tablePreserveWidth ? tableRef : undefined);
+  if (shouldRemove) {
+    tableRef.insertBefore(colgroup, tableRef.firstChild);
+  }
   return colgroup.children;
 };
 export var hasTableBeenResized = function hasTableBeenResized(table) {
@@ -93,8 +114,8 @@ export var isMinCellWidthTable = function isMinCellWidthTable(table) {
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table) {
-  var rendered = DOMSerializer.renderSpec(document, ['colgroup', {}].concat(_toConsumableArray(generateColgroup(table))));
+function renderColgroupFromNode(table, maybeTableRef) {
+  var rendered = DOMSerializer.renderSpec(document, ['colgroup', {}].concat(_toConsumableArray(generateColgroup(table, maybeTableRef))));
   return rendered.dom;
 }
 export var getColgroupChildrenLength = function getColgroupChildrenLength(table) {

package/dist/esm/pm-plugins/table-resizing/utils/consts.js

@@ -1,2 +1,4 @@
 export var COLUMN_MIN_WIDTH = 48;
-export var TABLE_MAX_WIDTH = 1800;
+export var TABLE_DEFAULT_WIDTH = 760;
+export var TABLE_MAX_WIDTH = 1800;
+export var MAX_SCALING_PERCENT = 0.3;

package/dist/esm/pm-plugins/table-resizing/utils/index.js

@@ -3,8 +3,8 @@ export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths } from './resize-state';
-export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElement } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn } from './resize-column';
-export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

package/dist/esm/pm-plugins/table-resizing/utils/misc.js

@@ -1,9 +1,11 @@
-import { getParentNodeWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
+import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
-import { containsClassName } from '@atlaskit/editor-common/utils';
+import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { hasTableBeenResized } from './colgroup';
+
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout) {
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -69,4 +71,22 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
+};
+
+/**
+ *
+ * @param table
+ * @returns calculated width of <table /> element derived from sum of colwidths on tableCell or tableHeader nodes or falls back to container width
+ */
+export var getTableElementWidth = function getTableElementWidth(table) {
+  if (hasTableBeenResized(table)) {
+    // TODO: is there a scenario where ADF columns are SMALLER than container width?
+    return calcTableColumnWidths(table).reduce(function (sum, width) {
+      return sum + width;
+    }, 0);
+  }
+  return getTableContainerElement(table);
+};
+export var getTableContainerElement = function getTableContainerElement(table) {
+  return getTableContainerWidth(table);
 };

package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js

@@ -2,7 +2,8 @@
 import { growColumn, shrinkColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, selectedColumns) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var newState = amount > 0 ? growColumn(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? shrinkColumn(resizeState, colIndex, amount, selectedColumns) : resizeState;
-  updateColgroup(newState, tableRef);
+  updateColgroup(newState, tableRef, tablePreserveWidth);
   return newState;
 };

package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js

@@ -9,13 +9,17 @@ import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './c
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
+import { MAX_SCALING_PERCENT, TABLE_DEFAULT_WIDTH } from './index';
 export var getResizeState = function getResizeState(_ref) {
   var minWidth = _ref.minWidth,
     maxSize = _ref.maxSize,
     table = _ref.table,
     tableRef = _ref.tableRef,
     start = _ref.start,
-    domAtPos = _ref.domAtPos;
+    domAtPos = _ref.domAtPos,
+    _ref$tablePreserveWid = _ref.tablePreserveWidth,
+    tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+  // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
     var _cols = calcTableColumnWidths(table).map(function (width, index) {
       return {
@@ -39,10 +43,22 @@ export var getResizeState = function getResizeState(_ref) {
       overflow: _overflow
     };
   }
+  var shouldReinsertColgroup = !tablePreserveWidth;
 
   // Getting the resize state from DOM
-  var colgroupChildren = insertColgroupFromNode(tableRef, table);
+  var colgroupChildren = insertColgroupFromNode(tableRef, table, tablePreserveWidth, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
+  );
+
   var cols = Array.from(colgroupChildren).map(function (_, index) {
+    // If the table hasn't been resized and we have a table width attribute, we can use it
+    // to calculate the widths of the columns
+    if (tablePreserveWidth && table.attrs.width) {
+      return {
+        index: index,
+        width: table.attrs.width / colgroupChildren.length,
+        minWidth: 48
+      };
+    }
     var cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
     return getColumnStateFromDOM(cellsRefs, index, minWidth);
   });
@@ -63,18 +79,41 @@ export var getResizeState = function getResizeState(_ref) {
 };
 
 // updates Colgroup DOM node with new widths
-export var updateColgroup = function updateColgroup(state, tableRef) {
+export var updateColgroup = function updateColgroup(state, tableRef, tablePreserveWidth) {
   var cols = tableRef.querySelectorAll('col');
   if (getBooleanFF('platform.editor.custom-table-width')) {
     var columnsCount = cols.length;
-    state.cols.filter(function (column) {
-      return column && !!column.width;
-    }) // if width is 0, we dont want to apply that.
-    .forEach(function (column, i) {
-      if (cols[i]) {
-        cols[i].style.width = "".concat(getColWidthFix(column.width, columnsCount), "px");
+    if (tablePreserveWidth) {
+      var _tableRef$dataset;
+      var tableWidth = parseInt(((_tableRef$dataset = tableRef.dataset) === null || _tableRef$dataset === void 0 ? void 0 : _tableRef$dataset.tableWidth) || ''); // TODO - get this value from the table node, not the dom
+      if (tableWidth) {
+        var _tableRef$parentEleme;
+        var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || TABLE_DEFAULT_WIDTH;
+        var scalePercent = renderWidth / tableWidth;
+        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+        state.cols.filter(function (column) {
+          return column && !!column.width;
+        }) // if width is 0, we dont want to apply that.
+        .forEach(function (column, i) {
+          var fixedColWidth = getColWidthFix(column.width, columnsCount);
+          var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+          var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+          // we aren't handling the remaining pixels here when the 48px min width is reached
+          if (cols[i]) {
+            cols[i].style.width = "".concat(finalWidth, "px");
+          }
+        });
       }
-    });
+    } else {
+      state.cols.filter(function (column) {
+        return column && !!column.width;
+      }) // if width is 0, we dont want to apply that.
+      .forEach(function (column, i) {
+        if (cols[i]) {
+          cols[i].style.width = "".concat(getColWidthFix(column.width, columnsCount), "px");
+        }
+      });
+    }
   } else {
     state.cols.filter(function (column) {
       return column && !!column.width;
@@ -262,6 +301,7 @@ export var normaliseTableLayout = function normaliseTableLayout(input) {
   }
 };
 export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   // Fail early so that we don't do complex calculations for no reason
   var numColumnsSelected = rect.right - rect.left;
   if (numColumnsSelected <= 1) {
@@ -298,7 +338,8 @@ export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFrom
     table: table.node,
     tableRef: tableRef,
     start: table.start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   var widthsBefore = resizeState.widths;

package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js

@@ -14,6 +14,7 @@ import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 export var scale = function scale(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   /**
    * isBreakoutEnabled === true -> default center aligned
    * isBreakoutEnabled === false -> full width mode
@@ -58,18 +59,21 @@ export var scale = function scale(tableRef, options, domAtPos) {
     table: node,
     tableRef: tableRef,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   return scaleTableTo(resizeState, newWidth);
 };
 export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: parentWidth,
     table: table,
     tableRef: tableRef,
     start: start,
-    domAtPos: domAtPos
+    domAtPos: domAtPos,
+    tablePreserveWidth: tablePreserveWidth
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
@@ -101,6 +105,7 @@ export function scaleTableTo(state, maxSize) {
   return adjustColumnsWidths(newState, maxSize);
 }
 export var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
@@ -112,18 +117,22 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     var width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
     tableRef.style.width = "".concat(width, "px");
   }
-  if (!hasTableBeenResized(node)) {
+
+  // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
+  // If we are scaling the table down with tablePreserveWidth, the colgroup widths may be scaled to a value that is not 48px.
+  if (!hasTableBeenResized(node) && !tablePreserveWidth) {
     syncStickyRowToTable(tableRef);
     return;
   }
-  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, tablePreserveWidth) : scale(tableRef, options, domAtPos, tablePreserveWidth);
   if (resizeState) {
-    updateColgroup(resizeState, tableRef);
+    updateColgroup(resizeState, tableRef, tablePreserveWidth);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
 export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (tr) {
     if (!tableRef) {
       return tr;
@@ -136,15 +145,17 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
     if (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
-      insertColgroupFromNode(tableRef, node);
+      if (!tablePreserveWidth) {
+        insertColgroupFromNode(tableRef, node);
+      }
       tr.setMeta('scrollIntoView', false);
       return tr;
     }
     var resizeState;
     if (parentWidth) {
-      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
+      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, tablePreserveWidth);
     } else {
-      resizeState = scale(tableRef, options, domAtPos);
+      resizeState = scale(tableRef, options, domAtPos, tablePreserveWidth);
     }
     if (resizeState) {
       tr = updateColumnWidths(resizeState, node, start)(tr);

package/dist/esm/toolbar.js

@@ -85,6 +85,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
 export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   var formatMessage = _ref2.formatMessage;
+  var tablePreserveWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var top = initialSelectionRect.top,
     bottom = initialSelectionRect.bottom,
     right = initialSelectionRect.right,
@@ -99,7 +100,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -178,7 +179,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   }];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-    var newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    var newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth) : undefined;
     var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
       if (newResizeStateWithAnalytics) {
@@ -298,10 +299,13 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+          tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         var cellItems;
-        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -340,8 +344,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           }
           return element;
         };
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
         return {
           title: 'Table floating controls',
           getDomRef: getDomRef,
@@ -400,22 +404,24 @@ var separator = function separator(hidden) {
 };
 var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
   var formatMessage = _ref3.formatMessage;
+  var tablePreserveWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage: formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI);
+    }, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
 export var getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, editorView) {
     var selectionOrTableRect = getClosestSelectionOrTableRect(state);
     if (!editorView || !selectionOrTableRect) {
       return false;
     }
-    var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
     if (newResizeStateWithAnalytics) {
       distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
       return true;
@@ -429,12 +435,13 @@ export var getDistributeConfig = function getDistributeConfig(getEditorContainer
 var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var pluginState = getPluginState(editorState);
   var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
   var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     return [{
@@ -443,7 +450,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
       onClick: function onClick(state, dispatch, view) {
-        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(state, dispatch, view);
       },
       disabled: !wouldChange
     }, {

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

@@ -5,7 +5,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableContainerElement, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
@@ -88,9 +88,9 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
  * @returns Updated transaction with rescaled columns for a given table
  */
 export var rescaleColumns = function rescaleColumns() {
+  var tablePreserveWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return function (table, view) {
     return function (tr) {
-      var _tableRef$parentEleme, _tableRef$parentEleme2;
       if (!view) {
         return tr;
       }
@@ -102,14 +102,28 @@ export var rescaleColumns = function rescaleColumns() {
         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,
+        width: 0,
+        possibleMaxWidth: 0,
         isResized: isResized
       };
+      if (tablePreserveWidth) {
+        previousTableInfo = {
+          // TODO - ensure correct width is returned when table doesn't have a width value
+          width: getTableElementWidth(table.node),
+          possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? getTableContainerElement(table.node) : getTableContainerElement(table.node) - insertColumnButtonOffset,
+          isResized: isResized
+        };
+      } else {
+        var _tableRef$parentEleme, _tableRef$parentEleme2;
+        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,
+          isResized: isResized
+        };
+      }
 
       // determine the new table, based on new width
       var newTableInfo = {
@@ -154,7 +168,8 @@ export var rescaleColumns = function rescaleColumns() {
         start: table.start,
         tableRef: tableRef,
         domAtPos: domAtPos,
-        maxSize: previousTableInfo.possibleMaxWidth
+        maxSize: previousTableInfo.possibleMaxWidth,
+        tablePreserveWidth: tablePreserveWidth
       });
 
       // Two scenarios that require scaling:

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

@@ -205,6 +205,7 @@ function fixRowSpans(table) {
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
 export var deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
+  var tablePreserveWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (tr) {
     var updatedTr = tr;
     updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -217,7 +218,7 @@ export var deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
     }
     var table = findTable(updatedTr.selection);
     if (table) {
-      updatedTr = rescaleColumns()(table, view)(updatedTr);
+      updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
     }
     return updatedTr;
   };