@atlaskit/editor-plugin-table 7.13.0 → 7.13.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.13.2
+
+### Patch Changes
+
+-   [#97570](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97570)
+    [`d53d6981c3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d53d6981c3ce) -
+    Clean up resizing logic and stop growing table container when overflowed
+
+## 7.13.1
+
+### Patch Changes
+
+-   [#94829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94829)
+    [`815fda434fe7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/815fda434fe7) -
+    [ED-22849] Align add column and row behaviour behind
+    platform_editor_table_duplicate_cell_colouring flag so that adding a column will copy cell
+    background from the left and adding a row will copy background colour from row above
+
 ## 7.13.0
 
 ### Minor Changes

package/dist/cjs/commands/insert.js

@@ -30,6 +30,7 @@ function addColumnAtCustomStep(column) {
 }
 function addColumnAt() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -38,7 +39,7 @@ function addColumnAt() {
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = (0, _utils2.addColumnAt)(column)(updatedTr);
+        updatedTr = (0, _utils2.addColumnAt)(column, isCellBackgroundDuplicated)(updatedTr);
       }
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
@@ -92,9 +93,10 @@ var addColumnAfter = exports.addColumnAfter = function addColumnAfter(isTableSca
 };
 var insertColumn = exports.insertColumn = function insertColumn() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(isTableScalingEnabled)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+      var tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
       var table = (0, _utils2.findTable)(tr.selection);
       if (!table) {
         return false;
@@ -108,7 +110,7 @@ var insertColumn = exports.insertColumn = function insertColumn() {
     };
   };
 };
-var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRow) {
+var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBackgroundDuplicated) {
   return function (state, dispatch) {
     // Don't clone the header row
     var headerRowEnabled = (0, _utils3.checkIfHeaderRowEnabled)(state.selection);
@@ -119,7 +121,7 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     if (row === 0 && headerRowEnabled) {
       return false;
     }
-    var tr = clonePreviousRow ? (0, _utils3.copyPreviousRow)(state.schema)(row)(state.tr) : (0, _utils2.addRowAt)(row)(state.tr);
+    var tr = clonePreviousRow ? (0, _utils3.copyPreviousRow)(state.schema)(row)(state.tr) : (0, _utils2.addRowAt)(row, undefined, isCellBackgroundDuplicated)(state.tr);
     var table = (0, _utils2.findTable)(tr.selection);
     if (!table) {
       return false;

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

@@ -172,6 +172,7 @@ var addRowAroundSelection = exports.addRowAroundSelection = function addRowAroun
   };
 };
 var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyticsAPI) {
+  var isCellbackgroundDuplicated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, options) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -189,7 +190,7 @@ var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRow
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertRow)(options.index, options.moveCursorToInsertedRow));
+    })(editorAnalyticsAPI)((0, _insert.insertRow)(options.index, options.moveCursorToInsertedRow, isCellbackgroundDuplicated));
   };
 };
 var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
@@ -226,6 +227,7 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
 };
 var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isCellbackgroundDuplicated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (inputMethod, position) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo3 = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -243,7 +245,7 @@ var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function ins
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertColumn)(isTableScalingEnabled)(position));
+    })(editorAnalyticsAPI)((0, _insert.insertColumn)(isTableScalingEnabled, isCellbackgroundDuplicated)(position));
   };
 };
 var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {

package/dist/cjs/plugin.js

@@ -368,7 +368,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.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -393,7 +394,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
             pluginConfig: pluginConfig,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -141,11 +141,14 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
         if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -215,7 +218,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     (0, _utils3.updateControls)()(state);
   }
   window.addEventListener('mouseup', finish);

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "resizeColumn", {
     return _resizeColumn.resizeColumn;
   }
 });
+Object.defineProperty(exports, "resizeColumnAndTable", {
+  enumerable: true,
+  get: function get() {
+    return _resizeColumn.resizeColumnAndTable;
+  }
+});
 Object.defineProperty(exports, "scale", {
   enumerable: true,
   get: function get() {

package/dist/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -7,7 +7,7 @@ exports.currentColWidth = currentColWidth;
 exports.domCellAround = domCellAround;
 exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = void 0;
+exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = exports.getStaticTableScalingPercent = void 0;
 exports.pointsAtCell = pointsAtCell;
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -108,4 +108,11 @@ var getTableScalingPercent = exports.getTableScalingPercent = function getTableS
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+var getStaticTableScalingPercent = exports.getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizeColumn = void 0;
+exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../../types");
 var _misc = require("./misc");
 var _resizeLogic = require("./resize-logic");
@@ -15,47 +14,65 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Resize a given column by an amount from the current state
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false) : (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return _objectSpread(_objectSpread({}, newState), {}, {
-      tableWidth: resizeState.tableWidth + delta
-    });
-  }
+  var newState = resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
+
+// try not scale table during resize
+var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnAndTable(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
+  var _tableRef$closest;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  // TODO: can we use document state, and apply scaling factor?
+  var tableWidth = tableRef.clientWidth;
+  var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  var resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  var newState = (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return _objectSpread(_objectSpread({}, newState), {}, {
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  });
+};
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -370,7 +370,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         editorView = _this$props10.editorView,
         selectionRect = _this$props10.selectionRect,
         editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props10.getEditorContainerWidth;
+        getEditorContainerWidth = _this$props10.getEditorContainerWidth,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
@@ -378,6 +379,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         targetCellPosition = _getPluginState11.targetCellPosition,
         _getPluginState11$isT = _getPluginState11.isTableScalingEnabled,
         isTableScalingEnabled = _getPluginState11$isT === void 0 ? false : _getPluginState11$isT;
+      var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
+        tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC;
       switch (item.value.name) {
         case 'sort_column_desc':
           (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
@@ -407,11 +411,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'insert_column':
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'insert_row':
-          (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, {
+          (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.CONTEXT_MENU, {
             index: selectionRect.bottom,
             moveCursorToInsertedRow: true
           })(state, dispatch);
@@ -451,8 +455,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         isSubmenuOpen: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref2) {
-      var item = _ref2.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref3) {
+      var item = _ref3.item;
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
@@ -475,8 +479,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         (0, _commands.hoverMergedCells)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref3) {
-      var item = _ref3.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref4) {
+      var item = _ref4.item;
       var _this$props$editorVie2 = _this.props.editorView,
         state = _this$props$editorVie2.state,
         dispatch = _this$props$editorVie2.dispatch;

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

@@ -24,7 +24,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isOpen = _ref.isOpen,
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    getEditorContainerWidth = _ref.getEditorContainerWidth;
+    getEditorContainerWidth = _ref.getEditorContainerWidth,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -72,7 +73,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -191,7 +191,8 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     mountPoint = _ref.mountPoint,
     scrollableElement = _ref.scrollableElement,
     boundariesElement = _ref.boundariesElement,
-    isTableScalingEnabled = _ref.isTableScalingEnabled;
+    isTableScalingEnabled = _ref.isTableScalingEnabled,
+    tableDuplicateCellColouring = _ref.tableDuplicateCellColouring;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -215,7 +216,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
   }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -25,7 +25,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     stickyHeaders = _ref.stickyHeaders,
     pluginConfig = _ref.pluginConfig,
-    isTableScalingEnabled = _ref.isTableScalingEnabled;
+    isTableScalingEnabled = _ref.isTableScalingEnabled,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -35,6 +36,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
+  var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+    _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
+    tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC;
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -68,7 +72,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    tableDuplicateCellColouring: tableDuplicateCellColouring
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -179,12 +179,14 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       var _this$props3 = this.props,
         editorView = _this$props3.editorView,
         insertRowButtonIndex = _this$props3.insertRowButtonIndex,
-        editorAnalyticsAPI = _this$props3.editorAnalyticsAPI;
+        editorAnalyticsAPI = _this$props3.editorAnalyticsAPI,
+        getEditorFeatureFlags = _this$props3.getEditorFeatureFlags;
       if (typeof insertRowButtonIndex !== 'undefined') {
         event.preventDefault();
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.BUTTON, {
+        var featureFlags = !!getEditorFeatureFlags && getEditorFeatureFlags();
+        (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI, featureFlags && featureFlags.tableDuplicateCellColouring)(_analytics.INPUT_METHOD.BUTTON, {
           index: insertRowButtonIndex,
           moveCursorToInsertedRow: true
         })(state, dispatch);
@@ -196,15 +198,19 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       var _this$props4 = this.props,
         editorView = _this$props4.editorView,
         insertColumnButtonIndex = _this$props4.insertColumnButtonIndex,
-        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI;
+        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
+        getEditorFeatureFlags = _this$props4.getEditorFeatureFlags;
       if (typeof insertColumnButtonIndex !== 'undefined') {
         event.preventDefault();
         var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
           _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
           isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
+        var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+          _ref$tableDuplicateCe = _ref.tableDuplicateCellColouring,
+          tableDuplicateCellColouring = _ref$tableDuplicateCe === void 0 ? false : _ref$tableDuplicateCe;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

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

@@ -78,6 +78,7 @@ var defaultSelectionRect = {
 var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   var isTableScalingEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
+  var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -157,12 +158,12 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (direction === 'row') {
-          (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
+          (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
             index: (index !== null && index !== void 0 ? index : 0) + offset,
             moveCursorToInsertedRow: true
           })(state, dispatch);
         } else {
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
         }
         return true;
       },

package/dist/es2019/commands/insert.js

@@ -19,14 +19,14 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-export function addColumnAt(isTableScalingEnabled = false) {
+export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDuplicated) {
   return (column, allowAddColumnCustomStep = false, view) => {
     return tr => {
       let updatedTr = tr;
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = addColumnAtPMUtils(column)(updatedTr);
+        updatedTr = addColumnAtPMUtils(column, isCellBackgroundDuplicated)(updatedTr);
       }
       const table = findTable(updatedTr.selection);
       if (table) {
@@ -73,8 +73,8 @@ export const addColumnAfter = isTableScalingEnabled => (state, dispatch, view) =
   }
   return true;
 };
-export const insertColumn = (isTableScalingEnabled = false) => column => (state, dispatch, view) => {
-  let tr = addColumnAt(isTableScalingEnabled)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = (isTableScalingEnabled = false, isCellBackgroundDuplicated) => column => (state, dispatch, view) => {
+  let tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;
@@ -86,7 +86,7 @@ export const insertColumn = (isTableScalingEnabled = false) => column => (state,
   }
   return true;
 };
-export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
+export const insertRow = (row, moveCursorToTheNewRow, isCellBackgroundDuplicated) => (state, dispatch) => {
   // Don't clone the header row
   const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
   const clonePreviousRow = headerRowEnabled && row > 1 || !headerRowEnabled && row > 0;
@@ -96,7 +96,7 @@ export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
   if (row === 0 && headerRowEnabled) {
     return false;
   }
-  const tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row)(state.tr);
+  const tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row, undefined, isCellBackgroundDuplicated)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;

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

@@ -152,7 +152,7 @@ export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispa
     moveCursorToInsertedRow: false
   })(state, dispatch);
 };
-export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, options) => withEditorAnalyticsAPI(state => {
+export const insertRowWithAnalytics = (editorAnalyticsAPI, isCellbackgroundDuplicated = false) => (inputMethod, options) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -169,7 +169,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
+})(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow, isCellbackgroundDuplicated));
 export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) => withEditorAnalyticsAPI(state => {
   const {
     table,
@@ -202,7 +202,7 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
   ariaNotify: ariaNotify,
   getIntl: getIntl
 }));
-export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
+export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false, isCellbackgroundDuplicated = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -219,7 +219,7 @@ export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnab
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
+})(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position));
 export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
   selection
 }) => {

package/dist/es2019/plugin.js

@@ -364,7 +364,8 @@ const tablesPlugin = ({
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -389,7 +390,8 @@ const tablesPlugin = ({
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
             pluginConfig: pluginConfig,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,