@atlaskit/editor-plugin-table 7.16.13 → 7.16.15

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

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

@@ -20,7 +20,10 @@ import {
 import type { TableOptions } from '../../../nodeviews/types';
 
 import { hasTableBeenResized } from './colgroup';
-import { MAX_SCALING_PERCENT } from './consts';
+import {
+	MAX_SCALING_PERCENT,
+	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
+} from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
@@ -137,19 +140,35 @@ export const getTableContainerElementWidth = (table: PMNode) => {
 	return getTableContainerWidth(table);
 };
 
-export const getTableScalingPercent = (table: PMNode, tableRef: HTMLElement | null) => {
+export const getTableScalingPercent = (
+	table: PMNode,
+	tableRef: HTMLElement | null,
+	shouldUseIncreasedScalingPercent?: boolean,
+) => {
+	const maxScalingPercent = shouldUseIncreasedScalingPercent
+		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
+		: MAX_SCALING_PERCENT;
+
 	const tableWidth = getTableContainerElementWidth(table);
 	let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
 	// minus 1 here to avoid any 1px scroll in Firefox
 	let scalePercent = (renderWidth - 1) / tableWidth;
-	scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
 	return Math.min(scalePercent, 1);
 };
 
-export const getStaticTableScalingPercent = (table: PMNode, tableRenderWidth: number) => {
+export const getStaticTableScalingPercent = (
+	table: PMNode,
+	tableRenderWidth: number,
+	shouldUseIncreasedScalingPercent?: boolean,
+) => {
+	const maxScalingPercent = shouldUseIncreasedScalingPercent
+		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
+		: MAX_SCALING_PERCENT;
+
 	const tableWidth = getTableContainerElementWidth(table);
 	// minus 1 here to avoid any 1px scroll in Firefox
 	let scalePercent = (tableRenderWidth - 1) / tableWidth;
-	scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
 	return Math.min(scalePercent, 1);
 };

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

@@ -16,12 +16,13 @@ export const resizeColumn = (
 	tableNode: PmNode,
 	selectedColumns?: number[],
 	isTableScalingEnabled = false,
+	shouldUseIncreasedScalingPercent = false,
 ): ResizeState => {
 	let scalePercent = 1;
 	let resizeAmount = amount;
 
 	if (isTableScalingEnabled) {
-		scalePercent = getTableScalingPercent(tableNode, tableRef);
+		scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
 		resizeAmount = amount / scalePercent;
 	}
 
@@ -32,7 +33,13 @@ export const resizeColumn = (
 				? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
 				: resizeState;
 
-	updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+	updateColgroup(
+		newState,
+		tableRef,
+		tableNode,
+		isTableScalingEnabled,
+		shouldUseIncreasedScalingPercent,
+	);
 
 	return newState;
 };
@@ -47,13 +54,13 @@ export const resizeColumnAndTable = (
 	selectedColumns?: number[],
 	isTableScalingEnabled = false,
 	originalTableWidth?: number,
+	shouldUseIncreasedScalingPercent = false,
 ): ResizeState => {
 	// TODO: can we use document state, and apply scaling factor?
 	const tableWidth = tableRef.clientWidth;
 	const tableContainerWidth = tableRef.closest('.pm-table-container')?.clientWidth;
 
 	const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-
 	let resizeAmount = amount * 2;
 
 	// todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
@@ -84,7 +91,7 @@ export const resizeColumnAndTable = (
 
 	// this function only updates the colgroup in DOM, it reverses the scalePercent
 	// todo: change isScalingEnabled to true when reimplementing scaling
-	updateColgroup(newState, tableRef, tableNode, false);
+	updateColgroup(newState, tableRef, tableNode, false, shouldUseIncreasedScalingPercent);
 
 	// use the difference in width from affected column to update overall table width
 	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;

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

@@ -24,6 +24,7 @@ export const getResizeState = ({
 	start,
 	domAtPos,
 	isTableScalingEnabled = false,
+	shouldUseIncreasedScalingPercent = false,
 }: {
 	minWidth: number;
 	maxSize: number;
@@ -32,9 +33,10 @@ export const getResizeState = ({
 	start: number;
 	domAtPos: (pos: number) => { node: Node; offset: number };
 	isTableScalingEnabled: boolean;
+	shouldUseIncreasedScalingPercent: boolean;
 }): ResizeState => {
 	if (isTableScalingEnabled) {
-		const scalePercent = getTableScalingPercent(table, tableRef);
+		const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
 		minWidth = Math.ceil(minWidth / scalePercent);
 	}
 	// If the table has been resized, we can use the column widths from the table node
@@ -67,6 +69,7 @@ export const getResizeState = ({
 		table,
 		isTableScalingEnabled,
 		shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
+		shouldUseIncreasedScalingPercent,
 	);
 	const cols = Array.from(colgroupChildren).map((_, index) => {
 		// If the table hasn't been resized and we have a table width attribute, we can use it
@@ -104,6 +107,7 @@ export const updateColgroup = (
 	tableRef: HTMLElement | null,
 	tableNode?: PMNode,
 	isTableScalingEnabled?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
 ): void => {
 	const cols = tableRef?.querySelectorAll('col');
 	const columnsCount = cols?.length;
@@ -113,7 +117,11 @@ export const updateColgroup = (
      We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
      * */
 	if (isTableScalingEnabled && tableNode) {
-		const scalePercent = getTableScalingPercent(tableNode, tableRef);
+		const scalePercent = getTableScalingPercent(
+			tableNode,
+			tableRef,
+			shouldUseIncreasedScalingPercent,
+		);
 		state.cols
 			.filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
 			.forEach((column, i) => {
@@ -359,10 +367,10 @@ export const getNewResizeStateFromSelectedColumns = (
 	let resizeState;
 
 	let isTableScalingEnabledOnCurrentTable = 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) {
 		isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
 	}
 
@@ -374,6 +382,9 @@ export const getNewResizeStateFromSelectedColumns = (
 		start: table.start,
 		domAtPos,
 		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+		shouldUseIncreasedScalingPercent:
+			isTableScalingEnabledWithLockButton &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
 	});
 
 	const newResizeState = evenSelectedColumnsWidths(resizeState, rect);

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

@@ -40,6 +40,7 @@ export const scale = (
 	options: ScaleOptions,
 	domAtPos: DomAtPos,
 	isTableScalingEnabledOnCurrentTable = false,
+	shouldUseIncreasedScalingPercent = false,
 ): ResizeState | undefined => {
 	const {
 		node,
@@ -89,6 +90,7 @@ export const scale = (
 		start,
 		domAtPos,
 		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+		shouldUseIncreasedScalingPercent,
 	});
 
 	return scaleTableTo(resizeState, newWidth);
@@ -101,6 +103,7 @@ export const scaleWithParent = (
 	start: number,
 	domAtPos: DomAtPos,
 	isTableScalingEnabledOnCurrentTable = false,
+	shouldUseIncreasedScalingPercent = false,
 ) => {
 	const resizeState = getResizeState({
 		minWidth: tableCellMinWidth,
@@ -110,6 +113,7 @@ export const scaleWithParent = (
 		start,
 		domAtPos,
 		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+		shouldUseIncreasedScalingPercent,
 	});
 
 	if (table.attrs.isNumberColumnEnabled) {
@@ -165,10 +169,9 @@ export const previewScaleTable = (
 	}
 
 	let isTableScalingEnabledOnCurrentTable = 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) {
 		isTableScalingEnabledOnCurrentTable =
 			isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
 	}
@@ -179,12 +182,24 @@ export const previewScaleTable = (
 		return;
 	}
 
+	const shouldUseIncreasedScalingPercent =
+		isTableScalingEnabledWithLockButton &&
+		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 	const resizeState = parentWidth
-		? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
-		: scale(tableRef, options, domAtPos, false);
+		? scaleWithParent(
+				tableRef,
+				parentWidth,
+				node,
+				start,
+				domAtPos,
+				false, // Here isTableScalingEnabled = false
+				shouldUseIncreasedScalingPercent,
+			)
+		: scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
 
 	if (resizeState) {
-		updateColgroup(resizeState, tableRef, node, false);
+		updateColgroup(resizeState, tableRef, node, false, shouldUseIncreasedScalingPercent);
 	}
 };
 
@@ -195,6 +210,7 @@ export const scaleTable =
 		options: ScaleOptions,
 		domAtPos: DomAtPos,
 		isTableScalingEnabledOnCurrentTable = false,
+		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(tr: Transaction) => {
 		if (!tableRef) {
@@ -207,7 +223,7 @@ export const scaleTable =
 			// If its not a re-sized table, we still want to re-create cols
 			// To force reflow of columns upon delete.
 			if (!isTableScalingEnabledOnCurrentTable) {
-				insertColgroupFromNode(tableRef, node);
+				insertColgroupFromNode(tableRef, node, false, undefined, shouldUseIncreasedScalingPercent);
 			}
 			tr.setMeta('scrollIntoView', false);
 			return tr;
@@ -222,9 +238,16 @@ export const scaleTable =
 				start,
 				domAtPos,
 				isTableScalingEnabledOnCurrentTable,
+				shouldUseIncreasedScalingPercent,
 			);
 		} else {
-			resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
+			resizeState = scale(
+				tableRef,
+				options,
+				domAtPos,
+				isTableScalingEnabledOnCurrentTable,
+				shouldUseIncreasedScalingPercent,
+			);
 		}
 
 		if (resizeState) {

package/src/toolbar.tsx

@@ -6,6 +6,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
 import type {
 	Command,
@@ -179,6 +180,7 @@ export const getToolbarCellOptionsConfig = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	shouldUseIncreasedScalingPercent = false,
 ): FloatingToolbarDropdown<Command> => {
 	const { top, bottom, right, left } = initialSelectionRect;
 	const numberOfColumns = right - left;
@@ -193,10 +195,11 @@ export const getToolbarCellOptionsConfig = (
 				const selectionRect = getClosestSelectionRect(state);
 				const index = selectionRect?.right;
 				if (index) {
-					insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-						INPUT_METHOD.FLOATING_TB,
-						index,
-					)(state, dispatch, view);
+					insertColumnWithAnalytics(
+						editorAnalyticsAPI,
+						isTableScalingEnabled,
+						shouldUseIncreasedScalingPercent,
+					)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
 				}
 				return true;
 			},
@@ -230,11 +233,11 @@ export const getToolbarCellOptionsConfig = (
 			onClick: (state: EditorState, dispatch?: CommandDispatch, view?: EditorView) => {
 				const selectionRect = getClosestSelectionRect(state);
 				if (selectionRect) {
-					deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(
-						state,
-						dispatch,
-						view,
-					);
+					deleteColumnsWithAnalytics(
+						editorAnalyticsAPI,
+						isTableScalingEnabled,
+						shouldUseIncreasedScalingPercent,
+					)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
 				}
 				return true;
 			},
@@ -431,6 +434,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
+		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
 	(state, intl) => {
@@ -464,6 +468,7 @@ export const getToolbarConfig =
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
 						options?.isTableScalingEnabled,
+						shouldUseIncreasedScalingPercent,
 					);
 
 			let columnSettingsItems;
@@ -588,6 +593,7 @@ const getCellItems = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	shouldUseIncreasedScalingPercent = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const initialSelectionRect = getClosestSelectionRect(state);
 	if (initialSelectionRect) {
@@ -599,6 +605,7 @@ const getCellItems = (
 			getEditorContainerWidth,
 			editorAnalyticsAPI,
 			isTableScalingEnabled,
+			shouldUseIncreasedScalingPercent,
 		);
 		return [cellOptions, separator(cellOptions.hidden!)];
 	}
@@ -910,8 +917,9 @@ export const isLayoutOptionDisabled = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 ) => {
 	const lineLength = getEditorContainerWidth().lineLength;
+	const tableWidth = getTableContainerWidth(selectedNode);
 
-	if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+	if (selectedNode && lineLength && tableWidth > lineLength) {
 		return true;
 	}
 

package/src/transforms/column-width.ts

@@ -104,7 +104,7 @@ export const updateColumnWidths =
  * @returns Updated transaction with rescaled columns for a given table
  */
 export const rescaleColumns =
-	(isTableScalingEnabled = false) =>
+	(isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) =>
 	(table: ContentNodeWithPos, view: EditorView | undefined) =>
 	(tr: Transaction): Transaction => {
 		if (!view) {
@@ -206,6 +206,7 @@ export const rescaleColumns =
 			domAtPos,
 			maxSize: previousTableInfo.possibleMaxWidth,
 			isTableScalingEnabled: shouldScale,
+			shouldUseIncreasedScalingPercent,
 		});
 
 		// Two scenarios that require scaling: