@atlaskit/editor-plugin-table 7.13.0 → 7.13.2

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

@@ -365,7 +365,8 @@ export var 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;
@@ -373,6 +374,9 @@ export var 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':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -402,11 +406,11 @@ export var ContextualMenu = /*#__PURE__*/function (_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);
@@ -446,8 +450,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isSubmenuOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref2) {
-      var item = _ref2.item;
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref3) {
+      var item = _ref3.item;
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
@@ -470,8 +474,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         hoverMergedCells()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref3) {
-      var item = _ref3.item;
+    _defineProperty(_assertThisInitialized(_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/esm/ui/FloatingContextualMenu/index.js

@@ -16,7 +16,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 = getPluginState(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -64,7 +65,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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

@@ -180,7 +180,8 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     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;
@@ -204,7 +205,7 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     hasMergedCellsInTable = 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 = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
+  var dragMenuConfig = 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/esm/ui/FloatingDragMenu/index.js

@@ -18,7 +18,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;
   }
@@ -28,6 +29,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
+  var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+    _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
+    tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC;
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -61,7 +65,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    tableDuplicateCellColouring: tableDuplicateCellColouring
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -169,12 +169,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       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;
-        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+        var featureFlags = !!getEditorFeatureFlags && getEditorFeatureFlags();
+        insertRowWithAnalytics(editorAnalyticsAPI, featureFlags && featureFlags.tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, {
           index: insertRowButtonIndex,
           moveCursorToInsertedRow: true
         })(state, dispatch);
@@ -186,15 +188,19 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       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 = 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;
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

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

@@ -71,6 +71,7 @@ var defaultSelectionRect = {
 export var 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,
@@ -150,12 +151,12 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       icon: icon,
       onClick: function 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/types/commands/insert.d.ts

@@ -2,10 +2,10 @@ import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/a
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare function addColumnAt(isTableScalingEnabled?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
+export declare function addColumnAt(isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
 export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Command;
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
-export declare const insertColumn: (isTableScalingEnabled?: boolean) => (column: number) => Command;
-export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
+export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
+export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
 export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean) => Command;
 export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/commands-with-analytics.d.ts

@@ -12,9 +12,9 @@ export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyti
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number, editorView?: EditorView | null) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
-export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
+export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isCellbackgroundDuplicated?: boolean) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
 export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
-export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
+export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isCellbackgroundDuplicated?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
 export declare const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -9,5 +9,5 @@ export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, } from './consts';

package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts

@@ -25,4 +25,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
+export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number) => number;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number) => ResizeState;

package/dist/types/ui/FloatingContextualMenu/index.d.ts

@@ -17,7 +17,7 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -25,8 +25,9 @@ type DragMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     isTableScalingEnabled?: boolean;
+    tableDuplicateCellColouring?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types/ui/FloatingDragMenu/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -21,9 +21,10 @@ export interface Props {
     stickyHeaders?: RowStickyState;
     pluginConfig?: PluginConfig;
     isTableScalingEnabled?: boolean;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, getEditorFeatureFlags, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/ui/FloatingInsertButton/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -20,6 +20,7 @@ export interface Props {
     hasStickyHeaders?: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;

package/dist/types/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/commands/insert.d.ts

@@ -2,10 +2,10 @@ import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/a
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare function addColumnAt(isTableScalingEnabled?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
+export declare function addColumnAt(isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
 export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Command;
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
-export declare const insertColumn: (isTableScalingEnabled?: boolean) => (column: number) => Command;
-export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
+export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
+export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
 export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean) => Command;
 export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -12,9 +12,9 @@ export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyti
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number, editorView?: EditorView | null) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
-export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
+export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isCellbackgroundDuplicated?: boolean) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
 export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
-export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
+export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isCellbackgroundDuplicated?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;
 export declare const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -9,5 +9,5 @@ export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, } from './consts';

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -25,4 +25,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
+export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number) => number;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number) => ResizeState;

package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts

@@ -17,7 +17,7 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -25,8 +25,9 @@ type DragMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     isTableScalingEnabled?: boolean;
+    tableDuplicateCellColouring?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -21,9 +21,10 @@ export interface Props {
     stickyHeaders?: RowStickyState;
     pluginConfig?: PluginConfig;
     isTableScalingEnabled?: boolean;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, getEditorFeatureFlags, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -20,6 +20,7 @@ export interface Props {
     hasStickyHeaders?: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.13.0",
+  "version": "7.13.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
     "@atlaskit/primitives": "^6.1.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tokens": "^1.46.0",
+    "@atlaskit/tokens": "^1.47.0",
     "@atlaskit/tooltip": "^18.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/commands/insert.ts

@@ -44,7 +44,10 @@ function addColumnAtCustomStep(column: number) {
   };
 }
 
-export function addColumnAt(isTableScalingEnabled = false) {
+export function addColumnAt(
+  isTableScalingEnabled = false,
+  isCellBackgroundDuplicated?: boolean,
+) {
   return (
     column: number,
     allowAddColumnCustomStep: boolean = false,
@@ -55,7 +58,10 @@ export function addColumnAt(isTableScalingEnabled = false) {
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = addColumnAtPMUtils(column)(updatedTr);
+        updatedTr = addColumnAtPMUtils(
+          column,
+          isCellBackgroundDuplicated,
+        )(updatedTr);
       }
       const table = findTable(updatedTr.selection);
       if (table) {
@@ -126,10 +132,10 @@ export const addColumnAfter =
   };
 
 export const insertColumn =
-  (isTableScalingEnabled = false) =>
+  (isTableScalingEnabled = false, isCellBackgroundDuplicated?: boolean) =>
   (column: number): Command =>
   (state, dispatch, view) => {
-    let tr = addColumnAt(isTableScalingEnabled)(
+    let tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(
       column,
       getAllowAddColumnCustomStep(state),
       view,
@@ -150,7 +156,11 @@ export const insertColumn =
   };
 
 export const insertRow =
-  (row: number, moveCursorToTheNewRow: boolean): Command =>
+  (
+    row: number,
+    moveCursorToTheNewRow: boolean,
+    isCellBackgroundDuplicated?: boolean,
+  ): Command =>
   (state, dispatch) => {
     // Don't clone the header row
     const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
@@ -165,7 +175,7 @@ export const insertRow =
 
     const tr = clonePreviousRow
       ? copyPreviousRow(state.schema)(row)(state.tr)
-      : addRowAt(row)(state.tr);
+      : addRowAt(row, undefined, isCellBackgroundDuplicated)(state.tr);
 
     const table = findTable(tr.selection);
     if (!table) {

package/src/commands-with-analytics.ts

@@ -240,7 +240,10 @@ export const addRowAroundSelection =
   };
 
 export const insertRowWithAnalytics =
-  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    isCellbackgroundDuplicated = false,
+  ) =>
   (inputMethod: InsertRowMethods, options: InsertRowOptions) =>
     withEditorAnalyticsAPI((state) => {
       const { totalRowCount, totalColumnCount } = getSelectedTableInfo(
@@ -259,7 +262,11 @@ export const insertRowWithAnalytics =
         eventType: EVENT_TYPE.TRACK,
       };
     })(editorAnalyticsAPI)(
-      insertRow(options.index, options.moveCursorToInsertedRow),
+      insertRow(
+        options.index,
+        options.moveCursorToInsertedRow,
+        isCellbackgroundDuplicated,
+      ),
     );
 
 export const changeColumnWidthByStepWithAnalytics =
@@ -308,6 +315,7 @@ export const insertColumnWithAnalytics =
   (
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
     isTableScalingEnabled = false,
+    isCellbackgroundDuplicated = false,
   ) =>
   (
     inputMethod:
@@ -334,7 +342,9 @@ export const insertColumnWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
+    })(editorAnalyticsAPI)(
+      insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position),
+    );
 
 export const deleteRowsWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>

package/src/plugin.tsx

@@ -552,6 +552,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {options?.allowContextualMenu && (
@@ -586,6 +590,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
                       isTableScalingEnabled={options?.isTableScalingEnabled}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (