@atlaskit/editor-plugin-table 7.31.0 → 7.31.2

package/src/event-handlers.ts

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import {
 	browser,
 	closestElement,
@@ -347,8 +348,8 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
 
 // IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
 // need to access the mouse event offset position and also the target clientWidth vallue.
-const handleMouseMoveDebounce = rafSchedule(
-	(view: EditorView, event: MouseEvent, offsetX: number) => {
+const handleMouseMoveDebounce = (nodeViewPortalProviderAPI: PortalProviderAPI) =>
+	rafSchedule((view: EditorView, event: MouseEvent, offsetX: number) => {
 		if (!(event.target instanceof HTMLElement)) {
 			return false;
 		}
@@ -413,6 +414,7 @@ const handleMouseMoveDebounce = rafSchedule(
 							rowIndexTarget,
 							columnEndIndexTarget,
 							true,
+							nodeViewPortalProviderAPI,
 						)(state, dispatch);
 					}
 				}
@@ -420,26 +422,26 @@ const handleMouseMoveDebounce = rafSchedule(
 		}
 
 		return false;
-	},
-);
+	});
 
-export const handleMouseMove = (view: EditorView, event: Event) => {
-	if (!(event.target instanceof HTMLElement)) {
-		return false;
-	}
+export const handleMouseMove =
+	(nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => {
+		if (!(event.target instanceof HTMLElement)) {
+			return false;
+		}
 
-	// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
-	// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
-	// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
-	// in the deferred callback handler.
-	// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-	handleMouseMoveDebounce(
-		view,
-		event as MouseEvent,
-		browser.gecko ? (event as MouseEvent).offsetX : NaN,
-	);
-	return false;
-};
+		// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+		// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+		// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+		// in the deferred callback handler.
+		// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+		handleMouseMoveDebounce(nodeViewPortalProviderAPI)(
+			view,
+			event as MouseEvent,
+			browser.gecko ? (event as MouseEvent).offsetX : NaN,
+		);
+		return false;
+	};
 
 export function handleTripleClick(view: EditorView, pos: number) {
 	const { state, dispatch } = view;

package/src/plugin.tsx

@@ -335,6 +335,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						dispatchAnalyticsEvent,
 						dispatch,
 						portalProviderAPI,
+						nodeViewPortalProviderAPI,
 						eventDispatcher,
 						getIntl,
 					}) => {
@@ -356,6 +357,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							dispatchAnalyticsEvent,
 							dispatch,
 							portalProviderAPI,
+							nodeViewPortalProviderAPI,
 							eventDispatcher,
 							pluginConfig(tableOptions),
 							defaultGetEditorContainerWidth,
@@ -377,7 +379,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tablePMColResizing',
-					plugin: ({ dispatch }) => {
+					plugin: ({ dispatch, nodeViewPortalProviderAPI }) => {
 						const {
 							fullWidthEnabled,
 							tableOptions,
@@ -396,6 +398,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									defaultGetEditorContainerWidth,
 									getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 									api,
+									nodeViewPortalProviderAPI,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
@@ -410,7 +413,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				// plugin as it is currently swallowing backspace events inside tables
 				{
 					name: 'tableKeymap',
-					plugin: ({ getIntl }) => {
+					plugin: ({ getIntl, nodeViewPortalProviderAPI }) => {
 						const {
 							dragAndDropEnabled,
 							isTableScalingEnabled = false,
@@ -424,6 +427,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						return keymapPlugin(
 							defaultGetEditorContainerWidth,
 							api,
+							nodeViewPortalProviderAPI,
 							editorAnalyticsAPI,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
@@ -488,8 +492,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tableViewModeSort',
-					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+					plugin: ({ nodeViewPortalProviderAPI }) => {
+						return api?.editorViewMode
+							? createViewModeSortPlugin(api, nodeViewPortalProviderAPI)
+							: undefined;
 					},
 				},
 				{

package/src/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import { TableDecorations } from '../../../types';
@@ -36,6 +37,7 @@ export const buildColumnResizingDecorations =
 		columnEndIndex: number,
 		includeTooltip: boolean,
 		getIntl: () => IntlShape,
+		nodeViewPortalProviderAPI: PortalProviderAPI,
 	): DecorationTransformer =>
 	({ tr, decorationSet }): DecorationSet => {
 		const [columnResizesDecorations, lastCellElementsDecorations] =
@@ -49,6 +51,7 @@ export const buildColumnResizingDecorations =
 						},
 						includeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					);
 
 		return composeDecorations([

package/src/pm-plugins/keymap.ts

@@ -30,6 +30,7 @@ import {
 	startColumnResizing,
 	toggleTable,
 } from '@atlaskit/editor-common/keymaps';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
@@ -59,6 +60,7 @@ import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
 export function keymapPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	dragAndDropEnabled?: boolean,
 	isTableScalingEnabled = false,
@@ -263,6 +265,7 @@ export function keymapPlugin(
 		initiateKeyboardColumnResizing({
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -273,6 +276,7 @@ export function keymapPlugin(
 			direction: 1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -283,6 +287,7 @@ export function keymapPlugin(
 			direction: -1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);

package/src/pm-plugins/main.ts

@@ -79,6 +79,7 @@ export const createPlugin = (
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	dispatch: Dispatch,
 	portalProviderAPI: PortalProviderAPI,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	eventDispatcher: EventDispatcher,
 	pluginConfig: PluginConfig,
 	getEditorContainerWidth: GetEditorContainerWidth,
@@ -381,7 +382,7 @@ export const createPlugin = (
 				blur: handleBlur,
 				mousedown: withCellTracking(handleMouseDown),
 				mouseleave: handleMouseLeave,
-				mousemove: whenTableInFocus(handleMouseMove),
+				mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),
 				click: withCellTracking(whenTableInFocus(handleClick)),

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

@@ -8,6 +8,7 @@ import {
 	TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -50,6 +51,7 @@ export const handleMouseDown = (
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	isTableScalingEnabled: boolean,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
@@ -150,7 +152,12 @@ export const handleMouseDown = (
 
 	// When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
 	// unnecessary tooltips being displayed during drag.
-	updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+	updateResizeHandleDecorations(
+		nodeViewPortalProviderAPI,
+		undefined,
+		undefined,
+		false,
+	)(state, dispatch);
 
 	// for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
 	// implication: the scaled version of the table becomes the source of truth

package/src/pm-plugins/table-resizing/plugin.ts

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
@@ -21,6 +22,7 @@ export function createPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled?: boolean,
 	isNewColumnResizingEnabled?: boolean,
@@ -76,6 +78,7 @@ export function createPlugin(
 								getEditorFeatureFlags,
 								isTableScalingEnabled || false,
 								api,
+								nodeViewPortalProviderAPI,
 								editorAnalyticsAPI,
 								isNewColumnResizingEnabled,
 								isTableAlignmentEnabled,

package/src/pm-plugins/view-mode-sort/index.ts

@@ -8,12 +8,15 @@ import { createElement } from 'react';
 
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
+import uuid from 'uuid/v4';
 
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type tablePlugin from '../../plugin';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
@@ -28,7 +31,10 @@ import { tableViewModeSortPluginKey as key } from './plugin-key';
 import type { ViewModeSortPluginState } from './types';
 import { getTableElements, toggleSort } from './utils';
 
-export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
+export const createPlugin = (
+	api: ExtractInjectionAPI<typeof tablePlugin>,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
+) => {
 	return new SafePlugin({
 		state: {
 			init: () => ({
@@ -84,40 +90,73 @@ export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
 						const map = TableMap.get(tableNode);
 						const hasMergedCells = new Set(map.map).size !== map.map.length;
 						map.mapByRow[0].forEach((cell, index) => {
+							const decorationRenderKey = uuid();
 							decs.push(
-								Decoration.widget(cell + pos + 2, () => {
-									const element = document.createElement('div');
-									element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
-									element.classList.add(SORTING_ICON_CLASS_NAME);
-									if (hasMergedCells) {
-										element.classList.add(IS_DISABLED_CLASS_NAME);
-									}
-
-									let sortOrdered;
-									if (index === sort[tableId]?.index) {
-										sortOrdered = sort[tableId]?.direction;
-									} else {
-										sortOrdered = SortOrder.NO_ORDER;
-									}
-
-									const { getIntl } = getPluginState(oldState);
-
-									ReactDOM.render(
-										createElement(
-											RawIntlProvider,
-											{ value: getIntl() },
-											createElement(SortingIconWrapper, {
-												isSortingAllowed: !hasMergedCells,
-												sortOrdered,
-												onClick: () => {},
-												onKeyDown: () => {},
-												api,
-											}),
-										),
-										element,
-									);
-									return element;
-								}),
+								Decoration.widget(
+									cell + pos + 2,
+									() => {
+										const element = document.createElement('div');
+										element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
+										element.classList.add(SORTING_ICON_CLASS_NAME);
+										if (hasMergedCells) {
+											element.classList.add(IS_DISABLED_CLASS_NAME);
+										}
+
+										let sortOrdered;
+										if (index === sort[tableId]?.index) {
+											sortOrdered = sort[tableId]?.direction;
+										} else {
+											sortOrdered = SortOrder.NO_ORDER;
+										}
+
+										const { getIntl } = getPluginState(oldState);
+
+										if (fg('platform_editor_react18_plugin_portalprovider')) {
+											nodeViewPortalProviderAPI.render(
+												() =>
+													createElement(
+														RawIntlProvider,
+														{ value: getIntl() },
+														createElement(SortingIconWrapper, {
+															isSortingAllowed: !hasMergedCells,
+															sortOrdered,
+															onClick: () => {},
+															onKeyDown: () => {},
+															api,
+														}),
+													),
+												element,
+												decorationRenderKey,
+											);
+										} else {
+											ReactDOM.render(
+												createElement(
+													RawIntlProvider,
+													{ value: getIntl() },
+													createElement(SortingIconWrapper, {
+														isSortingAllowed: !hasMergedCells,
+														sortOrdered,
+														onClick: () => {},
+														onKeyDown: () => {},
+														api,
+													}),
+												),
+												element,
+											);
+										}
+
+										return element;
+									},
+									{
+										destroy: (node) => {
+											if (fg('platform_editor_react18_plugin_portalprovider')) {
+												nodeViewPortalProviderAPI.remove(decorationRenderKey);
+											} else {
+												ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+											}
+										},
+									},
+								),
 							);
 						});
 					});

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -584,13 +584,11 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 	private createOriginalContextMenuItems = () => {
 		let items: MenuItem[] = [];
-		const { getEditorFeatureFlags } = this.props;
-		const { tableSortColumnReorder = false } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 		const sortColumnItems = this.createSortColumnItems();
 		const backgroundColorItem = this.createBackgroundColorItem();
 		const distributeColumnsItem = this.createDistributeColumnsItem();
 
-		tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
+		sortColumnItems && items.push(...sortColumnItems);
 
 		backgroundColorItem && items.push(backgroundColorItem);
 
@@ -606,8 +604,6 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 		distributeColumnsItem && items.push(distributeColumnsItem);
 
-		!tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
-
 		items.push(this.createClearCellsItem());
 
 		return [{ items }];

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -93,7 +93,6 @@ type DragMenuProps = {
 	tableDuplicateCellColouring?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 	isTableFixedColumnWidthsOptionEnabled?: boolean;
-	tableSortColumnReorder?: boolean;
 	ariaNotifyPlugin?: (
 		message: string,
 		ariaLiveElementAttributes?: AriaLiveElementAttributes,
@@ -166,7 +165,7 @@ const MapDragMenuOptionIdToMessage: Record<DragMenuOptionIdType, MessageType> =
 	},
 };
 
-const getGroupedDragMenuConfig = (tableSortColumnReorder: boolean) => {
+const getGroupedDragMenuConfig = () => {
 	let groupedDragMenuConfig: DragMenuOptionIdType[][] = [
 		[
 			'add_row_above',
@@ -181,9 +180,7 @@ const getGroupedDragMenuConfig = (tableSortColumnReorder: boolean) => {
 		['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'],
 	];
 	const sortColumnItems: DragMenuOptionIdType[] = ['sort_column_asc', 'sort_column_desc'];
-	tableSortColumnReorder
-		? groupedDragMenuConfig.unshift(sortColumnItems)
-		: groupedDragMenuConfig.push(sortColumnItems);
+	groupedDragMenuConfig.unshift(sortColumnItems);
 
 	return groupedDragMenuConfig;
 };
@@ -196,10 +193,9 @@ const elementBeforeIconStyles = xcss({
 const convertToDropdownItems = (
 	dragMenuConfig: DragMenuConfig[],
 	formatMessage: IntlShape['formatMessage'],
-	tableSortColumnReorder: boolean = false,
 	selectionRect?: Rect,
 ) => {
-	const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
+	const groupedDragMenuConfig = getGroupedDragMenuConfig();
 	let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(() => []);
 	let menuCallback: { [key: string]: Command } = {};
 	dragMenuConfig.forEach((item) => {
@@ -286,7 +282,6 @@ const DragMenu = React.memo(
 		tableDuplicateCellColouring,
 		shouldUseIncreasedScalingPercent,
 		isTableFixedColumnWidthsOptionEnabled,
-		tableSortColumnReorder,
 		ariaNotifyPlugin,
 		isCommentEditor,
 	}: DragMenuProps & WrappedComponentProps) => {
@@ -319,7 +314,6 @@ const DragMenu = React.memo(
 			tableDuplicateCellColouring,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
-			tableSortColumnReorder,
 			ariaNotifyPlugin,
 			isCommentEditor,
 		);
@@ -327,7 +321,6 @@ const DragMenu = React.memo(
 		const { menuItems, menuCallback } = convertToDropdownItems(
 			dragMenuConfig,
 			formatMessage,
-			tableSortColumnReorder,
 			selectionRect,
 		);
 
@@ -383,7 +376,7 @@ const DragMenu = React.memo(
 						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 						className={DropdownMenuSharedCssClassName.SUBMENU}
 						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-						css={dragMenuBackgroundColorStyles(tableSortColumnReorder)}
+						css={dragMenuBackgroundColorStyles()}
 					>
 						<div
 							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
@@ -610,9 +603,7 @@ const DragMenu = React.memo(
 		}
 
 		if (allowBackgroundColor) {
-			tableSortColumnReorder
-				? menuItems[1].items.unshift(createBackgroundColorMenuItem())
-				: menuItems[0].items.unshift(createBackgroundColorMenuItem());
+			menuItems[1].items.unshift(createBackgroundColorMenuItem());
 		}
 
 		// If first row, add toggle for Header row, default is true

package/src/ui/FloatingDragMenu/index.tsx

@@ -79,11 +79,8 @@ const FloatingDragMenu = ({
 		return null;
 	}
 
-	const {
-		tableDuplicateCellColouring = false,
-		tableWithFixedColumnWidthsOption = false,
-		tableSortColumnReorder = false,
-	} = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+	const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+		getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
@@ -126,7 +123,6 @@ const FloatingDragMenu = ({
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
-				tableSortColumnReorder={tableSortColumnReorder}
 				ariaNotifyPlugin={ariaNotifyPlugin}
 				api={api}
 				isCommentEditor={isCommentEditor || false}

package/src/ui/FloatingDragMenu/styles.ts

@@ -22,18 +22,16 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
 	});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = (tableSortColumnReorder: boolean = false) => css`
+export const dragMenuBackgroundColorStyles = () => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${token('border.radius', '3px')};
 		background: ${token('elevation.surface.overlay', 'white')};
 		box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
 		display: block;
 		position: absolute;
-		top: ${tableSortColumnReorder
-			? TABLE_DRAG_MENU_PADDING_TOP +
-				TABLE_DRAG_MENU_SORT_GROUP_HEIGHT +
-				TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT
-			: 0}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
+		top: ${TABLE_DRAG_MENU_PADDING_TOP +
+		TABLE_DRAG_MENU_SORT_GROUP_HEIGHT +
+		TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
 		left: ${dragMenuDropdownWidth}px;
 		padding: ${token('space.100', '8px')};
 

package/src/utils/decoration.ts

@@ -3,8 +3,10 @@ import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import type { IntlShape } from 'react-intl-next';
+import uuid from 'uuid/v4';
 
 import type { CellAttributes } from '@atlaskit/adf-schema';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -18,6 +20,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -308,6 +311,7 @@ export const createResizeHandleDecoration = (
 	columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>,
 	includeTooltip: boolean = false,
 	getIntl: () => IntlShape,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 ): [Decoration[], Decoration[]] => {
 	const emptyResult: [Decoration[], Decoration[]] = [[], []];
 	const table = findTable(tr.selection);
@@ -327,23 +331,41 @@ export const createResizeHandleDecoration = (
 		cellPos: number,
 		cellNode: PmNode,
 	): Decoration => {
+		const decorationRenderKey = uuid();
 		const position = cellPos + cellNode.nodeSize - 1;
 		return Decoration.widget(
 			position,
 			() => {
 				const element = document.createElement('div');
-				ReactDOM.render(
-					createElement(
-						RawIntlProvider,
-						{ value: getIntl() },
-						createElement(ColumnResizeWidget, {
-							startIndex: cellColumnPositioning.left,
-							endIndex: cellColumnPositioning.right,
-							includeTooltip,
-						}),
-					),
-					element,
-				);
+				if (fg('platform_editor_react18_plugin_portalprovider')) {
+					nodeViewPortalProviderAPI.render(
+						() =>
+							createElement(
+								RawIntlProvider,
+								{ value: getIntl() },
+								createElement(ColumnResizeWidget, {
+									startIndex: cellColumnPositioning.left,
+									endIndex: cellColumnPositioning.right,
+									includeTooltip,
+								}),
+							),
+						element,
+						decorationRenderKey,
+					);
+				} else {
+					ReactDOM.render(
+						createElement(
+							RawIntlProvider,
+							{ value: getIntl() },
+							createElement(ColumnResizeWidget, {
+								startIndex: cellColumnPositioning.left,
+								endIndex: cellColumnPositioning.right,
+								includeTooltip,
+							}),
+						),
+						element,
+					);
+				}
 				return element;
 			},
 			{
@@ -351,7 +373,11 @@ export const createResizeHandleDecoration = (
 					TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET
 				}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
 				destroy: (node) => {
-					ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+					if (fg('platform_editor_react18_plugin_portalprovider')) {
+						nodeViewPortalProviderAPI.remove(decorationRenderKey);
+					} else {
+						ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+					}
 				},
 			},
 		);

package/src/utils/drag-menu.ts

@@ -165,7 +165,6 @@ export const getDragMenuConfig = (
 	tableDuplicateCellColouring = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
-	tableSortColumnReorder = false,
 	ariaNotifyPlugin?: (
 		message: string,
 		ariaLiveElementAttributes?: AriaLiveElementAttributes,
@@ -417,7 +416,7 @@ export const getDragMenuConfig = (
 	];
 
 	let allConfigs = [...restConfigs];
-	tableSortColumnReorder ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
+	allConfigs.unshift(...sortConfigs);
 
 	return allConfigs.filter(Boolean) as DragMenuConfig[];
 };