@atlaskit/editor-plugin-media 3.0.3 → 3.0.5

package/dist/es2019/ui/MediaPicker/DropzoneWrapper.js

@@ -1,27 +1,43 @@
 import React from 'react';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-export const DropzoneWrapper = ({
-  mediaState,
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const options = useSharedPluginStateSelector(api, 'media.options');
+  const handleDrag = useSharedPluginStateSelector(api, 'media.handleDrag');
+  return {
+    options,
+    handleDrag
+  };
+}, api => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  return {
+    options: mediaState === null || mediaState === void 0 ? void 0 : mediaState.options,
+    handleDrag: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleDrag
+  };
+});
+const DropzoneWrapperInternal = ({
+  api,
   isActive,
   featureFlags,
   editorDomElement,
-  appearance
-}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
-  mediaState: mediaState,
-  analyticsName: "dropzone"
-}, ({
+  appearance,
   mediaClientConfig,
   config,
   pickerFacadeInstance
 }) => {
   const {
-    options: {
-      customDropzoneContainer
-    },
+    options,
     handleDrag
-  } = mediaState;
+  } = useSharedState(api);
+  const {
+    customDropzoneContainer
+  } = options || {};
+
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   const editorHtmlElement = editorDomElement;
@@ -37,8 +53,31 @@ export const DropzoneWrapper = ({
     onError: pickerFacadeInstance.handleUploadError,
     onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
     onEnd: pickerFacadeInstance.handleReady,
-    onDragEnter: () => handleDrag('enter'),
-    onDragLeave: () => handleDrag('leave'),
+    onDragEnter: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('enter'),
+    onDragLeave: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('leave'),
     featureFlags: featureFlags
   }) : null;
-});
+};
+export const DropzoneWrapper = ({
+  api,
+  isActive,
+  featureFlags,
+  editorDomElement,
+  appearance
+}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
+  api: api,
+  analyticsName: "dropzone"
+}, ({
+  mediaClientConfig,
+  config,
+  pickerFacadeInstance
+}) => /*#__PURE__*/React.createElement(DropzoneWrapperInternal, {
+  api: api,
+  isActive: isActive,
+  featureFlags: featureFlags,
+  editorDomElement: editorDomElement,
+  appearance: appearance,
+  mediaClientConfig: mediaClientConfig,
+  config: config,
+  pickerFacadeInstance: pickerFacadeInstance
+}));

package/dist/es2019/ui/MediaPicker/PickerFacadeProvider.js

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../pm-plugins/picker-facade';
 const dummyMediaPickerObject = {
@@ -9,8 +11,31 @@ const dummyMediaPickerObject = {
   destroy: () => {},
   setUploadParams: () => {}
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const mediaProvider = useSharedPluginStateSelector(api, 'media.mediaProvider');
+  const mediaOptions = useSharedPluginStateSelector(api, 'media.mediaOptions');
+  const insertFile = useSharedPluginStateSelector(api, 'media.insertFile');
+  const options = useSharedPluginStateSelector(api, 'media.options');
+  return {
+    mediaProvider,
+    mediaOptions,
+    insertFile,
+    options
+  };
+}, api => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  const mediaProvider = useMemo(() => mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  return {
+    mediaProvider,
+    mediaOptions: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaOptions,
+    insertFile: mediaState === null || mediaState === void 0 ? void 0 : mediaState.insertFile,
+    options: mediaState === null || mediaState === void 0 ? void 0 : mediaState.options
+  };
+});
 export default function PickerFacadeProvider({
-  mediaState,
+  api,
   analyticsName,
   children
 }) {
@@ -19,10 +44,15 @@ export default function PickerFacadeProvider({
     config: undefined,
     mediaClientConfig: undefined
   });
-  const mediaProvider = useMemo(() => mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  const {
+    mediaProvider,
+    mediaOptions,
+    insertFile,
+    options
+  } = useSharedState(api);
   const handleMediaProvider = useCallback(async (_name, provider) => {
     const mediaProvider = await provider;
-    if (!mediaProvider || !mediaProvider.uploadParams) {
+    if (!mediaProvider || !mediaProvider.uploadParams || !insertFile) {
       return;
     }
     const resolvedMediaClientConfig = (await mediaProvider.uploadMediaClientConfig) || (await mediaProvider.viewMediaClientConfig);
@@ -31,11 +61,11 @@ export default function PickerFacadeProvider({
     }
     const pickerFacadeConfig = {
       mediaClientConfig: resolvedMediaClientConfig,
-      errorReporter: mediaState.options.errorReporter || new ErrorReporter(),
-      featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+      errorReporter: (options === null || options === void 0 ? void 0 : options.errorReporter) || new ErrorReporter(),
+      featureFlags: mediaOptions && mediaOptions.featureFlags
     };
     const pickerFacadeInstance = await new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
-    pickerFacadeInstance.onNewMedia(mediaState.insertFile);
+    pickerFacadeInstance.onNewMedia(insertFile);
     pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
     const config = {
       uploadParams: mediaProvider.uploadParams
@@ -47,7 +77,7 @@ export default function PickerFacadeProvider({
         mediaClientConfig: resolvedMediaClientConfig
       });
     });
-  }, [analyticsName, mediaState.insertFile, mediaState.mediaOptions, mediaState.options.errorReporter]);
+  }, [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
   useEffect(() => {
     if (mediaProvider) {
       handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));

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

@@ -1,35 +1,45 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BrowserWrapper } from './BrowserWrapper';
 import { ClipboardWrapper } from './ClipboardWrapper';
 import { DropzoneWrapper } from './DropzoneWrapper';
+const useMediaPickerState = sharedPluginStateHookMigratorFactory(api => {
+  const hasFocus = useSharedPluginStateSelector(api, 'focus.hasFocus');
+  const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const mediaOptions = useSharedPluginStateSelector(api, 'media.mediaOptions');
+  return {
+    hasFocus,
+    connectivityMode,
+    mediaOptions
+  };
+}, api => {
+  const {
+    focusState,
+    connectivityState,
+    mediaState
+  } = useSharedPluginState(api, ['focus', 'connectivity', 'media']);
+  return {
+    hasFocus: focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus,
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
+    mediaOptions: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaOptions
+  };
+});
 const MediaPicker = ({
   api,
   isPopupOpened,
   appearance,
-  mediaState,
   onBrowseFn,
   editorDomElement
 }) => {
   var _editorDom$parentElem;
   const {
-    focusState,
-    connectivityState
-  } = useSharedPluginState(api, ['focus', 'connectivity'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const hasFocusSelector = useSharedPluginStateSelector(api, 'focus.hasFocus', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const connectivityModeSelector = useSharedPluginStateSelector(api, 'connectivity.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hasFocus = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
-  const connectivityMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? connectivityModeSelector : connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode;
-  const featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
+    hasFocus,
+    connectivityMode,
+    mediaOptions
+  } = useMediaPickerState(api);
+  const featureFlags = mediaOptions && mediaOptions.featureFlags;
 
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -44,12 +54,12 @@ const MediaPicker = ({
    */
   const container = editorParent;
   const clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
-    mediaState: mediaState,
+    api: api,
     featureFlags: featureFlags,
     container: container
   }) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, clipboard, /*#__PURE__*/React.createElement(DropzoneWrapper, {
-    mediaState: mediaState,
+    api: api,
     isActive: !isPopupOpened &&
     // If we're offline don't show the dropzone
     connectivityMode !== 'offline',
@@ -57,8 +67,8 @@ const MediaPicker = ({
     editorDomElement: editorDomElement,
     appearance: appearance
   }), /*#__PURE__*/React.createElement(BrowserWrapper, {
+    api: api,
     onBrowseFn: onBrowseFn,
-    mediaState: mediaState,
     featureFlags: featureFlags
   }));
 };
@@ -72,16 +82,16 @@ export class MediaPickerComponents extends React.Component {
     });
     _defineProperty(this, "onBrowseFn", nativeBrowseFn => {
       const {
-        mediaState
+        setBrowseFn
       } = this.props;
-      mediaState && mediaState.setBrowseFn(nativeBrowseFn);
+      setBrowseFn(nativeBrowseFn);
     });
   }
   componentDidMount() {
     const {
-      mediaState
+      onPopupToggle
     } = this.props;
-    mediaState.onPopupToggle(isPopupOpened => {
+    onPopupToggle(isPopupOpened => {
       this.setState({
         isPopupOpened
       });
@@ -90,7 +100,6 @@ export class MediaPickerComponents extends React.Component {
   render() {
     const {
       api,
-      mediaState,
       editorDomElement,
       appearance
     } = this.props;
@@ -98,7 +107,6 @@ export class MediaPickerComponents extends React.Component {
       isPopupOpened
     } = this.state;
     return /*#__PURE__*/React.createElement(MediaPicker, {
-      mediaState: mediaState,
       editorDomElement: editorDomElement,
       appearance: appearance,
       isPopupOpened: isPopupOpened,

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

@@ -1,15 +1,30 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarMediaMessages } from '@atlaskit/editor-common/media';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import AttachmentIcon from '@atlaskit/icon/core/migration/attachment--editor-attachment';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const onClickMediaButton = showMediaPicker => () => {
   showMediaPicker();
   return true;
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const allowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
+  const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
+  return {
+    allowsUploads,
+    showMediaPicker
+  };
+}, api => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  return {
+    allowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
+    showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker
+  };
+});
 const ToolbarMedia = ({
   isDisabled,
   isReducedSpacing,
@@ -17,18 +32,9 @@ const ToolbarMedia = ({
   api
 }) => {
   const {
-    mediaState
-  } = useSharedPluginState(api, ['media'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const allowsUploadsSelector = useSharedPluginStateSelector(api, 'media.allowsUploads', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const showMediaPickerSelector = useSharedPluginStateSelector(api, 'media.showMediaPicker', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const allowsUploads = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
-  const showMediaPicker = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? showMediaPickerSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker;
+    allowsUploads,
+    showMediaPicker
+  } = useSharedState(api);
   if (!allowsUploads || !showMediaPicker) {
     return null;
   }

package/dist/es2019/ui/hooks/useMediaProvider.js

@@ -1,17 +1,23 @@
 import { useMemo } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-export const useMediaProvider = pluginInjectionApi => {
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const mediaProvider = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider');
+  return {
+    mediaProvider
+  };
+}, pluginInjectionApi => {
   const {
     mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['media'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  } = useSharedPluginState(pluginInjectionApi, ['media']);
+  return {
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider
+  };
+});
+export const useMediaProvider = pluginInjectionApi => {
+  const {
+    mediaProvider
+  } = useSharedState(pluginInjectionApi);
   const provider = useMemo(() => {
     return mediaProvider;
   }, [mediaProvider]);

package/dist/esm/mediaPlugin.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -33,45 +33,66 @@ import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import { floatingToolbar as _floatingToolbar } from './ui/toolbar';
 import ToolbarMedia from './ui/ToolbarMedia';
+var useMediaPickerSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var onPopupToggle = useSharedPluginStateSelector(api, 'media.onPopupToggle');
+  var setBrowseFn = useSharedPluginStateSelector(api, 'media.setBrowseFn');
+  return {
+    onPopupToggle: onPopupToggle,
+    setBrowseFn: setBrowseFn
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  return {
+    onPopupToggle: mediaState === null || mediaState === void 0 ? void 0 : mediaState.onPopupToggle,
+    setBrowseFn: mediaState === null || mediaState === void 0 ? void 0 : mediaState.setBrowseFn
+  };
+});
 var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
   var api = _ref.api,
     editorDomElement = _ref.editorDomElement,
     appearance = _ref.appearance;
-  var _useSharedPluginState = useSharedPluginState(api, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
-  if (!mediaState) {
+  var _useMediaPickerShared = useMediaPickerSharedState(api),
+    onPopupToggle = _useMediaPickerShared.onPopupToggle,
+    setBrowseFn = _useMediaPickerShared.setBrowseFn;
+  if (!onPopupToggle || !setBrowseFn) {
     return null;
   }
   return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    onPopupToggle: onPopupToggle,
+    setBrowseFn: setBrowseFn,
     editorDomElement: editorDomElement,
-    mediaState: mediaState,
     appearance: appearance,
     api: api
   });
 };
+var useMediaViewerSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var isMediaViewerVisible = useSharedPluginStateSelector(api, 'media.isMediaViewerVisible');
+  var mediaViewerSelectedMedia = useSharedPluginStateSelector(api, 'media.mediaViewerSelectedMedia');
+  var mediaClientConfig = useSharedPluginStateSelector(api, 'media.mediaClientConfig');
+  return {
+    isMediaViewerVisible: isMediaViewerVisible,
+    mediaViewerSelectedMedia: mediaViewerSelectedMedia,
+    mediaClientConfig: mediaClientConfig
+  };
+}, function (api) {
+  var _useSharedPluginState2 = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
+  return {
+    isMediaViewerVisible: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible,
+    mediaViewerSelectedMedia: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia,
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig
+  };
+});
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
   var api = _ref2.api,
     editorView = _ref2.editorView;
-  var _useSharedPluginState2 = useSharedPluginState(api, ['media'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    mediaState = _useSharedPluginState2.mediaState;
-  var isMediaViewerVisibleSelector = useSharedPluginStateSelector(api, 'media.isMediaViewerVisible', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaViewerSelectedMediaSelector = useSharedPluginStateSelector(api, 'media.mediaViewerSelectedMedia', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isMediaViewerVisible = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMediaViewerVisibleSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible;
-  var mediaViewerSelectedMedia = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaViewerSelectedMediaSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia;
-  var mediaClientConfig = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
-
   // Only traverse document once when media viewer is visible, media viewer items will not update
   // when document changes are made while media viewer is open
-
+  var _useMediaViewerShared = useMediaViewerSharedState(api),
+    isMediaViewerVisible = _useMediaViewerShared.isMediaViewerVisible,
+    mediaViewerSelectedMedia = _useMediaViewerShared.mediaViewerSelectedMedia,
+    mediaClientConfig = _useMediaViewerShared.mediaClientConfig;
   var mediaItems = useMemo(function () {
     if (isMediaViewerVisible) {
       var mediaNodes = extractMediaNodes(editorView.state.doc);

package/dist/esm/nodeviews/mediaGroup.js

@@ -12,7 +12,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { nodeViewsMessages as messages } from '@atlaskit/editor-common/media';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -302,26 +302,30 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
 _defineProperty(MediaGroup, "displayName", 'MediaGroup');
 var IntlMediaGroup = injectIntl(MediaGroup);
 export default IntlMediaGroup;
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var editorDisabled = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    editorDisabled: editorDisabled,
+    editorViewMode: editorViewMode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
+    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
+  return {
+    editorDisabled: editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled,
+    editorViewMode: editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode
+  };
+});
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
-    editorViewModePlugin = _useSharedPluginState.editorViewModeState;
-  var editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var editorViewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled;
-  var editorViewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    editorDisabled = _useSharedState.editorDisabled,
+    editorViewMode = _useSharedState.editorViewMode;
   var mediaProvider = useMediaProvider(pluginInjectionApi);
   return renderFn({
-    editorDisabledPlugin: editorDisabledPlugin,
-    editorViewModePlugin: editorViewModePlugin,
     editorDisabled: editorDisabled,
     editorViewMode: editorViewMode,
     mediaProvider: mediaProvider
@@ -347,9 +351,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
         renderNode: function renderNode(_ref4) {
           var contextIdentifierProvider = _ref4.contextIdentifierProvider;
           var renderFn = function renderFn(_ref5) {
-            var editorDisabledPlugin = _ref5.editorDisabledPlugin,
-              editorViewModePlugin = _ref5.editorViewModePlugin,
-              mediaProviderFromState = _ref5.mediaProvider,
+            var mediaProviderFromState = _ref5.mediaProvider,
               editorDisabled = _ref5.editorDisabled,
               editorViewMode = _ref5.editorViewMode;
             var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
@@ -378,7 +380,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               getPos: getPos,
               view: _this3.view,
               forwardRef: forwardRef,
-              disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
+              disabled: editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -386,7 +388,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               anchorPos: _this3.view.state.selection.$anchor.pos,
               headPos: _this3.view.state.selection.$head.pos,
               mediaOptions: mediaOptions,
-              editorViewMode: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewMode === 'view' : (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              editorViewMode: editorViewMode === 'view'
             });
           };
           return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {