@atlaskit/editor-plugin-table 10.9.20 → 10.9.22

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import type { GetEditorFeatureFlags, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -36,6 +39,80 @@ type TableComponentWithSharedStateProps = {
 	allowTableResizing?: boolean;
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: PluginInjectionAPI | undefined) => {
+		// tableState
+		const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+		const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+		const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+		const ordering = useInternalTablePluginStateSelector(api, 'ordering');
+		const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+		const isInDanger = useInternalTablePluginStateSelector(api, 'isInDanger');
+		const hoveredCell = useInternalTablePluginStateSelector(api, 'hoveredCell');
+		const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+		const isTableHovered = useInternalTablePluginStateSelector(api, 'isTableHovered');
+		const isWholeTableInDanger = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger');
+
+		// mediaState
+		const isFullscreen = useSharedPluginStateSelector(api, 'media.isFullscreen');
+
+		// selectionState
+		const selection = useSharedPluginStateSelector(api, 'selection.selection');
+
+		// editorViewModeState
+		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+
+		// widthState
+		const width = useSharedPluginStateSelector(api, 'width.width');
+		const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+
+		return {
+			tableState: undefined,
+			widthState: undefined,
+			isTableResizing,
+			isHeaderColumnEnabled,
+			isHeaderRowEnabled,
+			ordering,
+			isResizing,
+			isInDanger,
+			hoveredCell,
+			hoveredRows,
+			isTableHovered,
+			isWholeTableInDanger,
+			isFullscreen,
+			selection,
+			mode,
+			width,
+			lineLength,
+		};
+	},
+	(api: PluginInjectionAPI | undefined) => {
+		const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
+			useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+		const tableStateInternal = tableState as TableSharedStateInternal | undefined;
+
+		return {
+			tableState,
+			widthState,
+			isTableResizing: tableStateInternal?.isTableResizing,
+			isHeaderColumnEnabled: tableStateInternal?.isHeaderColumnEnabled,
+			isHeaderRowEnabled: tableStateInternal?.isHeaderRowEnabled,
+			ordering: tableStateInternal?.ordering,
+			isResizing: tableStateInternal?.isResizing,
+			isInDanger: tableStateInternal?.isInDanger,
+			hoveredCell: tableStateInternal?.hoveredCell,
+			hoveredRows: tableStateInternal?.hoveredRows,
+			isTableHovered: tableStateInternal?.isTableHovered,
+			isWholeTableInDanger: tableStateInternal?.isWholeTableInDanger,
+			isFullscreen: mediaState?.isFullscreen,
+			selection: selectionState?.selection,
+			mode: editorViewModeState?.mode,
+			width: widthState?.width,
+			lineLength: widthState?.lineLength,
+		};
+	},
+);
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -54,136 +131,31 @@ export const TableComponentWithSharedState = ({
 	allowTableAlignment,
 	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
-	const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
-		useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-		});
-
-	const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(
-		api,
-		'isHeaderColumnEnabled',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-	const isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(
-		api,
-		'isHeaderRowEnabled',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-	const orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isWholeTableInDangerSelector = useInternalTablePluginStateSelector(
-		api,
-		'isWholeTableInDanger',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-
-	// mediaState
-	const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isFullscreenSelector
-		: mediaState?.isFullscreen;
-
-	// selectionState
-	const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? selectionSelector
-		: selectionState?.selection;
-
-	// editorViewModeState
-	const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? editorViewModeSelector
-		: editorViewModeState?.mode;
+	const {
+		tableState,
+		widthState,
+		mode,
+		hoveredCell,
+		hoveredRows,
+		isFullscreen,
+		isHeaderColumnEnabled,
+		isHeaderRowEnabled,
+		isInDanger,
+		isResizing,
+		isTableHovered,
+		isTableResizing,
+		isWholeTableInDanger,
+		lineLength,
+		ordering,
+		selection,
+		width,
+	} = useSharedState(api);
 	const isLivePageViewMode = mode === 'view';
 
-	// widthState
-	const widthSelector = useSharedPluginStateSelector(api, 'width.width', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const width = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? widthSelector
-		: widthState?.width;
-
-	const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? lineLengthSelector
-		: widthState?.lineLength;
-
 	if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
 		return null;
 	}
 
-	// tableState
-	const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isTableResizingSelector
-		: (tableState as TableSharedStateInternal).isTableResizing;
-	const isHeaderColumnEnabled = editorExperiment(
-		'platform_editor_usesharedpluginstateselector',
-		true,
-	)
-		? isHeaderColumnEnabledSelector
-		: (tableState as TableSharedStateInternal).isHeaderColumnEnabled;
-	const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isHeaderRowEnabledSelector
-		: (tableState as TableSharedStateInternal).isHeaderRowEnabled;
-	const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? orderingSelector
-		: (tableState as TableSharedStateInternal).ordering;
-	const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isResizingSelector
-		: (tableState as TableSharedStateInternal).isResizing;
-	const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isInDangerSelector
-		: (tableState as TableSharedStateInternal).isInDanger;
-	const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? hoveredCellSelector
-		: (tableState as TableSharedStateInternal).hoveredCell;
-	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? hoveredRowsSelector
-		: (tableState as TableSharedStateInternal).hoveredRows;
-	const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? isTableHoveredSelector
-		: (tableState as TableSharedStateInternal).isTableHovered;
-	const isWholeTableInDanger = editorExperiment(
-		'platform_editor_usesharedpluginstateselector',
-		true,
-	)
-		? isWholeTableInDangerSelector
-		: (tableState as TableSharedStateInternal).isWholeTableInDanger;
-
 	/**
 	 *  ED-19810
 	 *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch

package/src/nodeviews/TableContainer.tsx

@@ -9,7 +9,10 @@ import {
 	type TableEventPayload,
 } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
@@ -71,6 +74,32 @@ type AlignmentTableContainerProps = {
 	editorView?: EditorView;
 };
 
+const useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const isFullWidthModeEnabled = useSharedPluginStateSelector(
+			pluginInjectionApi,
+			'table.isFullWidthModeEnabled',
+		);
+		const wasFullWidthModeEnabled = useSharedPluginStateSelector(
+			pluginInjectionApi,
+			'table.wasFullWidthModeEnabled',
+		);
+		return {
+			tableState: undefined,
+			isFullWidthModeEnabled,
+			wasFullWidthModeEnabled,
+		};
+	},
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+		return {
+			tableState,
+			isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
+			wasFullWidthModeEnabled: tableState?.wasFullWidthModeEnabled,
+		};
+	},
+);
+
 const AlignmentTableContainer = ({
 	node,
 	children,
@@ -79,39 +108,8 @@ const AlignmentTableContainer = ({
 	editorView,
 }: PropsWithChildren<AlignmentTableContainerProps>) => {
 	const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
-	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-
-	// isFullWidthModeEnabled
-	const isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(
-		pluginInjectionApi,
-		'table.isFullWidthModeEnabled',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-	const isFullWidthModeEnabled = editorExperiment(
-		'platform_editor_usesharedpluginstateselector',
-		true,
-	)
-		? isTableFullWidthModeEnabledSelector
-		: tableState?.isFullWidthModeEnabled;
-
-	// wasFullWidthModeEnabled
-	const wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(
-		pluginInjectionApi,
-		'table.wasFullWidthModeEnabled',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-	const wasFullWidthModeEnabled = editorExperiment(
-		'platform_editor_usesharedpluginstateselector',
-		true,
-	)
-		? wasFullWidthModeEnabledSelector
-		: tableState?.wasFullWidthModeEnabled;
+	const { tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled } =
+		useAlignmentStableContainerSharedState(pluginInjectionApi);
 
 	useEffect(() => {
 		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
@@ -216,6 +214,30 @@ type ResizableTableContainerProps = {
 	isCommentEditor?: boolean;
 };
 
+const useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const isFullWidthModeEnabled = useSharedPluginStateSelector(
+			pluginInjectionApi,
+			'table.isFullWidthModeEnabled',
+		);
+		const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+		return {
+			isFullWidthModeEnabled,
+			mode,
+		};
+	},
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const { tableState, editorViewModeState } = useSharedPluginState(pluginInjectionApi, [
+			'table',
+			'editorViewMode',
+		]);
+		return {
+			isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
+			mode: editorViewModeState?.mode,
+		};
+	},
+);
+
 export const ResizableTableContainer = React.memo(
 	({
 		children,
@@ -240,24 +262,8 @@ export const ResizableTableContainer = React.memo(
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 		const [resizing, setIsResizing] = useState(false);
 
-		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-		});
-
-		// isFullWidthModeEnabled
-		const isFullWidthModeEnabledSelector = useSharedPluginStateSelector(
-			pluginInjectionApi,
-			'table.isFullWidthModeEnabled',
-			{
-				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-			},
-		);
-		const isFullWidthModeEnabled = editorExperiment(
-			'platform_editor_usesharedpluginstateselector',
-			true,
-		)
-			? isFullWidthModeEnabledSelector
-			: tableState?.isFullWidthModeEnabled;
+		const { isFullWidthModeEnabled, mode } =
+			useResizeableTableContainerSharedState(pluginInjectionApi);
 
 		const updateContainerHeight = useCallback((height: number | 'auto') => {
 			// current StickyHeader State is not stable to be fetch.
@@ -331,17 +337,6 @@ export const ResizableTableContainer = React.memo(
 		);
 
 		const tableWidth = getTableContainerWidth(node);
-		const { editorViewModeState } = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-		});
-
-		// mode
-		const modeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		});
-		const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-			? modeSelector
-			: editorViewModeState?.mode;
 
 		let responsiveContainerWidth = 0;
 		const resizeHandleSpacing = 12;
@@ -405,10 +400,7 @@ export const ResizableTableContainer = React.memo(
 			isCommentEditor,
 		};
 
-		const isLivePageViewMode =
-			(editorExperiment('platform_editor_usesharedpluginstateselector', true)
-				? mode
-				: editorViewModeState?.mode) === 'view';
+		const isLivePageViewMode = mode === 'view';
 
 		return (
 			<AlignmentTableContainerWrapper

package/src/nodeviews/TableResizer.tsx

@@ -13,7 +13,10 @@ import {
 import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -26,7 +29,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -182,6 +184,22 @@ const getVisibleGuidelines = (
 	});
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const widthToWidest = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest');
+		return {
+			widthToWidest,
+		};
+	},
+	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
+		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+		const tableStateInternal = tableState as TableSharedStateInternal;
+		return {
+			widthToWidest: tableStateInternal.widthToWidest,
+		};
+	},
+);
+
 export const TableResizer = ({
 	children,
 	width,
@@ -213,21 +231,7 @@ export const TableResizer = ({
 	const isResizing = useRef(false);
 	const areResizeMetaKeysPressed = useRef(false);
 	const resizerRef = useRef<ResizerNextHandler>(null);
-	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-
-	// widthToWidest
-	const widthToWidestSelector = useInternalTablePluginStateSelector(
-		pluginInjectionApi,
-		'widthToWidest',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	);
-	const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? widthToWidestSelector
-		: (tableState as TableSharedStateInternal).widthToWidest;
+	const { widthToWidest } = useSharedState(pluginInjectionApi);
 
 	// used to reposition tooltip when table is resizing via keyboard
 	const updateTooltip = React.useRef<() => void>();

package/src/pm-plugins/main.ts

@@ -308,19 +308,11 @@ export const createPlugin = (
 
 				// transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
 				// Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-				if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-					/** If a partial paste of bodied extension, paste only text */
-					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-
-					/** If a partial paste of table, paste only table's content */
-					slice = transformSliceToRemoveOpenTable(slice, schema);
-				} else {
-					/** If a partial paste of table, paste only table's content */
-					slice = transformSliceToRemoveOpenTable(slice, schema);
-
-					/** If a partial paste of bodied extension, paste only text */
-					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-				}
+				/** If a partial paste of bodied extension, paste only text */
+				slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+
+				/** If a partial paste of table, paste only table's content */
+				slice = transformSliceToRemoveOpenTable(slice, schema);
 
 				/** If a partial paste of multi bodied extension, paste only children */
 				slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/src/tablePlugin.tsx

@@ -19,7 +19,10 @@ import {
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -30,7 +33,12 @@ import {
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { Command, EditorPlugin, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+	Command,
+	EditorPlugin,
+	ExtractInjectionAPI,
+	GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -91,6 +99,19 @@ import { getToolbarConfig } from './ui/toolbar';
 
 const defaultGetEditorFeatureFlags = () => ({});
 
+const useTableSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+		return { mode };
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
+		return {
+			mode: editorViewModeState?.mode,
+		};
+	},
+);
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -145,6 +166,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				: undefined;
 
 			const dragAndDropState = dragAndDropPluginKey.getState(editorState);
+			const sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
 
 			const sharedStateInternal: TableSharedStateInternal = {
 				isFullWidthModeEnabled: !!options?.fullWidthEnabled,
@@ -182,6 +204,8 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				dragMenuDirection: dragAndDropState?.dragMenuDirection,
 				dragMenuIndex: dragAndDropState?.dragMenuIndex,
 				isDragMenuOpen: dragAndDropState?.isDragMenuOpen,
+				isSizeSelectorOpen: sizeSelectorPluginState?.isSelectorOpen,
+				sizeSelectorTargetRef: sizeSelectorPluginState?.targetRef,
 			};
 
 			return sharedStateInternal;
@@ -568,6 +592,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 						popupsScrollableElement={popupsScrollableElement}
 						defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
 						defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
+						isTableSelectorEnabled={isTableSelectorEnabled}
 					/>
 				);
 			}
@@ -601,6 +626,8 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							dragAndDropState,
 							sizeSelectorPluginState,
 						}) => {
+							// Any changes made inside `<WithPluginState>` need to be reflected in the
+							// `<ContentComponent>` as well.
 							const isColumnResizing = resizingPluginState?.dragging;
 							const isTableResizing = tableWidthPluginState?.resizing;
 							const resizingTableLocalId = tableWidthPluginState?.tableLocalId;
@@ -874,17 +901,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			)(pluginConfig(options?.tableOptions)),
 		},
 		usePluginHook({ editorView }) {
-			const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
-				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-			});
-
-			// mode
-			const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-			});
-			const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-				? modeSelector
-				: editorViewModeState?.mode;
+			const { mode } = useTableSharedState(api);
 
 			useEffect(() => {
 				const { state, dispatch } = editorView;

package/src/types/index.ts

@@ -79,6 +79,8 @@ export type TableSharedStateInternal = Pick<
 	dragMenuDirection?: TableDirection;
 	dragMenuIndex?: number;
 	isDragMenuOpen?: boolean;
+	isSizeSelectorOpen?: boolean;
+	sizeSelectorTargetRef?: HTMLElement;
 };
 
 export type TableSharedState = Pick<