@atlaskit/editor-plugin-table 10.9.19 → 10.9.21

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/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`
@@ -678,16 +690,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;

package/dist/esm/ui/ContentComponent.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -27,71 +26,29 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
-  var resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  var resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
+  var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef');
+  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+  var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest');
+  var tableNode = useInternalTablePluginStateSelector(api, 'tableNode');
+  var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition');
+  var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen');
+  var tableRef = useInternalTablePluginStateSelector(api, 'tableRef');
+  var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig');
+  var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex');
+  var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex');
+  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled');
+  var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget');
+  var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
   var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
     allowControls = _ref2.allowControls;
-  var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
+  var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader');
+  var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
+  var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
+  var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,

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

@@ -7,13 +7,12 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { 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';
@@ -245,6 +244,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var hoveredColumns = useInternalTablePluginStateSelector(api, 'hoveredColumns');
+  var hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  return {
+    hoveredColumns: hoveredColumns,
+    hoveredRows: hoveredRows
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var tableStateInternal = tableState;
+  return {
+    hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,
+    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows
+  };
+});
 var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedState(_ref5) {
   var isDragMenuTarget = _ref5.isDragMenuTarget,
     tableLocalId = _ref5.tableLocalId,
@@ -262,22 +277,9 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     editorView = _ref5.editorView,
     intl = _ref5.intl,
     api = _ref5.api;
-  var _ref6 = useSharedPluginState(api, ['table'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    tableState = _ref6.tableState;
-
-  // hoveredColumns
-  var hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
-
-  // hoveredRows
-  var hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
+  var _useSharedState = useSharedState(api),
+    hoveredColumns = _useSharedState.hoveredColumns,
+    hoveredRows = _useSharedState.hoveredRows;
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,