@atlaskit/editor-plugin-table 7.16.14 → 7.16.16

package/src/commands/delete.ts

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

package/src/commands/insert.ts

@@ -38,7 +38,11 @@ function addColumnAtCustomStep(column: number) {
 	};
 }
 
-export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDuplicated?: boolean) {
+export function addColumnAt(
+	isTableScalingEnabled = false,
+	isCellBackgroundDuplicated?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
+) {
 	return (
 		column: number,
 		allowAddColumnCustomStep: boolean = false,
@@ -54,7 +58,10 @@ export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDupli
 			const table = findTable(updatedTr.selection);
 			if (table) {
 				// [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-				updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
+				updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+					table,
+					view,
+				)(updatedTr);
 			}
 
 			if (view) {
@@ -76,7 +83,7 @@ export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDupli
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
-	(isTableScalingEnabled = false): Command =>
+	(isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
 		if (!table) {
@@ -85,9 +92,11 @@ export const addColumnBefore =
 		if (dispatch) {
 			let rect = selectedRect(state);
 			dispatch(
-				addColumnAt(isTableScalingEnabled)(rect.left, getAllowAddColumnCustomStep(state), view)(
-					state.tr,
-				),
+				addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+					rect.left,
+					getAllowAddColumnCustomStep(state),
+					view,
+				)(state.tr),
 			);
 		}
 		return true;
@@ -96,7 +105,7 @@ export const addColumnBefore =
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 export const addColumnAfter =
-	(isTableScalingEnabled?: boolean): Command =>
+	(isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
 		if (!table) {
@@ -105,19 +114,29 @@ export const addColumnAfter =
 		if (dispatch) {
 			let rect = selectedRect(state);
 			dispatch(
-				addColumnAt(isTableScalingEnabled)(rect.right, getAllowAddColumnCustomStep(state), view)(
-					state.tr,
-				),
+				addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+					rect.right,
+					getAllowAddColumnCustomStep(state),
+					view,
+				)(state.tr),
 			);
 		}
 		return true;
 	};
 
 export const insertColumn =
-	(isTableScalingEnabled = false, isCellBackgroundDuplicated?: boolean) =>
+	(
+		isTableScalingEnabled = false,
+		isCellBackgroundDuplicated?: boolean,
+		shouldUseIncreasedScalingPercent?: boolean,
+	) =>
 	(column: number): Command =>
 	(state, dispatch, view) => {
-		let tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(
+		let tr = addColumnAt(
+			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			shouldUseIncreasedScalingPercent,
+		)(
 			column,
 			getAllowAddColumnCustomStep(state),
 			view,

package/src/commands-with-analytics.ts

@@ -276,6 +276,7 @@ export const insertColumnWithAnalytics =
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isCellbackgroundDuplicated = false,
+		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(
 		inputMethod:
@@ -301,7 +302,11 @@ export const insertColumnWithAnalytics =
 				eventType: EVENT_TYPE.TRACK,
 			};
 		})(editorAnalyticsAPI)(
-			insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position),
+			insertColumn(
+				isTableScalingEnabled,
+				isCellbackgroundDuplicated,
+				shouldUseIncreasedScalingPercent,
+			)(position),
 		);
 
 export const deleteRowsWithAnalytics =
@@ -340,7 +345,11 @@ export const deleteRowsWithAnalytics =
 		});
 
 export const deleteColumnsWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled = false) =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		isTableScalingEnabled = false,
+		shouldUseIncreasedScalingPercent = false,
+	) =>
 	(
 		inputMethod:
 			| INPUT_METHOD.CONTEXT_MENU
@@ -366,10 +375,16 @@ export const deleteColumnsWithAnalytics =
 				},
 				eventType: EVENT_TYPE.TRACK,
 			};
-		})(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
+		})(editorAnalyticsAPI)(
+			deleteColumnsCommand(rect, isTableScalingEnabled, shouldUseIncreasedScalingPercent),
+		);
 
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		isTableScalingEnabled?: boolean,
+		shouldUseIncreasedScalingPercent?: boolean,
+	): Command =>
 	(state, dispatch) => {
 		const { selection } = state;
 		const isCellSelection = selection instanceof CellSelection;
@@ -393,10 +408,11 @@ export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
 				isHeaderRowRequired,
 			)(state, dispatch);
 		} else if (selectionType === 'column') {
-			return deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect)(
-				state,
-				dispatch,
-			);
+			return deleteColumnsWithAnalytics(
+				editorAnalyticsAPI,
+				isTableScalingEnabled,
+				shouldUseIncreasedScalingPercent,
+			)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
 		} else {
 			return false;
 		}

package/src/event-handlers.ts

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

package/src/nodeviews/TableComponent.tsx

@@ -383,6 +383,15 @@ 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 shouldUseIncreasedScalingPercent =
+				(isTableScalingEnabledWithLockButton &&
+					getBooleanFF('platform.editor.table.use-increased-scaling-percent')) ||
+				false;
+
 			if (force || (!isResizing && shouldUpdateColgroup)) {
 				const resizeState = getResizeState({
 					minWidth: COLUMN_MIN_WIDTH,
@@ -392,6 +401,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					start,
 					domAtPos: view.domAtPos.bind(view),
 					isTableScalingEnabled: true,
+					shouldUseIncreasedScalingPercent,
 				});
 
 				let shouldScaleOnColgroupUpdate = false;
@@ -402,17 +412,19 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					shouldScaleOnColgroupUpdate = true;
 				}
 
-				if (
-					this.props.options?.isTableScalingEnabled &&
-					getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
-					tableNode.attrs.displayMode !== 'fixed'
-				) {
+				if (isTableScalingEnabledWithLockButton && tableNode.attrs.displayMode !== 'fixed') {
 					shouldScaleOnColgroupUpdate = true;
 				}
 
 				// Request animation frame required for Firefox
 				requestAnimationFrame(() => {
-					updateColgroup(resizeState, this.table!, tableNode, shouldScaleOnColgroupUpdate);
+					updateColgroup(
+						resizeState,
+						this.table!,
+						tableNode,
+						shouldScaleOnColgroupUpdate,
+						shouldUseIncreasedScalingPercent,
+					);
 				});
 			}
 		}
@@ -452,11 +464,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			shouldHandleColgroupUpdates = true;
 		}
 
-		if (
+		const isTableScalingEnabledWithLockButton =
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
-			getNode().attrs.displayMode !== 'fixed'
-		) {
+			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+		const shouldUseIncreasedScalingPercent =
+			isTableScalingEnabledWithLockButton &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
+		if (isTableScalingEnabledWithLockButton && getNode().attrs.displayMode !== 'fixed') {
 			shouldScale = true;
 			shouldHandleColgroupUpdates = true;
 		}
@@ -523,7 +538,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					const depth = view.state.doc.resolve(start).depth;
 					shouldScale = depth === 0 && shouldScale;
 
-					insertColgroupFromNode(this.table, currentTable, shouldScale);
+					insertColgroupFromNode(
+						this.table,
+						currentTable,
+						shouldScale,
+						undefined,
+						shouldUseIncreasedScalingPercent,
+					);
 				}
 
 				updateControls()(view.state);
@@ -724,6 +745,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const { stickyScrollbar } = getEditorFeatureFlags();
 
+		const shouldUseIncreasedScalingPercent =
+			isTableScalingEnabled &&
+			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 		return (
 			<TableContainer
 				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -746,6 +772,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isTableScalingEnabled={isTableScalingEnabled}
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
+				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 			>
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -961,6 +988,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		this.layoutSize = layoutSize;
 	};
 
+	// Function gets called when table is nested.
 	private scaleTable = (scaleOptions: { parentWidth?: number }) => {
 		const { view, getNode, getPos, containerWidth, options } = this.props;
 		const node = getNode();
@@ -987,7 +1015,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				...options,
 			},
 			domAtPos,
-			false,
+			false, // isTableScalingEnabled doesn't change the behavior of nested tables
+			false, // shouldUseIncreasedScalingPercent set to false for nested tables
 		)(state.tr);
 
 		dispatch(tr);

package/src/nodeviews/TableContainer.tsx

@@ -162,6 +162,7 @@ type ResizableTableContainerProps = {
 
 	isTableScalingEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -180,6 +181,7 @@ export const ResizableTableContainer = React.memo(
 		isWholeTableInDanger,
 		isTableScalingEnabled,
 		isTableAlignmentEnabled,
+		shouldUseIncreasedScalingPercent,
 	}: PropsWithChildren<ResizableTableContainerProps>) => {
 		const containerRef = useRef<HTMLDivElement | null>(null);
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -308,6 +310,7 @@ export const ResizableTableContainer = React.memo(
 			isFullWidthModeEnabled,
 			isTableScalingEnabled,
 			isWholeTableInDanger,
+			shouldUseIncreasedScalingPercent,
 			pluginInjectionApi,
 			onResizeStart,
 			onResizeStop,
@@ -373,6 +376,7 @@ type TableContainerProps = {
 	isTableResizingEnabled: boolean | undefined;
 	isTableScalingEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 };
 
 export const TableContainer = ({
@@ -391,6 +395,7 @@ export const TableContainer = ({
 	isTableResizingEnabled,
 	isTableScalingEnabled,
 	isTableAlignmentEnabled,
+	shouldUseIncreasedScalingPercent,
 }: PropsWithChildren<TableContainerProps>) => {
 	if (isTableResizingEnabled && !isNested) {
 		return (
@@ -409,6 +414,7 @@ export const TableContainer = ({
 				isTableScalingEnabled={isTableScalingEnabled}
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
+				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 			>
 				{children}
 			</ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -76,6 +76,7 @@ interface TableResizerProps {
 	isTableAlignmentEnabled?: boolean;
 	isWholeTableInDanger?: boolean;
 	isFullWidthModeEnabled?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -189,6 +190,7 @@ export const TableResizer = ({
 	isTableScalingEnabled,
 	isTableAlignmentEnabled,
 	isWholeTableInDanger,
+	shouldUseIncreasedScalingPercent,
 	pluginInjectionApi,
 	isFullWidthModeEnabled,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
@@ -517,6 +519,7 @@ export const TableResizer = ({
 					},
 					editorView.domAtPos.bind(editorView),
 					isTableScalingEnabled,
+					shouldUseIncreasedScalingPercent || false,
 				)(tr);
 
 				const scaledNode = tr.doc.nodeAt(pos)!;
@@ -571,6 +574,7 @@ export const TableResizer = ({
 			endMeasure,
 			onResizeStop,
 			isTableScalingEnabled,
+			shouldUseIncreasedScalingPercent,
 			widthToWidest,
 			formatMessage,
 			pluginInjectionApi,

package/src/plugin.tsx

@@ -153,6 +153,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 	};
 	const editorAnalyticsAPI = api?.analytics?.actions;
 
+	const shouldUseIncreasedScalingPercent =
+		options?.isTableScalingEnabled &&
+		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 	return {
 		name: 'table',
 
@@ -278,6 +283,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							api,
 							isTableScalingEnabled,
 							isTableAlignmentEnabled,
+							shouldUseIncreasedScalingPercent,
 						);
 					},
 				},
@@ -313,6 +319,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableAlignmentEnabled = false,
 							fullWidthEnabled = false,
 						} = options || ({} as TablePluginOptions);
+
 						return keymapPlugin(
 							defaultGetEditorContainerWidth,
 							editorAnalyticsAPI,
@@ -322,6 +329,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							fullWidthEnabled,
 							api,
 							getIntl,
+							shouldUseIncreasedScalingPercent,
 						);
 					},
 				},
@@ -652,6 +660,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,
 				options,
+				shouldUseIncreasedScalingPercent,
 			)(pluginConfig(options?.tableOptions)),
 		},
 	};

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

@@ -214,14 +214,23 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
 							const { isTableScalingEnabled = false } = getTablePluginState(editorView.state);
 
 							let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-							if (
+							const isTableScalingEnabledWithLockButton =
 								isTableScalingEnabled &&
-								getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-							) {
+								getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+							const shouldUseIncreasedScalingPercent =
+								isTableScalingEnabledWithLockButton &&
+								getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
+							if (isTableScalingEnabledWithLockButton) {
 								isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
 							}
 
-							insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
+							insertColgroupFromNode(
+								tableRef,
+								tableNode,
+								isTableScalingEnabledOnCurrentTable,
+								shouldUseIncreasedScalingPercent,
+							);
 						}
 					}
 

package/src/pm-plugins/keymap.ts

@@ -61,6 +61,7 @@ export function keymapPlugin(
 	isFullWidthEnabled?: boolean,
 	pluginInjectionApi?: PluginInjectionAPIWithA11y,
 	getIntl?: () => IntlShape,
+	shouldUseIncreasedScalingPercent?: boolean,
 ): SafePlugin {
 	const list = {};
 
@@ -111,11 +112,15 @@ export function keymapPlugin(
 
 	bindKeymapWithCommand(
 		addColumnBefore.common!,
-		addColumnBeforeCommand(isTableScalingEnabled),
+		addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent),
 		list,
 	);
 
-	bindKeymapWithCommand(addColumnAfter.common!, addColumnAfterCommand(isTableScalingEnabled), list);
+	bindKeymapWithCommand(
+		addColumnAfter.common!,
+		addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent),
+		list,
+	);
 
 	if (dragAndDropEnabled) {
 		// Move row/column shortcuts
@@ -153,13 +158,21 @@ export function keymapPlugin(
 		// Delete row/column shortcuts
 		bindKeymapWithCommand(
 			deleteColumn.common!,
-			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI),
+			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				isTableScalingEnabled,
+				shouldUseIncreasedScalingPercent,
+			),
 			list,
 		);
 
 		bindKeymapWithCommand(
 			deleteRow.common!,
-			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI),
+			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				isTableScalingEnabled,
+				shouldUseIncreasedScalingPercent,
+			),
 			list,
 		);
 	}

package/src/pm-plugins/main.ts

@@ -93,6 +93,7 @@ export const createPlugin = (
 	pluginInjectionApi?: PluginInjectionAPI,
 	isTableScalingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
 ) => {
 	const state = createPluginState(dispatch, {
 		pluginConfig,
@@ -165,6 +166,7 @@ export const createPlugin = (
 					editorAnalyticsAPI,
 					editorViewRef || undefined,
 					isTableScalingEnabled,
+					shouldUseIncreasedScalingPercent,
 				);
 				return fixTables(updatedTr) || updatedTr;
 			}

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

@@ -84,10 +84,10 @@ export const handleMouseDown = (
 	});
 
 	let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-	if (
-		isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-	) {
+
+	const isTableScalingEnabledWithLockButton =
+		isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+	if (isTableScalingEnabledWithLockButton) {
 		shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 	}
 
@@ -99,6 +99,9 @@ export const handleMouseDown = (
 		start,
 		domAtPos,
 		isTableScalingEnabled: shouldScale,
+		shouldUseIncreasedScalingPercent:
+			isTableScalingEnabledWithLockButton &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 	});
 
 	if (
@@ -180,10 +183,10 @@ export const handleMouseDown = (
 					selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
 
 				let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-				if (
+				const isTableScalingEnabledWithLockButton =
 					isTableScalingEnabled &&
-					getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-				) {
+					getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+				if (isTableScalingEnabledWithLockButton) {
 					shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 				}
 
@@ -210,6 +213,8 @@ export const handleMouseDown = (
 						originalTable,
 						resizingSelectedColumns ? selectedColumns : undefined,
 						shouldScale,
+						isTableScalingEnabledWithLockButton &&
+							getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 					);
 					tr = updateColumnWidths(newResizeState, table, start)(tr);
 				}
@@ -284,10 +289,13 @@ export const handleMouseDown = (
 		const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter!.attrs.colspan - 1;
 
 		let shouldScale = tableDepth === 0 && isTableScalingEnabled;
-		if (
+		const isTableScalingEnabledWithLockButton =
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-		) {
+			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+		const shouldUseIncreasedScalingPercent =
+			isTableScalingEnabledWithLockButton &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+		if (isTableScalingEnabledWithLockButton) {
 			shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 		}
 
@@ -300,6 +308,8 @@ export const handleMouseDown = (
 				table,
 				undefined,
 				shouldScale,
+				undefined,
+				shouldUseIncreasedScalingPercent,
 			);
 		} else {
 			resizeColumn(
@@ -310,6 +320,7 @@ export const handleMouseDown = (
 				table,
 				undefined,
 				shouldScale,
+				shouldUseIncreasedScalingPercent,
 			);
 		}
 

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

@@ -17,9 +17,12 @@ type Col = Array<string | { [name: string]: string }>;
 export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
 	colwidth - 1 / tableColumnCount;
 
-export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
+export const generateColgroup = (
+	table: PmNode,
+	tableRef?: HTMLElement,
+	shouldUseIncreasedScalingPercent?: boolean,
+) => {
 	const cols: Col[] = [];
-
 	const map = TableMap.get(table);
 	table.content.firstChild!.content.forEach((cell) => {
 		const colspan = cell.attrs.colspan || 1;
@@ -27,7 +30,11 @@ export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
 			// We slice here to guard against our colwidth array having more entries
 			// Than the we actually span. We'll patch the document at a later point.
 			if (tableRef) {
-				const scalePercent = getTableScalingPercent(table, tableRef);
+				const scalePercent = getTableScalingPercent(
+					table,
+					tableRef,
+					shouldUseIncreasedScalingPercent,
+				);
 				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
 					const fixedColWidth = getColWidthFix(width, map.width);
 					const scaledWidth = fixedColWidth * scalePercent;
@@ -73,6 +80,7 @@ export const insertColgroupFromNode = (
 	table: PmNode,
 	isTableScalingEnabled = false,
 	shouldRemove = true,
+	shouldUseIncreasedScalingPercent = false,
 ): HTMLCollection => {
 	let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
 	if (colgroup && shouldRemove) {
@@ -82,6 +90,7 @@ export const insertColgroupFromNode = (
 	colgroup = renderColgroupFromNode(
 		table,
 		isTableScalingEnabled ? tableRef ?? undefined : undefined,
+		shouldUseIncreasedScalingPercent,
 	);
 	if (shouldRemove) {
 		tableRef?.insertBefore(colgroup, tableRef?.firstChild);
@@ -117,11 +126,12 @@ export const isMinCellWidthTable = (table: PmNode) => {
 function renderColgroupFromNode(
 	table: PmNode,
 	maybeTableRef: HTMLElement | undefined,
+	shouldUseIncreasedScalingPercent: boolean,
 ): HTMLElement {
 	const rendered = DOMSerializer.renderSpec(document, [
 		'colgroup',
 		{},
-		...generateColgroup(table, maybeTableRef),
+		...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent),
 	]);
 
 	return rendered.dom as HTMLElement;

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

@@ -2,5 +2,6 @@ export const COLUMN_MIN_WIDTH = 48;
 export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
+export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width
 export const TABLE_EDITOR_MARGIN = 76;

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

@@ -43,4 +43,5 @@ export {
 	TABLE_MAX_WIDTH,
 	TABLE_DEFAULT_WIDTH,
 	MAX_SCALING_PERCENT,
+	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
 } from './consts';