@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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

@@ -24,18 +24,20 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     stickyHeaders = _ref.stickyHeaders,
-    pluginConfig = _ref.pluginConfig;
+    pluginConfig = _ref.pluginConfig,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
+    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -43,7 +45,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: _consts.dragMenuDropdownWidth
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     // In sticky mode, we want to show the menu above the sticky header
@@ -62,7 +65,13 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    tablePreserveWidth: tablePreserveWidth
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -198,10 +198,14 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
         getEditorContainerWidth = _this$props4.getEditorContainerWidth;
       if (typeof insertColumnButtonIndex !== 'undefined') {
+        var _this$props$getEditor, _this$props5;
         event.preventDefault();
+        var _ref = ((_this$props$getEditor = (_this$props5 = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props5)) || {},
+          _ref$tablePreserveWid = _ref.tablePreserveWidth,
+          tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -61,6 +61,7 @@ var stickyRowOffsetTop = exports.stickyRowOffsetTop = 8;
 var stickyHeaderBorderBottomWidth = exports.stickyHeaderBorderBottomWidth = 1;
 var tableOverflowShadowWidth = exports.tableOverflowShadowWidth = 8;
 var tableOverflowShadowWidthWide = exports.tableOverflowShadowWidthWide = 32;
+var tablePopupMenuFitHeight = exports.tablePopupMenuFitHeight = 188;
 var dropTargetsZIndex = exports.dropTargetsZIndex = 14;
 var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;

package/dist/cjs/utils/create.js

@@ -12,7 +12,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
   return function (schema) {
-    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+    var _ref = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
       _ref$tablePreserveWid = _ref.tablePreserveWidth,
       tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
     if (tablePreserveWidth && isFullWidthModeEnabled) {

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

@@ -70,6 +70,7 @@ var defaultSelectionRect = {
 };
 var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
+  var tablePreserveWidth = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -154,7 +155,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
             moveCursorToInsertedRow: true
           })(state, dispatch);
         } else {
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
         }
         return true;
       },
@@ -167,7 +168,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     onClick: function onClick(state, dispatch) {
       var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
       if (selectionRect) {
-        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
         if (newResizeState) {
           (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
           return true;
@@ -193,7 +194,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       if (direction === 'row') {
         (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
       } else {
-        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
       }
       return true;
     },

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

@@ -121,7 +121,7 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   return false;
 };
-export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (state, dispatch, view) => {
+export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, tablePreserveWidth = false) => (state, dispatch, view) => {
   let customTr = state.tr;
   const fakeDispatch = tr => {
     customTr = tr;
@@ -170,14 +170,15 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth) => (s
     table: originalTable,
     tableRef: dom,
     start: tableStartPosition,
-    domAtPos
+    domAtPos,
+    tablePreserveWidth
   });
   updateControls()(state);
   const selectionRect = getSelectionRect(state.selection);
   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(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+  const newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
   customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
   if (dispatch) {
     dispatch(customTr);

package/dist/es2019/commands/delete.js

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

package/dist/es2019/commands/insert.js

@@ -20,7 +20,7 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-export function addColumnAt(getEditorContainerWidth) {
+export function addColumnAt(getEditorContainerWidth, tablePreserveWidth = false) {
   return (column, allowAddColumnCustomStep = false, view) => {
     return tr => {
       let updatedTr = tr;
@@ -32,7 +32,7 @@ export function addColumnAt(getEditorContainerWidth) {
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
+        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({
@@ -49,14 +49,14 @@ export function addColumnAt(getEditorContainerWidth) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = getEditorContainerWidth => (state, dispatch, view) => {
+export const addColumnBefore = (getEditorContainerWidth, tablePreserveWidth = false) => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(getEditorContainerWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
   return true;
 };
@@ -74,8 +74,8 @@ export const addColumnAfter = getEditorContainerWidth => (state, dispatch, view)
   }
   return true;
 };
-export const insertColumn = getEditorContainerWidth => column => (state, dispatch, view) => {
-  let tr = addColumnAt(getEditorContainerWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = (getEditorContainerWidth, tablePreserveWidth = false) => column => (state, dispatch, view) => {
+  let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;

package/dist/es2019/commands-with-analytics.js

@@ -167,7 +167,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
-export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
+export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -184,7 +184,7 @@ export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyti
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth, tablePreserveWidth)(position));
 export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
   selection
 }) => {
@@ -211,7 +211,7 @@ export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect,
   }
   return true;
 });
-export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect) => withEditorAnalyticsAPI(({
+export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -231,7 +231,7 @@ export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, re
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(deleteColumnsCommand(rect));
+})(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = editorAnalyticsAPI => (state, dispatch) => {
   const {
     selection

package/dist/es2019/event-handlers.js

@@ -345,7 +345,7 @@ export function handleTripleClick(view, pos) {
   }
   return false;
 }
-export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView) => {
+export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, tablePreserveWidth = false) => {
   const oldSelection = oldState.tr.selection;
   let {
     tr
@@ -394,7 +394,7 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
             } = getPluginState(newState);
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
           }
         }
       }

package/dist/es2019/nodeviews/TableComponent.js

@@ -6,7 +6,7 @@ import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, calcTableColumnWidths, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -16,7 +16,7 @@ import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
-import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getLayoutSize, getResizeState, insertColgroupFromNode, scaleTable, updateColgroup } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -160,7 +160,8 @@ class TableComponent extends React.Component {
         getNode,
         getPos,
         containerWidth,
-        options
+        options,
+        getEditorFeatureFlags
       } = this.props;
       const node = getNode();
       const {
@@ -176,6 +177,9 @@ class TableComponent extends React.Component {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
+      const {
+        tablePreserveWidth = false
+      } = getEditorFeatureFlags();
       const tr = scaleTable(this.table, {
         ...scaleOptions,
         node,
@@ -184,7 +188,7 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos)(state.tr);
+      }, domAtPos, tablePreserveWidth)(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -388,6 +392,62 @@ class TableComponent extends React.Component {
       clearTimeout(this.initialOverflowCaptureTimerId);
     }
   }
+  handleColgroupUpdates() {
+    var _this$containerWidth;
+    const {
+      getNode,
+      containerWidth,
+      isResizing,
+      view,
+      getPos,
+      tableRef
+    } = this.props;
+    if (!tableRef) {
+      return;
+    }
+    const TABLE_MARGIN = 76;
+
+    // Remove any widths styles after resizing preview is completed
+    tableRef.style.width = '';
+    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    const tableNode = getNode();
+    const start = getPos() || 0;
+    const depth = view.state.doc.resolve(start).depth;
+
+    // TODO - remove this when support is added for nested tables
+    if (depth !== 0) {
+      return;
+    }
+    const {
+      width: tableNodeWidth
+    } = tableNode.attrs;
+    const tableColumnWidths = calcTableColumnWidths(tableNode);
+    const shouldTableScale = tableRenderWidth < tableNodeWidth;
+    let isTableColumnWidthsSame = false;
+    if (this.tableColumnWidths) {
+      isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every((width, index) => width === this.tableColumnWidths[index]);
+    }
+    const {
+      width: containerWidthValue
+    } = containerWidth;
+    const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+    if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+      const resizeState = getResizeState({
+        minWidth: COLUMN_MIN_WIDTH,
+        maxSize: tableRenderWidth,
+        table: tableNode,
+        tableRef: this.table,
+        start,
+        domAtPos: view.domAtPos,
+        tablePreserveWidth: true
+      });
+      requestAnimationFrame(() => {
+        updateColgroup(resizeState, this.table, true);
+      });
+      this.tableColumnWidths = tableColumnWidths;
+      this.containerWidth = containerWidth;
+    }
+  }
   componentDidUpdate(_, prevState) {
     var _this$wrapper;
     const {
@@ -396,12 +456,19 @@ class TableComponent extends React.Component {
       isMediaFullscreen,
       allowColumnResizing,
       isResizing,
-      options
+      options,
+      getEditorFeatureFlags
     } = this.props;
     const {
       isInDanger
     } = getPluginState(view.state);
+    const {
+      tablePreserveWidth = false
+    } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
+    if (tablePreserveWidth) {
+      this.handleColgroupUpdates();
+    }
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
@@ -438,7 +505,7 @@ class TableComponent extends React.Component {
         } = this.props;
         const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
         if (shouldRecreateResizeCols) {
-          recreateResizeColsByNode(this.table, currentTable);
+          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
         }
         updateControls()(view.state);
       }
@@ -568,7 +635,8 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
     const {
-      stickyScrollbar
+      stickyScrollbar,
+      tablePreserveWidth
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -586,7 +654,8 @@ class TableComponent extends React.Component {
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-      isResizing: isResizing
+      isResizing: isResizing,
+      tablePreserveWidth: tablePreserveWidth
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableContainer.js

@@ -41,7 +41,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   getPos,
   tableRef,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tablePreserveWidth
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -123,7 +124,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     tableRef,
     displayGuideline,
     attachAnalyticsEvent,
-    displayGapCursor
+    displayGapCursor,
+    tablePreserveWidth
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -163,7 +165,8 @@ export const TableContainer = ({
   tableRef,
   isNested,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tablePreserveWidth
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -174,7 +177,8 @@ export const TableContainer = ({
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tablePreserveWidth: tablePreserveWidth
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/es2019/nodeviews/TableResizer.js

@@ -82,7 +82,8 @@ export const TableResizer = ({
   tableRef,
   displayGuideline,
   attachAnalyticsEvent,
-  displayGapCursor
+  displayGapCursor,
+  tablePreserveWidth
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -196,11 +197,11 @@ export const TableResizer = ({
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
+    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
     updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     isResizing.current = false;
@@ -237,7 +238,7 @@ export const TableResizer = ({
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView))(tr);
+      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
@@ -255,7 +256,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tablePreserveWidth]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/nodeviews/table.js

@@ -57,14 +57,21 @@ export default class TableView extends ReactNodeView {
     _defineProperty(this, "hasHoveredRows", false);
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
+    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
   }
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
-    const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
     if (rendered.dom) {
       this.table = rendered.dom;
-      if (tableInlineWidth) {
-        handleInlineTableWidth(this.table, tableInlineWidth);
+      const {
+        tablePreserveWidth = false
+      } = this.getEditorFeatureFlags();
+      // Preserve Table Width cannot have inline width set on the table
+      if (!tablePreserveWidth) {
+        const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
     }
     return rendered;
@@ -158,7 +165,8 @@ export default class TableView extends ReactNodeView {
           contentDOM: forwardRef,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-          pluginInjectionApi: props.pluginInjectionApi
+          pluginInjectionApi: props.pluginInjectionApi,
+          tableRef: this.table
         });
       }
     });

package/dist/es2019/plugin.js

@@ -147,9 +147,10 @@ const tablesPlugin = ({
         name: 'tableKeymap',
         plugin: () => {
           const {
-            dragAndDropEnabled
+            dragAndDropEnabled,
+            getEditorFeatureFlags
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -187,10 +188,13 @@ const tablesPlugin = ({
       }, {
         name: 'tableDragAndDrop',
         plugin: ({
-          dispatch,
-          eventDispatcher,
-          dispatchAnalyticsEvent
-        }) => options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined
+          dispatch
+        }) => {
+          const {
+            getEditorFeatureFlags
+          } = options || {};
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+        }
       }, {
         name: 'tableLocalId',
         plugin: ({
@@ -340,7 +344,8 @@ const tablesPlugin = ({
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -364,7 +369,8 @@ const tablesPlugin = ({
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig
+            pluginConfig: pluginConfig,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -17,7 +17,7 @@ import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
-const destroyFn = (editorView, editorAnalyticsAPI) => {
+const destroyFn = (editorView, editorAnalyticsAPI, getEditorFeatureFlags) => {
   const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
   const rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
     canMonitor({
@@ -161,7 +161,10 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
             tableNode
           } = getTablePluginState(editorView.state);
           if (tableRef && tableNode) {
-            insertColgroupFromNode(tableRef, tableNode);
+            const {
+              tablePreserveWidth = false
+            } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
+            insertColgroupFromNode(tableRef, tableNode, tablePreserveWidth);
           }
         }
         editorView.focus();
@@ -169,7 +172,7 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
     }
   }));
 };
-export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
+export const createPlugin = (dispatch, getEditorFeatureFlags, editorAnalyticsAPI) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
       decorationSet: DecorationSet.empty,
@@ -238,7 +241,7 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
     },
     view: editorView => {
       return {
-        destroy: destroyFn(editorView, editorAnalyticsAPI)
+        destroy: destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags)
       };
     },
     props: {