@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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

@@ -18,7 +18,7 @@ const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
   },
   eventType: EVENT_TYPE.TRACK
 })(editorAnalyticsAPI)(createTable());
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled) {
   const list = {};
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
@@ -50,11 +50,14 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    const {
+      tablePreserveWidth = false
+    } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
     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/es2019/pm-plugins/main.js

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

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

@@ -21,6 +21,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
+  const {
+    tablePreserveWidth = false
+  } = getEditorFeatureFlags();
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -67,7 +70,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     table: originalTable,
     tableRef: dom,
     start,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   if (evenColumns({
     resizeState,
@@ -149,7 +153,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
+        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -203,7 +207,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const table = $cell.node(-1);
     const map = TableMap.get(table);
     const 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/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,6 +3,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
@@ -10,7 +11,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
  * overflow.
  */
 export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
-export const generateColgroup = table => {
+export const generateColgroup = (table, tableRef) => {
   const cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const map = TableMap.get(table);
@@ -19,11 +20,27 @@ export const 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(width => {
-          cols.push(['col', {
-            style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
-          }]);
-        });
+        if (tableRef) {
+          var _tableRef$parentEleme;
+          const tableWidth = table.attrs && table.attrs.width;
+          let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
+          let scalePercent = renderWidth / tableWidth;
+          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+            const fixedColWidth = getColWidthFix(width, map.width);
+            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+            cols.push(['col', {
+              style: `width: ${finalWidth}px;`
+            }]);
+          });
+        } else {
+          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+            cols.push(['col', {
+              style: `width: ${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
@@ -58,13 +75,15 @@ export const generateColgroup = table => {
   }
   return cols;
 };
-export const insertColgroupFromNode = (tableRef, table) => {
+export const insertColgroupFromNode = (tableRef, table, tablePreserveWidth = false, shouldRemove = true) => {
   let 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 const hasTableBeenResized = table => {
@@ -84,8 +103,8 @@ export const isMinCellWidthTable = table => {
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table) {
-  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table)]);
+function renderColgroupFromNode(table, maybeTableRef) {
+  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef)]);
   return rendered.dom;
 }
 export const getColgroupChildrenLength = table => {

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

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

package/dist/es2019/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/es2019/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, containerWidth = 0, options) {
   const {
@@ -71,4 +73,20 @@ export const getTableMaxWidth = ({
     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 const getTableElementWidth = table => {
+  if (hasTableBeenResized(table)) {
+    // TODO: is there a scenario where ADF columns are SMALLER than container width?
+    return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+  }
+  return getTableContainerElement(table);
+};
+export const getTableContainerElement = table => {
+  return getTableContainerWidth(table);
 };

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

@@ -1,8 +1,8 @@
 // Resize a given column by an amount from the current state
 import { growColumn, shrinkColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
-export const resizeColumn = (resizeState, colIndex, amount, tableRef, selectedColumns) => {
+export const resizeColumn = (resizeState, colIndex, amount, tableRef, selectedColumns, tablePreserveWidth = false) => {
   const 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/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -6,14 +6,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 const getResizeState = ({
   minWidth,
   maxSize,
   table,
   tableRef,
   start,
-  domAtPos
+  domAtPos,
+  tablePreserveWidth = false
 }) => {
+  // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
     const cols = calcTableColumnWidths(table).map((width, index) => ({
       width: width === 0 ? tableNewColumnMinWidth : width,
@@ -31,10 +34,22 @@ export const getResizeState = ({
       overflow
     };
   }
+  const shouldReinsertColgroup = !tablePreserveWidth;
 
   // Getting the resize state from DOM
-  const colgroupChildren = insertColgroupFromNode(tableRef, table);
+  const colgroupChildren = insertColgroupFromNode(tableRef, table, tablePreserveWidth, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
+  );
+
   const cols = Array.from(colgroupChildren).map((_, 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,
+        width: table.attrs.width / colgroupChildren.length,
+        minWidth: 48
+      };
+    }
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
     return getColumnStateFromDOM(cellsRefs, index, minWidth);
   });
@@ -51,16 +66,37 @@ export const getResizeState = ({
 };
 
 // updates Colgroup DOM node with new widths
-export const updateColgroup = (state, tableRef) => {
+export const updateColgroup = (state, tableRef, tablePreserveWidth) => {
   const cols = tableRef.querySelectorAll('col');
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const columnsCount = cols.length;
-    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-    .forEach((column, i) => {
-      if (cols[i]) {
-        cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
+    if (tablePreserveWidth) {
+      var _tableRef$dataset;
+      const 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;
+        let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || TABLE_DEFAULT_WIDTH;
+        let scalePercent = renderWidth / tableWidth;
+        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+        state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+        .forEach((column, i) => {
+          const fixedColWidth = getColWidthFix(column.width, columnsCount);
+          const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+          const 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 = `${finalWidth}px`;
+          }
+        });
       }
-    });
+    } else {
+      state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+      .forEach((column, i) => {
+        if (cols[i]) {
+          cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
+        }
+      });
+    }
   } else {
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
     .forEach((column, i) => {
@@ -240,7 +276,7 @@ export const normaliseTableLayout = input => {
       return 'default';
   }
 };
-export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth) => {
+export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth, tablePreserveWidth = false) => {
   // Fail early so that we don't do complex calculations for no reason
   const numColumnsSelected = rect.right - rect.left;
   if (numColumnsSelected <= 1) {
@@ -278,7 +314,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     table: table.node,
     tableRef,
     start: table.start,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   const widthsBefore = resizeState.widths;

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

@@ -10,7 +10,7 @@ import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 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 const scale = (tableRef, options, domAtPos) => {
+export const scale = (tableRef, options, domAtPos, tablePreserveWidth = false) => {
   /**
    * isBreakoutEnabled === true -> default center aligned
    * isBreakoutEnabled === false -> full width mode
@@ -57,18 +57,20 @@ export const scale = (tableRef, options, domAtPos) => {
     table: node,
     tableRef,
     start,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   return scaleTableTo(resizeState, newWidth);
 };
-export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos) => {
+export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, tablePreserveWidth = false) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: parentWidth,
     table,
     tableRef,
     start,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
@@ -103,7 +105,7 @@ export function scaleTableTo(state, maxSize) {
   }
   return adjustColumnsWidths(newState, maxSize);
 }
-export const previewScaleTable = (tableRef, options, domAtPos) => {
+export const previewScaleTable = (tableRef, options, domAtPos, tablePreserveWidth = false) => {
   const {
     node,
     start,
@@ -117,18 +119,21 @@ export const previewScaleTable = (tableRef, options, domAtPos) => {
     const width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
     tableRef.style.width = `${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;
   }
-  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);
+  const 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 const scaleTable = (tableRef, options, domAtPos) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, tablePreserveWidth = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -142,15 +147,17 @@ export const scaleTable = (tableRef, options, domAtPos) => tr => {
   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;
   }
   let 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/es2019/toolbar.js

@@ -80,7 +80,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -98,7 +98,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       const selectionRect = getClosestSelectionRect(state);
       const 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;
     },
@@ -177,7 +177,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
   }];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth) : undefined;
     const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     const distributeColumnWidths = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
@@ -296,10 +296,13 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
+    const {
+      tablePreserveWidth = false
+    } = getEditorFeatureFlags();
     let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
     let 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) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button
@@ -390,22 +393,22 @@ const separator = hidden => {
 };
 const getCellItems = (pluginConfig, state, view, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI);
+    }, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
-export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI) => (state, dispatch, editorView) => {
+export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => (state, dispatch, editorView) => {
   const selectionOrTableRect = getClosestSelectionOrTableRect(state);
   if (!editorView || !selectionOrTableRect) {
     return false;
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
   if (newResizeStateWithAnalytics) {
     distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
     return true;
@@ -417,14 +420,14 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI)
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
   const 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 [{
@@ -432,7 +435,7 @@ const getColumnSettingItems = (editorState, editorView, {
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(state, dispatch, view),
       disabled: !wouldChange
     }, {
       type: 'separator'

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

@@ -2,7 +2,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';
@@ -85,8 +85,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = () => (table, view) => tr => {
-  var _tableRef$parentEleme, _tableRef$parentEleme2;
+export const rescaleColumns = (tablePreserveWidth = false) => (table, view) => tr => {
   if (!view) {
     return tr;
   }
@@ -98,14 +97,28 @@ export const rescaleColumns = () => (table, view) => tr => {
     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,
+  let previousTableInfo = {
+    width: 0,
+    possibleMaxWidth: 0,
     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
+    };
+  } 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 ? 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,
+      isResized
+    };
+  }
 
   // determine the new table, based on new width
   const newTableInfo = {
@@ -148,7 +161,8 @@ export const rescaleColumns = () => (table, view) => tr => {
     start: table.start,
     tableRef,
     domAtPos,
-    maxSize: previousTableInfo.possibleMaxWidth
+    maxSize: previousTableInfo.possibleMaxWidth,
+    tablePreserveWidth
   });
 
   // Two scenarios that require scaling:

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

@@ -192,7 +192,7 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowCustomStep, view) => tr => {
+export const deleteColumns = (rect, allowCustomStep, view, tablePreserveWidth = false) => tr => {
   let updatedTr = tr;
   updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
@@ -204,7 +204,7 @@ export const deleteColumns = (rect, allowCustomStep, view) => tr => {
   }
   const table = findTable(updatedTr.selection);
   if (table) {
-    updatedTr = rescaleColumns()(table, view)(updatedTr);
+    updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
   }
   return updatedTr;
 };