@atlaskit/editor-plugin-table 7.13.0 → 7.13.1

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -539,12 +539,17 @@ export class ContextualMenu extends Component<
       selectionRect,
       editorAnalyticsAPI,
       getEditorContainerWidth,
+      getEditorFeatureFlags,
     } = this.props;
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const { state, dispatch } = editorView;
     const { targetCellPosition, isTableScalingEnabled = false } =
       getPluginState(state);
 
+    const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+      ? getEditorFeatureFlags()
+      : {};
+
     switch (item.value.name) {
       case 'sort_column_desc':
         sortColumnWithAnalytics(editorAnalyticsAPI)(
@@ -602,17 +607,25 @@ 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, {
-          index: selectionRect.bottom,
-          moveCursorToInsertedRow: true,
-        })(state, dispatch);
+        insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(
+          INPUT_METHOD.CONTEXT_MENU,
+          {
+            index: selectionRect.bottom,
+            moveCursorToInsertedRow: true,
+          },
+        )(state, dispatch);
         this.toggleOpen();
         break;
       case 'delete_column':

package/src/ui/FloatingContextualMenu/index.tsx

@@ -53,6 +53,7 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
+  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
@@ -122,6 +123,7 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -102,6 +102,7 @@ type DragMenuProps = {
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
   isTableScalingEnabled?: boolean;
+  tableDuplicateCellColouring?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -281,6 +282,7 @@ export const DragMenu = React.memo(
     scrollableElement,
     boundariesElement,
     isTableScalingEnabled,
+    tableDuplicateCellColouring,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -324,6 +326,7 @@ export const DragMenu = React.memo(
       editorAnalyticsAPI,
       pluginConfig?.isHeaderRowRequired,
       isTableScalingEnabled,
+      tableDuplicateCellColouring,
     );
 
     const { menuItems, menuCallback } = convertToDropdownItems(

package/src/ui/FloatingDragMenu/index.tsx

@@ -1,7 +1,10 @@
 import React from '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 { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -33,6 +36,7 @@ export interface Props {
   stickyHeaders?: RowStickyState;
   pluginConfig?: PluginConfig;
   isTableScalingEnabled?: boolean;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 const FloatingDragMenu = ({
@@ -50,6 +54,7 @@ const FloatingDragMenu = ({
   stickyHeaders,
   pluginConfig,
   isTableScalingEnabled,
+  getEditorFeatureFlags,
 }: Props) => {
   if (
     !isOpen ||
@@ -74,6 +79,10 @@ const FloatingDragMenu = ({
     return null;
   }
 
+  const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+    ? getEditorFeatureFlags()
+    : {};
+
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -113,6 +122,7 @@ const FloatingDragMenu = ({
         boundariesElement={boundariesElement}
         scrollableElement={scrollableElement}
         isTableScalingEnabled={isTableScalingEnabled}
+        tableDuplicateCellColouring={tableDuplicateCellColouring}
       />
     </Popup>
   );

package/src/ui/FloatingInsertButton/index.tsx

@@ -15,7 +15,10 @@ import {
   EVENT_TYPE,
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -53,6 +56,7 @@ export interface Props {
   hasStickyHeaders?: boolean;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export class FloatingInsertButton extends React.Component<
@@ -94,8 +98,8 @@ export class FloatingInsertButton extends React.Component<
       typeof insertColumnButtonIndex !== 'undefined'
         ? 'column'
         : typeof insertRowButtonIndex !== 'undefined'
-        ? 'row'
-        : null;
+          ? 'row'
+          : null;
 
     if (!tableNode || !tableRef || !type) {
       return null;
@@ -261,13 +265,23 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private insertRow(event: React.SyntheticEvent) {
-    const { editorView, insertRowButtonIndex, editorAnalyticsAPI } = this.props;
+    const {
+      editorView,
+      insertRowButtonIndex,
+      editorAnalyticsAPI,
+      getEditorFeatureFlags,
+    } = this.props;
 
     if (typeof insertRowButtonIndex !== 'undefined') {
       event.preventDefault();
 
       const { 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);
@@ -275,8 +289,12 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private insertColumn(event: React.SyntheticEvent) {
-    const { editorView, insertColumnButtonIndex, editorAnalyticsAPI } =
-      this.props;
+    const {
+      editorView,
+      insertColumnButtonIndex,
+      editorAnalyticsAPI,
+      getEditorFeatureFlags,
+    } = this.props;
 
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
@@ -285,11 +303,20 @@ export class FloatingInsertButton extends React.Component<
         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/src/utils/drag-menu.ts

@@ -177,6 +177,7 @@ export const getDragMenuConfig = (
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   isHeaderRowRequired?: boolean,
   isTableScalingEnabled = false,
+  tableDuplicateCellColouring = false,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -303,18 +304,23 @@ export const getDragMenuConfig = (
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (direction === 'row') {
-          insertRowWithAnalytics(editorAnalyticsAPI)(
-            INPUT_METHOD.TABLE_CONTEXT_MENU,
-            {
-              index: (index ?? 0) + offset,
-              moveCursorToInsertedRow: true,
-            },
-          )(state, dispatch);
+          insertRowWithAnalytics(
+            editorAnalyticsAPI,
+            tableDuplicateCellColouring,
+          )(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+            index: (index ?? 0) + offset,
+            moveCursorToInsertedRow: true,
+          })(state, dispatch);
         } else {
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-            INPUT_METHOD.TABLE_CONTEXT_MENU,
-            (index ?? 0) + offset,
-          )(state, dispatch, editorView);
+          insertColumnWithAnalytics(
+            editorAnalyticsAPI,
+            isTableScalingEnabled,
+            tableDuplicateCellColouring,
+          )(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(
+            state,
+            dispatch,
+            editorView,
+          );
         }
         return true;
       },