@atlaskit/editor-plugin-media 2.7.0 → 2.7.2

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/ImageBorder/styles.js

@@ -44,9 +44,8 @@ var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N800, ")") : "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), _uiColor.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
-var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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)", _colors.N50);
+var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N50, ")"));
 var line = exports.line = function line(size, selected) {
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N0, ")") : "var(--ds-icon, #44546F)");
 };

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

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

@@ -10,10 +10,12 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _attachmentEditorAttachment = _interopRequireDefault(require("@atlaskit/icon/core/migration/attachment--editor-attachment"));
-var onClickMediaButton = function onClickMediaButton(pluginState) {
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var onClickMediaButton = function onClickMediaButton(showMediaPicker) {
   return function () {
-    pluginState.showMediaPicker();
+    showMediaPicker();
     return true;
   };
 };
@@ -22,15 +24,25 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     intl = _ref.intl,
     api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     mediaState = _useSharedPluginState.mediaState;
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+  var allowsUploadsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var showMediaPickerSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var allowsUploads = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? allowsUploadsSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads;
+  var showMediaPicker = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? showMediaPickerSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker;
+  if (!allowsUploads || !showMediaPicker) {
     return null;
   }
   var toolbarMediaTitle = _media.toolbarMediaMessages.toolbarMediaTitle;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     buttonId: _uiMenu.TOOLBAR_BUTTON.MEDIA,
-    onClick: onClickMediaButton(mediaState),
+    onClick: onClickMediaButton(showMediaPicker),
     disabled: isDisabled,
     title: intl.formatMessage(toolbarMediaTitle),
     spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -6,11 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMediaProvider = void 0;
 var _react = 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 useMediaProvider = exports.useMediaProvider = function useMediaProvider(pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['media'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     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;
   var provider = (0, _react.useMemo)(function () {
-    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+    return mediaProvider;
+  }, [mediaProvider]);
   return provider;
 };

package/dist/cjs/ui/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
+exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -25,9 +25,8 @@ var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeA
   }
   return null;
 };
-var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
-  var _mediaPluginState$sel2;
-  var selectedNode = (_mediaPluginState$sel2 = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel2 === void 0 ? void 0 : _mediaPluginState$sel2.call(mediaPluginState);
+var getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrsFunction = function getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode) {
+  var selectedNode = selectedMediaContainerNode === null || selectedMediaContainerNode === void 0 ? void 0 : selectedMediaContainerNode();
   if (selectedNode) {
     switch (selectedNode.type.name) {
       case 'mediaSingle':
@@ -41,6 +40,9 @@ var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaC
   }
   return null;
 };
+var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
+  return getSelectedNearestMediaContainerNodeAttrsFunction(mediaPluginState.selectedMediaContainerNode);
+};
 var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState, isViewMode) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;

package/dist/es2019/mediaPlugin.js

@@ -4,6 +4,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -56,21 +57,35 @@ const MediaViewerFunctionalComponent = ({
 }) => {
   const {
     mediaState
-  } = useSharedPluginState(api, ['media']);
+  } = useSharedPluginState(api, ['media'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const isMediaViewerVisibleSelector = useSharedPluginStateSelector(api, 'media.isMediaViewerVisible', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaViewerSelectedMediaSelector = useSharedPluginStateSelector(api, 'media.mediaViewerSelectedMedia', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const mediaClientConfigSelector = useSharedPluginStateSelector(api, 'media.mediaClientConfig', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const isMediaViewerVisible = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isMediaViewerVisibleSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible;
+  const mediaViewerSelectedMedia = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaViewerSelectedMediaSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaViewerSelectedMedia;
+  const mediaClientConfig = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mediaClientConfigSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig;
 
   // Only traverse document once when media viewer is visible, media viewer items will not update
   // when document changes are made while media viewer is open
 
   const mediaItems = useMemo(() => {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
+    if (isMediaViewerVisible) {
       const mediaNodes = extractMediaNodes(editorView.state.doc);
       return createMediaIdentifierArray(mediaNodes);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
-  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+  }, [isMediaViewerVisible]);
 
   // Viewer does not have required attributes to render the media viewer
-  if (!(mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaViewerSelectedMedia) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaClientConfig)) {
+  if (!isMediaViewerVisible || !mediaViewerSelectedMedia || !mediaClientConfig) {
     return null;
   }
   const handleOnClose = () => {
@@ -78,9 +93,9 @@ const MediaViewerFunctionalComponent = ({
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideMediaViewer);
   };
   return /*#__PURE__*/React.createElement(RenderMediaViewer, {
-    mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
+    mediaClientConfig: mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    selectedNodeAttrs: mediaViewerSelectedMedia,
     items: mediaItems
   });
 };

package/dist/es2019/nodeviews/mediaGroup.js

@@ -5,6 +5,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { nodeViewsMessages as messages } from '@atlaskit/editor-common/media';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
@@ -265,11 +266,23 @@ function MediaGroupNodeViewInternal({
   const {
     editorDisabledState: editorDisabledPlugin,
     editorViewModeState: editorViewModePlugin
-  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']);
+  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+  const editorDisabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorViewModeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledPlugin === null || editorDisabledPlugin === void 0 ? void 0 : editorDisabledPlugin.editorDisabled;
+  const editorViewMode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode;
   const mediaProvider = useMediaProvider(pluginInjectionApi);
   return renderFn({
     editorDisabledPlugin,
     editorViewModePlugin,
+    editorDisabled,
+    editorViewMode,
     mediaProvider
   });
 }
@@ -290,7 +303,9 @@ class MediaGroupNodeView extends ReactNodeView {
         const renderFn = ({
           editorDisabledPlugin,
           editorViewModePlugin,
-          mediaProvider: mediaProviderFromState
+          mediaProvider: mediaProviderFromState,
+          editorDisabled,
+          editorViewMode
         }) => {
           const mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
           if (!mediaProvider) {
@@ -302,7 +317,7 @@ class MediaGroupNodeView extends ReactNodeView {
               getPos: getPos,
               view: this.view,
               forwardRef: forwardRef,
-              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              disabled: editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
@@ -310,7 +325,7 @@ class MediaGroupNodeView extends ReactNodeView {
               anchorPos: this.view.state.selection.$anchor.pos,
               headPos: this.view.state.selection.$head.pos,
               mediaOptions: mediaOptions,
-              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              editorViewMode: editorViewMode === 'view'
             });
           }
           return /*#__PURE__*/React.createElement(IntlMediaGroup, {
@@ -318,7 +333,7 @@ class MediaGroupNodeView extends ReactNodeView {
             getPos: getPos,
             view: this.view,
             forwardRef: forwardRef,
-            disabled: (editorDisabledPlugin || {}).editorDisabled,
+            disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabled : (editorDisabledPlugin || {}).editorDisabled,
             allowLazyLoading: mediaOptions.allowLazyLoading,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,
@@ -326,7 +341,7 @@ class MediaGroupNodeView extends ReactNodeView {
             anchorPos: this.view.state.selection.$anchor.pos,
             headPos: this.view.state.selection.$head.pos,
             mediaOptions: mediaOptions,
-            editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+            editorViewMode: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewMode === 'view' : (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
           });
         };
         return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {