@atlaskit/editor-plugin-table 10.9.4 → 10.9.6

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/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/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/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/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