@atlaskit/editor-plugin-table 7.12.6 → 7.13.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

@@ -102,6 +102,7 @@ export interface TablePluginOptions {
   wasFullWidthEnabled?: boolean;
   getEditorFeatureFlags?: GetEditorFeatureFlags;
   isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -267,7 +268,9 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               getEditorFeatureFlags,
               dragAndDropEnabled,
               isTableScalingEnabled,
+              isTableAlignmentEnabled,
             } = options || ({} as TablePluginOptions);
+
             return createPlugin(
               dispatchAnalyticsEvent,
               dispatch,
@@ -284,6 +287,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               editorAnalyticsAPI,
               api,
               isTableScalingEnabled,
+              isTableAlignmentEnabled,
             );
           },
         },
@@ -548,6 +552,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {options?.allowContextualMenu && (
@@ -582,6 +590,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
                       isTableScalingEnabled={options?.isTableScalingEnabled}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/pm-plugins/main.ts

@@ -115,6 +115,7 @@ export const createPlugin = (
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   pluginInjectionApi?: PluginInjectionAPI,
   isTableScalingEnabled?: boolean,
+  isTableAlignmentEnabled?: boolean,
 ) => {
   const state = createPluginState(dispatch, {
     pluginConfig,

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;
       },