@atlaskit/editor-plugin-table 7.4.9 → 7.5.1

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;
 };

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

@@ -302,8 +302,11 @@ export class ContextualMenu extends Component {
         }
       } = getPluginState(editorView.state);
       if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
-        var _newResizeState$chang;
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        var _this$props$getEditor, _this$props, _newResizeState$chang;
+        const {
+          tablePreserveWidth = false
+        } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         return {
           content: formatMessage(messages.distributeColumns),
@@ -397,7 +400,8 @@ export class ContextualMenu extends Component {
         editorView,
         selectionRect,
         editorAnalyticsAPI,
-        getEditorContainerWidth
+        getEditorContainerWidth,
+        getEditorFeatureFlags
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -407,6 +411,9 @@ export class ContextualMenu extends Component {
       const {
         targetCellPosition
       } = getPluginState(state);
+      const {
+        tablePreserveWidth = false
+      } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -425,7 +432,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'distribute_columns':
-          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
           if (newResizeStateWithAnalytics) {
             distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             this.toggleOpen();
@@ -436,7 +443,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -16,7 +16,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -68,7 +69,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -175,7 +175,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   fitWidth,
   mountPoint,
   scrollableElement,
-  boundariesElement
+  boundariesElement,
+  tablePreserveWidth
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -195,7 +196,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, tablePreserveWidth);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -17,7 +17,8 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   editorAnalyticsAPI,
   stickyHeaders,
-  pluginConfig
+  pluginConfig,
+  getEditorFeatureFlags
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -28,6 +29,9 @@ const FloatingDragMenu = ({
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
+  const {
+    tablePreserveWidth = false
+  } = getEditorFeatureFlags();
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -60,7 +64,8 @@ const FloatingDragMenu = ({
     fitHeight: tablePopupMenuFitHeight,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement
+    scrollableElement: scrollableElement,
+    tablePreserveWidth: tablePreserveWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -177,12 +177,16 @@ export class FloatingInsertButton extends React.Component {
       getEditorContainerWidth
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
+      var _this$props$getEditor, _this$props;
       event.preventDefault();
+      const {
+        tablePreserveWidth = false
+      } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
       const {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }

package/dist/es2019/utils/create.js

@@ -3,7 +3,7 @@ import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 export const createTableWithWidth = (isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) => schema => {
   const {
     tablePreserveWidth = false
-  } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+  } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
   if (tablePreserveWidth && isFullWidthModeEnabled) {
     return createTable({
       schema,

package/dist/es2019/utils/drag-menu.js

@@ -58,7 +58,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, tablePreserveWidth = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
@@ -138,7 +138,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
           moveCursorToInsertedRow: true
         })(state, dispatch);
       } else {
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
       }
       return true;
     },
@@ -150,7 +150,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     onClick: (state, dispatch) => {
       const selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         if (newResizeState) {
           distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
           return true;
@@ -176,7 +176,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
       if (direction === 'row') {
         deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
       } else {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/commands/column-resize.js

@@ -122,6 +122,7 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
   };
 };
 export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -170,14 +171,15 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
       table: originalTable,
       tableRef: dom,
       start: tableStartPosition,
-      domAtPos: domAtPos
+      domAtPos: domAtPos,
+      tablePreserveWidth: tablePreserveWidth
     });
     updateControls()(state);
     var selectionRect = getSelectionRect(state.selection);
     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(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
     customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
       dispatch(customTr);

package/dist/esm/commands/delete.js

@@ -1,8 +1,9 @@
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 export var deleteColumnsCommand = function deleteColumnsCommand(rect) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
-    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view)(state.tr);
+    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, tablePreserveWidth)(state.tr);
     if (dispatch) {
       dispatch(tr);
       return true;