@atlaskit/editor-plugin-table 7.5.3 → 7.5.5

package/dist/esm/event-handlers.js

@@ -328,7 +328,7 @@ export function handleTripleClick(view, pos) {
   return false;
 }
 export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
-  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -371,7 +371,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled)(tr);
           }
         }
       }

package/dist/esm/nodeviews/TableComponent.js

@@ -17,7 +17,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, calcTableColumnWidths, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, 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';
@@ -29,6 +29,7 @@ import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '.
 import { META_KEYS } from '../pm-plugins/table-analytics';
 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 { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
@@ -169,7 +170,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props2.getPos,
         containerWidth = _this$props2.containerWidth,
         options = _this$props2.options,
-        getEditorFeatureFlags = _this$props2.getEditorFeatureFlags;
+        isTableScalingEnabled = _this$props2.isTableScalingEnabled;
       var node = getNode();
       var state = view.state,
         dispatch = view.dispatch;
@@ -180,16 +181,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
       _this.scaleTableDebounced.cancel();
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
-        tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
       var tr = scaleTable(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos, tablePreserveWidth)(state.tr);
+      }, options), domAtPos, isTableScalingEnabled)(state.tr);
       dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -311,13 +309,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props7.options,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
         getNode = _this$props7.getNode,
-        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+      if (isTableScalingEnabled) {
+        this.handleColgroupUpdates(true);
+      }
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         if (stickyScrollbar) {
           if (this.table) {
             this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
@@ -363,8 +365,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
-      var _getEditorFeatureFlag4 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag4.stickyScrollbar;
+      var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
       if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -391,23 +393,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this2 = this,
-        _this$containerWidth;
+      var _this$containerWidth;
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
         containerWidth = _this$props9.containerWidth,
         isResizing = _this$props9.isResizing,
         view = _this$props9.view,
-        getPos = _this$props9.getPos,
-        tableRef = _this$props9.tableRef;
-      if (!tableRef) {
+        getPos = _this$props9.getPos;
+      if (!this.table) {
         return;
       }
-      var TABLE_MARGIN = 76;
 
       // Remove any widths styles after resizing preview is completed
-      tableRef.style.width = '';
-      var tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+      this.table.style.width = '';
+      var tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
       var tableNode = getNode();
       var start = getPos() || 0;
       var depth = view.state.doc.resolve(start).depth;
@@ -417,17 +417,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var tableNodeWidth = tableNode.attrs.width;
-      var tableColumnWidths = calcTableColumnWidths(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      var isTableColumnWidthsSame = false;
-      if (this.tableColumnWidths) {
-        isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every(function (width, index) {
-          return width === _this2.tableColumnWidths[index];
-        });
-      }
       var containerWidthValue = containerWidth.width;
       var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-      if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+      if (force || shouldTableScale && !isResizing && isWidthChanged) {
         var resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -435,20 +428,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           tableRef: this.table,
           start: start,
           domAtPos: view.domAtPos,
-          tablePreserveWidth: true
-        });
-        requestAnimationFrame(function () {
-          updateColgroup(resizeState, _this2.table, true);
+          isTableScalingEnabled: true
         });
-        this.tableColumnWidths = tableColumnWidths;
-        this.containerWidth = containerWidth;
+        updateColgroup(resizeState, this.table, tableNode, true);
       }
+      this.containerWidth = containerWidth;
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
       var _this$wrapper,
-        _this3 = this;
+        _this2 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -456,14 +446,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowColumnResizing = _this$props10.allowColumnResizing,
         isResizing = _this$props10.isResizing,
         options = _this$props10.options,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+        isTableScalingEnabled = _this$props10.isTableScalingEnabled;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tablePreserveWidth,
-        tablePreserveWidth = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var table = findTable(view.state.selection);
-      if (tablePreserveWidth) {
+      if (isTableScalingEnabled) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
@@ -475,7 +462,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this3.overflowShadowsObserver = new OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
+            _this2.overflowShadowsObserver = new OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -500,7 +487,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
           if (shouldRecreateResizeCols) {
-            insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+            insertColgroupFromNode(this.table, currentTable, isTableScalingEnabled);
           }
           updateControls()(_view.state);
         }
@@ -531,7 +518,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this,
+      var _this3 = this,
         _classnames;
       var _this$props11 = this.props,
         view = _this$props11.view,
@@ -548,7 +535,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props11.getPos,
         pluginInjectionApi = _this$props11.pluginInjectionApi,
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -606,8 +594,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper;
-          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
+          var _this3$wrapper;
+          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
         }
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
@@ -630,9 +618,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = isTableNested(view.state, tablePos);
       var 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;
-      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag7.stickyScrollbar,
-        tablePreserveWidth = _getEditorFeatureFlag7.tablePreserveWidth;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
       return /*#__PURE__*/React.createElement(TableContainer, {
         className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _classnames)),
         editorView: view,
@@ -645,7 +632,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
-        tablePreserveWidth: tablePreserveWidth
+        isTableScalingEnabled: isTableScalingEnabled
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -656,12 +643,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper2;
-          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this4$wrapper3;
-          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
+          var _this3$wrapper3;
+          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -676,13 +663,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this4.wrapper = elem;
+          _this3.wrapper = elem;
           if (elem) {
-            _this4.props.contentDOM(elem);
+            _this3.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this4.table) {
-              _this4.table = tableElement;
-              _this4.createShadowSentinels(_this4.table);
+            if (tableElement !== _this3.table) {
+              _this3.table = tableElement;
+              _this3.createShadowSentinels(_this3.table);
             }
           }
         }

package/dist/esm/nodeviews/TableContainer.js

@@ -5,7 +5,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
@@ -44,7 +44,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi,
-    tablePreserveWidth = _ref2.tablePreserveWidth;
+    isTableScalingEnabled = _ref2.isTableScalingEnabled;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateContainerHeight = useCallback(function (height) {
@@ -108,7 +108,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = containerWidth - 76;
+  var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -126,7 +126,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
-    tablePreserveWidth: tablePreserveWidth
+    isTableScalingEnabled: isTableScalingEnabled
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -165,7 +165,7 @@ export var TableContainer = function TableContainer(_ref3) {
     isNested = _ref3.isNested,
     isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi,
-    tablePreserveWidth = _ref3.tablePreserveWidth;
+    isTableScalingEnabled = _ref3.isTableScalingEnabled;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
@@ -176,7 +176,7 @@ export var TableContainer = function TableContainer(_ref3) {
       tableRef: tableRef,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/esm/nodeviews/TableResizer.js

@@ -20,8 +20,8 @@ import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTa
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
+import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 var RESIZE_STEP_VALUE = 10;
 var handles = {
@@ -88,7 +88,7 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
-    tablePreserveWidth = _ref.tablePreserveWidth;
+    isTableScalingEnabled = _ref.isTableScalingEnabled;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -135,15 +135,15 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline, containerWidth]);
+  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: defaultSnappingWidths
+      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled]);
+  }, [snappingEnabled, isTableScalingEnabled, containerWidth]);
   useEffect(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -173,12 +173,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -196,11 +196,11 @@ export var TableResizer = function TableResizer(_ref) {
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
+    updateActiveGuidelines(findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
+  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
@@ -236,7 +236,7 @@ export var TableResizer = function TableResizer(_ref) {
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
+      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled)(tr);
       var scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
@@ -254,7 +254,7 @@ export var TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tablePreserveWidth]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/esm/nodeviews/table.js

@@ -72,7 +72,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_assertThisInitialized(_this), "hasHoveredRows", false);
     _this.getPos = props.getPos;
     _this.eventDispatcher = props.eventDispatcher;
-    _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    _this.options = props.options;
     return _this;
   }
   _createClass(TableView, [{
@@ -80,12 +80,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     value: function getContentDOM() {
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
       if (rendered.dom) {
+        var _this$options;
         this.table = rendered.dom;
-        var _this$getEditorFeatur = this.getEditorFeatureFlags(),
-          _this$getEditorFeatur2 = _this$getEditorFeatur.tablePreserveWidth,
-          tablePreserveWidth = _this$getEditorFeatur2 === void 0 ? false : _this$getEditorFeatur2;
         // Preserve Table Width cannot have inline width set on the table
-        if (!tablePreserveWidth) {
+        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
           if (tableInlineWidth) {
             handleInlineTableWidth(this.table, tableInlineWidth);
@@ -179,6 +177,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
+            isTableScalingEnabled: pluginState.isTableScalingEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,
@@ -187,8 +186,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             contentDOM: forwardRef,
             getEditorFeatureFlags: props.getEditorFeatureFlags,
             dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-            pluginInjectionApi: props.pluginInjectionApi,
-            tableRef: _this3.table
+            pluginInjectionApi: props.pluginInjectionApi
           });
         }
       });
@@ -261,7 +259,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
     isTableResizingEnabled = _getPluginState2.isTableResizingEnabled,
-    isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+    isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
+    isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
   var _getPluginConfig = getPluginConfig(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing;
   var hasIntlContext = true;
@@ -277,7 +276,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
       isFullWidthModeEnabled: isFullWidthModeEnabled,
       wasFullWidthModeEnabled: wasFullWidthModeEnabled,
       isTableResizingEnabled: isTableResizingEnabled,
-      isDragAndDropEnabled: isDragAndDropEnabled
+      isDragAndDropEnabled: isDragAndDropEnabled,
+      isTableScalingEnabled: isTableScalingEnabled
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,