@atlaskit/editor-plugin-table 10.9.19 → 10.9.21

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -1,14 +1,13 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 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, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -25,6 +24,18 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   }
   return [];
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selection
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var ColumnControls = function ColumnControls(_ref) {
   var _colWidths$map$join;
   var editorView = _ref.editorView,
@@ -43,16 +54,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = useRef(null);
-
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
       // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider

package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 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 { 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 { TableCssClassName as ClassName } from '../../../types';
 var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
@@ -51,21 +50,26 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
   var editorView = _ref2.editorView,
     isInDanger = _ref2.isInDanger,
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;

package/dist/esm/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -1,9 +1,20 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -17,15 +28,8 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -2,13 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 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 { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
@@ -279,6 +278,18 @@ export var DragControls = function DragControls(_ref) {
     }), rowHandles())
   );
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+  return {
+    selection: selectionsSelector
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+    selectionState = _useSharedPluginState.selectionState;
+  return {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export var DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
   var editorView = _ref5.editorView,
     tableRef = _ref5.tableRef,
@@ -294,15 +305,8 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  // selection
-  var _useSharedPluginState = useSharedPluginState(api, ['selection'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    selectionState = _useSharedPluginState.selectionState;
-  var selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
+  var _useSharedState = useSharedState(api),
+    selection = _useSharedState.selection;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

package/dist/esm/ui/global-styles.js

@@ -4,23 +4,27 @@
  */
 // 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableStyles } from './common-styles';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags,
     isDragAndDropEnabledOption = _ref.isDragAndDropEnabledOption,
     api = _ref.api;
-  // mode
-  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var _useSharedState = useSharedState(api),
+    mode = _useSharedState.mode;
   var isLivePageViewMode = mode === 'view';
   return jsx(Global, {
     styles: tableStyles({

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

@@ -1,19 +1,22 @@
 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export var SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-
-  // mode
-  var modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
+export var SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedState = useSharedState(props.api),
+    mode = _useSharedState.mode;
   if (mode === 'edit') {
     return null;
   }

package/dist/esm/ui/toolbar.js

@@ -487,6 +487,10 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           };
         };
         var shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
+
+        // testId is required to show focus on trigger button on ESC key press
+        // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+        var overflowDropdownTestId = fg('platform_editor_controls_patch_8') ? 'table-overflow-dropdown-trigger' : undefined;
         return {
           title: toolbarTitle,
           getDomRef: getDomRef,
@@ -507,6 +511,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             fullHeight: true
           }, {
             type: 'overflow-dropdown',
+            testId: overflowDropdownTestId,
             dropdownWidth: 220,
             options: [{
               type: 'custom',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.19",
+	"version": "10.9.21",
 	"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": "^104.1.0",
+		"@atlaskit/editor-common": "^105.2.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-analytics": "^2.3.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.6",
+		"@atlaskit/editor-plugin-extension": "5.3.7",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.19.0",
+		"@atlaskit/tmp-editor-statsig": "^4.21.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -209,6 +209,9 @@
 		},
 		"platform_editor_r18_fix_selection_resync": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_8": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponentWithSharedState.tsx

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