@atlaskit/editor-plugin-table 10.9.20 → 10.9.22

package/src/ui/ContentComponent.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
-import { ACTION_SUBJECT, DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import {
+	ACTION_SUBJECT,
+	ACTION_SUBJECT_ID,
+	DispatchAnalyticsEvent,
+} from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import {
 	ExtractInjectionAPI,
 	GetEditorContainerWidth,
@@ -23,6 +29,7 @@ import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
 import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
+import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 
 export type ContentComponentProps = {
@@ -33,6 +40,7 @@ export type ContentComponentProps = {
 	popupsMountPoint?: HTMLElement;
 	popupsBoundariesElement?: HTMLElement;
 	popupsScrollableElement?: HTMLElement;
+	isTableSelectorEnabled: boolean | undefined;
 	defaultGetEditorContainerWidth: GetEditorContainerWidth;
 	defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
@@ -45,88 +53,48 @@ const ContentComponentInternal = ({
 	popupsMountPoint,
 	popupsBoundariesElement,
 	popupsScrollableElement,
+	isTableSelectorEnabled,
 	defaultGetEditorContainerWidth,
 	defaultGetEditorFeatureFlags,
 }: ContentComponentProps) => {
 	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');
+	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
+	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
 
-	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 isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
+	const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
 
 	return (
 		<>
@@ -234,7 +202,13 @@ const ContentComponentInternal = ({
 				widthToWidest[resizingTableLocalId] && (
 					<FloatingToolbarLabel
 						target={resizingTableRef}
-						content={<FullWidthDisplay />}
+						content={
+							editorExperiment('single_column_layouts', true) ? (
+								<ResizerBreakoutModeLabel layout="full-width" />
+							) : (
+								<FullWidthDisplay />
+							)
+						}
 						alignX={'center'}
 						alignY={'bottom'}
 						stick={true}
@@ -243,6 +217,24 @@ const ContentComponentInternal = ({
 						offset={[0, 10]}
 					/>
 				)}
+
+			{isTableSelectorEnabled && isSizeSelectorOpen && (
+				<SizeSelector
+					api={api}
+					isOpenedByKeyboard={false}
+					popupsMountPoint={popupsMountPoint}
+					target={
+						sizeSelectorTargetRef ??
+						getDomRefFromSelection(
+							editorView,
+							ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
+							api?.analytics?.actions,
+						)
+					}
+					popupsBoundariesElement={popupsBoundariesElement}
+					popupsScrollableElement={popupsScrollableElement}
+				/>
+			)}
 		</>
 	);
 };
@@ -255,6 +247,7 @@ export const ContentComponent = ({
 	popupsMountPoint,
 	popupsBoundariesElement,
 	popupsScrollableElement,
+	isTableSelectorEnabled,
 	defaultGetEditorContainerWidth,
 	defaultGetEditorFeatureFlags,
 }: ContentComponentProps) => {
@@ -277,6 +270,7 @@ export const ContentComponent = ({
 				popupsMountPoint={popupsMountPoint}
 				popupsBoundariesElement={popupsBoundariesElement}
 				popupsScrollableElement={popupsScrollableElement}
+				isTableSelectorEnabled={isTableSelectorEnabled}
 				defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
 				defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
 			/>

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

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

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -2,7 +2,10 @@
 import type { MouseEvent } from 'react';
 import React, { Fragment, useCallback, useEffect, useMemo, useState } 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 { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -12,7 +15,6 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -371,6 +373,21 @@ export const DragControls = ({
 	);
 };
 
+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 DragControlsWithSelection = ({
 	editorView,
 	tableRef,
@@ -387,17 +404,7 @@ export const DragControlsWithSelection = ({
 	updateCellHoverLocation,
 	api,
 }: Exclude<DragControlsProps, 'selection'>) => {
-	// 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 (
 		<DragControls
 			editorView={editorView}

package/src/ui/global-styles.tsx

@@ -5,15 +5,32 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { PluginInjectionAPI } from '../types';
 
 import { tableStyles } from './common-styles';
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: PluginInjectionAPI | undefined) => {
+		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+		return {
+			mode,
+		};
+	},
+	(api: PluginInjectionAPI | undefined) => {
+		const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
+		return {
+			mode: editorViewModeState?.mode,
+		};
+	},
+);
+
 export const GlobalStylesWrapper = ({
 	featureFlags,
 	isDragAndDropEnabledOption,
@@ -23,17 +40,7 @@ export const GlobalStylesWrapper = ({
 	isDragAndDropEnabledOption?: boolean;
 	api?: PluginInjectionAPI;
 }) => {
-	// mode
-	const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? modeSelector
-		: editorViewModeState?.mode;
-
+	const { mode } = useSharedState(api);
 	const isLivePageViewMode = mode === 'view';
 	return (
 		<Global

package/src/ui/icons/SortingIconWrapper.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 { SortingIcon } from '@atlaskit/editor-common/table';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -13,19 +15,23 @@ type SortingIconWrapperProps = SortingIconProps & {
 	api: ExtractInjectionAPI<TablePlugin>;
 };
 
-export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
-	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-
-	// mode
-	const modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? modeSelector
-		: editorViewModeState?.mode;
+const useSharedState = 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,
+		};
+	},
+);
 
+export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
+	const { mode } = useSharedState(props.api);
 	if (mode === 'edit') {
 		return null;
 	}