@atlaskit/editor-plugin-media 2.6.7 → 2.7.1

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

package/dist/cjs/pm-plugins/utils/media-files.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertMediaInlineNode = exports.insertMediaGroupNode = exports.getPosInList = exports.canInsertMediaInline = void 0;
+exports.insertMediaInlineNode = exports.insertMediaGroupNode = exports.getPosInList = exports.getFailToInsertAnalytics = exports.canInsertMediaInline = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _isType = require("./is-type");
 var _mediaCommon = require("./media-common");
 var _mediaInline2 = require("./media-inline");
@@ -52,7 +54,21 @@ var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(media
     eventType: _analytics.EVENT_TYPE.TRACK
   };
 };
-
+var getFailToInsertAnalytics = exports.getFailToInsertAnalytics = function getFailToInsertAnalytics(mediaState, actionSubjectId, inputMethod, insertMediaVia, reason) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: _analytics.ACTION.FAILED_TO_INSERT,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: actionSubjectId,
+    attributes: {
+      inputMethod: inputMethod,
+      fileExtension: media,
+      insertMediaVia: insertMediaVia,
+      reason: reason
+    },
+    eventType: _analytics.EVENT_TYPE.OPERATIONAL
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -75,6 +91,27 @@ function shouldAppendParagraph(state, node) {
   return ((0, _utils.insideTableCell)(state) || (0, _utils.isInListItem)(state) || (0, _utils.isInLayoutColumn)(state) || (0, _selection.atTheEndOfDoc)(state) && (!(0, _mediaCommon.posOfPrecedingMediaGroup)(state) || (0, _mediaCommon.isSelectionNonMediaBlockNode)(state))) && !wasMediaNode;
 }
 
+/**
+ * Check if node of type has been inserted successfully
+ */
+var hasInsertedNodeOfType = function hasInsertedNodeOfType(tr, nodeType) {
+  var _tr$doc$nodeAt;
+  var insertPos = -1;
+  tr.steps.forEach(function (step) {
+    if (step instanceof _transform.ReplaceStep) {
+      step.slice.content.forEach(function (node) {
+        if (node.type.name === nodeType) {
+          insertPos = step.from;
+        }
+      });
+    }
+  });
+  if (insertPos === -1 || ((_tr$doc$nodeAt = tr.doc.nodeAt(insertPos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) !== nodeType) {
+    return false;
+  }
+  return true;
+};
+
 /**
  * Create a new media inline to insert the new media.
  * @param view Editor view
@@ -129,12 +166,33 @@ var insertMediaInlineNode = exports.insertMediaInlineNode = function insertMedia
 
     // Delete the selection if a selection is made
     var deleteRange = findDeleteRange(state);
-    if (!deleteRange) {
-      tr.insert(pos, content);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_track_media_fail_to_insert')) {
+      var payload;
+      try {
+        if (!deleteRange) {
+          tr.insert(pos, content);
+        } else {
+          tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+        }
+        if (hasInsertedNodeOfType(tr, 'mediaInline')) {
+          payload = getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia);
+        } else {
+          payload = getFailToInsertAnalytics(mediaState, _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, inputMethod, insertMediaVia);
+        }
+      } catch (error) {
+        payload = getFailToInsertAnalytics(mediaState, _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, inputMethod, insertMediaVia,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error.toString());
+      }
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
     } else {
-      tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+      if (!deleteRange) {
+        tr.insert(pos, content);
+      } else {
+        tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+      }
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia))(tr);
     }
-    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaInlineAnalytics(mediaState, inputMethod, insertMediaVia))(tr);
     dispatch(tr);
     return true;
   };

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

@@ -12,6 +12,8 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
@@ -26,23 +28,37 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     entered = _useState2[0],
     setEntered = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState.annotationState;
+  var selectedAnnotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   var _view$state$schema = view.state.schema,
     media = _view$state$schema.nodes.media,
     annotation = _view$state$schema.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
   var status = (0, _react.useMemo)(function () {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(function (annotation) {
+    return selectedAnnotations.some(function (annotation) {
       return !!mediaNode.marks.find(function (mark) {
         return mark.attrs.id === annotation.id;
       });
-    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    }) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   var onClick = (0, _react.useCallback)(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -50,8 +66,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   var pos = getPos();
-  var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
-    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
   });
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;
@@ -98,23 +114,37 @@ var CommentBadgeNextWrapper = exports.CommentBadgeNextWrapper = function Comment
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     entered = _useState4[0],
     setEntered = _useState4[1];
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['annotation'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState2.annotationState;
+  var selectedAnnotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations;
   var _view$state$schema2 = view.state.schema,
     media = _view$state$schema2.nodes.media,
     annotation = _view$state$schema2.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
   var status = (0, _react.useMemo)(function () {
-    if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
+    if (!selectedAnnotations || !mediaNode) {
       return 'default';
     }
-    return annotationState.selectedAnnotations.some(function (annotation) {
+    return selectedAnnotations.some(function (annotation) {
       return !!mediaNode.marks.find(function (mark) {
         return mark.attrs.id === annotation.id;
       });
-    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
-  }, [annotationState, mediaNode]);
+    }) && !isInlineCommentViewClosed ? 'active' : 'default';
+  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
   var onClick = (0, _react.useCallback)(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -122,8 +152,8 @@ var CommentBadgeNextWrapper = exports.CommentBadgeNextWrapper = function Comment
     }
   }, [api.annotation, dispatch, mediaNode, state]);
   var pos = getPos();
-  var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
-    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
   });
   if (!isDrafting && hasNoComments || !mediaNode) {
     return null;

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

@@ -13,6 +13,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _BrowserWrapper = require("./BrowserWrapper");
 var _ClipboardWrapper = require("./ClipboardWrapper");
 var _DropzoneWrapper = require("./DropzoneWrapper");
@@ -26,9 +28,19 @@ var MediaPicker = function MediaPicker(_ref) {
     mediaState = _ref.mediaState,
     onBrowseFn = _ref.onBrowseFn,
     editorDomElement = _ref.editorDomElement;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'connectivity']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'connectivity'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     focusState = _useSharedPluginState.focusState,
     connectivityState = _useSharedPluginState.connectivityState;
+  var hasFocusSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'focus.hasFocus', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var connectivityModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hasFocus = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
+  var connectivityMode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? connectivityModeSelector : connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode;
   var featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
 
   // Ignored via go/ees005
@@ -43,7 +55,7 @@ var MediaPicker = function MediaPicker(_ref) {
    * as stopImmediatePropagation could cause race condition issues
    */
   var container = editorParent;
-  var clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/_react.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
+  var clipboard = hasFocus ? /*#__PURE__*/_react.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
     mediaState: mediaState,
     featureFlags: featureFlags,
     container: container
@@ -52,7 +64,7 @@ var MediaPicker = function MediaPicker(_ref) {
     mediaState: mediaState,
     isActive: !isPopupOpened &&
     // If we're offline don't show the dropzone
-    (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) !== 'offline',
+    connectivityMode !== 'offline',
     featureFlags: featureFlags,
     editorDomElement: editorDomElement,
     appearance: appearance

package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js

@@ -29,7 +29,8 @@ var mediaViewerContainerTestID = 'media-viewer-container-test';
 var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerContainer(_ref) {
   var _mediaNode$firstChild;
   var mediaNode = _ref.mediaNode,
-    mediaPluginState = _ref.mediaPluginState,
+    selectedMediaContainerNode = _ref.selectedMediaContainerNode,
+    mediaClientConfig = _ref.mediaClientConfig,
     _ref$isEditorViewMode = _ref.isEditorViewMode,
     isEditorViewMode = _ref$isEditorViewMode === void 0 ? false : _ref$isEditorViewMode,
     _ref$isSelected = _ref.isSelected,
@@ -44,8 +45,7 @@ var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerCo
   (0, _react.useEffect)(function () {
     setShowMediaViewer(isSelected);
   }, [isSelected]);
-  var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
-  var mediaClientConfig = mediaPluginState.mediaClientConfig;
+  var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrsFunction)(selectedMediaContainerNode);
   var showMediaViewer = function showMediaViewer() {
     setShowMediaViewer(true);
   };

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

@@ -21,6 +21,7 @@ var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _resizer = require("@atlaskit/editor-common/resizer");
@@ -543,7 +544,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
       var isNestedNode = this.isAdjacentMode();
       var handlePositioning = this.getHandlePositioning();
-      var maxWidth = this.getMaxWidth();
+      var maxWidth = (0, _coreUtils.isSSR)() && size.width && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') ? undefined : this.getMaxWidth();
       var 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