@atlaskit/editor-plugin-media 2.7.0 → 2.7.2

package/dist/esm/nodeviews/mediaSingle.js

@@ -36,6 +36,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
@@ -122,78 +123,85 @@ var MediaSingleNode = /*#__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);
@@ -356,7 +364,8 @@ var MediaSingleNode = /*#__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,
@@ -453,7 +462,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var badgeOffsetRight = isBadgePosOffsetRight();
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof 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 && findParentNodeOfTypeClosestToPos(state.doc.resolve(pos), [state.schema.nodes.table]);
       var currentMediaElement = function currentMediaElement() {
@@ -552,23 +561,57 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
     forwardRef = _ref6.forwardRef,
     editorAppearance = _ref6.editorAppearance;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
     annotationState = _useSharedPluginState.annotationState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var mediaProviderSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.mediaProvider', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var addPendingTaskSelector = useSharedPluginStateSelector(pluginInjectionApi, 'media.addPendingTask', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDraftingSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.isDrafting', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var targetNodeIdSelector = useSharedPluginStateSelector(pluginInjectionApi, 'annotation.targetNodeId', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var widthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.width', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var lineLengthSelector = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var viewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var mediaProviderState = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaProviderSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  var addPendingTask = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? addPendingTaskSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.addPendingTask;
+  var isDrafting = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraftingSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting;
+  var targetNodeId = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? targetNodeIdSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.targetNodeId;
+  var width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
+  var lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
+  var editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
+  var viewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? viewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
   var mediaProvider = 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 = useCallback(function () {
     return Boolean(selected() && hasHadInteraction !== false);
   }, [hasHadInteraction, selected]);
   if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
-      width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
-      lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+      width: width || 0,
+      lineLength: lineLength || 0,
       node: node,
       getPos: getPos,
       mediaProvider: mediaProvider,
@@ -578,25 +621,20 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
       fullWidthMode: fullWidthMode,
       selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
-      mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-      annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+      addPendingTask: addPendingTask,
+      isDrafting: isDrafting,
+      targetNodeId: targetNodeId,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       forwardRef: forwardRef,
       pluginInjectionApi: pluginInjectionApi,
-      editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-      editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+      editorDisabled: editorDisabled,
+      editorViewMode: viewMode === 'view',
       editorAppearance: editorAppearance
     });
   }
-  return jsx(MediaSingleNode
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  , {
-    width: widthState.width
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    lineLength: widthState.lineLength,
+  return jsx(MediaSingleNode, {
+    width: width,
+    lineLength: lineLength,
     node: node,
     getPos: getPos,
     mediaProvider: mediaProvider,
@@ -606,13 +644,14 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     fullWidthMode: fullWidthMode,
     selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
-    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
-    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+    addPendingTask: addPendingTask,
+    isDrafting: isDrafting,
+    targetNodeId: targetNodeId,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi,
-    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
-    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+    editorDisabled: editorDisabled,
+    editorViewMode: viewMode === 'view',
     editorAppearance: editorAppearance
   });
 };

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -293,12 +293,13 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     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.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     mediaProvider = _React$useState4[0],
@@ -326,7 +327,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     mediaNodeUpdater: mediaNodeUpdater,
     getPos: getPos,
     mediaNode: mediaNode,
-    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+    addPendingTask: addPendingTask || noop
   });
   React.useLayoutEffect(function () {
     mountedRef.current = true;
@@ -430,7 +431,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
   }, [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.createRef();
   var captionPlaceHolderRef = /*#__PURE__*/React.createRef();
   var onMediaSingleClicked = React.useCallback(function (event) {

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

@@ -3,7 +3,9 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';
 import { findFarthestParentNode, insideTableCell, isInLayoutColumn, isInListItem, isSupportedInParent, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { canInsert, hasParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isImage } from './is-type';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph, isSelectionNonMediaBlockNode, posOfMediaGroupNearby, posOfParentMediaGroup, posOfPrecedingMediaGroup } from './media-common';
 import { isInSupportedInlineImageParent } from './media-inline';
@@ -46,7 +48,21 @@ var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(media
     eventType: EVENT_TYPE.TRACK
   };
 };
-
+export var getFailToInsertAnalytics = function getFailToInsertAnalytics(mediaState, actionSubjectId, inputMethod, insertMediaVia, reason) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: ACTION.FAILED_TO_INSERT,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: actionSubjectId,
+    attributes: {
+      inputMethod: inputMethod,
+      fileExtension: media,
+      insertMediaVia: insertMediaVia,
+      reason: reason
+    },
+    eventType: EVENT_TYPE.OPERATIONAL
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -69,6 +85,27 @@ function shouldAppendParagraph(state, node) {
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || 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 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
@@ -123,12 +160,33 @@ export var insertMediaInlineNode = function insertMediaInlineNode(editorAnalytic
 
     // Delete the selection if a selection is made
     var deleteRange = findDeleteRange(state);
-    if (!deleteRange) {
-      tr.insert(pos, content);
+    if (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, ACTION_SUBJECT_ID.MEDIA_INLINE, inputMethod, insertMediaVia);
+        }
+      } catch (error) {
+        payload = getFailToInsertAnalytics(mediaState, 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/esm/ui/CommentBadge/index.js

@@ -4,6 +4,8 @@ import { injectIntl } from 'react-intl-next';
 import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CommentBadge as CommentBadgeComponent, CommentBadgeNext } from '@atlaskit/editor-common/media-single';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
   var api = _ref.api,
     mediaNode = _ref.mediaNode,
@@ -16,23 +18,37 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     entered = _useState2[0],
     setEntered = _useState2[1];
-  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState.annotationState;
+  var selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = 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 = 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 = useCallback(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -40,8 +56,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;
@@ -88,23 +104,37 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     entered = _useState4[0],
     setEntered = _useState4[1];
-  var _useSharedPluginState2 = useSharedPluginState(api, ['annotation']),
+  var _useSharedPluginState2 = useSharedPluginState(api, ['annotation'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     annotationState = _useSharedPluginState2.annotationState;
+  var selectedAnnotationsSelector = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInlineCommentViewClosedSelector = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var annotationsSelector = useSharedPluginStateSelector(api, 'annotation.annotations', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.selectedAnnotations;
+  var isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isInlineCommentViewClosed;
+  var annotations = 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 = 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 = useCallback(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -112,8 +142,8 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     }
   }, [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/esm/ui/ImageBorder/styles.js

@@ -34,9 +34,8 @@ export var buttonStyle = function buttonStyle(selected) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
 };
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", N50);
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(N50, ")"));
 export var line = function line(size, selected) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
 };

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

@@ -8,6 +8,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BrowserWrapper } from './BrowserWrapper';
 import { ClipboardWrapper } from './ClipboardWrapper';
 import { DropzoneWrapper } from './DropzoneWrapper';
@@ -19,9 +21,19 @@ var MediaPicker = function MediaPicker(_ref) {
     mediaState = _ref.mediaState,
     onBrowseFn = _ref.onBrowseFn,
     editorDomElement = _ref.editorDomElement;
-  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity']),
+  var _useSharedPluginState = useSharedPluginState(api, ['focus', 'connectivity'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     focusState = _useSharedPluginState.focusState,
     connectivityState = _useSharedPluginState.connectivityState;
+  var hasFocusSelector = useSharedPluginStateSelector(api, 'focus.hasFocus', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var connectivityModeSelector = useSharedPluginStateSelector(api, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hasFocus = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hasFocusSelector : focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus;
+  var connectivityMode = 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
@@ -36,7 +48,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.createElement(ClipboardWrapper, {
+  var clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
     mediaState: mediaState,
     featureFlags: featureFlags,
     container: container
@@ -45,7 +57,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/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -9,7 +9,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
-import { getSelectedNearestMediaContainerNodeAttrs } from '../../ui/toolbar/utils';
+import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
 import { RenderMediaViewer } from './PortalWrapper';
 var interactiveStyles = css({
   cursor: 'pointer'
@@ -18,7 +18,8 @@ var mediaViewerContainerTestID = 'media-viewer-container-test';
 export var 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,
@@ -33,8 +34,7 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   useEffect(function () {
     setShowMediaViewer(isSelected);
   }, [isSelected]);
-  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
-  var mediaClientConfig = mediaPluginState.mediaClientConfig;
+  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode);
   var showMediaViewer = function showMediaViewer() {
     setShowMediaViewer(true);
   };

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

@@ -21,6 +21,7 @@ import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
 import memoizeOne from 'memoize-one';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
 import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
@@ -536,7 +537,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = classnames(className, resizerStyles);
       var isNestedNode = this.isAdjacentMode();
       var handlePositioning = this.getHandlePositioning();
-      var maxWidth = this.getMaxWidth();
+      var maxWidth = isSSR() && size.width && 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