@atlaskit/editor-plugin-media 2.6.7 → 2.7.1

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

@@ -10,10 +10,12 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _attachmentEditorAttachment = _interopRequireDefault(require("@atlaskit/icon/core/migration/attachment--editor-attachment"));
-var onClickMediaButton = function onClickMediaButton(pluginState) {
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var onClickMediaButton = function onClickMediaButton(showMediaPicker) {
   return function () {
-    pluginState.showMediaPicker();
+    showMediaPicker();
     return true;
   };
 };
@@ -22,15 +24,25 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     intl = _ref.intl,
     api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState.mediaState;
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+  var allowsUploadsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var showMediaPickerSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var allowsUploads = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
+  var showMediaPicker = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? showMediaPickerSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker;
+  if (!allowsUploads || !showMediaPicker) {
     return null;
   }
   var toolbarMediaTitle = _media.toolbarMediaMessages.toolbarMediaTitle;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     buttonId: _uiMenu.TOOLBAR_BUTTON.MEDIA,
-    onClick: onClickMediaButton(mediaState),
+    onClick: onClickMediaButton(showMediaPicker),
     disabled: isDisabled,
     title: intl.formatMessage(toolbarMediaTitle),
     spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -6,11 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMediaProvider = void 0;
 var _react = require("react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var useMediaProvider = exports.useMediaProvider = function useMediaProvider(pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState.mediaState;
+  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProvider = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
   var provider = (0, _react.useMemo)(function () {
-    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+    return mediaProvider;
+  }, [mediaProvider]);
   return provider;
 };

package/dist/cjs/ui/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
+exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -25,9 +25,8 @@ var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeA
   }
   return null;
 };
-var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
-  var _mediaPluginState$sel2;
-  var selectedNode = (_mediaPluginState$sel2 = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel2 === void 0 ? void 0 : _mediaPluginState$sel2.call(mediaPluginState);
+var getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrsFunction = function getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode) {
+  var selectedNode = selectedMediaContainerNode === null || selectedMediaContainerNode === void 0 ? void 0 : selectedMediaContainerNode();
   if (selectedNode) {
     switch (selectedNode.type.name) {
       case 'mediaSingle':
@@ -41,6 +40,9 @@ var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaC
   }
   return null;
 };
+var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
+  return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
+};
 var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState, isViewMode) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;

package/dist/es2019/mediaPlugin.js

@@ -4,6 +4,7 @@ import { 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';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -56,21 +57,35 @@ const MediaViewerFunctionalComponent = ({
 }) => {
   const {
     mediaState
-  } = useSharedPluginState(api, ['media']);
+  } = useSharedPluginState(api, ['media'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const isMediaViewerVisibleSelector = useSharedPluginStateSelector(api, 'media.isMediaViewerVisible', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaViewerSelectedMediaSelector = useSharedPluginStateSelector(api, 'media.mediaViewerSelectedMedia', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isMediaViewerVisible = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMediaViewerVisibleSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible;
+  const mediaViewerSelectedMedia = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaViewerSelectedMediaSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia;
+  const 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
 
   const mediaItems = useMemo(() => {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
+    if (isMediaViewerVisible) {
       const mediaNodes = extractMediaNodes(editorView.state.doc);
       return createMediaIdentifierArray(mediaNodes);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+  }, [isMediaViewerVisible]);
 
   // Viewer does not have required attributes to render the media viewer
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaViewerSelectedMedia) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaClientConfig)) {
+  if (!isMediaViewerVisible || !mediaViewerSelectedMedia || !mediaClientConfig) {
     return null;
   }
   const handleOnClose = () => {
@@ -78,9 +93,9 @@ const MediaViewerFunctionalComponent = ({
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideMediaViewer);
   };
   return /*#__PURE__*/React.createElement(RenderMediaViewer, {
-    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    mediaClientConfig: mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    selectedNodeAttrs: mediaViewerSelectedMedia,
     items: mediaItems
   });
 };

package/dist/es2019/nodeviews/mediaGroup.js

@@ -5,6 +5,7 @@ import { 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';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
@@ -265,11 +266,23 @@ function MediaGroupNodeViewInternal({
   const {
     editorDisabledState: editorDisabledPlugin,
     editorViewModeState: editorViewModePlugin
-  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']);
+  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorViewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled;
+  const editorViewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode;
   const mediaProvider = useMediaProvider(pluginInjectionApi);
   return renderFn({
     editorDisabledPlugin,
     editorViewModePlugin,
+    editorDisabled,
+    editorViewMode,
     mediaProvider
   });
 }
@@ -290,7 +303,9 @@ class MediaGroupNodeView extends ReactNodeView {
         const renderFn = ({
           editorDisabledPlugin,
           editorViewModePlugin,
-          mediaProvider: mediaProviderFromState
+          mediaProvider: mediaProviderFromState,
+          editorDisabled,
+          editorViewMode
         }) => {
           const mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
           if (!mediaProvider) {
@@ -302,7 +317,7 @@ class MediaGroupNodeView extends ReactNodeView {
               getPos: getPos,
               view: this.view,
               forwardRef: forwardRef,
-              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              disabled: editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -310,7 +325,7 @@ class MediaGroupNodeView extends ReactNodeView {
               anchorPos: this.view.state.selection.$anchor.pos,
               headPos: this.view.state.selection.$head.pos,
               mediaOptions: mediaOptions,
-              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              editorViewMode: editorViewMode === 'view'
             });
           }
           return /*#__PURE__*/React.createElement(IntlMediaGroup, {
@@ -318,7 +333,7 @@ class MediaGroupNodeView extends ReactNodeView {
             getPos: getPos,
             view: this.view,
             forwardRef: forwardRef,
-            disabled: (editorDisabledPlugin || {}).editorDisabled,
+            disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
             allowLazyLoading: mediaOptions.allowLazyLoading,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,
@@ -326,7 +341,7 @@ class MediaGroupNodeView extends ReactNodeView {
             anchorPos: this.view.state.selection.$anchor.pos,
             headPos: this.view.state.selection.$head.pos,
             mediaOptions: mediaOptions,
-            editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+            editorViewMode: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewMode === 'view' : (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
           });
         };
         return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {

package/dist/es2019/nodeviews/mediaInline.js

@@ -10,10 +10,12 @@ import { 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';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+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';
@@ -37,7 +39,7 @@ const createMediaNodeUpdater = props => {
 const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
   const {
     addPendingTask
-  } = props.mediaPluginState;
+  } = props;
   const node = props.node;
   if (!node) {
     return;
@@ -64,10 +66,10 @@ const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
 export const handleNewNode = props => {
   const {
     node,
-    mediaPluginState,
+    handleMediaNodeMount,
     getPos
   } = props;
-  mediaPluginState.handleMediaNodeMount(node, () => getPos());
+  handleMediaNodeMount(node, () => getPos());
 };
 export const MediaInline = props => {
   var _props$node, _props$node$marks;
@@ -81,9 +83,9 @@ export const MediaInline = props => {
     updateViewMediaClientConfig(props);
     return () => {
       const {
-        mediaPluginState
+        handleMediaNodeUnmount
       } = props;
-      mediaPluginState.handleMediaNodeUnmount(props.node);
+      handleMediaNodeUnmount(props.node);
     };
   }, [props]);
   const updateViewMediaClientConfig = async props => {
@@ -124,7 +126,7 @@ export const MediaInline = props => {
   }
   const {
     allowInlineImages
-  } = props.mediaPluginState;
+  } = props;
   const borderMark = (_props$node = props.node) === null || _props$node === void 0 ? void 0 : (_props$node$marks = _props$node.marks) === null || _props$node$marks === void 0 ? void 0 : _props$node$marks.find(mark => mark.type.name === 'border');
   if (allowInlineImages && isImage(type)) {
     return jsx(MediaInlineImageCard, {
@@ -143,7 +145,8 @@ export const MediaInline = props => {
   }
   return jsx(MediaViewerContainer, {
     mediaNode: props.node,
-    mediaPluginState: props.mediaPluginState,
+    selectedMediaContainerNode: props.selectedMediaContainerNode,
+    mediaClientConfig: props.mediaClientConfig,
     isEditorViewMode: props.editorViewMode,
     isSelected: props.isSelected,
     isInline: fg('platform_editor_render_media_viewer_as_inline')
@@ -165,21 +168,60 @@ const MediaInlineSharedState = ({
   const {
     editorViewModeState,
     mediaState
-  } = useSharedPluginState(api, ['editorViewMode', 'media']);
-  const newMediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  if (!mediaState || !newMediaProvider) {
+  } = 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;
+  const newMediaProvider = useMemo(() => mediaProvider ? Promise.resolve(mediaProvider) : undefined, [mediaProvider]);
+  if (!handleMediaNodeMount || !handleMediaNodeUnmount || !addPendingTask || !selectedMediaContainerNode || !mediaClientConfig || !newMediaProvider) {
     return null;
   }
   return jsx(MediaInline, {
     identifier: identifier,
     mediaProvider: newMediaProvider,
-    mediaPluginState: mediaState,
+    handleMediaNodeMount: handleMediaNodeMount,
+    handleMediaNodeUnmount: handleMediaNodeUnmount,
+    allowInlineImages: allowInlineImages,
+    addPendingTask: addPendingTask,
+    selectedMediaContainerNode: selectedMediaContainerNode,
+    mediaClientConfig: mediaClientConfig,
     node: node,
     isSelected: isSelected,
     view: view,
     getPos: getPos,
     contextIdentifierProvider: contextIdentifierProvider,
-    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
+    editorViewMode: viewMode === 'view'
   });
 };
 export class MediaInlineNodeView extends SelectionBasedNodeView {

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -136,8 +136,12 @@ export class MediaNodeUpdater {
     });
     _defineProperty(this, "uploadExternalMedia", async getPos => {
       const {
-        node
+        node,
+        mediaOptions
       } = this.props;
+      if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.isExternalMediaUploadDisabled) {
+        return;
+      }
       const mediaProvider = await this.props.mediaProvider;
       if (node && mediaProvider) {
         const uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;

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

@@ -4,7 +4,9 @@ import { 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
@@ -17,10 +19,16 @@ const MediaNodeWithProviders = ({
   const {
     widthState,
     mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
+  } = 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;
   return innerComponent({
-    width: widthState,
-    mediaProvider: mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined
+    width: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthState : undefined,
+    mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined
   });
 };
 function isMediaDecorationSpec(decoration) {

package/dist/es2019/nodeviews/mediaSingle.js

@@ -23,6 +23,7 @@ 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';
@@ -85,7 +86,10 @@ export default class MediaSingleNode extends Component {
       this.createOrUpdateMediaNodeUpdater(props);
       const {
         addPendingTask
-      } = this.props.mediaPluginState;
+      } = this.props;
+      if (!addPendingTask) {
+        return;
+      }
 
       // we want the first child of MediaSingle (type "media")
       const node = this.props.node.firstChild;
@@ -267,7 +271,8 @@ export default class MediaSingleNode extends Component {
       dispatchAnalyticsEvent,
       editorViewMode,
       editorDisabled,
-      annotationPluginState,
+      isDrafting,
+      targetNodeId,
       editorAppearance
     } = this.props;
     const {
@@ -376,7 +381,7 @@ export default class MediaSingleNode extends Component {
     const badgeOffsetRight = isBadgePosOffsetRight();
     let shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
-    const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
+    const isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id));
     const pos = getPos();
     const isInsideTable = pos !== undefined && findParentNodeOfTypeClosestToPos(state.doc.resolve(pos), [state.schema.nodes.table]);
     const currentMediaElement = () => {
@@ -479,14 +484,48 @@ const MediaSingleNodeWrapper = ({
     annotationState,
     editorDisabledState,
     editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
+  } = 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;
   const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
-  const mediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  const isSelectedAndInteracted = useCallback(() => Boolean(selected() && hasHadInteraction), [hasHadInteraction, selected]);
+  const mediaProvider = useMemo(() => mediaProviderState ? Promise.resolve(mediaProviderState) : undefined, [mediaProviderState]);
+  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, {
-      width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
-      lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+      width: width || 0,
+      lineLength: lineLength || 0,
       node: node,
       getPos: getPos,
       mediaProvider: mediaProvider,
@@ -496,25 +535,20 @@ const MediaSingleNodeWrapper = ({
       fullWidthMode: fullWidthMode,
       selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
-      mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-      annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+      addPendingTask: addPendingTask,
+      isDrafting: isDrafting,
+      targetNodeId: targetNodeId,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       forwardRef: forwardRef,
       pluginInjectionApi: pluginInjectionApi,
-      editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-      editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+      editorDisabled: editorDisabled,
+      editorViewMode: viewMode === 'view',
       editorAppearance: editorAppearance
     });
   }
-  return jsx(MediaSingleNode
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  , {
-    width: widthState.width
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    lineLength: widthState.lineLength,
+  return jsx(MediaSingleNode, {
+    width: width,
+    lineLength: lineLength,
     node: node,
     getPos: getPos,
     mediaProvider: mediaProvider,
@@ -524,13 +558,14 @@ const MediaSingleNodeWrapper = ({
     fullWidthMode: fullWidthMode,
     selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
-    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+    addPendingTask: addPendingTask,
+    isDrafting: isDrafting,
+    targetNodeId: targetNodeId,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi,
-    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+    editorDisabled: editorDisabled,
+    editorViewMode: viewMode === 'view',
     editorAppearance: editorAppearance
   });
 };

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -261,12 +261,13 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     dispatchAnalyticsEvent,
     editorViewMode,
     editorDisabled,
-    annotationPluginState,
+    isDrafting,
+    targetNodeId,
     editorAppearance,
     mediaProvider: mediaProviderPromise,
     forwardRef,
     contextIdentifierProvider: contextIdentifierProviderPromise,
-    mediaPluginState
+    addPendingTask
   } = mediaSingleNodeNextProps;
   const [mediaProvider, setMediaProvider] = React.useState(null);
   const [_contextIdentifierProvider, setContextIdentifierProvider] = React.useState(null);
@@ -286,7 +287,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     mediaNodeUpdater,
     getPos,
     mediaNode,
-    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+    addPendingTask: addPendingTask || noop
   });
   React.useLayoutEffect(() => {
     mountedRef.current = true;
@@ -398,7 +399,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
   }, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
   const currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 ? void 0 : (_pluginInjectionApi$m2 = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.currentMaxWidth : undefined;
   const contentWidth = currentMaxWidth || lineLength;
-  const isCurrentNodeDrafting = Boolean((annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
+  const isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   const mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
   const captionPlaceHolderRef = /*#__PURE__*/React.createRef();
   const onMediaSingleClicked = React.useCallback(event => {