@atlaskit/editor-plugin-media 3.0.3 → 3.0.4

package/dist/es2019/nodeviews/mediaInline.js

@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
@@ -14,7 +14,6 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isImage } from '../pm-plugins/utils/is-type';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -155,6 +154,41 @@ export const MediaInline = props => {
     mediaClientConfig: viewMediaClientConfig
   }));
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const viewMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const mediaProvider = useSharedPluginStateSelector(api, 'media.mediaProvider');
+  const handleMediaNodeMount = useSharedPluginStateSelector(api, 'media.handleMediaNodeMount');
+  const handleMediaNodeUnmount = useSharedPluginStateSelector(api, 'media.handleMediaNodeUnmount');
+  const allowInlineImages = useSharedPluginStateSelector(api, 'media.allowInlineImages');
+  const addPendingTask = useSharedPluginStateSelector(api, 'media.addPendingTask');
+  const selectedMediaContainerNode = useSharedPluginStateSelector(api, 'media.selectedMediaContainerNode');
+  const mediaClientConfig = useSharedPluginStateSelector(api, 'media.mediaClientConfig');
+  return {
+    viewMode,
+    mediaProvider,
+    handleMediaNodeMount,
+    handleMediaNodeUnmount,
+    allowInlineImages,
+    addPendingTask,
+    selectedMediaContainerNode,
+    mediaClientConfig
+  };
+}, api => {
+  const {
+    editorViewModeState,
+    mediaState
+  } = useSharedPluginState(api, ['editorViewMode', 'media']);
+  return {
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    handleMediaNodeMount: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount,
+    handleMediaNodeUnmount: mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount,
+    allowInlineImages: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages,
+    addPendingTask: mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask,
+    selectedMediaContainerNode: mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode,
+    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig
+  };
+});
 const MediaInlineSharedState = ({
   identifier,
   node,
@@ -165,43 +199,15 @@ const MediaInlineSharedState = ({
   view
 }) => {
   const {
-    editorViewModeState,
-    mediaState
-  } = useSharedPluginState(api, ['editorViewMode', 'media'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const viewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mediaProviderSelector = useSharedPluginStateSelector(api, 'media.mediaProvider', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const handleMediaNodeMountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeMount', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const handleMediaNodeUnmountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeUnmount', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const allowInlineImagesSelector = useSharedPluginStateSelector(api, 'media.allowInlineImages', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const addPendingTaskSelector = useSharedPluginStateSelector(api, 'media.addPendingTask', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selectedMediaContainerNodeSelector = useSharedPluginStateSelector(api, 'media.selectedMediaContainerNode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-  const mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  const handleMediaNodeMount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeMountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount;
-  const handleMediaNodeUnmount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeUnmountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount;
-  const allowInlineImages = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowInlineImagesSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages;
-  const addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
-  const selectedMediaContainerNode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedMediaContainerNodeSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode;
-  const mediaClientConfig = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
+    mediaProvider,
+    allowInlineImages,
+    handleMediaNodeMount,
+    handleMediaNodeUnmount,
+    addPendingTask,
+    selectedMediaContainerNode,
+    mediaClientConfig,
+    viewMode
+  } = useSharedState(api);
   const newMediaProvider = useMemo(() => mediaProvider ? Promise.resolve(mediaProvider) : undefined, [mediaProvider]);
   if (!handleMediaNodeMount || !handleMediaNodeUnmount || !addPendingTask || !selectedMediaContainerNode || !mediaClientConfig || !newMediaProvider) {
     return null;

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -1,33 +1,43 @@
 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 { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import MediaNode from './media';
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const mediaProvider = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider');
+  return {
+    mediaProvider,
+    widthState: undefined
+  };
+}, pluginInjectionApi => {
+  const {
+    widthState,
+    mediaState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
+  return {
+    mediaProvider: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    widthState
+  };
+});
 const MediaNodeWithProviders = ({
   pluginInjectionApi,
   innerComponent
 }) => {
   const {
-    widthState,
-    mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['width', '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;
+    mediaProvider,
+    widthState
+  } = useSharedState(pluginInjectionApi);
   return innerComponent({
-    width: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthState : undefined,
+    width: widthState,
+    // Remove when platform_editor_usesharedpluginstateselector is cleaned up
     mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined
   });
 };

package/dist/es2019/nodeviews/mediaSingle.js

@@ -10,7 +10,7 @@ import React, { Component, Fragment, useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -23,7 +23,6 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
@@ -464,6 +463,44 @@ _defineProperty(MediaSingleNode, "defaultProps", {
   mediaOptions: {}
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const mediaProviderPromise = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider');
+  const addPendingTask = useSharedPluginStateSelector(pluginInjectionApi, 'media.addPendingTask');
+  const isDrafting = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.isDrafting');
+  const targetNodeId = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.targetNodeId');
+  const width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  const lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  const editorDisabled = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  const viewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mediaProviderPromise,
+    addPendingTask,
+    isDrafting,
+    targetNodeId,
+    width,
+    lineLength,
+    editorDisabled,
+    viewMode
+  };
+}, pluginInjectionApi => {
+  const {
+    widthState,
+    mediaState,
+    annotationState,
+    editorDisabledState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
+  return {
+    mediaProviderPromise: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider,
+    addPendingTask: mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask,
+    isDrafting: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting,
+    targetNodeId: annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId,
+    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 const MediaSingleNodeWrapper = ({
   pluginInjectionApi,
   contextIdentifierProvider,
@@ -479,48 +516,17 @@ const MediaSingleNodeWrapper = ({
   editorAppearance
 }) => {
   const {
-    widthState,
-    mediaState,
-    annotationState,
-    editorDisabledState,
-    editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const addPendingTaskSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.addPendingTask', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isDraftingSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.isDrafting', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const targetNodeIdSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.targetNodeId', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const widthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.width', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const lineLengthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const viewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mediaProviderState = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  const addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
-  const isDrafting = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraftingSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting;
-  const targetNodeId = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? targetNodeIdSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId;
-  const width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
-  const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
-  const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
-  const viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+    mediaProviderPromise,
+    addPendingTask,
+    isDrafting,
+    targetNodeId,
+    width,
+    lineLength,
+    editorDisabled,
+    viewMode
+  } = useSharedState(pluginInjectionApi);
   const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
-  const mediaProvider = useMemo(() => mediaProviderState ? Promise.resolve(mediaProviderState) : undefined, [mediaProviderState]);
+  const mediaProvider = useMemo(() => mediaProviderPromise ? Promise.resolve(mediaProviderPromise) : undefined, [mediaProviderPromise]);
   const isSelectedAndInteracted = useCallback(() => Boolean(selected() && hasHadInteraction !== false), [hasHadInteraction, selected]);
   if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {

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

@@ -1,10 +1,28 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CommentBadge as CommentBadgeComponent, CommentBadgeNext } from '@atlaskit/editor-common/media-single';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const selectedAnnotations = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations');
+  const isInlineCommentViewClosed = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed');
+  const annotations = useSharedPluginStateSelector(api, 'annotation.annotations');
+  return {
+    selectedAnnotations,
+    isInlineCommentViewClosed,
+    annotations
+  };
+}, api => {
+  const {
+    annotationState
+  } = useSharedPluginState(api, ['annotation']);
+  return {
+    selectedAnnotations: annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations,
+    isInlineCommentViewClosed: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed,
+    annotations: annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations
+  };
+});
 const CommentBadgeWrapper = ({
   api,
   mediaNode,
@@ -14,24 +32,12 @@ const CommentBadgeWrapper = ({
   isDrafting,
   badgeOffsetRight
 }) => {
-  const [entered, setEntered] = useState(false);
   const {
-    annotationState
-  } = useSharedPluginState(api, ['annotation'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
-  const isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
-  const annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
+    selectedAnnotations,
+    isInlineCommentViewClosed,
+    annotations
+  } = useSharedState(api);
+  const [entered, setEntered] = useState(false);
   const {
     state: {
       schema: {
@@ -102,22 +108,10 @@ export const CommentBadgeNextWrapper = ({
 }) => {
   const [entered, setEntered] = useState(false);
   const {
-    annotationState
-  } = useSharedPluginState(api, ['annotation'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
-  const isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
-  const annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
+    selectedAnnotations,
+    isInlineCommentViewClosed,
+    annotations
+  } = useSharedState(api);
   const {
     state: {
       schema: {

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

@@ -2,12 +2,12 @@ import React from 'react';
 import { Browser } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
 export const BrowserWrapper = ({
-  mediaState,
+  api,
   isOpen,
   onBrowseFn,
   featureFlags
 }) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
-  mediaState: mediaState,
+  api: api,
   analyticsName: "browser"
 }, ({
   mediaClientConfig,

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { Clipboard } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
 export const ClipboardWrapper = ({
-  mediaState,
-  featureFlags,
-  container
+  api,
+  container,
+  featureFlags
 }) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
-  mediaState: mediaState,
+  api: api,
   analyticsName: "clipboard"
 }, ({
   mediaClientConfig,

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));