@atlaskit/editor-plugin-table 7.4.8 → 7.5.0

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, 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';
@@ -27,7 +27,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';
@@ -168,7 +168,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;
@@ -179,13 +180,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 = 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);
     });
     _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -312,8 +316,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(this.wrapper, this.props.view);
@@ -359,8 +363,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();
@@ -385,20 +389,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 = 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 = getResizeState({
+          minWidth: COLUMN_MIN_WIDTH,
+          maxSize: tableRenderWidth,
+          table: tableNode,
+          tableRef: this.table,
+          start: start,
+          domAtPos: view.domAtPos,
+          tablePreserveWidth: true
+        });
+        requestAnimationFrame(function () {
+          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 = 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) {
+        this.handleColgroupUpdates();
+      }
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
@@ -408,7 +475,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(_this2.updateShadowState, _this2.table, _this2.wrapper);
+            _this3.overflowShadowsObserver = new OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -433,7 +500,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) {
-            recreateResizeColsByNode(this.table, currentTable);
+            insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
           }
           updateControls()(_view.state);
         }
@@ -464,24 +531,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;
@@ -539,8 +606,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 ? -tableToolbarSize : tableMarginSides;
@@ -563,8 +630,9 @@ 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 _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+      var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag7.stickyScrollbar,
+        tablePreserveWidth = _getEditorFeatureFlag7.tablePreserveWidth;
       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,
@@ -576,7 +644,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.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
@@ -587,12 +656,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.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -607,13 +676,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.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/esm/nodeviews/TableContainer.js

@@ -43,7 +43,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi;
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    tablePreserveWidth = _ref2.tablePreserveWidth;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateContainerHeight = useCallback(function (height) {
@@ -124,7 +125,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     tableRef: tableRef,
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    tablePreserveWidth: tablePreserveWidth
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -162,7 +164,8 @@ export var 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.createElement(ResizableTableContainer, {
       className: className,
@@ -172,7 +175,8 @@ export var TableContainer = function TableContainer(_ref3) {
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tablePreserveWidth: tablePreserveWidth
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/esm/nodeviews/TableResizer.js

@@ -87,7 +87,8 @@ export var TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef,
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
-    displayGapCursor = _ref.displayGapCursor;
+    displayGapCursor = _ref.displayGapCursor,
+    tablePreserveWidth = _ref.tablePreserveWidth;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -195,11 +196,11 @@ export var TableResizer = function TableResizer(_ref) {
       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]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
@@ -235,7 +236,7 @@ export var 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(generateResizedPayload({
         originalNode: node,
@@ -253,7 +254,7 @@ export var 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 = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/esm/nodeviews/table.js

@@ -72,17 +72,24 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_assertThisInitialized(_this), "hasHoveredRows", false);
     _this.getPos = props.getPos;
     _this.eventDispatcher = props.eventDispatcher;
+    _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
     return _this;
   }
   _createClass(TableView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = 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;
@@ -180,7 +187,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             contentDOM: forwardRef,
             getEditorFeatureFlags: props.getEditorFeatureFlags,
             dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-            pluginInjectionApi: props.pluginInjectionApi
+            pluginInjectionApi: props.pluginInjectionApi,
+            tableRef: _this3.table
           });
         }
       });

package/dist/esm/plugin.js

@@ -147,8 +147,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableKeymap',
         plugin: function plugin() {
           var _ref6 = options || {},
-            dragAndDropEnabled = _ref6.dragAndDropEnabled;
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled);
+            dragAndDropEnabled = _ref6.dragAndDropEnabled,
+            getEditorFeatureFlags = _ref6.getEditorFeatureFlags;
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, dragAndDropEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -189,40 +190,40 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableDragAndDrop',
         plugin: function plugin(_ref10) {
-          var dispatch = _ref10.dispatch,
-            eventDispatcher = _ref10.eventDispatcher,
-            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined;
+          var dispatch = _ref10.dispatch;
+          var _ref11 = options || {},
+            getEditorFeatureFlags = _ref11.getEditorFeatureFlags;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref12) {
+        plugin: function plugin(_ref13) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
-            dispatch = _ref12.dispatch;
+          var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
+            dispatch = _ref13.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref13) {
+        plugin: function plugin(_ref14) {
           var _options$tableResizin;
-          var dispatch = _ref13.dispatch,
-            dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
+          var dispatch = _ref14.dispatch,
+            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
           return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref14) {
-          var dispatch = _ref14.dispatch,
-            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref15) {
+          var dispatch = _ref15.dispatch,
+            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -253,12 +254,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref15) {
-      var editorView = _ref15.editorView,
-        popupsMountPoint = _ref15.popupsMountPoint,
-        popupsBoundariesElement = _ref15.popupsBoundariesElement,
-        popupsScrollableElement = _ref15.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref16) {
+      var editorView = _ref16.editorView,
+        popupsMountPoint = _ref16.popupsMountPoint,
+        popupsBoundariesElement = _ref16.popupsBoundariesElement,
+        popupsScrollableElement = _ref16.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -272,30 +273,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref16) {
-          var resizingPluginState = _ref16.tableResizingPluginState,
-            stickyHeadersState = _ref16.stickyHeadersState,
-            tablePluginState = _ref16.tablePluginState,
-            tableWidthPluginState = _ref16.tableWidthPluginState,
-            dragAndDropState = _ref16.dragAndDropState;
+        render: function render(_ref17) {
+          var resizingPluginState = _ref17.tableResizingPluginState,
+            stickyHeadersState = _ref17.stickyHeadersState,
+            tablePluginState = _ref17.tablePluginState,
+            tableWidthPluginState = _ref17.tableWidthPluginState,
+            dragAndDropState = _ref17.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref17 = tablePluginState,
-            tableNode = _ref17.tableNode,
-            tablePos = _ref17.tablePos,
-            targetCellPosition = _ref17.targetCellPosition,
-            isContextualMenuOpen = _ref17.isContextualMenuOpen,
-            layout = _ref17.layout,
-            tableRef = _ref17.tableRef,
-            pluginConfig = _ref17.pluginConfig,
-            insertColumnButtonIndex = _ref17.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref17.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref17.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref17.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref17.isDragAndDropEnabled,
-            tableWrapperTarget = _ref17.tableWrapperTarget;
+          var _ref18 = tablePluginState,
+            tableNode = _ref18.tableNode,
+            tablePos = _ref18.tablePos,
+            targetCellPosition = _ref18.targetCellPosition,
+            isContextualMenuOpen = _ref18.isContextualMenuOpen,
+            layout = _ref18.layout,
+            tableRef = _ref18.tableRef,
+            pluginConfig = _ref18.pluginConfig,
+            insertColumnButtonIndex = _ref18.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref18.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref18.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref18.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref18.isDragAndDropEnabled,
+            tableWrapperTarget = _ref18.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -336,7 +337,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             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,
@@ -360,7 +362,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             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,
@@ -376,8 +379,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref18) {
-        var formatMessage = _ref18.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/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';
-var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
+var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags) {
   var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
   var rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
     canMonitor: function canMonitor(_ref) {
@@ -147,7 +147,10 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
             tableRef = _getTablePluginState3.tableRef,
             tableNode = _getTablePluginState3.tableNode;
           if (tableRef && tableNode) {
-            insertColgroupFromNode(tableRef, tableNode);
+            var _ref8 = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
+              _ref8$tablePreserveWi = _ref8.tablePreserveWidth,
+              tablePreserveWidth = _ref8$tablePreserveWi === void 0 ? false : _ref8$tablePreserveWi;
+            insertColgroupFromNode(tableRef, tableNode, tablePreserveWidth);
           }
         }
         editorView.focus();
@@ -155,7 +158,7 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
     }
   })]));
 };
-export var createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
+export var createPlugin = function createPlugin(dispatch, getEditorFeatureFlags, editorAnalyticsAPI) {
   return new SafePlugin({
     state: createPluginState(dispatch, function (state) {
       return {
@@ -223,7 +226,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
     },
     view: function view(editorView) {
       return {
-        destroy: destroyFn(editorView, editorAnalyticsAPI)
+        destroy: destroyFn(editorView, editorAnalyticsAPI, getEditorFeatureFlags)
       };
     },
     props: {
@@ -233,7 +236,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
         return decorationSet;
       },
       handleKeyDown: function handleKeyDown(view, event) {
-        var _ref8;
+        var _ref9;
         var tr = view.state.tr;
         var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
@@ -254,7 +257,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
             return true;
           }
         }
-        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
+        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref9 = event.target || null) === null || _ref9 === void 0 ? void 0 : _ref9.id);
         var keysToTrap = ['Enter', ' '];
         var _getPluginState3 = getPluginState(view.state),
           isDragMenuOpen = _getPluginState3.isDragMenuOpen;