@atlaskit/editor-plugin-media 2.7.0 → 2.7.2

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -10,6 +10,7 @@ import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
 import memoizeOne from 'memoize-one';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
 import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
@@ -457,7 +458,7 @@ class ResizableMediaSingleNext extends React.Component {
     const resizerNextClassName = classnames(className, resizerStyles);
     const isNestedNode = this.isAdjacentMode();
     const handlePositioning = this.getHandlePositioning();
-    const maxWidth = this.getMaxWidth();
+    const maxWidth = isSSR() && size.width && fg('platform_editor_fix_image_size_diff_during_ssr') ? undefined : this.getMaxWidth();
     const minWidth = this.calcMinWidth(isVideoFile, lineLength);
 
     // while is not resizing, we take 100% as min-width if the container width is less than the min-width

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

@@ -3,9 +3,11 @@ import { injectIntl } from 'react-intl-next';
 import { 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';
-const onClickMediaButton = pluginState => () => {
-  pluginState.showMediaPicker();
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const onClickMediaButton = showMediaPicker => () => {
+  showMediaPicker();
   return true;
 };
 const ToolbarMedia = ({
@@ -16,8 +18,18 @@ const ToolbarMedia = ({
 }) => {
   const {
     mediaState
-  } = useSharedPluginState(api, ['media']);
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+  } = 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;
+  if (!allowsUploads || !showMediaPicker) {
     return null;
   }
   const {
@@ -25,7 +37,7 @@ const ToolbarMedia = ({
   } = toolbarMediaMessages;
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.MEDIA,
-    onClick: onClickMediaButton(mediaState),
+    onClick: onClickMediaButton(showMediaPicker),
     disabled: isDisabled,
     title: intl.formatMessage(toolbarMediaTitle),
     spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -1,11 +1,19 @@
 import { useMemo } from 'react';
 import { 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 {
     mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['media']);
+  } = 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;
   const provider = useMemo(() => {
-    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/es2019/ui/toolbar/utils.js

@@ -16,9 +16,8 @@ const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   }
   return null;
 };
-export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
-  var _mediaPluginState$sel2;
-  const selectedNode = (_mediaPluginState$sel2 = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel2 === void 0 ? void 0 : _mediaPluginState$sel2.call(mediaPluginState);
+export const getSelectedNearestMediaContainerNodeAttrsFunction = selectedMediaContainerNode => {
+  const selectedNode = selectedMediaContainerNode === null || selectedMediaContainerNode === void 0 ? void 0 : selectedMediaContainerNode();
   if (selectedNode) {
     switch (selectedNode.type.name) {
       case 'mediaSingle':
@@ -32,6 +31,9 @@ export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
   }
   return null;
 };
+export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
+  return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
+};
 export const downloadMedia = async (mediaPluginState, isViewMode) => {
   try {
     const selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);

package/dist/esm/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';
@@ -51,22 +52,36 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
   var api = _ref2.api,
     editorView = _ref2.editorView;
-  var _useSharedPluginState2 = useSharedPluginState(api, ['media']),
+  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 mediaItems = useMemo(function () {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
+    if (isMediaViewerVisible) {
       var 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;
   }
   var handleOnClose = function handleOnClose() {
@@ -74,9 +89,9 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     api === null || api === 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/esm/nodeviews/mediaGroup.js

@@ -16,6 +16,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';
@@ -304,13 +305,25 @@ export default IntlMediaGroup;
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+  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 mediaProvider = useMediaProvider(pluginInjectionApi);
   return renderFn({
     editorDisabledPlugin: editorDisabledPlugin,
     editorViewModePlugin: editorViewModePlugin,
+    editorDisabled: editorDisabled,
+    editorViewMode: editorViewMode,
     mediaProvider: mediaProvider
   });
 }
@@ -336,7 +349,9 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
           var renderFn = function renderFn(_ref5) {
             var editorDisabledPlugin = _ref5.editorDisabledPlugin,
               editorViewModePlugin = _ref5.editorViewModePlugin,
-              mediaProviderFromState = _ref5.mediaProvider;
+              mediaProviderFromState = _ref5.mediaProvider,
+              editorDisabled = _ref5.editorDisabled,
+              editorViewMode = _ref5.editorViewMode;
             var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
             if (!mediaProvider) {
               return null;
@@ -347,7 +362,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
                 getPos: getPos,
                 view: _this3.view,
                 forwardRef: forwardRef,
-                disabled: (editorDisabledPlugin || {}).editorDisabled,
+                disabled: editorDisabled,
                 allowLazyLoading: mediaOptions.allowLazyLoading,
                 mediaProvider: mediaProvider,
                 contextIdentifierProvider: contextIdentifierProvider,
@@ -355,7 +370,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
                 anchorPos: _this3.view.state.selection.$anchor.pos,
                 headPos: _this3.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, {
@@ -363,7 +378,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               getPos: getPos,
               view: _this3.view,
               forwardRef: forwardRef,
-              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -371,7 +386,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               anchorPos: _this3.view.state.selection.$anchor.pos,
               headPos: _this3.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/esm/nodeviews/mediaInline.js

@@ -25,10 +25,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';
@@ -54,7 +56,7 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          addPendingTask = props.mediaPluginState.addPendingTask;
+          addPendingTask = props.addPendingTask;
           node = props.node;
           if (node) {
             _context.next = 4;
@@ -107,9 +109,9 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
 }();
 export var handleNewNode = function handleNewNode(props) {
   var node = props.node,
-    mediaPluginState = props.mediaPluginState,
+    handleMediaNodeMount = props.handleMediaNodeMount,
     getPos = props.getPos;
-  mediaPluginState.handleMediaNodeMount(node, function () {
+  handleMediaNodeMount(node, function () {
     return getPos();
   });
 };
@@ -130,8 +132,8 @@ export var MediaInline = function MediaInline(props) {
     updateMediaNodeAttributes(props, mediaNodeUpdater);
     updateViewMediaClientConfig(props);
     return function () {
-      var mediaPluginState = props.mediaPluginState;
-      mediaPluginState.handleMediaNodeUnmount(props.node);
+      var handleMediaNodeUnmount = props.handleMediaNodeUnmount;
+      handleMediaNodeUnmount(props.node);
     };
   }, [props]);
   var updateViewMediaClientConfig = /*#__PURE__*/function () {
@@ -186,7 +188,7 @@ export var MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
-  var allowInlineImages = props.mediaPluginState.allowInlineImages;
+  var allowInlineImages = props.allowInlineImages;
   var borderMark = (_props$node = props.node) === null || _props$node === void 0 || (_props$node = _props$node.marks) === null || _props$node === void 0 ? void 0 : _props$node.find(function (mark) {
     return mark.type.name === 'border';
   });
@@ -207,7 +209,8 @@ export var MediaInline = function 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')
@@ -225,25 +228,64 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
     api = _ref3.api,
     view = _ref3.view;
-  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode', 'media']),
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode', 'media'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     mediaState = _useSharedPluginState.mediaState;
+  var viewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProviderSelector = useSharedPluginStateSelector(api, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var handleMediaNodeMountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeMount', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var handleMediaNodeUnmountSelector = useSharedPluginStateSelector(api, 'media.handleMediaNodeUnmount', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var allowInlineImagesSelector = useSharedPluginStateSelector(api, 'media.allowInlineImages', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var addPendingTaskSelector = useSharedPluginStateSelector(api, 'media.addPendingTask', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedMediaContainerNodeSelector = useSharedPluginStateSelector(api, 'media.selectedMediaContainerNode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var mediaProvider = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  var handleMediaNodeMount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeMountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount;
+  var handleMediaNodeUnmount = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeUnmountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount;
+  var allowInlineImages = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? allowInlineImagesSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages;
+  var addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  var selectedMediaContainerNode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedMediaContainerNodeSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode;
+  var mediaClientConfig = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
   var newMediaProvider = useMemo(function () {
-    return 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) {
+    return 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 var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {

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

@@ -17,7 +17,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
@@ -26,12 +28,18 @@ import MediaNode from './media';
 var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     innerComponent = _ref.innerComponent;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState;
+  var mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var 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) {