@atlaskit/editor-plugin-media 2.6.7 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 2.7.1
+
+### Patch Changes
+
+- [#146359](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146359)
+  [`cb179949b078a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb179949b078a) -
+  Migrate media to use useSharedPluginStateSelector
+- [#147618](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147618)
+  [`3069d34098b9e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3069d34098b9e) -
+  Fix image size difference during SSR
+- [#147467](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147467)
+  [`cce4ef288b918`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cce4ef288b918) -
+  [EDITOR-633] Fire document failedToInsert event when media inline fails to be inserted
+- Updated dependencies
+
+## 2.7.0
+
+### Minor Changes
+
+- [#143009](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143009)
+  [`6711c20c022e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6711c20c022e4) -
+  [UX-3339] Adds a configuration for media insert to only allow for external links.
+
 ## 2.6.7
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -12,6 +12,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -61,22 +62,36 @@ var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_re
 var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
   var api = _ref2.api,
     editorView = _ref2.editorView;
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media']),
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState2.mediaState;
+  var isMediaViewerVisibleSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isMediaViewerVisible', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaViewerSelectedMediaSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaViewerSelectedMedia', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaClientConfigSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isMediaViewerVisible = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isMediaViewerVisibleSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible;
+  var mediaViewerSelectedMedia = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaViewerSelectedMediaSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia;
+  var mediaClientConfig = (0, _experiments.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 = (0, _react.useMemo)(function () {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
+    if (isMediaViewerVisible) {
       var mediaNodes = (0, _mediaCommon2.extractMediaNodes)(editorView.state.doc);
       return (0, _mediaCommon2.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() {
@@ -84,9 +99,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.default.createElement(_PortalWrapper.RenderMediaViewer, {
-    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    mediaClientConfig: mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    selectedNodeAttrs: mediaViewerSelectedMedia,
     items: mediaItems
   });
 };

package/dist/cjs/nodeviews/mediaGroup.js

@@ -19,6 +19,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _closeEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--editor-close"));
 var _mediaCommon = require("@atlaskit/media-common");
@@ -311,13 +312,25 @@ var _default = exports.default = IntlMediaGroup;
 function MediaGroupNodeViewInternal(_ref3) {
   var renderFn = _ref3.renderFn,
     pluginInjectionApi = _ref3.pluginInjectionApi;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled', 'editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorDisabledPlugin = _useSharedPluginState.editorDisabledState,
     editorViewModePlugin = _useSharedPluginState.editorViewModeState;
+  var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorViewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled;
+  var editorViewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode;
   var mediaProvider = (0, _useMediaProvider.useMediaProvider)(pluginInjectionApi);
   return renderFn({
     editorDisabledPlugin: editorDisabledPlugin,
     editorViewModePlugin: editorViewModePlugin,
+    editorDisabled: editorDisabled,
+    editorViewMode: editorViewMode,
     mediaProvider: mediaProvider
   });
 }
@@ -343,7 +356,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;
@@ -354,7 +369,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,
@@ -362,7 +377,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.default.createElement(IntlMediaGroup, {
@@ -370,7 +385,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
               getPos: getPos,
               view: _this3.view,
               forwardRef: forwardRef,
-              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -378,7 +393,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: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewMode === 'view' : (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
             });
           };
           return /*#__PURE__*/_react.default.createElement(MediaGroupNodeViewInternal, {

package/dist/cjs/nodeviews/mediaInline.js

@@ -21,10 +21,12 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isType = require("../pm-plugins/utils/is-type");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -58,7 +60,7 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
     return _regenerator.default.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;
@@ -111,9 +113,9 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
 }();
 var handleNewNode = exports.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();
   });
 };
@@ -134,8 +136,8 @@ var MediaInline = exports.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 () {
@@ -190,7 +192,7 @@ var MediaInline = exports.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';
   });
@@ -211,7 +213,8 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
   }
   return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
     mediaNode: props.node,
-    mediaPluginState: props.mediaPluginState,
+    selectedMediaContainerNode: props.selectedMediaContainerNode,
+    mediaClientConfig: props.mediaClientConfig,
     isEditorViewMode: props.editorViewMode,
     isSelected: props.isSelected,
     isInline: (0, _platformFeatureFlags.fg)('platform_editor_render_media_viewer_as_inline')
@@ -229,25 +232,64 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
     api = _ref3.api,
     view = _ref3.view;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode', 'media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode', 'media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     mediaState = _useSharedPluginState.mediaState;
+  var viewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaProvider', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var handleMediaNodeMountSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeMount', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var handleMediaNodeUnmountSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.handleMediaNodeUnmount', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var allowInlineImagesSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowInlineImages', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var addPendingTaskSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.addPendingTask', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedMediaContainerNodeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.selectedMediaContainerNode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaClientConfigSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.mediaClientConfig', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var viewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+  var mediaProvider = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  var handleMediaNodeMount = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeMountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeMount;
+  var handleMediaNodeUnmount = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? handleMediaNodeUnmountSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.handleMediaNodeUnmount;
+  var allowInlineImages = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? allowInlineImagesSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowInlineImages;
+  var addPendingTask = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  var selectedMediaContainerNode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedMediaContainerNodeSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.selectedMediaContainerNode;
+  var mediaClientConfig = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
   var newMediaProvider = (0, _react.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 (0, _react2.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'
   });
 };
 var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {

package/dist/cjs/nodeviews/mediaNodeUpdater.js

@@ -254,41 +254,47 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
     })));
     (0, _defineProperty2.default)(this, "uploadExternalMedia", /*#__PURE__*/function () {
       var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(getPos) {
-        var node, mediaProvider, uploadMediaClientConfig, mediaClient, collection, uploader, uploadableFileUpfrontIds, dimensions, pos;
+        var _this$props, node, mediaOptions, mediaProvider, uploadMediaClientConfig, mediaClient, collection, uploader, uploadableFileUpfrontIds, dimensions, pos;
         return _regenerator.default.wrap(function _callee7$(_context7) {
           while (1) switch (_context7.prev = _context7.next) {
             case 0:
-              node = _this.props.node;
-              _context7.next = 3;
-              return _this.props.mediaProvider;
+              _this$props = _this.props, node = _this$props.node, mediaOptions = _this$props.mediaOptions;
+              if (!(mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.isExternalMediaUploadDisabled)) {
+                _context7.next = 3;
+                break;
+              }
+              return _context7.abrupt("return");
             case 3:
+              _context7.next = 5;
+              return _this.props.mediaProvider;
+            case 5:
               mediaProvider = _context7.sent;
               if (!(node && mediaProvider)) {
-                _context7.next = 24;
+                _context7.next = 26;
                 break;
               }
               uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
               if (!(!uploadMediaClientConfig || !node.attrs.url)) {
-                _context7.next = 8;
+                _context7.next = 10;
                 break;
               }
               return _context7.abrupt("return");
-            case 8:
+            case 10:
               mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
               collection = mediaProvider.uploadParams && mediaProvider.uploadParams.collection;
-              _context7.prev = 10;
-              _context7.next = 13;
+              _context7.prev = 12;
+              _context7.next = 15;
               return mediaClient.file.uploadExternal(node.attrs.url, collection);
-            case 13:
+            case 15:
               uploader = _context7.sent;
               uploadableFileUpfrontIds = uploader.uploadableFileUpfrontIds, dimensions = uploader.dimensions;
               pos = getPos();
               if (!(typeof pos !== 'number')) {
-                _context7.next = 18;
+                _context7.next = 20;
                 break;
               }
               return _context7.abrupt("return");
-            case 18:
+            case 20:
               (0, _helpers.replaceExternalMedia)(pos + 1, {
                 id: uploadableFileUpfrontIds.id,
                 collection: collection,
@@ -296,11 +302,11 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
                 width: dimensions.width,
                 occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
               })(_this.props.view.state, _this.props.view.dispatch);
-              _context7.next = 24;
+              _context7.next = 26;
               break;
-            case 21:
-              _context7.prev = 21;
-              _context7.t0 = _context7["catch"](10);
+            case 23:
+              _context7.prev = 23;
+              _context7.t0 = _context7["catch"](12);
               //keep it as external media
               if (_this.props.dispatchAnalyticsEvent) {
                 _this.props.dispatchAnalyticsEvent({
@@ -309,11 +315,11 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
                   eventType: _analytics.EVENT_TYPE.OPERATIONAL
                 });
               }
-            case 24:
+            case 26:
             case "end":
               return _context7.stop();
           }
-        }, _callee7, null, [[10, 21]]);
+        }, _callee7, null, [[12, 23]]);
       }));
       return function (_x3) {
         return _ref8.apply(this, arguments);

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

@@ -18,7 +18,9 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _mediaClient = require("@atlaskit/media-client");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -32,12 +34,18 @@ function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototyp
 var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     innerComponent = _ref.innerComponent;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState,
     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;
   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: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthState : undefined,
+    mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined
   });
 };
 function isMediaDecorationSpec(decoration) {