@atlaskit/editor-plugin-media 2.7.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

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/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) {

package/dist/cjs/nodeviews/mediaSingle.js

@@ -31,6 +31,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _captions = require("../pm-plugins/commands/captions");
 var _main = require("../pm-plugins/main");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
@@ -128,78 +129,85 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               _this.createOrUpdateMediaNodeUpdater(props);
-              addPendingTask = _this.props.mediaPluginState.addPendingTask; // we want the first child of MediaSingle (type "media")
+              addPendingTask = _this.props.addPendingTask;
+              if (addPendingTask) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              // we want the first child of MediaSingle (type "media")
               node = _this.props.node.firstChild;
               if (node) {
-                _context2.next = 5;
+                _context2.next = 7;
                 break;
               }
               return _context2.abrupt("return");
-            case 5:
-              _context2.next = 7;
-              return (_this$mediaNodeUpdate2 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate2 === void 0 ? void 0 : _this$mediaNodeUpdate2.getRemoteDimensions();
             case 7:
+              _context2.next = 9;
+              return (_this$mediaNodeUpdate2 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate2 === void 0 ? void 0 : _this$mediaNodeUpdate2.getRemoteDimensions();
+            case 9:
               updatedDimensions = _context2.sent;
               currentAttrs = (_this$props$node$firs = _this.props.node.firstChild) === null || _this$props$node$firs === void 0 ? void 0 : _this$props$node$firs.attrs;
               if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
                 (_this$mediaNodeUpdate3 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate3 === void 0 || _this$mediaNodeUpdate3.updateDimensions(updatedDimensions);
               }
               if (!(node.attrs.type === 'external' && node.attrs.__external)) {
-                _context2.next = 16;
+                _context2.next = 18;
                 break;
               }
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               updatingNode = _this.mediaNodeUpdater.handleExternalMedia(_this.props.getPos);
               addPendingTask(updatingNode);
-              _context2.next = 15;
+              _context2.next = 17;
               return updatingNode;
-            case 15:
+            case 17:
               return _context2.abrupt("return");
-            case 16:
+            case 18:
               contextId = (_this$mediaNodeUpdate4 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate4 === void 0 ? void 0 : _this$mediaNodeUpdate4.getNodeContextId();
               if (contextId) {
-                _context2.next = 20;
+                _context2.next = 22;
                 break;
               }
-              _context2.next = 20;
-              return (_this$mediaNodeUpdate5 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate5 === void 0 ? void 0 : _this$mediaNodeUpdate5.updateContextId();
-            case 20:
               _context2.next = 22;
-              return (_this$mediaNodeUpdate6 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate6 === void 0 ? void 0 : _this$mediaNodeUpdate6.shouldNodeBeDeepCopied();
+              return (_this$mediaNodeUpdate5 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate5 === void 0 ? void 0 : _this$mediaNodeUpdate5.updateContextId();
             case 22:
+              _context2.next = 24;
+              return (_this$mediaNodeUpdate6 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate6 === void 0 ? void 0 : _this$mediaNodeUpdate6.shouldNodeBeDeepCopied();
+            case 24:
               shouldNodeBeDeepCopied = _context2.sent;
               if (!shouldNodeBeDeepCopied) {
-                _context2.next = 35;
+                _context2.next = 37;
                 break;
               }
               _this.setState({
                 isCopying: true
               });
-              _context2.prev = 25;
+              _context2.prev = 27;
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               copyNode = _this.mediaNodeUpdater.copyNode({
                 traceId: node.attrs.__mediaTraceId
               });
               addPendingTask(copyNode);
-              _context2.next = 30;
+              _context2.next = 32;
               return copyNode;
-            case 30:
-              _context2.next = 35;
-              break;
             case 32:
-              _context2.prev = 32;
-              _context2.t0 = _context2["catch"](25);
+              _context2.next = 37;
+              break;
+            case 34:
+              _context2.prev = 34;
+              _context2.t0 = _context2["catch"](27);
               // if copyNode fails, let's set isCopying false so we can show the eventual error
               _this.setState({
                 isCopying: false
               });
-            case 35:
+            case 37:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[25, 32]]);
+        }, _callee2, null, [[27, 34]]);
       }));
       return function (_x2) {
         return _ref2.apply(this, arguments);
@@ -362,7 +370,8 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
         editorViewMode = _this$props2.editorViewMode,
         editorDisabled = _this$props2.editorDisabled,
-        annotationPluginState = _this$props2.annotationPluginState,
+        isDrafting = _this$props2.isDrafting,
+        targetNodeId = _this$props2.targetNodeId,
         editorAppearance = _this$props2.editorAppearance;
       var _ref4 = node.attrs,
         layout = _ref4.layout,
@@ -459,7 +468,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       var badgeOffsetRight = isBadgePosOffsetRight();
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
       shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
-      var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
+      var isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id));
       var pos = getPos();
       var isInsideTable = pos !== undefined && (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve(pos), [state.schema.nodes.table]);
       var currentMediaElement = function currentMediaElement() {
@@ -557,23 +566,57 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
     forwardRef = _ref6.forwardRef,
     editorAppearance = _ref6.editorAppearance;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
     annotationState = _useSharedPluginState.annotationState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var mediaProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var addPendingTaskSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'media.addPendingTask', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDraftingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.isDrafting', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var targetNodeIdSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'annotation.targetNodeId', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var widthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var lineLengthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var viewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProviderState = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  var addPendingTask = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  var isDrafting = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isDraftingSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting;
+  var targetNodeId = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? targetNodeIdSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId;
+  var width = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
+  var lineLength = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
+  var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  var viewMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
   var mediaProvider = (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]);
+    return mediaProviderState ? Promise.resolve(mediaProviderState) : undefined;
+  }, [mediaProviderState]);
   var isSelectedAndInteracted = (0, _react.useCallback)(function () {
     return Boolean(selected() && hasHadInteraction !== false);
   }, [hasHadInteraction, selected]);
   if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
     return (0, _react2.jsx)(_mediaSingleNext.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,
@@ -583,25 +626,20 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
       fullWidthMode: fullWidthMode,
       selected: (0, _platformFeatureFlags.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 (0, _react2.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 (0, _react2.jsx)(MediaSingleNode, {
+    width: width,
+    lineLength: lineLength,
     node: node,
     getPos: getPos,
     mediaProvider: mediaProvider,
@@ -611,13 +649,14 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     fullWidthMode: fullWidthMode,
     selected: (0, _platformFeatureFlags.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/cjs/nodeviews/mediaSingleNext.js

@@ -300,12 +300,13 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     dispatchAnalyticsEvent = mediaSingleNodeNextProps.dispatchAnalyticsEvent,
     editorViewMode = mediaSingleNodeNextProps.editorViewMode,
     editorDisabled = mediaSingleNodeNextProps.editorDisabled,
-    annotationPluginState = mediaSingleNodeNextProps.annotationPluginState,
+    isDrafting = mediaSingleNodeNextProps.isDrafting,
+    targetNodeId = mediaSingleNodeNextProps.targetNodeId,
     editorAppearance = mediaSingleNodeNextProps.editorAppearance,
     mediaProviderPromise = mediaSingleNodeNextProps.mediaProvider,
     forwardRef = mediaSingleNodeNextProps.forwardRef,
     contextIdentifierProviderPromise = mediaSingleNodeNextProps.contextIdentifierProvider,
-    mediaPluginState = mediaSingleNodeNextProps.mediaPluginState;
+    addPendingTask = mediaSingleNodeNextProps.addPendingTask;
   var _React$useState3 = _react.default.useState(null),
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     mediaProvider = _React$useState4[0],
@@ -333,7 +334,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     mediaNodeUpdater: mediaNodeUpdater,
     getPos: getPos,
     mediaNode: mediaNode,
-    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+    addPendingTask: addPendingTask || noop
   });
   _react.default.useLayoutEffect(function () {
     mountedRef.current = true;
@@ -437,7 +438,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
   }, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
   var currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth : undefined;
   var contentWidth = currentMaxWidth || lineLength;
-  var 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 || (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
+  var isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 || (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   var mediaSingleWrapperRef = /*#__PURE__*/_react.default.createRef();
   var captionPlaceHolderRef = /*#__PURE__*/_react.default.createRef();
   var onMediaSingleClicked = _react.default.useCallback(function (event) {