@atlaskit/editor-plugin-table 10.9.4 → 10.9.5

package/CHANGELOG.md

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

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

@@ -8,10 +8,12 @@ exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
@@ -50,8 +52,16 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+
+  // selection
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.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
@@ -62,7 +72,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = (0, _rowControls.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
+  var selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var rowControlStickyTop = 45;

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

@@ -11,7 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
 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 _utils = require("@atlaskit/editor-tables/utils");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -65,8 +67,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // selection
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -78,15 +87,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     (0, _commands.clearHoverSelection)()(state, dispatch);
   };
   var isActive = (0, _react.useMemo)(function () {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    var table = (0, _utils.findTable)(selectionState.selection);
+    var table = (0, _utils.findTable)(selection);
     if (!table) {
       return false;
     }
-    return (0, _utils.isTableSelected)(selectionState.selection);
-  }, [selectionState]);
+    return (0, _utils.isTableSelected)(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingControlsWithSelection = void 0;
 var _react = _interopRequireDefault(require("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 _ClassicCornerControls = require("./CornerControls/ClassicCornerControls");
 var _ClassicControls = require("./RowControls/ClassicControls");
 var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
@@ -22,8 +24,15 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // selection
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ClassicCornerControls.CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -34,7 +43,7 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     hoveredRows: hoveredRows,
     stickyTop: tableActive ? stickyTop : undefined
   }), /*#__PURE__*/_react.default.createElement(_ClassicControls.RowControls, {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    selection: selection,
     editorView: editorView,
     tableRef: tableRef,
     hoverRows: hoverRows,

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -148,7 +148,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           }
         }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
         /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
         _react.default.createElement("div", {
           // Ignored via go/ees005
           // eslint-disable-next-line react/no-array-index-key

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

@@ -9,10 +9,12 @@ exports.DragControlsWithSelection = exports.DragControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _pluginFactory = require("../../../pm-plugins/plugin-factory");
@@ -302,8 +304,15 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection']),
+  // selection
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['selection'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     selectionState = _useSharedPluginState.selectionState;
+  var selectionsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/_react.default.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -319,6 +328,6 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -8,10 +8,20 @@ exports.SortingIconWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _table = require("@atlaskit/editor-common/table");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+
+  // mode
+  var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(props.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;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

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

@@ -3,10 +3,12 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { 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';
@@ -42,9 +44,17 @@ export const ColumnControls = ({
 }) => {
   var _colWidths$map$join;
   const columnControlsRef = useRef(null);
+
+  // selection
   const {
     selectionState
-  } = useSharedPluginState(api, ['selection']);
+  } = useSharedPluginState(api, ['selection'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width =>
   // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
   // we need to reduce the width by 1px to avoid misalignment of column controls.
@@ -52,7 +62,7 @@ export const ColumnControls = ({
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  const selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
+  const selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const rowControlStickyTop = 45;

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

@@ -3,7 +3,9 @@ import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 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 { 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';
 const DragCornerControlsComponent = ({
@@ -67,9 +69,16 @@ const DragCornerControlsComponentWithSelection = ({
   },
   api
 }) => {
+  // selection
   const {
     selectionState
-  } = useSharedPluginState(api, ['selection']);
+  } = useSharedPluginState(api, ['selection'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   const handleOnClick = () => {
     const {
       state,
@@ -85,15 +94,15 @@ const DragCornerControlsComponentWithSelection = ({
     clearHoverSelection()(state, dispatch);
   };
   const isActive = useMemo(() => {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    const table = findTable(selectionState.selection);
+    const table = findTable(selection);
     if (!table) {
       return false;
     }
-    return isTableSelected(selectionState.selection);
-  }, [selectionState]);
+    return isTableSelected(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

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

@@ -1,5 +1,7 @@
 import React from '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 { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
 export const FloatingControlsWithSelection = ({
@@ -16,9 +18,16 @@ export const FloatingControlsWithSelection = ({
   tableActive,
   api
 }) => {
+  // selection
   const {
     selectionState
-  } = useSharedPluginState(api, ['selection']);
+  } = useSharedPluginState(api, ['selection'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -29,7 +38,7 @@ export const FloatingControlsWithSelection = ({
     hoveredRows: hoveredRows,
     stickyTop: tableActive ? stickyTop : undefined
   }), /*#__PURE__*/React.createElement(RowControls, {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    selection: selection,
     editorView: editorView,
     tableRef: tableRef,
     hoverRows: hoverRows,

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -133,7 +133,7 @@ export default class NumberColumn extends Component {
       onMouseOver: () => updateCellHoverLocation(index)
     }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
     /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     React.createElement("div", {
       // Ignored via go/ees005
       // eslint-disable-next-line react/no-array-index-key

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

@@ -2,10 +2,12 @@
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { 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';
@@ -291,9 +293,16 @@ export const DragControlsWithSelection = ({
   updateCellHoverLocation,
   api
 }) => {
+  // selection
   const {
     selectionState
-  } = useSharedPluginState(api, ['selection']);
+  } = useSharedPluginState(api, ['selection'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionsSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -309,6 +318,6 @@ export const DragControlsWithSelection = ({
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -1,11 +1,21 @@
 import React from 'react';
 import { 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 const SortingIconWrapper = props => {
   const {
     editorViewModeState
-  } = useSharedPluginState(props.api, ['editorViewMode']);
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+  } = useSharedPluginState(props.api, ['editorViewMode'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // mode
+  const modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

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

@@ -3,10 +3,12 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { 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';
@@ -41,8 +43,16 @@ export var ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = useRef(null);
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+
+  // 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 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
@@ -53,7 +63,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   // TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
-  var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
+  var selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var rowControlStickyTop = 45;

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

@@ -3,7 +3,9 @@ import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 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 { 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) {
@@ -55,8 +57,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     isResizing = _ref2.isResizing,
     formatMessage = _ref2.intl.formatMessage,
     api = _ref2.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // 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 handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -68,15 +77,15 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     clearHoverSelection()(state, dispatch);
   };
   var isActive = useMemo(function () {
-    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+    if (!selection) {
       return;
     }
-    var table = findTable(selectionState.selection);
+    var table = findTable(selection);
     if (!table) {
       return false;
     }
-    return isTableSelected(selectionState.selection);
-  }, [selectionState]);
+    return isTableSelected(selection);
+  }, [selection]);
   if (isResizing) {
     return null;
   }

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

@@ -1,5 +1,7 @@
 import React from '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 { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
 export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
@@ -15,8 +17,15 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // 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;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -27,7 +36,7 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     hoveredRows: hoveredRows,
     stickyTop: tableActive ? stickyTop : undefined
   }), /*#__PURE__*/React.createElement(RowControls, {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    selection: selection,
     editorView: editorView,
     tableRef: tableRef,
     hoverRows: hoverRows,

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -138,7 +138,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           }
         }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
         /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
         React.createElement("div", {
           // Ignored via go/ees005
           // eslint-disable-next-line react/no-array-index-key

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

@@ -3,10 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { 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';
@@ -292,8 +294,15 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['selection']),
+  // 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;
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,
@@ -309,6 +318,6 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows: selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+    selection: selection
   });
 };

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

@@ -1,10 +1,20 @@
 import React from 'react';
 import { 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']),
+  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+
+  // 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;
+  if (mode === 'edit') {
     return null;
   }
   // Ignored via go/ees005

package/package.json

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

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

@@ -5,12 +5,14 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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,
@@ -76,7 +78,17 @@ export const ColumnControls = ({
 	api,
 }: ColumnControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
 	const columnControlsRef = useRef<HTMLDivElement>(null);
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	const widths =
 		colWidths
@@ -89,15 +101,13 @@ export const ColumnControls = ({
 	// TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
 	const columnParams = getRowsParams(colWidths ?? []);
 	const colIndex = hoveredCell?.colIndex;
-	const selectedColIndexes = getSelectedColumns(
-		selectionState?.selection || editorView.state.selection,
-	);
+	const selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
 
 	const firstRow = tableRef.querySelector('tr');
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = 45;
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl-next';
 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 { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import type { TablePlugin } from '../../../tablePluginType';
@@ -71,7 +73,16 @@ const DragCornerControlsComponentWithSelection = ({
 	intl: { formatMessage },
 	api,
 }: CornerControlProps & WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	const handleOnClick = () => {
 		const { state, dispatch } = editorView;
@@ -83,15 +94,15 @@ const DragCornerControlsComponentWithSelection = ({
 		clearHoverSelection()(state, dispatch);
 	};
 	const isActive = useMemo(() => {
-		if (!selectionState?.selection) {
+		if (!selection) {
 			return;
 		}
-		const table = findTable(selectionState.selection);
+		const table = findTable(selection);
 		if (!table) {
 			return false;
 		}
-		return isTableSelected(selectionState.selection);
-	}, [selectionState]);
+		return isTableSelected(selection);
+	}, [selection]);
 
 	if (isResizing) {
 		return null;

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -38,7 +40,16 @@ export const FloatingControlsWithSelection = ({
 	tableActive,
 	api,
 }: FloatingControlsWithSelectionProps) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	return (
 		<>
@@ -53,7 +64,7 @@ export const FloatingControlsWithSelection = ({
 				stickyTop={tableActive ? stickyTop : undefined}
 			/>
 			<RowControls
-				selection={selectionState?.selection}
+				selection={selection}
 				editorView={editorView}
 				tableRef={tableRef}
 				hoverRows={hoverRows}

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -66,7 +66,7 @@ export default class NumberColumn extends Component<Props, any> {
 							{hasHeaderRow ? (index > 0 ? index : null) : index + 1}
 						</div>
 					) : (
-						// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+						// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
 						<div
 							// Ignored via go/ees005
 							// eslint-disable-next-line react/no-array-index-key
@@ -103,10 +103,10 @@ export default class NumberColumn extends Component<Props, any> {
 			const newPos =
 				selection.head > pos
 					? // Selection is after table
-						// nodeSize - 3 will move the position inside last table cell
-						Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
+					// nodeSize - 3 will move the position inside last table cell
+					Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
 					: // Selection is before table
-						Selection.near($pos);
+					Selection.near($pos);
 			editorView.dispatch(tr.setSelection(newPos));
 		}
 		selectRow(index, event.shiftKey);

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

@@ -4,6 +4,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -11,6 +12,7 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -385,7 +387,16 @@ export const DragControlsWithSelection = ({
 	updateCellHoverLocation,
 	api,
 }: Exclude<DragControlsProps, 'selection'>) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	return (
 		<DragControls
@@ -403,7 +414,7 @@ export const DragControlsWithSelection = ({
 			selectRows={selectRows}
 			updateCellHoverLocation={updateCellHoverLocation}
 			api={api}
-			selection={selectionState?.selection}
+			selection={selection}
 		/>
 	);
 };

package/src/ui/icons/SortingIconWrapper.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -12,8 +14,19 @@ type SortingIconWrapperProps = SortingIconProps & {
 };
 
 export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
-	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode']);
-	if (editorViewModeState?.mode === 'edit') {
+	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+
+	// mode
+	const modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? modeSelector
+		: editorViewModeState?.mode;
+
+	if (mode === 'edit') {
 		return null;
 	}
 	// Ignored via go/ees005