@atlaskit/editor-plugin-table 7.16.18 → 7.17.0

package/src/plugin.tsx

@@ -30,6 +30,7 @@ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibi
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -134,6 +135,7 @@ export type TablePlugin = NextEditorPlugin<
 			OptionalPlugin<AccessibilityUtilsPlugin>,
 			OptionalPlugin<MediaPlugin>,
 			OptionalPlugin<EditorViewModePlugin>,
+			OptionalPlugin<FeatureFlagsPlugin>,
 		];
 	}
 >;
@@ -153,13 +155,15 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 	};
 	const editorAnalyticsAPI = api?.analytics?.actions;
 
-	const isTableScalingWithFixedColumnWidthsOptionEnabled =
-		options?.isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-	const shouldUseIncreasedScalingPercent =
-		isTableScalingWithFixedColumnWidthsOptionEnabled &&
+	const isTableFixedColumnWidthsOptionEnabled =
+		options?.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption || false;
+	const shouldUseIncreasedScalingPercent = options?.isTableScalingEnabled;
+	isTableFixedColumnWidthsOptionEnabled &&
 		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
+	const isCellBackgroundDuplicated =
+		options?.getEditorFeatureFlags?.().tableDuplicateCellColouring || false;
+
 	return {
 		name: 'table',
 
@@ -331,6 +335,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							fullWidthEnabled,
 							api,
 							getIntl,
+							isCellBackgroundDuplicated,
+							isTableFixedColumnWidthsOptionEnabled,
 							shouldUseIncreasedScalingPercent,
 						);
 					},
@@ -371,7 +377,12 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 					name: 'tableDragAndDrop',
 					plugin: ({ dispatch }) => {
 						return options?.dragAndDropEnabled
-							? createDragAndDropPlugin(dispatch, editorAnalyticsAPI)
+							? createDragAndDropPlugin(
+									dispatch,
+									editorAnalyticsAPI,
+									options?.isTableScalingEnabled,
+									isTableFixedColumnWidthsOptionEnabled,
+								)
 							: undefined;
 					},
 				},
@@ -533,6 +544,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											isHeaderColumnEnabled={isHeaderColumnEnabled}
 											isHeaderRowEnabled={isHeaderRowEnabled}
 											isDragAndDropEnabled={isDragAndDropEnabled}
+											isTableScalingEnabled={options?.isTableScalingEnabled}
 											editorView={editorView}
 											mountPoint={popupsMountPoint}
 											boundariesElement={popupsBoundariesElement}
@@ -662,7 +674,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,
 				options,
-				isTableScalingWithFixedColumnWidthsOptionEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			)(pluginConfig(options?.tableOptions)),
 		},

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -29,7 +29,12 @@ import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
-const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
+const destroyFn = (
+	editorView: EditorView,
+	editorAnalyticsAPI: any,
+	isTableScalingEnabled: boolean,
+	isTableFixedColumnWidthsOptionEnabled: boolean,
+) => {
 	const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
 
 	const rowAutoScrollers = editorPageScrollContainer
@@ -211,24 +216,22 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
 					if (sourceType === 'table-column') {
 						const { tableRef, tableNode } = getTablePluginState(editorView.state);
 						if (tableRef && tableNode) {
-							const { isTableScalingEnabled = false } = getTablePluginState(editorView.state);
-
 							let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-							const isTableScalingEnabledWithLockButton =
-								isTableScalingEnabled &&
-								getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-							const shouldUseIncreasedScalingPercent =
-								isTableScalingEnabledWithLockButton &&
-								getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-
-							if (isTableScalingEnabledWithLockButton) {
+							const isTableScalingWithFixedColumnWidthsOptionEnabled =
+								isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+							if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 								isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
 							}
 
+							const shouldUseIncreasedScalingPercent =
+								isTableScalingWithFixedColumnWidthsOptionEnabled &&
+								getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 							insertColgroupFromNode(
 								tableRef,
 								tableNode,
 								isTableScalingEnabledOnCurrentTable,
+								undefined,
 								shouldUseIncreasedScalingPercent,
 							);
 						}
@@ -241,7 +244,12 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
 	);
 };
 
-export const createPlugin = (dispatch: Dispatch, editorAnalyticsAPI?: EditorAnalyticsAPI) => {
+export const createPlugin = (
+	dispatch: Dispatch,
+	editorAnalyticsAPI?: EditorAnalyticsAPI,
+	isTableScalingEnabled = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
+) => {
 	return new SafePlugin({
 		state: createPluginState(dispatch, (state) => ({
 			decorationSet: DecorationSet.empty,
@@ -310,7 +318,12 @@ export const createPlugin = (dispatch: Dispatch, editorAnalyticsAPI?: EditorAnal
 		},
 		view: (editorView: EditorView) => {
 			return {
-				destroy: destroyFn(editorView, editorAnalyticsAPI),
+				destroy: destroyFn(
+					editorView,
+					editorAnalyticsAPI,
+					isTableScalingEnabled,
+					isTableFixedColumnWidthsOptionEnabled,
+				),
 			};
 		},
 		props: {

package/src/pm-plugins/keymap.ts

@@ -65,6 +65,8 @@ export function keymapPlugin(
 	isFullWidthEnabled?: boolean,
 	pluginInjectionApi?: PluginInjectionAPIWithA11y,
 	getIntl?: () => IntlShape,
+	isCellBackgroundDuplicated = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent?: boolean,
 ): SafePlugin {
 	const list = {};
@@ -116,13 +118,23 @@ export function keymapPlugin(
 
 	bindKeymapWithCommand(
 		addColumnBefore.common!,
-		addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent),
+		addColumnBeforeCommand(
+			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
+			shouldUseIncreasedScalingPercent,
+		),
 		list,
 	);
 
 	bindKeymapWithCommand(
 		addColumnAfter.common!,
-		addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent),
+		addColumnAfterCommand(
+			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
+			shouldUseIncreasedScalingPercent,
+		),
 		list,
 	);
 
@@ -141,13 +153,23 @@ export function keymapPlugin(
 
 		bindKeymapWithCommand(
 			addColumnBeforeVO.common!,
-			addColumnBeforeCommand(isTableScalingEnabled),
+			addColumnBeforeCommand(
+				isTableScalingEnabled,
+				isCellBackgroundDuplicated,
+				isTableFixedColumnWidthsOptionEnabled,
+				shouldUseIncreasedScalingPercent,
+			),
 			list,
 		);
 
 		bindKeymapWithCommand(
 			addColumnAfterVO.common!,
-			addColumnAfterCommand(isTableScalingEnabled),
+			addColumnAfterCommand(
+				isTableScalingEnabled,
+				isCellBackgroundDuplicated,
+				isTableFixedColumnWidthsOptionEnabled,
+				shouldUseIncreasedScalingPercent,
+			),
 			list,
 		);
 	}
@@ -191,6 +213,7 @@ export function keymapPlugin(
 			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			),
 			list,
@@ -201,6 +224,7 @@ export function keymapPlugin(
 			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			),
 			list,
@@ -243,6 +267,7 @@ export function keymapPlugin(
 				-10,
 				getEditorContainerWidth,
 				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				INPUT_METHOD.SHORTCUT,
 				ariaNotifyPlugin,
 				getIntl,
@@ -256,6 +281,7 @@ export function keymapPlugin(
 				10,
 				getEditorContainerWidth,
 				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				INPUT_METHOD.SHORTCUT,
 				ariaNotifyPlugin,
 				getIntl,

package/src/pm-plugins/main.ts

@@ -158,6 +158,7 @@ export const createPlugin = (
 			}
 
 			if (tr) {
+				const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 				// "fixTables" removes empty rows as we don't allow that in schema
 				const updatedTr = handleCut(
 					tr,
@@ -166,6 +167,7 @@ export const createPlugin = (
 					editorAnalyticsAPI,
 					editorViewRef || undefined,
 					isTableScalingEnabled,
+					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,
 				);
 				return fixTables(updatedTr) || updatedTr;

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -84,10 +84,12 @@ export const handleMouseDown = (
 	});
 
 	let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+	const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
-	const isTableScalingEnabledWithLockButton =
-		isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-	if (isTableScalingEnabledWithLockButton) {
+	const isTableScalingWithFixedColumnWidthsOptionEnabled =
+		isTableScalingEnabled && tableWithFixedColumnWidthsOption;
+
+	if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 		shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 	}
 
@@ -100,7 +102,7 @@ export const handleMouseDown = (
 		domAtPos,
 		isTableScalingEnabled: shouldScale,
 		shouldUseIncreasedScalingPercent:
-			isTableScalingEnabledWithLockButton &&
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 	});
 
@@ -183,10 +185,8 @@ export const handleMouseDown = (
 					selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
 
 				let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-				const isTableScalingEnabledWithLockButton =
-					isTableScalingEnabled &&
-					getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-				if (isTableScalingEnabledWithLockButton) {
+
+				if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 					shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 				}
 
@@ -213,7 +213,7 @@ export const handleMouseDown = (
 						originalTable,
 						resizingSelectedColumns ? selectedColumns : undefined,
 						shouldScale,
-						isTableScalingEnabledWithLockButton &&
+						isTableScalingWithFixedColumnWidthsOptionEnabled &&
 							getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 					);
 					tr = updateColumnWidths(newResizeState, table, start)(tr);
@@ -289,13 +289,11 @@ export const handleMouseDown = (
 		const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter!.attrs.colspan - 1;
 
 		let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-		const isTableScalingEnabledWithLockButton =
-			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+
 		const shouldUseIncreasedScalingPercent =
-			isTableScalingEnabledWithLockButton &&
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
-		if (isTableScalingEnabledWithLockButton) {
+		if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 			shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 		}
 

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -325,6 +325,7 @@ export const getNewResizeStateFromSelectedColumns = (
 	domAtPos: (pos: number) => { node: Node; offset: number },
 	getEditorContainerWidth: GetEditorContainerWidth,
 	isTableScalingEnabled = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 ): ResizeStateWithAnalytics | undefined => {
 	// Fail early so that we don't do complex calculations for no reason
 	const numColumnsSelected = rect.right - rect.left;
@@ -367,10 +368,9 @@ export const getNewResizeStateFromSelectedColumns = (
 	let resizeState;
 
 	let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-
-	const isTableScalingEnabledWithLockButton =
-		isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-	if (isTableScalingEnabledWithLockButton) {
+	const isTableScalingWithFixedColumnWidthsOptionEnabled =
+		isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+	if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 		isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
 	}
 
@@ -383,7 +383,7 @@ export const getNewResizeStateFromSelectedColumns = (
 		domAtPos,
 		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
 		shouldUseIncreasedScalingPercent:
-			isTableScalingEnabledWithLockButton &&
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 	});
 

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -153,6 +153,7 @@ export const previewScaleTable = (
 	options: ScaleOptions,
 	domAtPos: DomAtPos,
 	isTableScalingEnabled: boolean = false,
+	isTableWithFixedColumnWidthsOptionEnabled: boolean = false,
 ) => {
 	const { node, start, parentWidth } = options;
 
@@ -169,9 +170,10 @@ export const previewScaleTable = (
 	}
 
 	let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-	const isTableScalingEnabledWithLockButton =
-		isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-	if (isTableScalingEnabledWithLockButton) {
+	const isTableScalingWithFixedColumnWidthsOptionEnabled =
+		isTableScalingEnabled && isTableWithFixedColumnWidthsOptionEnabled;
+
+	if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 		isTableScalingEnabledOnCurrentTable =
 			isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
 	}
@@ -183,7 +185,7 @@ export const previewScaleTable = (
 	}
 
 	const shouldUseIncreasedScalingPercent =
-		isTableScalingEnabledWithLockButton &&
+		isTableScalingWithFixedColumnWidthsOptionEnabled &&
 		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 	const resizeState = parentWidth

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);