@atlaskit/editor-plugin-table 11.0.2 → 11.1.0

package/dist/esm/ui/icons/SortingIconWrapper.js

@@ -1,15 +1,20 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
+      var _states$editorViewMod;
+      return {
+        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    mode = _useSharedPluginState.mode;
   return {
     mode: mode
   };
 }, function (api) {
-  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   return {
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   };

package/dist/types/nodeviews/TableComponent.d.ts

@@ -40,6 +40,10 @@ interface ComponentProps {
     isWholeTableInDanger?: boolean;
     selection?: Selection;
 }
+/**
+ * Exported for test purposes only
+ */
+export declare const _reset_tableComponentCount: () => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ComponentProps>> & {
     WrappedComponent: React.ComponentType<ComponentProps>;
 };

package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -18,5 +18,5 @@ type Options = {
  * @returns
  * @example
  */
-export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/dist/types-ts4.5/nodeviews/TableComponent.d.ts

@@ -40,6 +40,10 @@ interface ComponentProps {
     isWholeTableInDanger?: boolean;
     selection?: Selection;
 }
+/**
+ * Exported for test purposes only
+ */
+export declare const _reset_tableComponentCount: () => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ComponentProps>> & {
     WrappedComponent: React.ComponentType<ComponentProps>;
 };

package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -18,5 +18,5 @@ type Options = {
  * @returns
  * @example
  */
-export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "stickyHeader" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "11.0.2",
+	"version": "11.1.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"singleton": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^47.6.0",
+		"@atlaskit/adf-schema": "^49.0.5",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/custom-steps": "^0.11.0",
 		"@atlaskit/editor-palette": "^2.1.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^3.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^3.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
-		"@atlaskit/editor-plugin-extension": "6.0.2",
+		"@atlaskit/editor-plugin-extension": "6.0.3",
 		"@atlaskit/editor-plugin-guideline": "^3.0.0",
 		"@atlaskit/editor-plugin-interaction": "^4.0.0",
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
@@ -52,8 +52,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.0.0",
+		"@atlaskit/react-ufo": "^3.14.0",
+		"@atlaskit/theme": "^19.0.0",
+		"@atlaskit/tmp-editor-statsig": "^9.4.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",

package/src/nodeviews/TableComponent.tsx

@@ -29,6 +29,8 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import UFOLoadHold from '@atlaskit/react-ufo/load-hold';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
@@ -146,6 +148,12 @@ interface TableState {
 	tableWrapperHeight?: number;
 }
 
+let _tableComponentCount = 1;
+/**
+ * Exported for test purposes only
+ */
+export const _reset_tableComponentCount = () => (_tableComponentCount = 0);
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class TableComponent extends React.Component<ComponentProps, TableState> {
@@ -182,6 +190,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 	private dragAndDropCleanupFn?: CleanupFn;
 	private nodeVisibilityObserverCleanupFn?: CleanupFn;
+	private holdCompleted = false;
+	private dispatchEventName = `tableResized-${_tableComponentCount++}`;
 
 	constructor(props: ComponentProps) {
 		super(props);
@@ -606,6 +616,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 						shouldScaleOnColgroupUpdate,
 						scalePercent,
 					);
+
+					if (expValEquals('cc_editor_ufo_hold_table_till_resize_complete', 'isEnabled', true)) {
+						// Mark table as updated for TableHold component (if no table exists yet, the colgroup update will not have done anything)
+						if (this.table && !this.holdCompleted) {
+							const customTableResizedEvent = new CustomEvent(this.dispatchEventName);
+
+							document.dispatchEvent(customTableResizedEvent);
+							this.holdCompleted = true;
+						}
+					}
 				});
 			}
 		}
@@ -989,6 +1009,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isCommentEditor={options?.isCommentEditor}
 				isChromelessEditor={options?.isChromelessEditor}
 			>
+				{expValEquals('cc_editor_ufo_hold_table_till_resize_complete', 'isEnabled', true) ? (
+					<TableHold dispatchEventName={this.dispatchEventName} />
+				) : null}
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 					className={ClassName.TABLE_STICKY_SENTINEL_TOP}
@@ -1431,3 +1454,37 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 }
 
 export default injectIntl(TableComponent);
+
+/**
+ * This is needed because of how currently the table is resized post client boot up with code that exists outside react
+ *
+ * This can be deleted once https://home.atlassian.com/o/2346a038-3c8c-498b-a79b-e7847859868d/s/a436116f-02ce-4520-8fbb-7301462a1674/project/ATLAS-97756/updates
+ * is rolled out (and doesn't need to be used in the test arm of that change).
+ */
+const TableHold = React.memo(function TableHold({
+	dispatchEventName,
+}: {
+	dispatchEventName: string;
+}) {
+	const [tableUpdateConfirmed, setTableUpdateConfirmed] = React.useState(false);
+
+	React.useEffect(() => {
+		const customEventListener = () => {
+			setTableUpdateConfirmed(true);
+		};
+
+		// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+		document.addEventListener(dispatchEventName, customEventListener);
+
+		return () => {
+			// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+			document.removeEventListener(dispatchEventName, customEventListener);
+		};
+	}, [dispatchEventName]);
+
+	if (tableUpdateConfirmed === false) {
+		return <UFOLoadHold name="editor_table_resize" />;
+	}
+
+	return null;
+});

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -3,18 +3,23 @@ import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import {
+	type NamedPluginStatesFromInjectionAPI,
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } 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 {
+	ExtractInjectionAPI,
+	GetEditorFeatureFlags,
+	getPosHandlerNode,
+} from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
+import type tablePlugin from '../tablePlugin';
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
-import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 import TableComponent from './TableComponent';
 import type { TableOptions } from './types';
@@ -41,35 +46,60 @@ type TableComponentWithSharedStateProps = {
 
 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');
-		// Required so that table controls re-renders
-		useInternalTablePluginStateSelector(api, 'targetCellPosition');
-
-		// 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');
-
-		// interactionState
-		const interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
+		const {
+			isTableResizing,
+			isHeaderColumnEnabled,
+			isHeaderRowEnabled,
+			ordering,
+			isResizing,
+			isInDanger,
+			hoveredCell,
+			hoveredRows,
+			isTableHovered,
+			isWholeTableInDanger,
+			interaction,
+			isFullscreen,
+			lineLength,
+			mode,
+			selection,
+			width,
+		} = useSharedPluginStateWithSelector(
+			api,
+			['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'],
+			(
+				states: NamedPluginStatesFromInjectionAPI<
+					ExtractInjectionAPI<typeof tablePlugin>,
+					'width' | 'media' | 'selection' | 'editorViewMode' | 'interaction'
+				> & {
+					tableState: TableSharedStateInternal | undefined;
+				},
+			) => ({
+				// tableState
+				isTableResizing: states.tableState?.isTableResizing,
+				isHeaderColumnEnabled: states.tableState?.isHeaderColumnEnabled,
+				isHeaderRowEnabled: states.tableState?.isHeaderRowEnabled,
+				ordering: states.tableState?.ordering,
+				isResizing: states.tableState?.isResizing,
+				isInDanger: states.tableState?.isInDanger,
+				hoveredCell: states.tableState?.hoveredCell,
+				hoveredRows: states.tableState?.hoveredRows,
+				isTableHovered: states.tableState?.isTableHovered,
+				isWholeTableInDanger: states.tableState?.isWholeTableInDanger,
+				// Required so that table control re-renders
+				targetCellPosition: states.tableState?.targetCellPosition,
+				// mediaState
+				isFullscreen: states.mediaState?.isFullscreen,
+				// selectionState
+				selection: states.selectionState?.selection,
+				// editorViewModeState
+				mode: states.editorViewModeState?.mode,
+				// widthState
+				width: states.widthState?.width,
+				lineLength: states.widthState?.lineLength,
+				// interactionState
+				interaction: states.interactionState?.interactionState,
+			}),
+		);
 
 		return {
 			tableState: undefined,

package/src/nodeviews/TableContainer.tsx

@@ -10,12 +10,13 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import {
+	type NamedPluginStatesFromInjectionAPI,
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } 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';
+import type { EditorContainerWidth, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -33,7 +34,8 @@ import {
 	TABLE_OFFSET_IN_COMMENT_EDITOR,
 } from '../pm-plugins/table-resizing/utils/consts';
 import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
-import type { PluginInjectionAPI } from '../types';
+import type tablePlugin from '../tablePlugin';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { getAlignmentStyle } from './table-container-styles';
@@ -74,15 +76,15 @@ type AlignmentTableContainerProps = {
 	editorView?: EditorView;
 };
 
-const useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(
+const useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory(
 	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
-		const isFullWidthModeEnabled = useSharedPluginStateSelector(
+		const { isFullWidthModeEnabled, wasFullWidthModeEnabled } = useSharedPluginStateWithSelector(
 			pluginInjectionApi,
-			'table.isFullWidthModeEnabled',
-		);
-		const wasFullWidthModeEnabled = useSharedPluginStateSelector(
-			pluginInjectionApi,
-			'table.wasFullWidthModeEnabled',
+			['table'],
+			(states) => ({
+				isFullWidthModeEnabled: states.tableState?.isFullWidthModeEnabled,
+				wasFullWidthModeEnabled: states.tableState?.wasFullWidthModeEnabled,
+			}),
 		);
 		return {
 			tableState: undefined,
@@ -109,7 +111,7 @@ const AlignmentTableContainer = ({
 }: PropsWithChildren<AlignmentTableContainerProps>) => {
 	const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
 	const { tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled } =
-		useAlignmentStableContainerSharedState(pluginInjectionApi);
+		useAlignmentTableContainerSharedState(pluginInjectionApi);
 
 	useEffect(() => {
 		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
@@ -214,26 +216,38 @@ type ResizableTableContainerProps = {
 	isCommentEditor?: boolean;
 };
 
-const useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(
-	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
-		const isFullWidthModeEnabled = useSharedPluginStateSelector(
-			pluginInjectionApi,
-			'table.isFullWidthModeEnabled',
+const selector = (
+	states: NamedPluginStatesFromInjectionAPI<
+		ExtractInjectionAPI<typeof tablePlugin>,
+		'editorViewMode'
+	> & {
+		tableState: TableSharedStateInternal | undefined;
+	},
+) => ({
+	tableState: states.tableState,
+	editorViewModeState: states.editorViewModeState,
+});
+
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: PluginInjectionAPI | undefined) => {
+		const { tableState, editorViewModeState } = useSharedPluginStateWithSelector(
+			api,
+			['table', 'editorViewMode'],
+			selector,
 		);
-		const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
 		return {
-			isFullWidthModeEnabled,
-			mode,
+			tableState,
+			editorViewModeState,
 		};
 	},
-	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
-		const { tableState, editorViewModeState } = useSharedPluginState(pluginInjectionApi, [
+	(api: PluginInjectionAPI | undefined) => {
+		const { tableState, editorViewModeState } = useSharedPluginState(api, [
 			'table',
 			'editorViewMode',
 		]);
 		return {
-			isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
-			mode: editorViewModeState?.mode,
+			tableState,
+			editorViewModeState,
 		};
 	},
 );
@@ -262,8 +276,9 @@ export const ResizableTableContainer = React.memo(
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 		const [resizing, setIsResizing] = useState(false);
 
-		const { isFullWidthModeEnabled, mode } =
-			useResizeableTableContainerSharedState(pluginInjectionApi);
+		const { tableState, editorViewModeState } = useSharedState(pluginInjectionApi);
+		const isFullWidthModeEnabled = tableState?.isFullWidthModeEnabled;
+		const mode = editorViewModeState?.mode;
 
 		const updateContainerHeight = useCallback((height: number | 'auto') => {
 			// current StickyHeader State is not stable to be fetch.

package/src/nodeviews/TableResizer.tsx

@@ -16,6 +16,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
@@ -72,7 +73,6 @@ import {
 	TABLE_HIGHLIGHT_TOLERANCE,
 	TABLE_SNAP_GAP,
 } from '../ui/consts';
-import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 interface TableResizerProps {
 	width: number;
@@ -185,18 +185,21 @@ const getVisibleGuidelines = (
 	});
 };
 
+const selector = (states: { tableState: TableSharedStateInternal | undefined }) => ({
+	widthToWidest: (states.tableState as TableSharedStateInternal | undefined)?.widthToWidest,
+});
+
 const useSharedState = sharedPluginStateHookMigratorFactory(
-	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
-		const widthToWidest = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest');
+	(api: PluginInjectionAPI | undefined) => {
+		const { widthToWidest } = useSharedPluginStateWithSelector(api, ['table'], selector);
 		return {
 			widthToWidest,
 		};
 	},
-	(pluginInjectionApi: PluginInjectionAPI | undefined) => {
-		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
-		const tableStateInternal = tableState as TableSharedStateInternal;
+	(api: PluginInjectionAPI | undefined) => {
+		const { tableState } = useSharedPluginState(api, ['table']);
 		return {
-			widthToWidest: tableStateInternal.widthToWidest,
+			widthToWidest: (tableState as TableSharedStateInternal | undefined)?.widthToWidest,
 		};
 	},
 );

package/src/tablePlugin.tsx

@@ -22,6 +22,7 @@ import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -39,7 +40,6 @@ import type {
 	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';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -102,7 +102,9 @@ const defaultGetEditorFeatureFlags = () => ({});
 
 const useTableSharedState = sharedPluginStateHookMigratorFactory(
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+		const { mode } = useSharedPluginStateWithSelector(api, ['editorViewMode'], (states) => ({
+			mode: states.editorViewModeState?.mode,
+		}));
 		return { mode };
 	},
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {

package/src/ui/DragHandle/index.tsx

@@ -11,6 +11,7 @@ import { browser } from '@atlaskit/editor-common/browser';
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
@@ -33,7 +34,6 @@ import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta, TableDirection, TableSharedStateInternal } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
-import { useInternalTablePluginStateSelector } from '../hooks/useInternalTablePluginStateSelector';
 
 import { HandleIconComponent } from './HandleIconComponent';
 
@@ -315,8 +315,14 @@ const DragHandleComponent = ({
 
 const useSharedState = sharedPluginStateHookMigratorFactory(
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
-		const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+		const { hoveredColumns, hoveredRows } = useSharedPluginStateWithSelector(
+			api,
+			['table'],
+			(states) => ({
+				hoveredColumns: (states.tableState as TableSharedStateInternal)?.hoveredColumns,
+				hoveredRows: (states.tableState as TableSharedStateInternal)?.hoveredRows,
+			}),
+		);
 		return {
 			hoveredColumns,
 			hoveredRows,

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

@@ -5,10 +5,10 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } 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';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -64,7 +64,9 @@ const getSelectedColumns = (selection: Selection) => {
 
 const useSharedState = sharedPluginStateHookMigratorFactory(
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const selection = useSharedPluginStateSelector(api, 'selection.selection');
+		const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
+			selection: states.selectionState?.selection,
+		}));
 		return {
 			selection,
 		};
@@ -114,7 +116,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

@@ -7,10 +7,10 @@ import { injectIntl } from 'react-intl-next';
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } 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 { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -70,9 +70,11 @@ const DragCornerControlsComponent = ({
 
 const useSharedState = sharedPluginStateHookMigratorFactory(
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+		const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
+			selection: states.selectionState?.selection,
+		}));
 		return {
-			selection: selectionsSelector,
+			selection,
 		};
 	},
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import {
 	sharedPluginStateHookMigratorFactory,
 	useSharedPluginState,
+	useSharedPluginStateWithSelector,
 } 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 type { TablePlugin } from '../../tablePluginType';
@@ -30,9 +30,11 @@ type FloatingControlsWithSelectionProps = {
 
 const useSharedState = sharedPluginStateHookMigratorFactory(
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
-		const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+		const { selection } = useSharedPluginStateWithSelector(api, ['selection'], (states) => ({
+			selection: states.selectionState?.selection,
+		}));
 		return {
-			selection: selectionsSelector,
+			selection,
 		};
 	},
 	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {