@atlaskit/editor-plugin-table 7.13.0 → 7.13.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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,

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

@@ -399,7 +399,8 @@ export class ContextualMenu extends Component {
         editorView,
         selectionRect,
         editorAnalyticsAPI,
-        getEditorContainerWidth
+        getEditorContainerWidth,
+        getEditorFeatureFlags
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -410,6 +411,9 @@ export class ContextualMenu extends Component {
         targetCellPosition,
         isTableScalingEnabled = false
       } = getPluginState(state);
+      const {
+        tableDuplicateCellColouring = false
+      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -439,11 +443,11 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':
-          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
+          insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.CONTEXT_MENU, {
             index: selectionRect.bottom,
             moveCursorToInsertedRow: true
           })(state, dispatch);

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

@@ -16,7 +16,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -68,7 +69,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -176,7 +176,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   mountPoint,
   scrollableElement,
   boundariesElement,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  tableDuplicateCellColouring
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -204,7 +205,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring);
   const {
     menuItems,
     menuCallback

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

@@ -18,7 +18,8 @@ const FloatingDragMenu = ({
   editorAnalyticsAPI,
   stickyHeaders,
   pluginConfig,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  getEditorFeatureFlags
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -29,6 +30,9 @@ const FloatingDragMenu = ({
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
+  const {
+    tableDuplicateCellColouring = false
+  } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -62,7 +66,8 @@ const FloatingDragMenu = ({
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    tableDuplicateCellColouring: tableDuplicateCellColouring
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -156,7 +156,8 @@ export class FloatingInsertButton extends React.Component {
     const {
       editorView,
       insertRowButtonIndex,
-      editorAnalyticsAPI
+      editorAnalyticsAPI,
+      getEditorFeatureFlags
     } = this.props;
     if (typeof insertRowButtonIndex !== 'undefined') {
       event.preventDefault();
@@ -164,7 +165,8 @@ export class FloatingInsertButton extends React.Component {
         state,
         dispatch
       } = editorView;
-      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+      const featureFlags = !!getEditorFeatureFlags && getEditorFeatureFlags();
+      insertRowWithAnalytics(editorAnalyticsAPI, featureFlags && featureFlags.tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, {
         index: insertRowButtonIndex,
         moveCursorToInsertedRow: true
       })(state, dispatch);
@@ -174,18 +176,22 @@ export class FloatingInsertButton extends React.Component {
     const {
       editorView,
       insertColumnButtonIndex,
-      editorAnalyticsAPI
+      editorAnalyticsAPI,
+      getEditorFeatureFlags
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
       const {
         isTableScalingEnabled = false
       } = getPluginState(editorView.state);
+      const {
+        tableDuplicateCellColouring = false
+      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       const {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }

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

@@ -65,7 +65,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
@@ -140,12 +140,12 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     icon,
     onClick: (state, dispatch) => {
       if (direction === 'row') {
-        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+        insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
           index: (index !== null && index !== void 0 ? index : 0) + offset,
           moveCursorToInsertedRow: true
         })(state, dispatch);
       } else {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/commands/insert.js

@@ -21,6 +21,7 @@ function addColumnAtCustomStep(column) {
 }
 export 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;
@@ -29,7 +30,7 @@ export function addColumnAt() {
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = addColumnAtPMUtils(column)(updatedTr);
+        updatedTr = addColumnAtPMUtils(column, isCellBackgroundDuplicated)(updatedTr);
       }
       var table = findTable(updatedTr.selection);
       if (table) {
@@ -83,9 +84,10 @@ export var addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
 };
 export var 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, getAllowAddColumnCustomStep(state), view)(state.tr);
+      var tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
       var table = findTable(tr.selection);
       if (!table) {
         return false;
@@ -99,7 +101,7 @@ export var insertColumn = function insertColumn() {
     };
   };
 };
-export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
+export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBackgroundDuplicated) {
   return function (state, dispatch) {
     // Don't clone the header row
     var headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
@@ -110,7 +112,7 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
     if (row === 0 && headerRowEnabled) {
       return false;
     }
-    var tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row)(state.tr);
+    var tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row, undefined, isCellBackgroundDuplicated)(state.tr);
     var table = findTable(tr.selection);
     if (!table) {
       return false;