@atlaskit/editor-plugin-table 7.16.17 → 7.16.19

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, shouldUseIncreasedScalingPercent?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.17",
+  "version": "7.16.19",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^82.0.0",
+    "@atlaskit/editor-common": "^82.2.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -44,13 +44,13 @@
     "@atlaskit/editor-shared-styles": "^2.12.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/menu": "^2.3.0",
+    "@atlaskit/menu": "^2.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^6.5.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
@@ -123,9 +123,6 @@
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },
-    "platform.editor.table.preserve-widths-with-lock-button": {
-      "type": "boolean"
-    },
     "platform.editor.table.use-shared-state-hook": {
       "type": "boolean"
     },

package/src/commands/column-resize.ts

@@ -257,12 +257,14 @@ export const changeColumnWidthByStep =
 		stepSize,
 		getEditorContainerWidth,
 		isTableScalingEnabled,
+		isTableFixedColumnWidthsOptionEnabled,
 		ariaNotify,
 		getIntl,
 	}: {
 		stepSize: number;
 		getEditorContainerWidth: GetEditorContainerWidth;
 		isTableScalingEnabled: boolean;
+		isTableFixedColumnWidthsOptionEnabled: boolean;
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
 		originalTr?: Transaction;
@@ -326,15 +328,13 @@ export const changeColumnWidthByStep =
 		});
 
 		let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-		const isTableScalingEnabledWithLockButton =
-			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-		if (isTableScalingEnabledWithLockButton) {
+		const isTableScalingWithFixedColumnWidthsOptionEnabled =
+			isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
+		if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 			isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
 		}
-
 		const shouldUseIncreasedScalingPercent =
-			isTableScalingEnabledWithLockButton &&
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 		const initialResizeState = getResizeState({

package/src/commands/delete.ts

@@ -5,13 +5,19 @@ import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
 export const deleteColumnsCommand =
-	(rect: Rect, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false): Command =>
+	(
+		rect: Rect,
+		isTableScalingEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
+		shouldUseIncreasedScalingPercent = false,
+	): Command =>
 	(state, dispatch, view) => {
 		const tr = deleteColumns(
 			rect,
 			getAllowAddColumnCustomStep(state),
 			view,
 			isTableScalingEnabled,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		)(state.tr);
 		if (dispatch) {

package/src/commands/insert.ts

@@ -41,6 +41,7 @@ function addColumnAtCustomStep(column: number) {
 export function addColumnAt(
 	isTableScalingEnabled = false,
 	isCellBackgroundDuplicated?: boolean,
+	isTableFixedColumnWidthsOptionEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
 ) {
 	return (
@@ -58,7 +59,11 @@ export function addColumnAt(
 			const table = findTable(updatedTr.selection);
 			if (table) {
 				// [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-				updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+				updatedTr = rescaleColumns(
+					isTableScalingEnabled,
+					isTableFixedColumnWidthsOptionEnabled,
+					shouldUseIncreasedScalingPercent,
+				)(
 					table,
 					view,
 				)(updatedTr);
@@ -83,7 +88,12 @@ export function addColumnAt(
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
-	(isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false): Command =>
+	(
+		isTableScalingEnabled = false,
+		isCellBackgroundDuplicated = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
+		shouldUseIncreasedScalingPercent = false,
+	): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
 		if (!table) {
@@ -92,7 +102,12 @@ export const addColumnBefore =
 		if (dispatch) {
 			let rect = selectedRect(state);
 			dispatch(
-				addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+				addColumnAt(
+					isTableScalingEnabled,
+					isCellBackgroundDuplicated,
+					isTableFixedColumnWidthsOptionEnabled,
+					shouldUseIncreasedScalingPercent,
+				)(
 					rect.left,
 					getAllowAddColumnCustomStep(state),
 					view,
@@ -105,16 +120,27 @@ export const addColumnBefore =
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 export const addColumnAfter =
-	(isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean): Command =>
+	(
+		isTableScalingEnabled?: boolean,
+		isCellBackgroundDuplicated?: boolean,
+		isTableFixedColumnWidthsOptionEnabled?: boolean,
+		shouldUseIncreasedScalingPercent?: boolean,
+	): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
 		if (!table) {
 			return false;
 		}
+
 		if (dispatch) {
 			let rect = selectedRect(state);
 			dispatch(
-				addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+				addColumnAt(
+					isTableScalingEnabled,
+					isCellBackgroundDuplicated,
+					isTableFixedColumnWidthsOptionEnabled,
+					shouldUseIncreasedScalingPercent,
+				)(
 					rect.right,
 					getAllowAddColumnCustomStep(state),
 					view,
@@ -128,6 +154,7 @@ export const insertColumn =
 	(
 		isTableScalingEnabled = false,
 		isCellBackgroundDuplicated?: boolean,
+		isTableFixedColumnWidthsOptionEnabled?: boolean,
 		shouldUseIncreasedScalingPercent?: boolean,
 	) =>
 	(column: number): Command =>
@@ -135,6 +162,7 @@ export const insertColumn =
 		let tr = addColumnAt(
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		)(
 			column,

package/src/commands-with-analytics.ts

@@ -240,6 +240,7 @@ export const changeColumnWidthByStepWithAnalytics =
 		stepSize: number,
 		getEditorContainerWidth: GetEditorContainerWidth,
 		isTableScalingEnabled: boolean,
+		isTableFixedColumnWidthsOptionEnabled: boolean,
 		inputMethod: INPUT_METHOD.SHORTCUT,
 		ariaNotify?: (message: string) => void,
 		getIntl?: () => IntlShape,
@@ -268,7 +269,8 @@ export const changeColumnWidthByStepWithAnalytics =
 			changeColumnWidthByStep({
 				stepSize: stepSize,
 				getEditorContainerWidth: getEditorContainerWidth,
-				isTableScalingEnabled: isTableScalingEnabled,
+				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				ariaNotify: ariaNotify,
 				getIntl: getIntl,
 			}),
@@ -279,6 +281,7 @@ export const insertColumnWithAnalytics =
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isCellbackgroundDuplicated = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(
@@ -308,6 +311,7 @@ export const insertColumnWithAnalytics =
 			insertColumn(
 				isTableScalingEnabled,
 				isCellbackgroundDuplicated,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			)(position),
 		);
@@ -351,6 +355,7 @@ export const deleteColumnsWithAnalytics =
 	(
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
+		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(
@@ -379,13 +384,19 @@ export const deleteColumnsWithAnalytics =
 				eventType: EVENT_TYPE.TRACK,
 			};
 		})(editorAnalyticsAPI)(
-			deleteColumnsCommand(rect, isTableScalingEnabled, shouldUseIncreasedScalingPercent),
+			deleteColumnsCommand(
+				rect,
+				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
+				shouldUseIncreasedScalingPercent,
+			),
 		);
 
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
 	(
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled?: boolean,
+		isTableFixedColumnWidthsOptionEnabled?: boolean,
 		shouldUseIncreasedScalingPercent?: boolean,
 	): Command =>
 	(state, dispatch) => {
@@ -414,6 +425,7 @@ export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
 			return deleteColumnsWithAnalytics(
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
 		} else {

package/src/event-handlers.ts

@@ -477,6 +477,7 @@ export const handleCut = (
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	editorView?: EditorView,
 	isTableScalingEnabled = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 ): Transaction => {
 	const oldSelection = oldState.tr.selection;
@@ -525,6 +526,7 @@ export const handleCut = (
 							getAllowAddColumnCustomStep(oldState),
 							editorView,
 							isTableScalingEnabled,
+							isTableFixedColumnWidthsOptionEnabled,
 							shouldUseIncreasedScalingPercent,
 						)(tr);
 					}

package/src/nodeviews/TableComponent.tsx

@@ -204,16 +204,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			}
 		}
 
-		if (
-			isTableScalingEnabled &&
-			!getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-		) {
+		const { tableWithFixedColumnWidthsOption = false, stickyScrollbar } = getEditorFeatureFlags();
+
+		if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
 			this.handleColgroupUpdates(true);
 		}
 
 		if (
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			tableWithFixedColumnWidthsOption &&
 			getNode().attrs.displayMode !== 'fixed'
 		) {
 			this.handleColgroupUpdates(true);
@@ -224,8 +223,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				passive: true,
 			});
 
-			const { stickyScrollbar } = getEditorFeatureFlags();
-
 			if (stickyScrollbar) {
 				if (this.table) {
 					this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
@@ -332,7 +329,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	handleColgroupUpdates(force = false) {
-		const { getNode, containerWidth, isResizing, view, getPos } = this.props;
+		const { getNode, containerWidth, isResizing, view, getPos, getEditorFeatureFlags } = this.props;
 
 		if (!this.table) {
 			return;
@@ -383,12 +380,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isNumberColumnChanged ||
 				isNumberOfColumnsChanged;
 
-			const isTableScalingEnabledWithLockButton =
-				this.props.options?.isTableScalingEnabled &&
-				getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
+
+			const isTableScalingWithFixedColumnWidthsOptionEnabled =
+				this.props.options?.isTableScalingEnabled && tableWithFixedColumnWidthsOption;
 
 			const shouldUseIncreasedScalingPercent =
-				(isTableScalingEnabledWithLockButton &&
+				(isTableScalingWithFixedColumnWidthsOptionEnabled &&
 					getBooleanFF('platform.editor.table.use-increased-scaling-percent')) ||
 				false;
 
@@ -405,14 +403,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				});
 
 				let shouldScaleOnColgroupUpdate = false;
-				if (
-					this.props.options?.isTableScalingEnabled &&
-					!getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-				) {
+				if (this.props.options?.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
 					shouldScaleOnColgroupUpdate = true;
 				}
 
-				if (isTableScalingEnabledWithLockButton && tableNode.attrs.displayMode !== 'fixed') {
+				if (
+					isTableScalingWithFixedColumnWidthsOptionEnabled &&
+					tableNode.attrs.displayMode !== 'fixed'
+				) {
 					shouldScaleOnColgroupUpdate = true;
 				}
 
@@ -443,6 +441,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			options,
 			isTableScalingEnabled, // we could use options.isTableScalingEnabled here
 			getPos,
+			getEditorFeatureFlags,
 		} = this.props;
 		let { isInDanger } = this.props;
 
@@ -455,23 +454,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		let shouldScale = false;
 		let shouldHandleColgroupUpdates = false;
+		const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
-		if (
-			isTableScalingEnabled &&
-			!getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-		) {
+		if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
 			shouldScale = true;
 			shouldHandleColgroupUpdates = true;
 		}
 
-		const isTableScalingEnabledWithLockButton =
-			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+		const isTableScalingWithFixedColumnWidthsOptionEnabled =
+			isTableScalingEnabled && tableWithFixedColumnWidthsOption;
 		const shouldUseIncreasedScalingPercent =
-			isTableScalingEnabledWithLockButton &&
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
-		if (isTableScalingEnabledWithLockButton && getNode().attrs.displayMode !== 'fixed') {
+		if (
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
+			getNode().attrs.displayMode !== 'fixed'
+		) {
 			shouldScale = true;
 			shouldHandleColgroupUpdates = true;
 		}
@@ -743,11 +742,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			: this.state.stickyHeader &&
 				this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
 
-		const { stickyScrollbar } = getEditorFeatureFlags();
+		const { stickyScrollbar, tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			tableWithFixedColumnWidthsOption &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 		return (
@@ -770,6 +769,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isTableResizingEnabled={options?.isTableResizingEnabled}
 				isResizing={isResizing}
 				isTableScalingEnabled={isTableScalingEnabled}
+				isTableWithFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}

package/src/nodeviews/TableContainer.tsx

@@ -171,6 +171,7 @@ type ResizableTableContainerProps = {
 	isWholeTableInDanger?: boolean;
 
 	isTableScalingEnabled?: boolean;
+	isTableWithFixedColumnWidthsOptionEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 };
@@ -190,6 +191,7 @@ export const ResizableTableContainer = React.memo(
 		tableWrapperHeight,
 		isWholeTableInDanger,
 		isTableScalingEnabled,
+		isTableWithFixedColumnWidthsOptionEnabled,
 		isTableAlignmentEnabled,
 		shouldUseIncreasedScalingPercent,
 	}: PropsWithChildren<ResizableTableContainerProps>) => {
@@ -319,6 +321,7 @@ export const ResizableTableContainer = React.memo(
 			isTableAlignmentEnabled,
 			isFullWidthModeEnabled,
 			isTableScalingEnabled,
+			isTableWithFixedColumnWidthsOptionEnabled,
 			isWholeTableInDanger,
 			shouldUseIncreasedScalingPercent,
 			pluginInjectionApi,
@@ -385,6 +388,7 @@ type TableContainerProps = {
 
 	isTableResizingEnabled: boolean | undefined;
 	isTableScalingEnabled?: boolean;
+	isTableWithFixedColumnWidthsOptionEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 };
@@ -404,6 +408,7 @@ export const TableContainer = ({
 	isWholeTableInDanger,
 	isTableResizingEnabled,
 	isTableScalingEnabled,
+	isTableWithFixedColumnWidthsOptionEnabled,
 	isTableAlignmentEnabled,
 	shouldUseIncreasedScalingPercent,
 }: PropsWithChildren<TableContainerProps>) => {
@@ -422,6 +427,7 @@ export const TableContainer = ({
 				isResizing={isResizing}
 				pluginInjectionApi={pluginInjectionApi}
 				isTableScalingEnabled={isTableScalingEnabled}
+				isTableWithFixedColumnWidthsOptionEnabled={isTableWithFixedColumnWidthsOptionEnabled}
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}

package/src/nodeviews/TableResizer.tsx

@@ -22,7 +22,7 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
@@ -78,6 +78,7 @@ interface TableResizerProps {
 	displayGapCursor: (toggle: boolean) => boolean;
 	pluginInjectionApi?: PluginInjectionAPI;
 	isTableScalingEnabled?: boolean;
+	isTableWithFixedColumnWidthsOptionEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	isWholeTableInDanger?: boolean;
 	isFullWidthModeEnabled?: boolean;
@@ -162,7 +163,7 @@ const getVisibleGuidelines = (
 
 		guidelineVisibleAdjustment = isFullWidthModeEnabled
 			? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-			: -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+			: -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
 	}
 	const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
 
@@ -193,6 +194,7 @@ export const TableResizer = ({
 	attachAnalyticsEvent,
 	displayGapCursor,
 	isTableScalingEnabled,
+	isTableWithFixedColumnWidthsOptionEnabled,
 	isTableAlignmentEnabled,
 	isWholeTableInDanger,
 	shouldUseIncreasedScalingPercent,
@@ -236,7 +238,9 @@ export const TableResizer = ({
 					isTableScalingEnabled
 						? defaultGuidelinesForPreserveTable(
 								PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-								isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+								isFullWidthModeEnabled
+									? lineLength + 2 * akEditorGutterPaddingDynamic()
+									: containerWidth,
 								excludeGuidelineConfig,
 							)
 						: defaultGuidelines,
@@ -265,7 +269,9 @@ export const TableResizer = ({
 						x: isTableScalingEnabled
 							? defaultTablePreserveSnappingWidths(
 									PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-									isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+									isFullWidthModeEnabled
+										? lineLength + 2 * akEditorGutterPaddingDynamic()
+										: containerWidth,
 									excludeGuidelineConfig,
 								)
 							: defaultSnappingWidths,
@@ -354,7 +360,9 @@ export const TableResizer = ({
 			isTableScalingEnabled
 				? defaultGuidelinesForPreserveTable(
 						PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-						isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+						isFullWidthModeEnabled
+							? lineLength + 2 * akEditorGutterPaddingDynamic()
+							: containerWidth,
 						excludeGuidelineConfig,
 					)
 				: defaultGuidelines,
@@ -407,10 +415,11 @@ export const TableResizer = ({
 				},
 				editorView.domAtPos.bind(editorView),
 				isTableScalingEnabled,
+				isTableWithFixedColumnWidthsOptionEnabled,
 			);
 
 			const editorContainerWidth = isFullWidthModeEnabled
-				? lineLength + 2 * akEditorGutterPadding
+				? lineLength + 2 * akEditorGutterPaddingDynamic()
 				: containerWidth;
 
 			const closestSnap = findClosestSnap(
@@ -464,6 +473,7 @@ export const TableResizer = ({
 		[
 			countFrames,
 			isTableScalingEnabled,
+			isTableWithFixedColumnWidthsOptionEnabled,
 			isFullWidthModeEnabled,
 			excludeGuidelineConfig,
 			tableRef,

package/src/nodeviews/table.tsx

@@ -92,6 +92,7 @@ export default class TableView extends ReactNodeView<Props> {
 	eventDispatcher?: EventDispatcher;
 	getPos: getPosHandlerNode;
 	options;
+	getEditorFeatureFlags;
 
 	constructor(props: Props) {
 		super(
@@ -109,6 +110,7 @@ export default class TableView extends ReactNodeView<Props> {
 		this.getPos = props.getPos;
 		this.eventDispatcher = props.eventDispatcher;
 		this.options = props.options;
+		this.getEditorFeatureFlags = props.getEditorFeatureFlags;
 	}
 
 	getContentDOM() {
@@ -126,7 +128,7 @@ export default class TableView extends ReactNodeView<Props> {
 			if (
 				!this.options?.isTableScalingEnabled ||
 				(this.options?.isTableScalingEnabled &&
-					getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+					this.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption &&
 					this.node.attrs.displayMode === 'fixed')
 			) {
 				const tableInlineWidth = getInlineWidth(
@@ -157,7 +159,7 @@ export default class TableView extends ReactNodeView<Props> {
 		if (
 			!this.options?.isTableScalingEnabled ||
 			(this.options?.isTableScalingEnabled &&
-				getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+				this.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption &&
 				node.attrs.displayMode === 'fixed')
 		) {
 			// handle inline style when table been resized

package/src/plugin.tsx

@@ -153,13 +153,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 +333,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							fullWidthEnabled,
 							api,
 							getIntl,
+							isCellBackgroundDuplicated,
+							isTableFixedColumnWidthsOptionEnabled,
 							shouldUseIncreasedScalingPercent,
 						);
 					},
@@ -371,7 +375,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 +542,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											isHeaderColumnEnabled={isHeaderColumnEnabled}
 											isHeaderRowEnabled={isHeaderRowEnabled}
 											isDragAndDropEnabled={isDragAndDropEnabled}
+											isTableScalingEnabled={options?.isTableScalingEnabled}
 											editorView={editorView}
 											mountPoint={popupsMountPoint}
 											boundariesElement={popupsBoundariesElement}
@@ -662,7 +672,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,
 				options,
-				isTableScalingWithFixedColumnWidthsOptionEnabled,
+				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			)(pluginConfig(options?.tableOptions)),
 		},