@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.0
+
+### Minor Changes
+
+- [#77531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77531) [`18e5d61eaec6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18e5d61eaec6) - add preserve table width logic
+
+## 7.4.9
+
+### Patch Changes
+
+- [#78202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78202) [`287432cbca17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/287432cbca17) - [ux] ED-22099: Fixed drag menu position when close to edge of view port.
+
 ## 7.4.8
 
 ### Patch Changes

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

@@ -128,6 +128,7 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
   };
 };
 var changeColumnWidthByStep = exports.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) {
@@ -176,14 +177,15 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       table: originalTable,
       tableRef: dom,
       start: tableStartPosition,
-      domAtPos: domAtPos
+      domAtPos: domAtPos,
+      tablePreserveWidth: tablePreserveWidth
     });
     (0, _utils3.updateControls)()(state);
     var selectionRect = (0, _utils.getSelectionRect)(state.selection);
     var selectedColumns = selectionRect ? (0, _utils4.getSelectedColumnIndexes)(selectionRect) : [];
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-    var newResizeState = (0, _utils3.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined);
+    var newResizeState = (0, _utils3.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
     customTr = (0, _transforms.updateColumnWidths)(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
       dispatch(customTr);

package/dist/cjs/commands/delete.js

@@ -7,8 +7,9 @@ exports.deleteColumnsCommand = void 0;
 var _deleteColumns = require("../transforms/delete-columns");
 var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
 var deleteColumnsCommand = exports.deleteColumnsCommand = function deleteColumnsCommand(rect) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
-    var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+    var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view, tablePreserveWidth)(state.tr);
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/cjs/commands/insert.js

@@ -30,6 +30,7 @@ function addColumnAtCustomStep(column) {
   };
 }
 function addColumnAt(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -43,7 +44,7 @@ function addColumnAt(getEditorContainerWidth) {
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
+        updatedTr = (0, _columnWidth.rescaleColumns)(tablePreserveWidth)(table, view)(updatedTr);
       }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({
@@ -61,6 +62,7 @@ function addColumnAt(getEditorContainerWidth) {
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 var addColumnBefore = exports.addColumnBefore = function addColumnBefore(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
     var table = (0, _utils2.findTable)(state.selection);
     if (!table) {
@@ -68,7 +70,7 @@ var addColumnBefore = exports.addColumnBefore = function addColumnBefore(getEdit
     }
     if (dispatch) {
       var rect = (0, _utils2.selectedRect)(state);
-      dispatch(addColumnAt(getEditorContainerWidth)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
+      dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
     }
     return true;
   };
@@ -90,9 +92,10 @@ var addColumnAfter = exports.addColumnAfter = function addColumnAfter(getEditorC
   };
 };
 var insertColumn = exports.insertColumn = function insertColumn(getEditorContainerWidth) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(getEditorContainerWidth)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+      var tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
       var table = (0, _utils2.findTable)(tr.selection);
       if (!table) {
         return false;

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

@@ -190,6 +190,7 @@ var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRow
   };
 };
 var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (inputMethod, position) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo2 = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -207,7 +208,7 @@ var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function ins
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertColumn)(getEditorContainerWidth)(position));
+    })(editorAnalyticsAPI)((0, _insert.insertColumn)(getEditorContainerWidth, tablePreserveWidth)(position));
   };
 };
 var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
@@ -239,6 +240,7 @@ var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteR
   };
 };
 var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(editorAnalyticsAPI) {
+  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, rect) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref6) {
       var selection = _ref6.selection;
@@ -258,7 +260,7 @@ var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function d
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _delete.deleteColumnsCommand)(rect));
+    })(editorAnalyticsAPI)((0, _delete.deleteColumnsCommand)(rect, tablePreserveWidth));
   };
 };
 var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI) {

package/dist/cjs/event-handlers.js

@@ -337,6 +337,7 @@ function handleTripleClick(view, pos) {
   return false;
 }
 var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
+  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof _cellSelection.CellSelection) {
@@ -379,7 +380,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView)(tr);
+            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView, tablePreserveWidth)(tr);
           }
         }
       }

package/dist/cjs/nodeviews/TableComponent.js

@@ -175,7 +175,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props2.getNode,
         getPos = _this$props2.getPos,
         containerWidth = _this$props2.containerWidth,
-        options = _this$props2.options;
+        options = _this$props2.options,
+        getEditorFeatureFlags = _this$props2.getEditorFeatureFlags;
       var node = getNode();
       var state = view.state,
         dispatch = view.dispatch;
@@ -186,13 +187,16 @@ 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 = (0, _utils4.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos)(state.tr);
+      }, options), domAtPos, tablePreserveWidth)(state.tr);
       dispatch(tr);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -319,8 +323,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
         if (stickyScrollbar) {
           if (this.table) {
             this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
@@ -366,8 +370,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
-      var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
+      var _getEditorFeatureFlag4 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag4.stickyScrollbar;
       if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -392,20 +396,83 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper,
-        _this2 = this;
+    key: "handleColgroupUpdates",
+    value: function handleColgroupUpdates() {
+      var _this2 = this,
+        _this$containerWidth;
       var _this$props9 = this.props,
-        view = _this$props9.view,
         getNode = _this$props9.getNode,
-        isMediaFullscreen = _this$props9.isMediaFullscreen,
-        allowColumnResizing = _this$props9.allowColumnResizing,
+        containerWidth = _this$props9.containerWidth,
         isResizing = _this$props9.isResizing,
-        options = _this$props9.options;
+        view = _this$props9.view,
+        getPos = _this$props9.getPos,
+        tableRef = _this$props9.tableRef;
+      if (!tableRef) {
+        return;
+      }
+      var TABLE_MARGIN = 76;
+
+      // Remove any widths styles after resizing preview is completed
+      tableRef.style.width = '';
+      var tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+      var tableNode = getNode();
+      var start = getPos() || 0;
+      var depth = view.state.doc.resolve(start).depth;
+
+      // TODO - remove this when support is added for nested tables
+      if (depth !== 0) {
+        return;
+      }
+      var tableNodeWidth = tableNode.attrs.width;
+      var tableColumnWidths = (0, _utils.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)) {
+        var resizeState = (0, _utils4.getResizeState)({
+          minWidth: _utils4.COLUMN_MIN_WIDTH,
+          maxSize: tableRenderWidth,
+          table: tableNode,
+          tableRef: this.table,
+          start: start,
+          domAtPos: view.domAtPos,
+          tablePreserveWidth: true
+        });
+        requestAnimationFrame(function () {
+          (0, _utils4.updateColgroup)(resizeState, _this2.table, true);
+        });
+        this.tableColumnWidths = tableColumnWidths;
+        this.containerWidth = containerWidth;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_, prevState) {
+      var _this$wrapper,
+        _this3 = this;
+      var _this$props10 = this.props,
+        view = _this$props10.view,
+        getNode = _this$props10.getNode,
+        isMediaFullscreen = _this$props10.isMediaFullscreen,
+        allowColumnResizing = _this$props10.allowColumnResizing,
+        isResizing = _this$props10.isResizing,
+        options = _this$props10.options,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
+      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tablePreserveWidth,
+        tablePreserveWidth = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
       var table = (0, _utils2.findTable)(view.state.selection);
+      if (tablePreserveWidth) {
+        this.handleColgroupUpdates();
+      }
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
@@ -415,7 +482,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 () {
-            _this2.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
+            _this3.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -440,7 +507,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
           if (shouldRecreateResizeCols) {
-            (0, _utils4.insertColgroupFromNode)(this.table, currentTable);
+            (0, _utils4.insertColgroupFromNode)(this.table, currentTable, tablePreserveWidth);
           }
           (0, _dom.updateControls)()(_view.state);
         }
@@ -471,24 +538,24 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this,
+      var _this4 = this,
         _classnames;
-      var _this$props10 = this.props,
-        view = _this$props10.view,
-        getNode = _this$props10.getNode,
-        isResizing = _this$props10.isResizing,
-        _this$props10$allowCo = _this$props10.allowControls,
-        allowControls = _this$props10$allowCo === void 0 ? true : _this$props10$allowCo,
-        isHeaderRowEnabled = _this$props10.isHeaderRowEnabled,
-        ordering = _this$props10.ordering,
-        isHeaderColumnEnabled = _this$props10.isHeaderColumnEnabled,
-        tableActive = _this$props10.tableActive,
-        containerWidth = _this$props10.containerWidth,
-        options = _this$props10.options,
-        getPos = _this$props10.getPos,
-        pluginInjectionApi = _this$props10.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+      var _this$props11 = this.props,
+        view = _this$props11.view,
+        getNode = _this$props11.getNode,
+        isResizing = _this$props11.isResizing,
+        _this$props11$allowCo = _this$props11.allowControls,
+        allowControls = _this$props11$allowCo === void 0 ? true : _this$props11$allowCo,
+        isHeaderRowEnabled = _this$props11.isHeaderRowEnabled,
+        ordering = _this$props11.ordering,
+        isHeaderColumnEnabled = _this$props11.isHeaderColumnEnabled,
+        tableActive = _this$props11.tableActive,
+        containerWidth = _this$props11.containerWidth,
+        options = _this$props11.options,
+        getPos = _this$props11.getPos,
+        pluginInjectionApi = _this$props11.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -546,8 +613,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper;
-          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
+          var _this4$wrapper;
+          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
         }
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
@@ -570,8 +637,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = (0, _utils5.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 _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag7.stickyScrollbar,
+        tablePreserveWidth = _getEditorFeatureFlag7.tablePreserveWidth;
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
@@ -583,7 +651,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-        isResizing: isResizing
+        isResizing: isResizing,
+        tablePreserveWidth: tablePreserveWidth
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -594,12 +663,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper2;
-          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
+          var _this4$wrapper2;
+          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this3$wrapper3;
-          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
+          var _this4$wrapper3;
+          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -614,13 +683,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this3.wrapper = elem;
+          _this4.wrapper = elem;
           if (elem) {
-            _this3.props.contentDOM(elem);
+            _this4.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this3.table) {
-              _this3.table = tableElement;
-              _this3.createShadowSentinels(_this3.table);
+            if (tableElement !== _this4.table) {
+              _this4.table = tableElement;
+              _this4.createShadowSentinels(_this4.table);
             }
           }
         }

package/dist/cjs/nodeviews/TableContainer.js

@@ -53,7 +53,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi;
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    tablePreserveWidth = _ref2.tablePreserveWidth;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
@@ -134,7 +135,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     tableRef: tableRef,
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    tablePreserveWidth: tablePreserveWidth
   };
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -172,7 +174,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
     isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi;
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    tablePreserveWidth = _ref3.tablePreserveWidth;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -182,7 +185,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tablePreserveWidth: tablePreserveWidth
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';

package/dist/cjs/nodeviews/TableResizer.js

@@ -97,7 +97,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef,
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
-    displayGapCursor = _ref.displayGapCursor;
+    displayGapCursor = _ref.displayGapCursor,
+    tablePreserveWidth = _ref.tablePreserveWidth;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
@@ -205,11 +206,11 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
+    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
     updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _snapping.defaultSnappingWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
@@ -245,7 +246,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView))(tr);
+      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
       var scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics2.generateResizedPayload)({
         originalNode: node,
@@ -263,7 +264,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       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]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/cjs/nodeviews/table.js

@@ -79,17 +79,24 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasHoveredRows", false);
     _this.getPos = props.getPos;
     _this.eventDispatcher = props.eventDispatcher;
+    _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
     return _this;
   }
   (0, _createClass2.default)(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
-      var 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);
+        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) {
+          var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+          if (tableInlineWidth) {
+            handleInlineTableWidth(this.table, tableInlineWidth);
+          }
         }
       }
       return rendered;
@@ -187,7 +194,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             contentDOM: forwardRef,
             getEditorFeatureFlags: props.getEditorFeatureFlags,
             dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-            pluginInjectionApi: props.pluginInjectionApi
+            pluginInjectionApi: props.pluginInjectionApi,
+            tableRef: _this3.table
           });
         }
       });