@atlaskit/editor-plugin-table 7.16.14 → 7.16.16

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

@@ -180,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;
@@ -194,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;
 			},
@@ -231,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;
 			},
@@ -432,6 +434,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
+		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
 	(state, intl) => {
@@ -465,6 +468,7 @@ export const getToolbarConfig =
 						getEditorContainerWidth,
 						editorAnalyticsAPI,
 						options?.isTableScalingEnabled,
+						shouldUseIncreasedScalingPercent,
 					);
 
 			let columnSettingsItems;
@@ -589,6 +593,7 @@ const getCellItems = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
+	shouldUseIncreasedScalingPercent = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const initialSelectionRect = getClosestSelectionRect(state);
 	if (initialSelectionRect) {
@@ -600,6 +605,7 @@ const getCellItems = (
 			getEditorContainerWidth,
 			editorAnalyticsAPI,
 			isTableScalingEnabled,
+			shouldUseIncreasedScalingPercent,
 		);
 		return [cellOptions, separator(cellOptions.hidden!)];
 	}

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:

package/src/transforms/delete-columns.ts

@@ -240,7 +240,13 @@ function fixRowSpans(table: PMNode): PMNode | null {
 }
 
 export const deleteColumns =
-	(rect: Rect, allowCustomStep: boolean, view?: EditorView, isTableScalingEnabled = false) =>
+	(
+		rect: Rect,
+		allowCustomStep: boolean,
+		view?: EditorView,
+		isTableScalingEnabled = false,
+		shouldUseIncreasedScalingPercent = false,
+	) =>
 	(tr: Transaction) => {
 		let updatedTr = tr;
 		updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -255,7 +261,10 @@ export const deleteColumns =
 		const table = findTable(updatedTr.selection);
 
 		if (table) {
-			updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
+			updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(
+				table,
+				view,
+			)(updatedTr);
 		}
 		return updatedTr;
 	};

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -35,6 +35,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
 	clearHoverSelection,
@@ -510,6 +511,11 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			? getEditorFeatureFlags()
 			: {};
 
+		const shouldUseIncreasedScalingPercent =
+			isTableScalingEnabled &&
+			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 		switch (item.value.name) {
 			case 'sort_column_desc':
 				sortColumnWithAnalytics(editorAnalyticsAPI)(
@@ -564,6 +570,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					tableDuplicateCellColouring,
+					shouldUseIncreasedScalingPercent,
 				)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 				this.toggleOpen();
 				break;
@@ -578,11 +585,11 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				this.toggleOpen();
 				break;
 			case 'delete_column':
-				deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(
-					state,
-					dispatch,
-					editorView,
-				);
+				deleteColumnsWithAnalytics(
+					editorAnalyticsAPI,
+					isTableScalingEnabled,
+					shouldUseIncreasedScalingPercent,
+				)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
 				this.toggleOpen();
 				break;
 			case 'delete_row':

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -93,6 +93,7 @@ type DragMenuProps = {
 	scrollableElement?: HTMLElement;
 	isTableScalingEnabled?: boolean;
 	tableDuplicateCellColouring?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -261,6 +262,7 @@ export const DragMenu = React.memo(
 		boundariesElement,
 		isTableScalingEnabled,
 		tableDuplicateCellColouring,
+		shouldUseIncreasedScalingPercent,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -301,6 +303,7 @@ export const DragMenu = React.memo(
 			pluginConfig?.isHeaderRowRequired,
 			isTableScalingEnabled,
 			tableDuplicateCellColouring,
+			shouldUseIncreasedScalingPercent,
 		);
 
 		const { menuItems, menuCallback } = convertToDropdownItems(

package/src/ui/FloatingDragMenu/index.tsx

@@ -10,6 +10,7 @@ import {
 	akEditorFloatingOverlapPanelZIndex,
 } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -73,6 +74,11 @@ const FloatingDragMenu = ({
 		? getEditorFeatureFlags()
 		: {};
 
+	const shouldUseIncreasedScalingPercent =
+		isTableScalingEnabled &&
+		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 	return (
 		<Popup
 			alignX={direction === 'row' ? 'right' : undefined}
@@ -109,6 +115,7 @@ const FloatingDragMenu = ({
 				scrollableElement={scrollableElement}
 				isTableScalingEnabled={isTableScalingEnabled}
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
+				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingInsertButton/index.tsx

@@ -25,6 +25,7 @@ import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-s
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -263,6 +264,11 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 
 			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
 
+			const shouldUseIncreasedScalingPercent =
+				isTableScalingEnabled &&
+				getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+				getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+
 			const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
 				? getEditorFeatureFlags()
 				: {};
@@ -272,6 +278,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
 				tableDuplicateCellColouring,
+				shouldUseIncreasedScalingPercent,
 			)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
 		}
 	}

package/src/ui/TableFloatingControls/index.tsx

@@ -149,22 +149,24 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
-									<DragCornerControlsWithSelection
-										editorView={editorView}
-										tableRef={tableRef}
-										isInDanger={isInDanger}
-										isResizing={isResizing}
-										api={api}
-									/>
-								) : (
-									<DragCornerControls
-										editorView={editorView}
-										tableRef={tableRef}
-										isInDanger={isInDanger}
-										isResizing={isResizing}
-									/>
-								)}
+								{!getBooleanFF('platform.editor.drag-and-drop_wmv9t') &&
+									(getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+										<DragCornerControlsWithSelection
+											editorView={editorView}
+											tableRef={tableRef}
+											isInDanger={isInDanger}
+											isResizing={isResizing}
+											api={api}
+										/>
+									) : (
+										<DragCornerControls
+											editorView={editorView}
+											tableRef={tableRef}
+											isInDanger={isInDanger}
+											isResizing={isResizing}
+										/>
+
+									))}
 								<DragControls
 									tableRef={tableRef}
 									tableNode={tableNode}

package/src/utils/drag-menu.ts

@@ -160,6 +160,7 @@ export const getDragMenuConfig = (
 	isHeaderRowRequired?: boolean,
 	isTableScalingEnabled = false,
 	tableDuplicateCellColouring = false,
+	shouldUseIncreasedScalingPercent = false,
 ): DragMenuConfig[] => {
 	const addOptions =
 		direction === 'row'
@@ -271,6 +272,7 @@ export const getDragMenuConfig = (
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						tableDuplicateCellColouring,
+						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(state, dispatch, editorView);
 				}
 				return true;