@atlaskit/editor-plugin-table 10.9.20 → 10.9.21

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/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`.
@@ -874,17 +895,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/ui/ContentComponent.tsx

@@ -9,7 +9,6 @@ import {
 } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { TablePlugin, TablePluginOptions } from '../tablePluginType';
 
@@ -51,82 +50,38 @@ const ContentComponentInternal = ({
 	const editorAnalyticsAPI = api?.analytics?.actions;
 	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
 
-	const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
+	const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
+	const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
+	const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+	const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+	const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
 
-	const tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
+	const tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
+	const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
+	const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
+	const tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
+	const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
 	const insertColumnButtonIndex = useInternalTablePluginStateSelector(
 		api,
 		'insertColumnButtonIndex',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
 	);
-	const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
+	const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
+	const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+	const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+	const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
+	const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
 	const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(
 		api,
 		'isCellMenuOpenByKeyboard',
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
 	);
 
 	const { allowControls } = pluginConfig ?? {};
 
-	const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
+	const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
 
-	const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
+	const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
+	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
+	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
 
 	return (
 		<>

package/src/ui/DragHandle/index.tsx

@@ -8,7 +8,10 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -16,7 +19,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
@@ -311,6 +313,25 @@ const DragHandleComponent = ({
 	);
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
+		const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+		return {
+			hoveredColumns,
+			hoveredRows,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { tableState } = useSharedPluginState(api, ['table']);
+		const tableStateInternal = tableState as TableSharedStateInternal;
+		return {
+			hoveredColumns: tableStateInternal?.hoveredColumns,
+			hoveredRows: tableStateInternal?.hoveredRows,
+		};
+	},
+);
+
 const DragHandleComponentWithSharedState = ({
 	isDragMenuTarget,
 	tableLocalId,
@@ -329,28 +350,7 @@ const DragHandleComponentWithSharedState = ({
 	intl,
 	api,
 }: DragHandleWithSharedStateProps & WrappedComponentProps) => {
-	const { tableState } = useSharedPluginState(api, ['table'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	}) as {
-		tableState?: TableSharedStateInternal;
-	};
-
-	// hoveredColumns
-	const hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? hoveredColumnsSelector
-		: tableState?.hoveredColumns;
-
-	// hoveredRows
-	const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? hoveredRowsSelector
-		: tableState?.hoveredRows;
-
+	const { hoveredColumns, hoveredRows } = useSharedState(api);
 	return (
 		<DragHandleComponent
 			isDragMenuTarget={isDragMenuTarget}

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -2,7 +2,10 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
@@ -12,7 +15,6 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import {
 	clearHoverSelection,
@@ -60,6 +62,21 @@ const getSelectedColumns = (selection: Selection) => {
 	return [];
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const selection = useSharedPluginStateSelector(api, 'selection.selection');
+		return {
+			selection,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { selectionState } = useSharedPluginState(api, ['selection']);
+		return {
+			selection: selectionState?.selection,
+		};
+	},
+);
+
 export const ColumnControls = ({
 	editorView,
 	tableActive,
@@ -78,17 +95,7 @@ export const ColumnControls = ({
 	api,
 }: ColumnControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
 	const columnControlsRef = useRef<HTMLDivElement>(null);
-
-	// selection
-	const { selectionState } = useSharedPluginState(api, ['selection'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? selectionsSelector
-		: selectionState?.selection;
+	const { selection } = useSharedState(api);
 
 	const widths =
 		colWidths
@@ -107,7 +114,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = 45;
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -4,12 +4,14 @@ import classnames from 'classnames';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import type { TablePlugin } from '../../../tablePluginType';
@@ -66,6 +68,21 @@ const DragCornerControlsComponent = ({
 	);
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+		return {
+			selection: selectionsSelector,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { selectionState } = useSharedPluginState(api, ['selection']);
+		return {
+			selection: selectionState?.selection,
+		};
+	},
+);
+
 const DragCornerControlsComponentWithSelection = ({
 	editorView,
 	isInDanger,
@@ -73,16 +90,7 @@ const DragCornerControlsComponentWithSelection = ({
 	intl: { formatMessage },
 	api,
 }: CornerControlProps & WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-	// selection
-	const { selectionState } = useSharedPluginState(api, ['selection'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? selectionsSelector
-		: selectionState?.selection;
+	const { selection } = useSharedState(api);
 
 	const handleOnClick = () => {
 		const { state, dispatch } = editorView;

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -26,6 +28,21 @@ type FloatingControlsWithSelectionProps = {
 	api?: ExtractInjectionAPI<TablePlugin>;
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+		return {
+			selection: selectionsSelector,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { selectionState } = useSharedPluginState(api, ['selection']);
+		return {
+			selection: selectionState?.selection,
+		};
+	},
+);
+
 export const FloatingControlsWithSelection = ({
 	editorView,
 	tableRef,
@@ -40,17 +57,7 @@ export const FloatingControlsWithSelection = ({
 	tableActive,
 	api,
 }: FloatingControlsWithSelectionProps) => {
-	// selection
-	const { selectionState } = useSharedPluginState(api, ['selection'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? selectionsSelector
-		: selectionState?.selection;
-
+	const { selection } = useSharedState(api);
 	return (
 		<>
 			<CornerControls