@atlaskit/editor-plugin-table 7.16.18 → 7.16.19

package/src/toolbar.tsx

@@ -157,6 +157,9 @@ export const getToolbarMenuConfig = (
 		},
 	];
 
+	const tableOptionsDropdownWidth = isTableScalingWithFixedColumnWidthsOptionShown
+		? 192
+		: undefined;
 	if (state.isDragAndDropEnabled) {
 		return {
 			id: 'editor.table.tableOptions',
@@ -166,7 +169,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
-			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
+			dropdownWidth: tableOptionsDropdownWidth,
 		};
 	} else {
 		return {
@@ -176,7 +179,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
-			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
+			dropdownWidth: tableOptionsDropdownWidth,
 		};
 	}
 };
@@ -192,6 +195,8 @@ export const getToolbarCellOptionsConfig = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	isCellBackgroundDuplicated = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 ): FloatingToolbarDropdown<Command> => {
 	const { top, bottom, right, left } = initialSelectionRect;
@@ -210,6 +215,8 @@ export const getToolbarCellOptionsConfig = (
 					insertColumnWithAnalytics(
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
+						isCellBackgroundDuplicated,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
 				}
@@ -248,6 +255,7 @@ export const getToolbarCellOptionsConfig = (
 					deleteColumnsWithAnalytics(
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
 				}
@@ -307,6 +315,7 @@ export const getToolbarCellOptionsConfig = (
 					editorView.domAtPos.bind(editorView),
 					getEditorContainerWidth,
 					isTableScalingEnabled,
+					isTableFixedColumnWidthsOptionEnabled,
 				)
 			: undefined;
 		const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -446,7 +455,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
-		isTableScalingWithFixedColumnWidthsOptionEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
@@ -455,6 +464,7 @@ export const getToolbarConfig =
 		const pluginState = getPluginState(state);
 		const resizeState = tableResizingPluginKey.getState(state);
 		const tableWidthState = tableWidthPluginKey.getState(state);
+		const isTableScalingEnabled = options?.isTableScalingEnabled || false;
 
 		// We don't want to show floating toolbar while resizing the table
 		const isWidthResizing = tableWidthState?.resizing;
@@ -463,7 +473,7 @@ export const getToolbarConfig =
 			const nodeType = state.schema.nodes.table;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 			const isTableScalingWithFixedColumnWidthsOptionShown =
-				isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+				isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
 			const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
 			const editorView = getEditorView();
 
@@ -501,9 +511,13 @@ export const getToolbarConfig =
 							getEditorContainerWidth,
 							getDomRef,
 							editorView,
+							shouldUseIncreasedScalingPercent,
 						)
 					: [];
 
+			const isCellBackgroundDuplicated =
+				getEditorFeatureFlags().tableDuplicateCellColouring || false;
+
 			const cellItems = pluginState.isDragAndDropEnabled
 				? []
 				: getCellItems(
@@ -512,7 +526,9 @@ export const getToolbarConfig =
 						intl,
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
-						options?.isTableScalingEnabled,
+						isTableScalingEnabled,
+						isCellBackgroundDuplicated,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					);
 
@@ -523,7 +539,8 @@ export const getToolbarConfig =
 						intl,
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
-						options?.isTableScalingEnabled,
+						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
 					)
 				: [];
 			const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
@@ -621,6 +638,8 @@ const getCellItems = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	isCellBackgroundDuplicated = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const initialSelectionRect = getClosestSelectionRect(state);
@@ -633,6 +652,8 @@ const getCellItems = (
 			getEditorContainerWidth,
 			editorAnalyticsAPI,
 			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		);
 		return [cellOptions, separator(cellOptions.hidden!)];
@@ -645,18 +666,21 @@ export const getDistributeConfig =
 		getEditorContainerWidth: GetEditorContainerWidth,
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 	): Command =>
 	(state, dispatch, editorView) => {
 		const selectionOrTableRect = getClosestSelectionOrTableRect(state);
 		if (!editorView || !selectionOrTableRect) {
 			return false;
 		}
+
 		const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
 			selectionOrTableRect,
 			state,
 			editorView.domAtPos.bind(editorView),
 			getEditorContainerWidth,
 			isTableScalingEnabled,
+			isTableFixedColumnWidthsOptionEnabled,
 		);
 
 		if (newResizeStateWithAnalytics) {
@@ -678,6 +702,7 @@ const getColumnSettingItems = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const pluginState = getPluginState(editorState);
 	const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
@@ -692,6 +717,7 @@ const getColumnSettingItems = (
 		editorView.domAtPos.bind(editorView),
 		getEditorContainerWidth,
 		isTableScalingEnabled,
+		isTableFixedColumnWidthsOptionEnabled,
 	);
 
 	const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -705,11 +731,12 @@ const getColumnSettingItems = (
 			title: formatMessage(messages.distributeColumns),
 			icon: DistributeColumnIcon,
 			onClick: (state, dispatch, view) =>
-				getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(
-					state,
-					dispatch,
-					view,
-				),
+				getDistributeConfig(
+					getEditorContainerWidth,
+					editorAnalyticsAPI,
+					isTableScalingEnabled,
+					isTableFixedColumnWidthsOptionEnabled,
+				)(state, dispatch, view),
 			disabled: !wouldChange,
 		});
 	}
@@ -816,6 +843,7 @@ export const getAlignmentOptionsConfig = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
+	shouldUseIncreasedScalingPercent: boolean,
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -863,6 +891,7 @@ export const getAlignmentOptionsConfig = (
 				getEditorContainerWidth,
 				getDomRef,
 				editorView,
+				shouldUseIncreasedScalingPercent,
 			) && {
 				disabled: value !== 'center',
 			}),
@@ -904,6 +933,7 @@ export const isLayoutOptionDisabled = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
+	shouldUseIncreasedScalingPercent: boolean,
 ) => {
 	const { lineLength } = getEditorContainerWidth();
 	let tableContainerWidth = getTableContainerWidth(selectedNode);
@@ -912,7 +942,11 @@ export const isLayoutOptionDisabled = (
 	if (editorView) {
 		const tableWrapper = getDomRef(editorView);
 		const tableWrapperWidth = tableWrapper?.clientWidth || tableContainerWidth;
-		const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth);
+		const scalePercent = getStaticTableScalingPercent(
+			selectedNode,
+			tableWrapperWidth,
+			shouldUseIncreasedScalingPercent,
+		);
 		tableContainerWidth = tableContainerWidth * scalePercent;
 	}
 

package/src/transforms/column-width.ts

@@ -104,7 +104,11 @@ export const updateColumnWidths =
  * @returns Updated transaction with rescaled columns for a given table
  */
 export const rescaleColumns =
-	(isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) =>
+	(
+		isTableScalingEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
+		shouldUseIncreasedScalingPercent = false,
+	) =>
 	(table: ContentNodeWithPos, view: EditorView | undefined) =>
 	(tr: Transaction): Transaction => {
 		if (!view) {
@@ -135,7 +139,8 @@ export const rescaleColumns =
 
 		const tableDepth = view.state.doc.resolve(table.pos).depth;
 		let shouldScale = isTableScalingEnabled && tableDepth === 0;
-		if (shouldScale && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+
+		if (shouldScale && isTableFixedColumnWidthsOptionEnabled) {
 			shouldScale = newTable.attrs.displayMode !== 'fixed';
 		}
 
@@ -208,7 +213,6 @@ export const rescaleColumns =
 			isTableScalingEnabled: shouldScale,
 			shouldUseIncreasedScalingPercent,
 		});
-
 		// Two scenarios that require scaling:
 		//   1. If the new table width will result in the table going into overflow
 		//      we resize the cells to avoid it (e.g. adding a column)

package/src/transforms/delete-columns.ts

@@ -245,6 +245,7 @@ export const deleteColumns =
 		allowCustomStep: boolean,
 		view?: EditorView,
 		isTableScalingEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(tr: Transaction) => {
@@ -259,9 +260,12 @@ export const deleteColumns =
 			updatedTr = deleteColumnsLegacy(rect)(updatedTr);
 		}
 		const table = findTable(updatedTr.selection);
-
 		if (table) {
-			updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+			updatedTr = rescaleColumns(
+				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
+				shouldUseIncreasedScalingPercent,
+			)(
 				table,
 				view,
 			)(updatedTr);

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -379,6 +379,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			intl: { formatMessage },
 			editorView,
 			getEditorContainerWidth,
+			getEditorFeatureFlags,
 		} = this.props;
 		const {
 			isDragAndDropEnabled,
@@ -386,12 +387,17 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		} = getPluginState(editorView.state);
 		if (allowDistributeColumns && !isDragAndDropEnabled) {
 			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
+			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags
+				? getEditorFeatureFlags()
+				: {};
+
 			const newResizeState = getNewResizeStateFromSelectedColumns(
 				selectionRect,
 				editorView.state,
 				editorView.domAtPos.bind(editorView),
 				getEditorContainerWidth,
 				isTableScalingEnabled,
+				tableWithFixedColumnWidthsOption,
 			);
 
 			const wouldChange = newResizeState?.changed ?? false;
@@ -507,13 +513,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const { state, dispatch } = editorView;
 		const { targetCellPosition, isTableScalingEnabled = false } = getPluginState(state);
 
-		const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-			? getEditorFeatureFlags()
-			: {};
+		const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+			getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			tableWithFixedColumnWidthsOption &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 		switch (item.value.name) {
@@ -548,6 +553,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					editorView.domAtPos.bind(editorView),
 					getEditorContainerWidth,
 					isTableScalingEnabled,
+					tableWithFixedColumnWidthsOption,
 				);
 
 				if (newResizeStateWithAnalytics) {
@@ -570,6 +576,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					tableDuplicateCellColouring,
+					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,
 				)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 				this.toggleOpen();
@@ -588,6 +595,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				deleteColumnsWithAnalytics(
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
+					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,
 				)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
 				this.toggleOpen();

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -94,6 +94,7 @@ type DragMenuProps = {
 	isTableScalingEnabled?: boolean;
 	tableDuplicateCellColouring?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
+	isTableFixedColumnWidthsOptionEnabled?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -263,6 +264,7 @@ export const DragMenu = React.memo(
 		isTableScalingEnabled,
 		tableDuplicateCellColouring,
 		shouldUseIncreasedScalingPercent,
+		isTableFixedColumnWidthsOptionEnabled,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -303,6 +305,7 @@ export const DragMenu = React.memo(
 			pluginConfig?.isHeaderRowRequired,
 			isTableScalingEnabled,
 			tableDuplicateCellColouring,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		);
 

package/src/ui/FloatingDragMenu/index.tsx

@@ -70,13 +70,12 @@ const FloatingDragMenu = ({
 		return null;
 	}
 
-	const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-		? getEditorFeatureFlags()
-		: {};
+	const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+		getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+		tableWithFixedColumnWidthsOption &&
 		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 	return (
@@ -116,6 +115,7 @@ const FloatingDragMenu = ({
 				isTableScalingEnabled={isTableScalingEnabled}
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
+				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingInsertButton/index.tsx

@@ -28,7 +28,6 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
@@ -45,6 +44,7 @@ export interface Props {
 	isHeaderColumnEnabled?: boolean;
 	isHeaderRowEnabled?: boolean;
 	isDragAndDropEnabled?: boolean;
+	isTableScalingEnabled?: boolean;
 	mountPoint?: HTMLElement;
 	boundariesElement?: HTMLElement;
 	scrollableElement?: HTMLElement;
@@ -256,28 +256,31 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 	}
 
 	private insertColumn(event: React.SyntheticEvent) {
-		const { editorView, insertColumnButtonIndex, editorAnalyticsAPI, getEditorFeatureFlags } =
-			this.props;
+		const {
+			editorView,
+			insertColumnButtonIndex,
+			editorAnalyticsAPI,
+			getEditorFeatureFlags,
+			isTableScalingEnabled,
+		} = this.props;
 
 		if (typeof insertColumnButtonIndex !== 'undefined') {
 			event.preventDefault();
 
-			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
+			const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+				getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 			const shouldUseIncreasedScalingPercent =
 				isTableScalingEnabled &&
-				getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+				tableWithFixedColumnWidthsOption &&
 				getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
-			const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-				? getEditorFeatureFlags()
-				: {};
-
 			const { state, dispatch } = editorView;
 			insertColumnWithAnalytics(
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
 				tableDuplicateCellColouring,
+				tableWithFixedColumnWidthsOption,
 				shouldUseIncreasedScalingPercent,
 			)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
 		}

package/src/utils/drag-menu.ts

@@ -160,6 +160,7 @@ export const getDragMenuConfig = (
 	isHeaderRowRequired?: boolean,
 	isTableScalingEnabled = false,
 	tableDuplicateCellColouring = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 ): DragMenuConfig[] => {
 	const addOptions =
@@ -272,6 +273,7 @@ export const getDragMenuConfig = (
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						tableDuplicateCellColouring,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(state, dispatch, editorView);
 				}
@@ -293,6 +295,7 @@ export const getDragMenuConfig = (
 								editorView.domAtPos.bind(editorView),
 								getEditorContainerWidth,
 								isTableScalingEnabled,
+								isTableFixedColumnWidthsOptionEnabled,
 							);
 
 							if (newResizeState) {
@@ -333,10 +336,16 @@ export const getDragMenuConfig = (
 						!!isHeaderRowRequired,
 					)(state, dispatch);
 				} else {
-					deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-						INPUT_METHOD.TABLE_CONTEXT_MENU,
-						selectionRect ?? defaultSelectionRect,
-					)(state, dispatch, editorView);
+					deleteColumnsWithAnalytics(
+						editorAnalyticsAPI,
+						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
+						shouldUseIncreasedScalingPercent,
+					)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect ?? defaultSelectionRect)(
+						state,
+						dispatch,
+						editorView,
+					);
 				}
 				return true;
 			},