@atlaskit/editor-plugin-table 7.16.18 → 7.16.19

package/dist/esm/event-handlers.js

@@ -345,7 +345,8 @@ export function handleTripleClick(view, pos) {
 }
 export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
   var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -388,7 +389,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, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(tr);
           }
         }
       }

package/dist/esm/nodeviews/TableComponent.js

@@ -352,18 +352,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
-      if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
+        stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+      if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
         this.handleColgroupUpdates(true);
       }
-      if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
+      if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
         this.handleColgroupUpdates(true);
       }
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         if (stickyScrollbar) {
           if (this.table) {
             this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
@@ -413,8 +415,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.dragAndDropCleanupFn();
       }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
-      var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
       if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -452,7 +454,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props9.containerWidth,
         isResizing = _this$props9.isResizing,
         view = _this$props9.view,
-        getPos = _this$props9.getPos;
+        getPos = _this$props9.getPos,
+        getEditorFeatureFlags = _this$props9.getEditorFeatureFlags;
       if (!this.table) {
         return;
       }
@@ -483,8 +486,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
         var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
-        var isTableScalingEnabledWithLockButton = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-        var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
+        var _getEditorFeatureFlag4 = getEditorFeatureFlags(),
+          _getEditorFeatureFlag5 = _getEditorFeatureFlag4.tableWithFixedColumnWidthsOption,
+          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag5 === void 0 ? false : _getEditorFeatureFlag5;
+        var isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
+        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options2;
           var resizeState = getResizeState({
@@ -498,10 +504,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
           });
           var shouldScaleOnColgroupUpdate = false;
-          if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+          if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
             shouldScaleOnColgroupUpdate = true;
           }
-          if (isTableScalingEnabledWithLockButton && tableNode.attrs.displayMode !== 'fixed') {
+          if (isTableScalingWithFixedColumnWidthsOptionEnabled && tableNode.attrs.displayMode !== 'fixed') {
             shouldScaleOnColgroupUpdate = true;
           }
 
@@ -528,7 +534,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isResizing = _this$props10.isResizing,
         options = _this$props10.options,
         isTableScalingEnabled = _this$props10.isTableScalingEnabled,
-        getPos = _this$props10.getPos;
+        getPos = _this$props10.getPos,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
       if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
@@ -537,13 +544,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
-      if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      var _getEditorFeatureFlag6 = getEditorFeatureFlags(),
+        _getEditorFeatureFlag7 = _getEditorFeatureFlag6.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag7 === void 0 ? false : _getEditorFeatureFlag7;
+      if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
-      var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-      var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-      if (isTableScalingEnabledWithLockButton && getNode().attrs.displayMode !== 'fixed') {
+      var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+      if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
@@ -749,9 +759,11 @@ 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 shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+      var _getEditorFeatureFlag8 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
+        _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
+      var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
@@ -767,6 +779,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
         isTableScalingEnabled: isTableScalingEnabled,
+        isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent

package/dist/esm/nodeviews/TableContainer.js

@@ -116,6 +116,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     tableWrapperHeight = _ref4.tableWrapperHeight,
     isWholeTableInDanger = _ref4.isWholeTableInDanger,
     isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref4.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent;
   var containerRef = useRef(null);
@@ -223,6 +224,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     isFullWidthModeEnabled: isFullWidthModeEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     pluginInjectionApi: pluginInjectionApi,
@@ -278,6 +280,7 @@ export var TableContainer = function TableContainer(_ref6) {
     isWholeTableInDanger = _ref6.isWholeTableInDanger,
     isTableResizingEnabled = _ref6.isTableResizingEnabled,
     isTableScalingEnabled = _ref6.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent;
   if (isTableResizingEnabled && !isNested) {
@@ -295,6 +298,7 @@ export var TableContainer = function TableContainer(_ref6) {
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
+      isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent

package/dist/esm/nodeviews/TableResizer.js

@@ -110,6 +110,7 @@ export var TableResizer = function TableResizer(_ref) {
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isWholeTableInDanger = _ref.isWholeTableInDanger,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
@@ -233,7 +234,7 @@ export var TableResizer = function TableResizer(_ref) {
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled);
     var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
     var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
@@ -252,7 +253,7 @@ export var TableResizer = function TableResizer(_ref) {
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/nodeviews/table.js

@@ -76,6 +76,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _this.getPos = props.getPos;
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
+    _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
     return _this;
   }
   _createClass(TableView, [{
@@ -83,9 +84,9 @@ 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$options2;
+        var _this$options, _this$options2, _this$getEditorFeatur;
         this.table = rendered.dom;
-        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && this.node.attrs.displayMode === 'fixed') {
+        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
           if (tableInlineWidth) {
             handleInlineTableWidth(this.table, tableInlineWidth);
@@ -99,7 +100,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     value: function setDomAttrs(node) {
       var _this2 = this,
         _this$options3,
-        _this$options4;
+        _this$options4,
+        _this$getEditorFeatur2;
       if (!this.table) {
         return;
       }
@@ -109,7 +111,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       });
 
       // Preserve Table Width cannot have inline width set on the table
-      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && node.attrs.displayMode === 'fixed') {
+      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && (_this$getEditorFeatur2 = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur2 !== void 0 && _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption && node.attrs.displayMode === 'fixed') {
         var _tableWidthPluginKey$;
         // handle inline style when table been resized
         var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());

package/dist/esm/plugin.js

@@ -52,7 +52,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablesPlugin = function tablesPlugin(_ref) {
-  var _api$analytics, _api$analytics2;
+  var _api$analytics, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -65,8 +65,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
     };
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  var isTableScalingWithFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
+  var shouldUseIncreasedScalingPercent = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
+  isTableFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  var isCellBackgroundDuplicated = (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableDuplicateCellColouring) || false;
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -195,7 +197,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled = _ref7$isTableAlignmen === void 0 ? false : _ref7$isTableAlignmen,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
             fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, shouldUseIncreasedScalingPercent);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -237,7 +239,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableDragAndDrop',
         plugin: function plugin(_ref11) {
           var dispatch = _ref11.dispatch;
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI) : undefined;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;
         }
       }, {
         name: 'tableViewModeSort',
@@ -368,6 +370,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
             isDragAndDropEnabled: isDragAndDropEnabled,
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -465,7 +468,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       },
       floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
         return editorViewRef.current;
-      }, options, isTableScalingWithFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -18,7 +18,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, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) {
   var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
   var rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
     canMonitor: function canMonitor(_ref) {
@@ -154,16 +154,13 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
             tableRef = _getTablePluginState3.tableRef,
             tableNode = _getTablePluginState3.tableNode;
           if (tableRef && tableNode) {
-            var _getTablePluginState4 = getTablePluginState(editorView.state),
-              _getTablePluginState5 = _getTablePluginState4.isTableScalingEnabled,
-              isTableScalingEnabled = _getTablePluginState5 === void 0 ? false : _getTablePluginState5;
             var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-            var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-            var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-            if (isTableScalingEnabledWithLockButton) {
+            var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+            if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
               isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
             }
-            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
+            var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable, undefined, shouldUseIncreasedScalingPercent);
           }
         }
         editorView.focus();
@@ -172,6 +169,8 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
   })]));
 };
 export var createPlugin = function createPlugin(dispatch, editorAnalyticsAPI) {
+  var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return new SafePlugin({
     state: createPluginState(dispatch, function (state) {
       return {
@@ -186,10 +185,10 @@ export var createPlugin = function createPlugin(dispatch, editorAnalyticsAPI) {
     }),
     key: pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _getTablePluginState6 = getTablePluginState(oldState),
-        oldTargetCellPosition = _getTablePluginState6.targetCellPosition;
-      var _getTablePluginState7 = getTablePluginState(newState),
-        newTargetCellPosition = _getTablePluginState7.targetCellPosition;
+      var _getTablePluginState4 = getTablePluginState(oldState),
+        oldTargetCellPosition = _getTablePluginState4.targetCellPosition;
+      var _getTablePluginState5 = getTablePluginState(newState),
+        newTargetCellPosition = _getTablePluginState5.targetCellPosition;
       var _getPluginState = getPluginState(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex;
@@ -239,7 +238,7 @@ export var createPlugin = function createPlugin(dispatch, editorAnalyticsAPI) {
     },
     view: function view(editorView) {
       return {
-        destroy: destroyFn(editorView, editorAnalyticsAPI)
+        destroy: destroyFn(editorView, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled)
       };
     },
     props: {

package/dist/esm/pm-plugins/keymap.js

@@ -15,7 +15,9 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   var isFullWidthEnabled = arguments.length > 5 ? arguments[5] : undefined;
   var pluginInjectionApi = arguments.length > 6 ? arguments[6] : undefined;
   var getIntl = arguments.length > 7 ? arguments[7] : undefined;
-  var shouldUseIncreasedScalingPercent = arguments.length > 8 ? arguments[8] : undefined;
+  var isCellBackgroundDuplicated = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 10 ? arguments[10] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
@@ -27,13 +29,13 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
-  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
     bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
     bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled), list);
-    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled), list);
+    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
@@ -50,8 +52,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(moveColumnRight.common, moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', 1), list);
 
     // Delete row/column shortcuts
-    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
@@ -68,8 +70,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
       ariaNotify: ariaNotifyPlugin,
       getIntl: getIntl
     }), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
     bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
       ariaNotify: ariaNotifyPlugin,
       getIntl: getIntl

package/dist/esm/pm-plugins/main.js

@@ -81,8 +81,11 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         });
       }
       if (tr) {
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
         // "fixTables" removes empty rows as we don't allow that in schema
-        var updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
+        var updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(function (tr) {

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -47,8 +47,11 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     getEditorContainerWidth: getEditorContainerWidth
   });
   var shouldScale = tableDepth === 0 && isTableScalingEnabled;
-  var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
+    tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
+  var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
   }
   var resizeState = getResizeState({
@@ -59,7 +62,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     start: start,
     domAtPos: domAtPos,
     isTableScalingEnabled: shouldScale,
-    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
+    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
   });
   if (evenColumns({
     resizeState: resizeState,
@@ -134,8 +137,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
         var _shouldScale = tableDepth === 0 && isTableScalingEnabled;
-        var _isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-        if (_isTableScalingEnabledWithLockButton) {
+        if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
         var resizedDelta = clientX - startX;
@@ -144,7 +146,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
         } else {
-          var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, _isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
+          var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
           tr = updateColumnWidths(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
@@ -212,9 +214,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var map = TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     var shouldScale = tableDepth === 0 && isTableScalingEnabled;
-    var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-    var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-    if (isTableScalingEnabledWithLockButton) {
+    var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {

package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js

@@ -298,6 +298,7 @@ export var normaliseTableLayout = function normaliseTableLayout(input) {
 };
 export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, getEditorContainerWidth) {
   var isTableScalingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   // Fail early so that we don't do complex calculations for no reason
   var numColumnsSelected = rect.right - rect.left;
   if (numColumnsSelected <= 1) {
@@ -331,8 +332,8 @@ export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFrom
   });
   var resizeState;
   var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
   }
   resizeState = getResizeState({
@@ -343,7 +344,7 @@ export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFrom
     start: table.start,
     domAtPos: domAtPos,
     isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
-    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
+    shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
   });
   var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   var widthsBefore = resizeState.widths;

package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js

@@ -101,6 +101,7 @@ export function scaleTableTo(state, maxSize) {
 }
 export var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isTableWithFixedColumnWidthsOptionEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
@@ -113,8 +114,8 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     tableRef.style.width = "".concat(width, "px");
   }
   var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-  if (isTableScalingEnabledWithLockButton) {
+  var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableWithFixedColumnWidthsOptionEnabled;
+  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
   }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
@@ -123,7 +124,7 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     syncStickyRowToTable(tableRef);
     return;
   }
-  var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
   // Here isTableScalingEnabled = false
   shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);