@atlaskit/editor-core 209.2.1 → 209.2.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-core
 
+## 209.2.2
+
+### Patch Changes
+
+- [#189737](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189737)
+  [`db61cedd893b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db61cedd893b2) -
+  Fix migrator hook order in editor-core
+- Updated dependencies
+
 ## 209.2.1
 
 ### Patch Changes

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
@@ -113,11 +112,14 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
   });
 }, _EditorContentContainer.default, ContentArea);
 var useEditorViewModePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, function (pluginInjectionApi) {
-  return (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -205,18 +207,21 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 (0, _defineProperty2.default)(Editor, "displayName", 'ChromelessEditorAppearance');
 var useMaxContentSizePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
-  return {
-    maxContentSizeState: maxContentSizeState
-  };
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  var maxContentSizeReached = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['maxContentSize'], function (states) {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
     }
   };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  return {
+    maxContentSizeState: maxContentSizeState
+  };
 });
 function RenderWithPluginState(_ref2) {
   var renderChrome = _ref2.renderChrome,

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -20,7 +20,6 @@ var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -120,11 +119,17 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
   });
 }, _EditorContentContainer.default, ContentArea);
 var useCommentEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  return (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
+      var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+      return {
+        maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    maxContentSizeReached = _useSharedPluginState.maxContentSizeReached,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
@@ -136,6 +141,8 @@ var useCommentEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFact
       mode: editorViewMode
     }
   };
+}, function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
@@ -144,8 +151,8 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
   var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
   var intl = (0, _reactIntlNext.useIntl)();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -68,17 +68,17 @@ var hasCustomComponents = function hasCustomComponents(components) {
   return true;
 };
 var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var _sharedState$interact;
-  var sharedState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, function (pluginInjectionApi) {
-  var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
-  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
+      var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+      return {
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    interactionState = _useSharedPluginState.interactionState,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -88,6 +88,14 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
     },
     interactionState: interactionState
   };
+}, function (pluginInjectionApi) {
+  var _sharedState$interact;
+  var sharedState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -20,7 +20,6 @@ var _Transition = _interopRequireDefault(require("react-transition-group/Transit
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -180,11 +179,14 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 }(_react.default.PureComponent);
 var useContextPanelSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['contextPanel'], function (states) {
+    var _states$contextPanelS;
+    return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['contextPanel']),
     contextPanelState = _useSharedPluginState.contextPanelState;
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, function (pluginInjectionApi) {
-  return (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'contextPanel.contents');
 });
 var SwappableContentArea = exports.SwappableContentArea = (0, _reactIntlNext.injectIntl)(SwappableContentAreaInner);
 function ContextPanel(props) {

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "209.2.0";
+var version = exports.version = "209.2.1";

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -7,8 +7,7 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -98,12 +97,15 @@ const EditorContainer = componentWithCondition(() => editorExperiment('platform_
   exposure: true
 }), EditorContentContainer, ContentArea);
 const useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], states => {
+    var _states$editorViewMod;
+    return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, pluginInjectionApi => {
   const {
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, pluginInjectionApi => {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -180,19 +182,22 @@ export default class Editor extends React.Component {
 }
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 const useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const maxContentSizeReached = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize'], states => {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 ? void 0 : (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached
+    }
+  };
+}, pluginInjectionApi => {
   const {
     maxContentSizeState
   } = useSharedPluginState(pluginInjectionApi, ['maxContentSize']);
   return {
     maxContentSizeState
   };
-}, pluginInjectionApi => {
-  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  return {
-    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
-      maxContentSizeReached
-    }
-  };
 });
 function RenderWithPluginState({
   renderChrome,

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -10,12 +10,11 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -123,11 +122,18 @@ const EditorContainer = componentWithCondition(() => editorExperiment('platform_
   exposure: true
 }), EditorContentContainer, ContentArea);
 const useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, pluginInjectionApi => {
-  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  const {
+    maxContentSizeReached,
+    primaryToolbarComponents,
+    editorViewMode
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], states => {
+    var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+    return {
+      maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+      primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached
@@ -139,6 +145,8 @@ const useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(plugi
       mode: editorViewMode
     }
   };
+}, pluginInjectionApi => {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 export const CommentEditorWithIntl = props => {
   const {

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -52,17 +52,18 @@ const hasCustomComponents = components => {
   return true;
 };
 const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  var _sharedState$interact;
-  const sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, pluginInjectionApi => {
-  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  const {
+    interactionState,
+    primaryToolbarComponents,
+    editorViewMode
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], states => {
+    var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+    return {
+      primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+      interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -72,6 +73,14 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
     },
     interactionState
   };
+}, pluginInjectionApi => {
+  var _sharedState$interact;
+  const sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 export const FullPageEditor = props => {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -10,10 +10,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 const ANIM_SPEED_MS = 500;
@@ -157,12 +156,15 @@ class SwappableContentAreaInner extends React.PureComponent {
   }
 }
 const useContextPanelSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['contextPanel'], states => {
+    var _states$contextPanelS;
+    return states === null || states === void 0 ? void 0 : (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, pluginInjectionApi => {
   const {
     contextPanelState
   } = useSharedPluginState(pluginInjectionApi, ['contextPanel']);
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, pluginInjectionApi => {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
 });
 export const SwappableContentArea = injectIntl(SwappableContentAreaInner);
 export function ContextPanel(props) {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "209.2.0";
+export const version = "209.2.1";

package/dist/esm/ui/Appearance/Chromeless.js

@@ -14,8 +14,7 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -107,11 +106,14 @@ var EditorContainer = componentWithCondition(function () {
   });
 }, EditorContentContainer, ContentArea);
 var useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, function (pluginInjectionApi) {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -200,18 +202,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 export { Editor as default };
 var useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
-  return {
-    maxContentSizeState: maxContentSizeState
-  };
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  var maxContentSizeReached = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize'], function (states) {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
     }
   };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  return {
+    maxContentSizeState: maxContentSizeState
+  };
 });
 function RenderWithPluginState(_ref2) {
   var renderChrome = _ref2.renderChrome,

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -14,12 +14,11 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -112,11 +111,17 @@ var EditorContainer = componentWithCondition(function () {
   });
 }, EditorContentContainer, ContentArea);
 var useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
+      var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+      return {
+        maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    maxContentSizeReached = _useSharedPluginState.maxContentSizeReached,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
@@ -128,6 +133,8 @@ var useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(functio
       mode: editorViewMode
     }
   };
+}, function (pluginInjectionApi) {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
@@ -136,8 +143,8 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
   var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
+  var _useSharedPluginState2 = useSharedPluginState(editorAPI, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
   var intl = useIntl();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -58,17 +58,17 @@ var hasCustomComponents = function hasCustomComponents(components) {
   return true;
 };
 var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var _sharedState$interact;
-  var sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, function (pluginInjectionApi) {
-  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
+      var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+      return {
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    interactionState = _useSharedPluginState.interactionState,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -78,6 +78,14 @@ var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(functi
     },
     interactionState: interactionState
   };
+}, function (pluginInjectionApi) {
+  var _sharedState$interact;
+  var sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 export var FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -19,10 +19,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 var ANIM_SPEED_MS = 500;
@@ -175,11 +174,14 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 }(React.PureComponent);
 var useContextPanelSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['contextPanel'], function (states) {
+    var _states$contextPanelS;
+    return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['contextPanel']),
     contextPanelState = _useSharedPluginState.contextPanelState;
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, function (pluginInjectionApi) {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
 });
 export var SwappableContentArea = injectIntl(SwappableContentAreaInner);
 export function ContextPanel(props) {

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "209.2.0";
+export var version = "209.2.1";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "209.2.1",
+	"version": "209.2.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"