@atlaskit/editor-plugin-table 10.9.5 → 10.9.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.6
+
+### Patch Changes
+
+- [#145707](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145707)
+  [`efae19bca16cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/efae19bca16cb) -
+  Enable useSharedPluginStateSelector in Table
+
 ## 10.9.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -13,8 +13,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
@@ -49,12 +51,27 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     getPos = _ref2.getPos,
     editorView = _ref2.editorView;
   var alignment = node.attrs.layout !== _alignment.ALIGN_START ? _alignment.ALIGN_CENTER : _alignment.ALIGN_START;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState.tableState;
+
+  // isFullWidthModeEnabled
+  var isTableFullWidthModeEnabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullWidthModeEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isTableFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+
+  // wasFullWidthModeEnabled
+  var wasFullWidthModeEnabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.wasFullWidthModeEnabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var wasFullWidthModeEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
   (0, _react.useEffect)(function () {
-    if (tableState && editorView && getPos) {
-      var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
-        isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
+    if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+      return;
+    }
+    if (editorView && getPos) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
       if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== _alignment.ALIGN_CENTER && node.attrs.width > _editorSharedStyles.akEditorDefaultLayoutWidth) {
@@ -70,7 +87,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorView, tableState, node]);
+  }, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
   var style = (0, _react.useMemo)(function () {
     return (0, _tableContainerStyles.getAlignmentStyle)(alignment);
   }, [alignment]);
@@ -132,10 +149,16 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState2.tableState;
-  var _ref5 = tableState,
-    isFullWidthModeEnabled = _ref5.isFullWidthModeEnabled;
+
+  // isFullWidthModeEnabled
+  var isFullWidthModeEnabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullWidthModeEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -189,8 +212,16 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
-  var _useSharedPluginState3 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState3.editorViewModeState;
+
+  // mode
+  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var responsiveContainerWidth = 0;
   var resizeHandleSpacing = 12;
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
@@ -241,7 +272,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     onResizeStop: onResizeStop,
     isCommentEditor: isCommentEditor
   };
-  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isLivePageViewMode = ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,
@@ -286,28 +317,28 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children)) : null));
 });
-var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
-  var children = _ref6.children,
-    node = _ref6.node,
-    className = _ref6.className,
-    _ref6$containerWidth = _ref6.containerWidth,
-    editorWidth = _ref6$containerWidth.width,
-    lineLength = _ref6$containerWidth.lineLength,
-    editorView = _ref6.editorView,
-    getPos = _ref6.getPos,
-    tableRef = _ref6.tableRef,
-    isNested = _ref6.isNested,
-    tableWrapperHeight = _ref6.tableWrapperHeight,
-    isResizing = _ref6.isResizing,
-    pluginInjectionApi = _ref6.pluginInjectionApi,
-    isWholeTableInDanger = _ref6.isWholeTableInDanger,
-    isTableResizingEnabled = _ref6.isTableResizingEnabled,
-    isTableScalingEnabled = _ref6.isTableScalingEnabled,
-    isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
-    isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref6.isCommentEditor,
-    isChromelessEditor = _ref6.isChromelessEditor;
+var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
+  var children = _ref5.children,
+    node = _ref5.node,
+    className = _ref5.className,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
+    editorView = _ref5.editorView,
+    getPos = _ref5.getPos,
+    tableRef = _ref5.tableRef,
+    isNested = _ref5.isNested,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
+    isResizing = _ref5.isResizing,
+    pluginInjectionApi = _ref5.pluginInjectionApi,
+    isWholeTableInDanger = _ref5.isWholeTableInDanger,
+    isTableResizingEnabled = _ref5.isTableResizingEnabled,
+    isTableScalingEnabled = _ref5.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
+    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
+    shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref5.isCommentEditor,
+    isChromelessEditor = _ref5.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/nodeviews/TableResizer.js

@@ -19,10 +19,12 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _misc = require("../pm-plugins/commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
@@ -135,10 +137,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var isResizing = (0, _react.useRef)(false);
   var areResizeMetaKeysPressed = (0, _react.useRef)(false);
   var resizerRef = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState.tableState;
-  var _ref2 = tableState,
-    widthToWidest = _ref2.widthToWidest;
+
+  // widthToWidest
+  var widthToWidestSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'table.widthToWidest', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var widthToWidest = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = _react.default.useRef();
@@ -180,12 +188,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var excludeGuidelineConfig = (0, _react.useMemo)(function () {
     return {
       innerGuidelines: !!isTableAlignmentEnabled,
-      breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+      breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled)
     };
-  }, [tableState, isTableAlignmentEnabled]);
-  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref3) {
-    var gap = _ref3.gap,
-      keys = _ref3.keys;
+  }, [isFullWidthModeEnabled, isTableAlignmentEnabled]);
+  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
+    var gap = _ref2.gap,
+      keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
       var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
@@ -487,8 +495,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     needExtendedResizeZone: !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: function handleTooltipContent(_ref4) {
-      var update = _ref4.update;
+    handleTooltipContent: function handleTooltipContent(_ref3) {
+      var update = _ref3.update;
       updateTooltip.current = update;
       return /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: formatMessage(_messages.tableMessages.resizeTable),

package/dist/cjs/tablePlugin.js

@@ -21,6 +21,7 @@ var _nesting = require("@atlaskit/editor-common/nesting");
 var _preset = require("@atlaskit/editor-common/preset");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -686,9 +687,16 @@ var tablePlugin = function tablePlugin(_ref) {
     },
     usePluginHook: function usePluginHook(_ref24) {
       var editorView = _ref24.editorView;
-      var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
+      var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode'], {
+          disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+        }),
         editorViewModeState = _useSharedPluginState.editorViewModeState;
-      var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+
+      // mode
+      var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
+        disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+      });
+      var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
       (0, _react.useEffect)(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;

package/dist/cjs/ui/DragHandle/index.js

@@ -15,10 +15,12 @@ var _reactIntlNext = require("react-intl-next");
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _mergedCells = require("../../pm-plugins/utils/merged-cells");
@@ -270,8 +272,22 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     editorView = _ref5.editorView,
     intl = _ref5.intl,
     api = _ref5.api;
-  var _ref6 = (0, _hooks.useSharedPluginState)(api, ['table']),
+  var _ref6 = (0, _hooks.useSharedPluginState)(api, ['table'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _ref6.tableState;
+
+  // hoveredColumns
+  var hoveredColumnsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'table.hoveredColumns', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredColumns = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
+
+  // hoveredRows
+  var hoveredRowsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'table.hoveredRows', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredRows = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
   return /*#__PURE__*/_react.default.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,
@@ -288,8 +304,8 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     onClick: onClick,
     editorView: editorView,
     intl: intl,
-    hoveredColumns: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns,
-    hoveredRows: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows
+    hoveredColumns: hoveredColumns,
+    hoveredRows: hoveredRows
   });
 };
 var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _react = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commonStyles = require("./common-styles");
 /**
  * @jsxRuntime classic
@@ -17,9 +19,16 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   var featureFlags = _ref.featureFlags,
     isDragAndDropEnabledOption = _ref.isDragAndDropEnabledOption,
     api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
+  // mode
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var isLivePageViewMode = mode === 'view';
   return (0, _react.jsx)(_react.Global, {
     styles: (0, _commonStyles.tableStyles)({
       featureFlags: featureFlags,

package/dist/es2019/nodeviews/TableContainer.js

@@ -4,8 +4,10 @@ import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
@@ -42,13 +44,26 @@ const AlignmentTableContainer = ({
   const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   const {
     tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  } = useSharedPluginState(pluginInjectionApi, ['table'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // isFullWidthModeEnabled
+  const isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+
+  // wasFullWidthModeEnabled
+  const wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
   useEffect(() => {
-    if (tableState && editorView && getPos) {
-      const {
-        wasFullWidthModeEnabled,
-        isFullWidthModeEnabled
-      } = tableState;
+    if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+      return;
+    }
+    if (editorView && getPos) {
       const {
         state,
         dispatch
@@ -66,7 +81,7 @@ const AlignmentTableContainer = ({
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorView, tableState, node]);
+  }, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
   const style = useMemo(() => {
     return getAlignmentStyle(alignment);
   }, [alignment]);
@@ -129,10 +144,15 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const [resizing, setIsResizing] = useState(false);
   const {
     tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table']);
-  const {
-    isFullWidthModeEnabled
-  } = tableState;
+  } = useSharedPluginState(pluginInjectionApi, ['table'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // isFullWidthModeEnabled
+  const isFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -188,7 +208,15 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const tableWidth = getTableContainerWidth(node);
   const {
     editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // mode
+  const modeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   let responsiveContainerWidth = 0;
   const resizeHandleSpacing = 12;
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
@@ -239,7 +267,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     onResizeStop,
     isCommentEditor
   };
-  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  const isLivePageViewMode = (editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,

package/dist/es2019/nodeviews/TableResizer.js

@@ -9,10 +9,12 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 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 { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -124,10 +126,15 @@ export const TableResizer = ({
   const resizerRef = useRef(null);
   const {
     tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table']);
-  const {
-    widthToWidest
-  } = tableState;
+  } = useSharedPluginState(pluginInjectionApi, ['table'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // widthToWidest
+  const widthToWidestSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.widthToWidest', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef();
@@ -167,8 +174,8 @@ export const TableResizer = ({
   } = useMeasureFramerate();
   const excludeGuidelineConfig = useMemo(() => ({
     innerGuidelines: !!isTableAlignmentEnabled,
-    breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
-  }), [tableState, isTableAlignmentEnabled]);
+    breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled)
+  }), [isFullWidthModeEnabled, isTableAlignmentEnabled]);
   const updateActiveGuidelines = useCallback(({
     gap,
     keys

package/dist/es2019/tablePlugin.js

@@ -12,6 +12,7 @@ import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atla
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -681,8 +682,15 @@ const tablePlugin = ({
     }) {
       const {
         editorViewModeState
-      } = useSharedPluginState(api, ['editorViewMode']);
-      const mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+      } = useSharedPluginState(api, ['editorViewMode'], {
+        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+      });
+
+      // mode
+      const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+      });
+      const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
       useEffect(() => {
         const {
           state,

package/dist/es2019/ui/DragHandle/index.js

@@ -7,10 +7,12 @@ import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
 import { 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 { TextSelection } from '@atlaskit/editor-prosemirror/state';
 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 { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
@@ -268,7 +270,21 @@ const DragHandleComponentWithSharedState = ({
 }) => {
   const {
     tableState
-  } = useSharedPluginState(api, ['table']);
+  } = useSharedPluginState(api, ['table'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // hoveredColumns
+  const hoveredColumnsSelector = useSharedPluginStateSelector(api, 'table.hoveredColumns', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
+
+  // hoveredRows
+  const hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,
@@ -285,8 +301,8 @@ const DragHandleComponentWithSharedState = ({
     onClick: onClick,
     editorView: editorView,
     intl: intl,
-    hoveredColumns: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns,
-    hoveredRows: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows
+    hoveredColumns: hoveredColumns,
+    hoveredRows: hoveredRows
   });
 };
 export const DragHandle = injectIntl(DragHandleComponent);

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

@@ -5,16 +5,25 @@
 // 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableStyles } from './common-styles';
 export const GlobalStylesWrapper = ({
   featureFlags,
   isDragAndDropEnabledOption,
   api
 }) => {
+  // mode
   const {
     editorViewModeState
-  } = useSharedPluginState(api, ['editorViewMode']);
-  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  } = 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 === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  const isLivePageViewMode = mode === 'view';
   return jsx(Global, {
     styles: tableStyles({
       featureFlags,

package/dist/esm/nodeviews/TableContainer.js

@@ -5,8 +5,10 @@ import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
@@ -39,12 +41,27 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     getPos = _ref2.getPos,
     editorView = _ref2.editorView;
   var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState.tableState;
+
+  // isFullWidthModeEnabled
+  var isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+
+  // wasFullWidthModeEnabled
+  var wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
   useEffect(function () {
-    if (tableState && editorView && getPos) {
-      var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
-        isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
+    if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+      return;
+    }
+    if (editorView && getPos) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
       if (wasFullWidthModeEnabled && isFullWidthModeEnabled !== undefined && !isFullWidthModeEnabled && alignment !== ALIGN_CENTER && node.attrs.width > akEditorDefaultLayoutWidth) {
@@ -60,7 +77,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorView, tableState, node]);
+  }, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
   var style = useMemo(function () {
     return getAlignmentStyle(alignment);
   }, [alignment]);
@@ -122,10 +139,16 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table']),
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState2.tableState;
-  var _ref5 = tableState,
-    isFullWidthModeEnabled = _ref5.isFullWidthModeEnabled;
+
+  // isFullWidthModeEnabled
+  var isFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var updateContainerHeight = useCallback(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -179,8 +202,16 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
-  var _useSharedPluginState3 = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+  var _useSharedPluginState3 = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState3.editorViewModeState;
+
+  // mode
+  var modeSelector = useSharedPluginStateSelector(pluginInjectionApi, '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 responsiveContainerWidth = 0;
   var resizeHandleSpacing = 12;
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
@@ -231,7 +262,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     onResizeStop: onResizeStop,
     isCommentEditor: isCommentEditor
   };
-  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isLivePageViewMode = (editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,
@@ -276,28 +307,28 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     node: node
   }, children)) : null));
 });
-export var TableContainer = function TableContainer(_ref6) {
-  var children = _ref6.children,
-    node = _ref6.node,
-    className = _ref6.className,
-    _ref6$containerWidth = _ref6.containerWidth,
-    editorWidth = _ref6$containerWidth.width,
-    lineLength = _ref6$containerWidth.lineLength,
-    editorView = _ref6.editorView,
-    getPos = _ref6.getPos,
-    tableRef = _ref6.tableRef,
-    isNested = _ref6.isNested,
-    tableWrapperHeight = _ref6.tableWrapperHeight,
-    isResizing = _ref6.isResizing,
-    pluginInjectionApi = _ref6.pluginInjectionApi,
-    isWholeTableInDanger = _ref6.isWholeTableInDanger,
-    isTableResizingEnabled = _ref6.isTableResizingEnabled,
-    isTableScalingEnabled = _ref6.isTableScalingEnabled,
-    isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
-    isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref6.isCommentEditor,
-    isChromelessEditor = _ref6.isChromelessEditor;
+export var TableContainer = function TableContainer(_ref5) {
+  var children = _ref5.children,
+    node = _ref5.node,
+    className = _ref5.className,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
+    editorView = _ref5.editorView,
+    getPos = _ref5.getPos,
+    tableRef = _ref5.tableRef,
+    isNested = _ref5.isNested,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
+    isResizing = _ref5.isResizing,
+    pluginInjectionApi = _ref5.pluginInjectionApi,
+    isWholeTableInDanger = _ref5.isWholeTableInDanger,
+    isTableResizingEnabled = _ref5.isTableResizingEnabled,
+    isTableScalingEnabled = _ref5.isTableScalingEnabled,
+    isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
+    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
+    shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref5.isCommentEditor,
+    isChromelessEditor = _ref5.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/nodeviews/TableResizer.js

@@ -13,10 +13,12 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 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 { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -125,10 +127,16 @@ export var TableResizer = function TableResizer(_ref) {
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _useSharedPluginState.tableState;
-  var _ref2 = tableState,
-    widthToWidest = _ref2.widthToWidest;
+
+  // widthToWidest
+  var widthToWidestSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.widthToWidest', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();
@@ -170,12 +178,12 @@ export var TableResizer = function TableResizer(_ref) {
   var excludeGuidelineConfig = useMemo(function () {
     return {
       innerGuidelines: !!isTableAlignmentEnabled,
-      breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+      breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled)
     };
-  }, [tableState, isTableAlignmentEnabled]);
-  var updateActiveGuidelines = useCallback(function (_ref3) {
-    var gap = _ref3.gap,
-      keys = _ref3.keys;
+  }, [isFullWidthModeEnabled, isTableAlignmentEnabled]);
+  var updateActiveGuidelines = useCallback(function (_ref2) {
+    var gap = _ref2.gap,
+      keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
       var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
@@ -477,8 +485,8 @@ export var TableResizer = function TableResizer(_ref) {
     needExtendedResizeZone: !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: function handleTooltipContent(_ref4) {
-      var update = _ref4.update;
+    handleTooltipContent: function handleTooltipContent(_ref3) {
+      var update = _ref3.update;
       updateTooltip.current = update;
       return /*#__PURE__*/React.createElement(ToolTipContent, {
         description: formatMessage(messages.resizeTable),

package/dist/esm/tablePlugin.js

@@ -15,6 +15,7 @@ import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atla
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -677,9 +678,16 @@ var tablePlugin = function tablePlugin(_ref) {
     },
     usePluginHook: function usePluginHook(_ref24) {
       var editorView = _ref24.editorView;
-      var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
+      var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode'], {
+          disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+        }),
         editorViewModeState = _useSharedPluginState.editorViewModeState;
-      var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+
+      // mode
+      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;
       useEffect(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;

package/dist/esm/ui/DragHandle/index.js

@@ -9,10 +9,12 @@ import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
 import { 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 { TextSelection } from '@atlaskit/editor-prosemirror/state';
 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 { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
@@ -260,8 +262,22 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     editorView = _ref5.editorView,
     intl = _ref5.intl,
     api = _ref5.api;
-  var _ref6 = useSharedPluginState(api, ['table']),
+  var _ref6 = useSharedPluginState(api, ['table'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     tableState = _ref6.tableState;
+
+  // hoveredColumns
+  var hoveredColumnsSelector = useSharedPluginStateSelector(api, 'table.hoveredColumns', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
+
+  // hoveredRows
+  var hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,
@@ -278,8 +294,8 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     onClick: onClick,
     editorView: editorView,
     intl: intl,
-    hoveredColumns: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns,
-    hoveredRows: tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows
+    hoveredColumns: hoveredColumns,
+    hoveredRows: hoveredRows
   });
 };
 export var DragHandle = injectIntl(DragHandleComponent);

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.5",
+	"version": "10.9.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableContainer.tsx

@@ -12,6 +12,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -20,6 +21,7 @@ import {
 	akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -28,7 +30,7 @@ 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, TableSharedState } from '../types';
+import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { getAlignmentStyle } from './table-container-styles';
@@ -77,11 +79,46 @@ const AlignmentTableContainer = ({
 	editorView,
 }: PropsWithChildren<AlignmentTableContainerProps>) => {
 	const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
-	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+
+	// isFullWidthModeEnabled
+	const isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(
+		pluginInjectionApi,
+		'table.isFullWidthModeEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	);
+	const isFullWidthModeEnabled = editorExperiment(
+		'platform_editor_usesharedpluginstateselector',
+		true,
+	)
+		? isTableFullWidthModeEnabledSelector
+		: tableState?.isFullWidthModeEnabled;
+
+	// wasFullWidthModeEnabled
+	const wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(
+		pluginInjectionApi,
+		'table.wasFullWidthModeEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	);
+	const wasFullWidthModeEnabled = editorExperiment(
+		'platform_editor_usesharedpluginstateselector',
+		true,
+	)
+		? wasFullWidthModeEnabledSelector
+		: tableState?.wasFullWidthModeEnabled;
 
 	useEffect(() => {
-		if (tableState && editorView && getPos) {
-			const { wasFullWidthModeEnabled, isFullWidthModeEnabled } = tableState;
+		if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+			return;
+		}
+
+		if (editorView && getPos) {
 			const { state, dispatch } = editorView;
 
 			if (
@@ -109,7 +146,7 @@ const AlignmentTableContainer = ({
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [editorView, tableState, node]);
+	}, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
 
 	const style = useMemo(() => {
 		return getAlignmentStyle(alignment);
@@ -202,8 +239,25 @@ export const ResizableTableContainer = React.memo(
 		const containerRef = useRef<HTMLDivElement | null>(null);
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 		const [resizing, setIsResizing] = useState(false);
-		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
-		const { isFullWidthModeEnabled } = tableState as TableSharedState;
+
+		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+		});
+
+		// isFullWidthModeEnabled
+		const isFullWidthModeEnabledSelector = useSharedPluginStateSelector(
+			pluginInjectionApi,
+			'table.isFullWidthModeEnabled',
+			{
+				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+			},
+		);
+		const isFullWidthModeEnabled = editorExperiment(
+			'platform_editor_usesharedpluginstateselector',
+			true,
+		)
+			? isFullWidthModeEnabledSelector
+			: tableState?.isFullWidthModeEnabled;
 
 		const updateContainerHeight = useCallback((height: number | 'auto') => {
 			// current StickyHeader State is not stable to be fetch.
@@ -277,7 +331,17 @@ export const ResizableTableContainer = React.memo(
 		);
 
 		const tableWidth = getTableContainerWidth(node);
-		const { editorViewModeState } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+		const { editorViewModeState } = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+		});
+
+		// mode
+		const modeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		});
+		const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+			? modeSelector
+			: editorViewModeState?.mode;
 
 		let responsiveContainerWidth = 0;
 		const resizeHandleSpacing = 12;
@@ -341,7 +405,10 @@ export const ResizableTableContainer = React.memo(
 			isCommentEditor,
 		};
 
-		const isLivePageViewMode = editorViewModeState?.mode === 'view';
+		const isLivePageViewMode =
+			(editorExperiment('platform_editor_usesharedpluginstateselector', true)
+				? mode
+				: editorViewModeState?.mode) === 'view';
 
 		return (
 			<AlignmentTableContainerWrapper

package/src/nodeviews/TableResizer.tsx

@@ -19,6 +19,7 @@ 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';
@@ -26,6 +27,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -211,8 +213,21 @@ export const TableResizer = ({
 	const isResizing = useRef(false);
 	const areResizeMetaKeysPressed = useRef(false);
 	const resizerRef = useRef<ResizerNextHandler>(null);
-	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
-	const { widthToWidest } = tableState as TableSharedStateInternal;
+	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+
+	// widthToWidest
+	const widthToWidestSelector = useSharedPluginStateSelector(
+		pluginInjectionApi,
+		'table.widthToWidest' as never,
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	) as TableSharedStateInternal['widthToWidest'];
+	const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? widthToWidestSelector
+		: (tableState as TableSharedStateInternal).widthToWidest;
 
 	// used to reposition tooltip when table is resizing via keyboard
 	const updateTooltip = React.useRef<() => void>();
@@ -254,9 +269,9 @@ export const TableResizer = ({
 	const excludeGuidelineConfig = useMemo(
 		() => ({
 			innerGuidelines: !!isTableAlignmentEnabled,
-			breakoutPoints: !!(isTableAlignmentEnabled && tableState?.isFullWidthModeEnabled),
+			breakoutPoints: !!(isTableAlignmentEnabled && isFullWidthModeEnabled),
 		}),
-		[tableState, isTableAlignmentEnabled],
+		[isFullWidthModeEnabled, isTableAlignmentEnabled],
 	);
 
 	const updateActiveGuidelines = useCallback(

package/src/tablePlugin.tsx

@@ -31,6 +31,7 @@ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Command, EditorPlugin, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import { 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';
@@ -873,8 +874,17 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			)(pluginConfig(options?.tableOptions)),
 		},
 		usePluginHook({ editorView }) {
-			const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
-			const mode = editorViewModeState?.mode;
+			const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
+				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+			});
+
+			// mode
+			const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+			});
+			const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+				? modeSelector
+				: editorViewModeState?.mode;
 
 			useEffect(() => {
 				const { state, dispatch } = editorView;

package/src/ui/DragHandle/index.tsx

@@ -11,11 +11,13 @@ 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';
 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';
@@ -327,10 +329,32 @@ const DragHandleComponentWithSharedState = ({
 	intl,
 	api,
 }: DragHandleWithSharedStateProps & WrappedComponentProps) => {
-	const { tableState } = useSharedPluginState(api, ['table']) as {
+	const { tableState } = useSharedPluginState(api, ['table'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	}) as {
 		tableState?: TableSharedStateInternal;
 	};
 
+	// hoveredColumns
+	const hoveredColumnsSelector = useSharedPluginStateSelector(
+		api,
+		'table.hoveredColumns' as never,
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	) as TableSharedStateInternal['hoveredColumns'];
+	const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredColumnsSelector
+		: tableState?.hoveredColumns;
+
+	// hoveredRows
+	const hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows' as never, {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	}) as TableSharedStateInternal['hoveredRows'];
+	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredRowsSelector
+		: tableState?.hoveredRows;
+
 	return (
 		<DragHandleComponent
 			isDragMenuTarget={isDragMenuTarget}
@@ -348,8 +372,8 @@ const DragHandleComponentWithSharedState = ({
 			onClick={onClick}
 			editorView={editorView}
 			intl={intl}
-			hoveredColumns={tableState?.hoveredColumns}
-			hoveredRows={tableState?.hoveredRows}
+			hoveredColumns={hoveredColumns}
+			hoveredRows={hoveredRows}
 		/>
 	);
 };

package/src/ui/global-styles.tsx

@@ -7,6 +7,8 @@ import { Global, jsx } from '@emotion/react';
 
 import { 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';
 
@@ -21,8 +23,18 @@ export const GlobalStylesWrapper = ({
 	isDragAndDropEnabledOption?: boolean;
 	api?: PluginInjectionAPI;
 }) => {
-	const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
-	const isLivePageViewMode = editorViewModeState?.mode === 'view';
+	// 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 isLivePageViewMode = mode === 'view';
 	return (
 		<Global
 			styles={tableStyles({