@atlaskit/editor-plugin-table 7.16.17 → 7.16.19

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

@@ -78,6 +78,7 @@ import {
 import type { TablePluginOptions } from './plugin';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
@@ -156,6 +157,9 @@ export const getToolbarMenuConfig = (
 		},
 	];
 
+	const tableOptionsDropdownWidth = isTableScalingWithFixedColumnWidthsOptionShown
+		? 192
+		: undefined;
 	if (state.isDragAndDropEnabled) {
 		return {
 			id: 'editor.table.tableOptions',
@@ -165,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 {
@@ -175,7 +179,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
-			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
+			dropdownWidth: tableOptionsDropdownWidth,
 		};
 	}
 };
@@ -191,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;
@@ -209,6 +215,8 @@ export const getToolbarCellOptionsConfig = (
 					insertColumnWithAnalytics(
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
+						isCellBackgroundDuplicated,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
 				}
@@ -247,6 +255,7 @@ export const getToolbarCellOptionsConfig = (
 					deleteColumnsWithAnalytics(
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
 				}
@@ -306,6 +315,7 @@ export const getToolbarCellOptionsConfig = (
 					editorView.domAtPos.bind(editorView),
 					getEditorContainerWidth,
 					isTableScalingEnabled,
+					isTableFixedColumnWidthsOptionEnabled,
 				)
 			: undefined;
 		const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -445,7 +455,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
-		isTableScalingWithFixedColumnWidthsOptionEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
@@ -454,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;
@@ -462,8 +473,25 @@ 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();
+
+			const getDomRef = (editorView: EditorView) => {
+				let element: HTMLElement | undefined;
+				const domAtPos = editorView.domAtPos.bind(editorView);
+				const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+				if (parent) {
+					const tableRef =
+						(parent as HTMLElement).querySelector<HTMLTableElement>('table') || undefined;
+					if (tableRef) {
+						element =
+							closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
+					}
+				}
+
+				return element;
+			};
 
 			const menu = getToolbarMenuConfig(
 				config,
@@ -474,34 +502,45 @@ export const getToolbarConfig =
 				areTableColumWidthsFixed,
 			);
 
-			let alignmentMenu: Array<FloatingToolbarItem<Command>>;
-			alignmentMenu =
+			const alignmentMenu =
 				options?.isTableAlignmentEnabled && !isNested
-					? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
+					? getAlignmentOptionsConfig(
+							state,
+							intl,
+							editorAnalyticsAPI,
+							getEditorContainerWidth,
+							getDomRef,
+							editorView,
+							shouldUseIncreasedScalingPercent,
+						)
 					: [];
 
-			let cellItems: Array<FloatingToolbarItem<Command>>;
-			cellItems = pluginState.isDragAndDropEnabled
+			const isCellBackgroundDuplicated =
+				getEditorFeatureFlags().tableDuplicateCellColouring || false;
+
+			const cellItems = pluginState.isDragAndDropEnabled
 				? []
 				: getCellItems(
 						state,
-						getEditorView(),
+						editorView,
 						intl,
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
-						options?.isTableScalingEnabled,
+						isTableScalingEnabled,
+						isCellBackgroundDuplicated,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					);
 
-			let columnSettingsItems;
-			columnSettingsItems = pluginState.isDragAndDropEnabled
+			const columnSettingsItems = pluginState.isDragAndDropEnabled
 				? getColumnSettingItems(
 						state,
-						getEditorView(),
+						editorView,
 						intl,
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
-						options?.isTableScalingEnabled,
+						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
 					)
 				: [];
 			const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
@@ -526,22 +565,6 @@ export const getToolbarConfig =
 				});
 			}
 
-			const getDomRef = (editorView: EditorView) => {
-				let element: HTMLElement | undefined;
-				const domAtPos = editorView.domAtPos.bind(editorView);
-				const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-				if (parent) {
-					const tableRef =
-						(parent as HTMLElement).querySelector<HTMLTableElement>('table') || undefined;
-					if (tableRef) {
-						element =
-							closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
-					}
-				}
-
-				return element;
-			};
-
 			const { stickyScrollbar } = getEditorFeatureFlags();
 
 			return {
@@ -615,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);
@@ -627,6 +652,8 @@ const getCellItems = (
 			getEditorContainerWidth,
 			editorAnalyticsAPI,
 			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		);
 		return [cellOptions, separator(cellOptions.hidden!)];
@@ -639,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) {
@@ -672,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);
@@ -686,6 +717,7 @@ const getColumnSettingItems = (
 		editorView.domAtPos.bind(editorView),
 		getEditorContainerWidth,
 		isTableScalingEnabled,
+		isTableFixedColumnWidthsOptionEnabled,
 	);
 
 	const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -699,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,
 		});
 	}
@@ -808,6 +841,9 @@ export const getAlignmentOptionsConfig = (
 	{ formatMessage }: ToolbarMenuContext,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	getEditorContainerWidth: GetEditorContainerWidth,
+	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
+	editorView: EditorView | null,
+	shouldUseIncreasedScalingPercent: boolean,
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -850,7 +886,13 @@ export const getAlignmentOptionsConfig = (
 				INPUT_METHOD.FLOATING_TB,
 				CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED,
 			),
-			...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+			...(isLayoutOptionDisabled(
+				tableObject.node,
+				getEditorContainerWidth,
+				getDomRef,
+				editorView,
+				shouldUseIncreasedScalingPercent,
+			) && {
 				disabled: value !== 'center',
 			}),
 		};
@@ -889,11 +931,26 @@ export const getSelectedAlignmentIcon = (alignmentIcons: AlignmentIcon[], select
 export const isLayoutOptionDisabled = (
 	selectedNode: PMNode,
 	getEditorContainerWidth: GetEditorContainerWidth,
+	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
+	editorView: EditorView | null,
+	shouldUseIncreasedScalingPercent: boolean,
 ) => {
-	const lineLength = getEditorContainerWidth().lineLength;
-	const tableWidth = getTableContainerWidth(selectedNode);
+	const { lineLength } = getEditorContainerWidth();
+	let tableContainerWidth = getTableContainerWidth(selectedNode);
+
+	// table may be scaled, use the scale percent to calculate the table width
+	if (editorView) {
+		const tableWrapper = getDomRef(editorView);
+		const tableWrapperWidth = tableWrapper?.clientWidth || tableContainerWidth;
+		const scalePercent = getStaticTableScalingPercent(
+			selectedNode,
+			tableWrapperWidth,
+			shouldUseIncreasedScalingPercent,
+		);
+		tableContainerWidth = tableContainerWidth * scalePercent;
+	}
 
-	if (selectedNode && lineLength && tableWidth > lineLength) {
+	if (selectedNode && lineLength && tableContainerWidth > lineLength) {
 		return true;
 	}
 

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