@atlaskit/editor-plugin-table 10.9.7 → 10.9.9

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

@@ -0,0 +1,20 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TablePlugin } from '../../tablePluginType';
+import { TableSharedStateInternal } from '../../types';
+type Options = {
+    disabled?: boolean;
+};
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+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">(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": "10.9.7",
+	"version": "10.9.9",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.17.0",
+		"@atlaskit/editor-common": "^103.19.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.3.0",
+		"@atlaskit/editor-plugin-extension": "5.3.1",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -49,12 +49,12 @@
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.6.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.14.0",
+		"@atlaskit/tmp-editor-statsig": "^4.15.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -138,9 +138,6 @@
 		"platform_editor_disable_table_lnv": {
 			"type": "boolean"
 		},
-		"platform_editor_nested_tables_paste_wrap_fix": {
-			"type": "boolean"
-		},
 		"nested_table_control_padding_with_css": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -3,19 +3,15 @@ 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 type {
-	ExtractInjectionAPI,
-	GetEditorFeatureFlags,
-	getPosHandlerNode,
-} from '@atlaskit/editor-common/types';
+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';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
-import { TablePlugin } from '../tablePluginType';
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 import TableComponent from './TableComponent';
 import type { TableOptions } from './types';
@@ -40,16 +36,6 @@ type TableComponentWithSharedStateProps = {
 	allowTableResizing?: boolean;
 };
 
-const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
-	api: ExtractInjectionAPI<TablePlugin> | undefined,
-	key: K,
-) => {
-	const value = useSharedPluginStateSelector(api, `table.${key}` as never, {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	}) as TableSharedStateInternal[K];
-	return value;
-};
-
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -73,21 +59,47 @@ export const TableComponentWithSharedState = ({
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
 		});
 
-	const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
-	const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(
+	const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(
 		api,
 		'isHeaderColumnEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
-	const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-	const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
-	const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
-	const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
-	const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
-	const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
-	const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
-	const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(
+	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
@@ -203,8 +215,8 @@ export const TableComponentWithSharedState = ({
 			isMediaFullscreen={isFullscreen}
 			options={options}
 			allowControls={allowControls}
-			isHeaderRowEnabled={isHeaderRowEnabled}
-			isHeaderColumnEnabled={isHeaderColumnEnabled}
+			isHeaderRowEnabled={isHeaderRowEnabled ?? false}
+			isHeaderColumnEnabled={isHeaderColumnEnabled ?? false}
 			isDragAndDropEnabled={options?.isDragAndDropEnabled && !isLivePageViewMode}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}

package/src/nodeviews/TableContainer.tsx

@@ -114,7 +114,7 @@ const AlignmentTableContainer = ({
 		: tableState?.wasFullWidthModeEnabled;
 
 	useEffect(() => {
-		if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
 			return;
 		}
 

package/src/nodeviews/TableResizer.tsx

@@ -19,7 +19,6 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -70,6 +69,7 @@ import {
 	TABLE_HIGHLIGHT_TOLERANCE,
 	TABLE_SNAP_GAP,
 } from '../ui/consts';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 interface TableResizerProps {
 	width: number;
@@ -218,13 +218,13 @@ export const TableResizer = ({
 	});
 
 	// widthToWidest
-	const widthToWidestSelector = useSharedPluginStateSelector(
+	const widthToWidestSelector = useInternalTablePluginStateSelector(
 		pluginInjectionApi,
-		'table.widthToWidest' as never,
+		'widthToWidest',
 		{
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
 		},
-	) as TableSharedStateInternal['widthToWidest'];
+	);
 	const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? widthToWidestSelector
 		: (tableState as TableSharedStateInternal).widthToWidest;

package/src/pm-plugins/utils/paste.ts

@@ -260,40 +260,38 @@ const containsNonTableBlockChildren = (fragment: Fragment, schema: Schema): bool
 };
 
 export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): Slice => {
-	if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
-		// Case 1: A slice of a block selection inside a nested table
-		// Prosemirror wraps nested block selections in their respective tables
-		// We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
-
-		// slice starts and ends inside a nested table at the same depth
-		if (slice.openStart >= 7 && slice.openEnd >= 7) {
-			let cleaned = slice;
-			let descendedDepth = 0;
-			const tableDepthDecrement = 2;
-
-			// if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
-			if (isFragmentSingleCellTable(slice.content, schema)) {
-				slice.content.firstChild?.descendants((node) => {
-					if (isNodeSingleCellTable(node, schema)) {
-						descendedDepth += tableDepthDecrement;
-					} else if (node.type === schema.nodes.table) {
-						return false;
-					} else if (containsNonTableBlockChildren(node.content, schema)) {
-						descendedDepth += tableDepthDecrement;
-						// create a new slice with the content of non-table block children and the depth of the nested tables subtracted
-						cleaned = new Slice(
-							node.content,
-							slice.openStart - descendedDepth - tableDepthDecrement,
-							slice.openEnd - descendedDepth - tableDepthDecrement,
-						);
-						return false;
-					}
-				});
-			}
+	// Case 1: A slice of a block selection inside a nested table
+	// Prosemirror wraps nested block selections in their respective tables
+	// We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
 
-			if (!cleaned.eq(slice)) {
-				return cleaned;
-			}
+	// slice starts and ends inside a nested table at the same depth
+	if (slice.openStart >= 7 && slice.openEnd >= 7) {
+		let cleaned = slice;
+		let descendedDepth = 0;
+		const tableDepthDecrement = 2;
+
+		// if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
+		if (isFragmentSingleCellTable(slice.content, schema)) {
+			slice.content.firstChild?.descendants((node) => {
+				if (isNodeSingleCellTable(node, schema)) {
+					descendedDepth += tableDepthDecrement;
+				} else if (node.type === schema.nodes.table) {
+					return false;
+				} else if (containsNonTableBlockChildren(node.content, schema)) {
+					descendedDepth += tableDepthDecrement;
+					// create a new slice with the content of non-table block children and the depth of the nested tables subtracted
+					cleaned = new Slice(
+						node.content,
+						slice.openStart - descendedDepth - tableDepthDecrement,
+						slice.openEnd - descendedDepth - tableDepthDecrement,
+					);
+					return false;
+				}
+			});
+		}
+
+		if (!cleaned.eq(slice)) {
+			return cleaned;
 		}
 	}
 

package/src/tablePlugin.tsx

@@ -771,7 +771,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 												getDomRefFromSelection(
 													editorView,
 													ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
-													api?.analytics?.actions.fireAnalyticsEvent,
+													api?.analytics?.actions,
 												)
 											}
 											popupsBoundariesElement={popupsBoundariesElement}

package/src/ui/ContentComponent.tsx

@@ -7,12 +7,11 @@ import {
 	GetEditorContainerWidth,
 	GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 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';
-import { TableSharedStateInternal } from '../types';
 
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
@@ -23,19 +22,9 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
+import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 
-const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
-	api: ExtractInjectionAPI<TablePlugin> | undefined,
-	key: K,
-) => {
-	const value = useSharedPluginStateSelector(
-		api,
-		`table.${key}` as never,
-	) as TableSharedStateInternal[K];
-	return value;
-};
-
 export type ContentComponentProps = {
 	api: ExtractInjectionAPI<TablePlugin> | undefined;
 	editorView: EditorView;
@@ -62,35 +51,82 @@ const ContentComponentInternal = ({
 	const editorAnalyticsAPI = api?.analytics?.actions;
 	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
 
-	const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
-	const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
-	const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
-	const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
-	const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
+	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 tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
-	const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
-	const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
-	const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
-	const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
-	const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
-	const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
-	const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-	const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-	const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
-	const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
-	const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(
+	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 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 isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(
 		api,
 		'isCellMenuOpenByKeyboard',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
 
-	const { allowControls } = pluginConfig;
+	const { allowControls } = pluginConfig ?? {};
 
-	const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
+	const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
 
-	const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
-	const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
-	const isDragMenuOpen = useSharedTablePluginStateSelector(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),
+	});
 
 	return (
 		<>

package/src/ui/DragHandle/index.tsx

@@ -11,7 +11,6 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { 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 { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -32,6 +31,7 @@ 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';
 
@@ -336,21 +336,17 @@ const DragHandleComponentWithSharedState = ({
 	};
 
 	// hoveredColumns
-	const hoveredColumnsSelector = useSharedPluginStateSelector(
-		api,
-		'table.hoveredColumns' as never,
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	) as 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 = useSharedPluginStateSelector(api, 'table.hoveredRows' as never, {
+	const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
 		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	}) as TableSharedStateInternal['hoveredRows'];
+	});
 	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? hoveredRowsSelector
 		: tableState?.hoveredRows;

package/src/ui/hooks/useInternalTablePluginStateSelector.ts

@@ -0,0 +1,36 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+
+import { TablePlugin } from '../../tablePluginType';
+import { TableSharedStateInternal } from '../../types';
+
+type Options = {
+	disabled?: boolean;
+};
+
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export const useInternalTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
+	api: ExtractInjectionAPI<TablePlugin> | undefined,
+	key: K,
+	options?: Options,
+): TableSharedStateInternal[K] | undefined => {
+	// Need to disable the eslint rule here because the key is for the TableSharedStateInternal type
+	// and we are using it as a string to access the value in the useSharedPluginStateSelector
+	// which is typed only for the public TableSharedState type.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const value = useSharedPluginStateSelector(api, `table.${key}` as any, options) as
+		| TableSharedStateInternal[K]
+		| undefined;
+	return value;
+};