@atlaskit/editor-plugin-table 10.9.20 → 10.9.22

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -9,6 +9,79 @@ import TableComponent from './TableComponent';
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  // tableState
+  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  var ordering = useInternalTablePluginStateSelector(api, 'ordering');
+  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+  var isInDanger = useInternalTablePluginStateSelector(api, 'isInDanger');
+  var hoveredCell = useInternalTablePluginStateSelector(api, 'hoveredCell');
+  var hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  var isTableHovered = useInternalTablePluginStateSelector(api, 'isTableHovered');
+  var isWholeTableInDanger = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger');
+
+  // mediaState
+  var isFullscreen = useSharedPluginStateSelector(api, 'media.isFullscreen');
+
+  // selectionState
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+
+  // editorViewModeState
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+
+  // widthState
+  var width = useSharedPluginStateSelector(api, 'width.width');
+  var lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+  return {
+    tableState: undefined,
+    widthState: undefined,
+    isTableResizing: isTableResizing,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    ordering: ordering,
+    isResizing: isResizing,
+    isInDanger: isInDanger,
+    hoveredCell: hoveredCell,
+    hoveredRows: hoveredRows,
+    isTableHovered: isTableHovered,
+    isWholeTableInDanger: isWholeTableInDanger,
+    isFullscreen: isFullscreen,
+    selection: selection,
+    mode: mode,
+    width: width,
+    lineLength: lineLength
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+    widthState = _useSharedPluginState.widthState,
+    tableState = _useSharedPluginState.tableState,
+    mediaState = _useSharedPluginState.mediaState,
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var tableStateInternal = tableState;
+  return {
+    tableState: tableState,
+    widthState: widthState,
+    isTableResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableResizing,
+    isHeaderColumnEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderColumnEnabled,
+    isHeaderRowEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderRowEnabled,
+    ordering: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.ordering,
+    isResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isResizing,
+    isInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isInDanger,
+    hoveredCell: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredCell,
+    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows,
+    isTableHovered: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableHovered,
+    isWholeTableInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isWholeTableInDanger,
+    isFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+  };
+});
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -26,89 +99,29 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    widthState = _useSharedPluginState.widthState,
-    tableState = _useSharedPluginState.tableState,
-    mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isWholeTableInDangerSelector = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-
-  // mediaState
-  var isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
-
-  // selectionState
-  var selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
-
-  // editorViewModeState
-  var editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var _useSharedState = useSharedState(api),
+    tableState = _useSharedState.tableState,
+    widthState = _useSharedState.widthState,
+    mode = _useSharedState.mode,
+    hoveredCell = _useSharedState.hoveredCell,
+    hoveredRows = _useSharedState.hoveredRows,
+    isFullscreen = _useSharedState.isFullscreen,
+    isHeaderColumnEnabled = _useSharedState.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _useSharedState.isHeaderRowEnabled,
+    isInDanger = _useSharedState.isInDanger,
+    isResizing = _useSharedState.isResizing,
+    isTableHovered = _useSharedState.isTableHovered,
+    isTableResizing = _useSharedState.isTableResizing,
+    isWholeTableInDanger = _useSharedState.isWholeTableInDanger,
+    lineLength = _useSharedState.lineLength,
+    ordering = _useSharedState.ordering,
+    selection = _useSharedState.selection,
+    width = _useSharedState.width;
   var isLivePageViewMode = mode === 'view';
-
-  // widthState
-  var widthSelector = useSharedPluginStateSelector(api, 'width.width', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
-  var lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
   }
 
-  // tableState
-  var isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
-  var isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
-  var isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
-  var ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
-  var isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
-  var isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
-  var hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
-  var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
-  var isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
-  var isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
-
   /**
    *  ED-19810
    *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch

package/dist/esm/nodeviews/TableContainer.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, 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';
@@ -34,6 +34,23 @@ var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
+var useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
+  var wasFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled');
+  return {
+    tableState: undefined,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    wasFullWidthModeEnabled: wasFullWidthModeEnabled
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  return {
+    tableState: tableState,
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled
+  };
+});
 var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var node = _ref2.node,
     children = _ref2.children,
@@ -41,22 +58,10 @@ 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'], {
-      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;
+  var _useAlignmentStableCo = useAlignmentStableContainerSharedState(pluginInjectionApi),
+    tableState = _useAlignmentStableCo.tableState,
+    isFullWidthModeEnabled = _useAlignmentStableCo.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled = _useAlignmentStableCo.wasFullWidthModeEnabled;
   useEffect(function () {
     if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -115,6 +120,22 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     editorView: editorView
   }, children);
 };
+var useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
+  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    mode: mode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table', 'editorViewMode']),
+    tableState = _useSharedPluginState2.tableState,
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
+  return {
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
@@ -139,16 +160,9 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    tableState = _useSharedPluginState2.tableState;
-
-  // 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 _useResizeableTableCo = useResizeableTableContainerSharedState(pluginInjectionApi),
+    isFullWidthModeEnabled = _useResizeableTableCo.isFullWidthModeEnabled,
+    mode = _useResizeableTableCo.mode;
   var updateContainerHeight = useCallback(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -202,16 +216,6 @@ 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'], {
-      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
@@ -262,7 +266,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     onResizeStop: onResizeStop,
     isCommentEditor: isCommentEditor
   };
-  var isLivePageViewMode = (editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isLivePageViewMode = mode === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,

package/dist/esm/nodeviews/TableResizer.js

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -17,7 +17,6 @@ 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';
@@ -96,6 +95,19 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var widthToWidest = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest');
+  return {
+    widthToWidest: widthToWidest
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var tableStateInternal = tableState;
+  return {
+    widthToWidest: tableStateInternal.widthToWidest
+  };
+});
 export var TableResizer = function TableResizer(_ref) {
   var _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
@@ -127,16 +139,8 @@ export var TableResizer = function TableResizer(_ref) {
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    tableState = _useSharedPluginState.tableState;
-
-  // widthToWidest
-  var widthToWidestSelector = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    widthToWidest = _useSharedState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();

package/dist/esm/pm-plugins/main.js

@@ -211,19 +211,11 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
 
         // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
         // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-        } else {
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-        }
+        /** If a partial paste of table, paste only table's content */
+        slice = transformSliceToRemoveOpenTable(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/esm/tablePlugin.js

@@ -7,7 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TA
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
@@ -64,6 +64,18 @@ import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
+var useTableSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -107,6 +119,7 @@ var tablePlugin = function tablePlugin(_ref) {
       var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
       var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       var dragAndDropState = dragAndDropPluginKey.getState(editorState);
+      var sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -140,7 +153,9 @@ var tablePlugin = function tablePlugin(_ref) {
         stickyHeader: stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
+        isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
       };
       return sharedStateInternal;
     },
@@ -453,7 +468,8 @@ var tablePlugin = function tablePlugin(_ref) {
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+          isTableSelectorEnabled: isTableSelectorEnabled
         });
       }
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -482,6 +498,8 @@ var tablePlugin = function tablePlugin(_ref) {
             tableWidthPluginState = _ref21.tableWidthPluginState,
             dragAndDropState = _ref21.dragAndDropState,
             sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
+          // Any changes made inside `<WithPluginState>` need to be reflected in the
+          // `<ContentComponent>` as well.
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
@@ -678,16 +696,8 @@ var tablePlugin = function tablePlugin(_ref) {
     },
     usePluginHook: function usePluginHook(_ref24) {
       var editorView = _ref24.editorView;
-      var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode'], {
-          disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-        }),
-        editorViewModeState = _useSharedPluginState.editorViewModeState;
-
-      // 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;
+      var _useTableSharedState = useTableSharedState(api),
+        mode = _useTableSharedState.mode;
       useEffect(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;