@atlaskit/editor-plugin-media 1.10.1 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 1.12.0
+
+### Minor Changes
+
+- [#82581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82581) [`c1be75ae15b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1be75ae15b6) - ED-22606 add toggle inline comment action
+
+### Patch Changes
+
+- [#81777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81777) [`c6d7a5378751`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6d7a5378751) - Bump adf-schema to 35.7.0
+- Updated dependencies
+
+## 1.11.0
+
+### Minor Changes
+
+- [#80438](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80438) [`cf8860dbf719`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf8860dbf719) - [ux] Add media viewer previews to inline media and media single images when Editor is in view mode
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.10.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,7 +15,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -24,15 +24,14 @@ var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-n
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
+var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _isType = require("../utils/is-type");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _styles = require("./styles");
-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 && Object.prototype.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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var createMediaNodeUpdater = exports.createMediaNodeUpdater = function createMediaNodeUpdater(props) {
   var node = props.node;
   return new _mediaNodeUpdater.MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
@@ -180,7 +179,7 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
    * before the prerequisites meet
    */
   if (!viewMediaClientConfig || isContextIdUnsync) {
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+    return (0, _react2.jsx)(_mediaUi.MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
     });
@@ -190,7 +189,13 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     return mark.type.name === 'border';
   });
   if (allowInlineImages && (0, _isType.isImage)(type)) {
-    return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
+    return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
+      mediaNode: props.node,
+      mediaPluginState: props.mediaPluginState,
+      isEditorViewMode: props.editorViewMode,
+      isSelected: props.isSelected,
+      isInline: true
+    }, (0, _react2.jsx)(_mediaInline.MediaInlineImageCard, {
       mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
       identifier: identifier,
       isSelected: props.isSelected,
@@ -201,13 +206,18 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
       }
-    });
+    }));
   }
-  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+  return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
+    mediaNode: props.node,
+    mediaPluginState: props.mediaPluginState,
+    isEditorViewMode: props.editorViewMode,
+    isSelected: props.isSelected
+  }, (0, _react2.jsx)(_mediaCard.MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
-  });
+  }));
 };
 var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
   var identifier = _ref3.identifier,
@@ -218,12 +228,13 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
     api = _ref3.api,
     view = _ref3.view;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode', 'media']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
     mediaState = _useSharedPluginState.mediaState;
   if (!mediaState) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(MediaInline, {
+  return (0, _react2.jsx)(MediaInline, {
     identifier: identifier,
     mediaProvider: mediaProvider,
     mediaPluginState: mediaState,
@@ -231,7 +242,8 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     isSelected: isSelected,
     view: view,
     getPos: getPos,
-    contextIdentifierProvider: contextIdentifierProvider
+    contextIdentifierProvider: contextIdentifierProvider,
+    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
   });
 };
 var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
@@ -278,7 +290,7 @@ var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_
         api = props.api;
       var view = this.view;
       var getPos = this.getPos;
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref4) {
@@ -287,7 +299,7 @@ var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_
           if (!mediaProvider) {
             return null;
           }
-          return /*#__PURE__*/_react.default.createElement(MediaInlineSharedState, {
+          return (0, _react2.jsx)(MediaInlineSharedState, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
             node: _this.node,

package/dist/cjs/nodeviews/mediaSingle.js

@@ -33,6 +33,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _captions = require("../commands/captions");
 var _main = require("../pm-plugins/main");
 var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
+var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _mediaCommon = require("../utils/media-common");
@@ -237,10 +238,10 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       tr.setSelection(_state.NodeSelection.create(tr.doc, pos));
       return dispatch(tr);
     });
-    // Workaround for iOS 16 Caption selection issue
-    // @see https://product-fabric.atlassian.net/browse/MEX-2012
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMediaSingleClicked", function (event) {
       var _this$captionPlaceHol;
+      // Workaround for iOS 16 Caption selection issue
+      // @see https://product-fabric.atlassian.net/browse/MEX-2012
       if (!_utils.browser.ios) {
         return;
       }
@@ -339,7 +340,9 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         containerWidth = _this$props2.width,
         lineLength = _this$props2.lineLength,
-        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
+        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
+        editorViewMode = _this$props2.editorViewMode,
+        mediaPluginState = _this$props2.mediaPluginState;
       var _ref4 = node.attrs,
         layout = _ref4.layout,
         widthType = _ref4.widthType,
@@ -433,14 +436,20 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {
+        mediaPluginState: mediaPluginState,
+        isEditorViewMode: editorViewMode,
+        mediaNode: node,
+        isSelected: isSelected,
+        isInline: false
+      }, canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
       }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         lineLength: contentWidthForLegacyExperience,
         pctWidth: mediaSingleWidthAttribute
       }), MediaChildren) : (0, _react2.jsx)(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
         pctWidth: mediaSingleWidthAttribute
-      }), MediaChildren);
+      }), MediaChildren));
     }
   }]);
   return MediaSingleNode;
@@ -462,10 +471,12 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     eventDispatcher = _ref5.eventDispatcher,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
     forwardRef = _ref5.forwardRef;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
-    annotationState = _useSharedPluginState.annotationState;
+    annotationState = _useSharedPluginState.annotationState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
   return (0, _react2.jsx)(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -482,7 +493,9 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
-    pluginInjectionApi: pluginInjectionApi
+    pluginInjectionApi: pluginInjectionApi,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
   });
 };
 var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {

package/dist/cjs/toolbar/comments.js

@@ -9,14 +9,17 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
-var commentButton = exports.commentButton = function commentButton(intl, state, api) {
+var commentButton = exports.commentButton = function commentButton(intl, _state, api) {
   var title = intl.formatMessage(_media.commentMessages.addCommentOnMedia);
   var onClickHandler = function onClickHandler(state, dispatch) {
-    if (api && api.annotation) {
-      api.annotation.actions.setInlineCommentDraftState(true,
+    if (api !== null && api !== void 0 && api.annotation && state.selection instanceof _state2.NodeSelection) {
+      var mediaNode = state.selection.node.firstChild;
+      var command = api.annotation.actions.showCommentForBlockNode(mediaNode) || api.annotation.actions.setInlineCommentDraftState(true,
       // TODO: might need to update to reflect it's from media floating toolbar
-      _analytics.INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+      _analytics.INPUT_METHOD.FLOATING_TB, 'block', true);
+      command(state, dispatch);
     }
     return true;
   };

package/dist/cjs/toolbar/filePreviewItem.js

@@ -8,37 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.FilePreviewItem = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaUi = require("@atlaskit/media-ui");
-var _mediaViewer = require("@atlaskit/media-viewer");
+var _PortalWrapper = require("../ui/MediaViewer/PortalWrapper");
 var _utils = require("./utils");
 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 && Object.prototype.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 RenderMediaViewer = function RenderMediaViewer(_ref) {
-  var mediaClientConfig = _ref.mediaClientConfig,
-    onClose = _ref.onClose,
-    selectedNodeAttrs = _ref.selectedNodeAttrs;
-  var id = selectedNodeAttrs.id,
-    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
-  var identifier = {
-    id: id,
-    mediaItemType: 'file',
-    collectionName: collection
-  };
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
-    collectionName: collection,
-    items: [],
-    mediaClientConfig: mediaClientConfig,
-    selectedItem: identifier,
-    onClose: onClose
-  }), document.body);
-};
-var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref2) {
-  var mediaPluginState = _ref2.mediaPluginState,
-    intl = _ref2.intl;
+var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
+  var mediaPluginState = _ref.mediaPluginState,
+    intl = _ref.intl;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMediaViewerVisible = _useState2[0],
@@ -60,7 +39,7 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref2)
       label: "file preview"
     }),
     tooltipContent: tooltipContent
-  }), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(RenderMediaViewer, {
+  }), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {
     mediaClientConfig: mediaPluginState.mediaClientConfig,
     onClose: onMediaViewerClose,
     selectedNodeAttrs: selectedNodeAttrs

package/dist/cjs/toolbar/utils.js

@@ -15,14 +15,16 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaSingle2 = require("../utils/media-single");
 var getSelectedMediaContainerNodeAttrs = exports.getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
-  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+  var _mediaPluginState$sel;
+  var selectedNode = (_mediaPluginState$sel = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel === void 0 ? void 0 : _mediaPluginState$sel.call(mediaPluginState);
   if (selectedNode && selectedNode.attrs) {
     return selectedNode.attrs;
   }
   return null;
 };
 var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
-  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+  var _mediaPluginState$sel2;
+  var selectedNode = (_mediaPluginState$sel2 = mediaPluginState.selectedMediaContainerNode) === null || _mediaPluginState$sel2 === void 0 ? void 0 : _mediaPluginState$sel2.call(mediaPluginState);
   if (selectedNode) {
     switch (selectedNode.type.name) {
       case 'mediaSingle':

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaViewerContainerTestID = exports.MediaViewerContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils = require("../../toolbar/utils");
+var _isType = require("../../utils/is-type");
+var _PortalWrapper = require("./PortalWrapper");
+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 && Object.prototype.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; }
+/** @jsx jsx */
+
+var interactiveStyles = (0, _react2.css)({
+  cursor: 'pointer'
+});
+var mediaViewerContainerTestID = exports.mediaViewerContainerTestID = 'media-viewer-container-test';
+var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerContainer(_ref) {
+  var _mediaNode$firstChild;
+  var mediaNode = _ref.mediaNode,
+    mediaPluginState = _ref.mediaPluginState,
+    _ref$isEditorViewMode = _ref.isEditorViewMode,
+    isEditorViewMode = _ref$isEditorViewMode === void 0 ? false : _ref$isEditorViewMode,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? true : _ref$isSelected,
+    _ref$isInline = _ref.isInline,
+    isInline = _ref$isInline === void 0 ? false : _ref$isInline,
+    children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showViewer = _useState2[0],
+    setShowMediaViewer = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setShowMediaViewer(isSelected);
+  }, [isSelected]);
+  var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
+  var mediaClientConfig = mediaPluginState.mediaClientConfig;
+  var showMediaViewer = function showMediaViewer() {
+    setShowMediaViewer(true);
+  };
+  var closeMediaViewer = function closeMediaViewer() {
+    setShowMediaViewer(false);
+  };
+  var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
+  var enableMediaViewer = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.preview-in-full-page') && isEditorViewMode;
+  var shouldShowViewer = enableMediaViewer && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia;
+  return (0, _react2.jsx)(_react.Fragment, null, enableMediaViewer ? (0, _react2.jsx)(_react.Fragment, null, isInline ? (0, _react2.jsx)("span", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children) : (0, _react2.jsx)("div", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children), shouldShowViewer && (0, _react2.jsx)(_PortalWrapper.RenderMediaViewer, {
+    selectedNodeAttrs: selectedNodeAttrs,
+    mediaClientConfig: mediaClientConfig,
+    onClose: closeMediaViewer
+  })) : children);
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderMediaViewer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mediaViewer = require("@atlaskit/media-viewer");
+var RenderMediaViewer = exports.RenderMediaViewer = function RenderMediaViewer(_ref) {
+  var mediaClientConfig = _ref.mediaClientConfig,
+    onClose = _ref.onClose,
+    selectedNodeAttrs = _ref.selectedNodeAttrs;
+  var id = selectedNodeAttrs.id,
+    _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+    collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};

package/dist/es2019/nodeviews/mediaInline.js

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -6,6 +8,7 @@ import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineNodeSelector } from './styles';
@@ -107,7 +110,7 @@ export const MediaInline = props => {
    * before the prerequisites meet
    */
   if (!viewMediaClientConfig || isContextIdUnsync) {
-    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+    return jsx(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
     });
@@ -117,7 +120,13 @@ export const MediaInline = props => {
   } = props.mediaPluginState;
   const borderMark = (_props$node = props.node) === null || _props$node === void 0 ? void 0 : (_props$node$marks = _props$node.marks) === null || _props$node$marks === void 0 ? void 0 : _props$node$marks.find(mark => mark.type.name === 'border');
   if (allowInlineImages && isImage(type)) {
-    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+    return jsx(MediaViewerContainer, {
+      mediaNode: props.node,
+      mediaPluginState: props.mediaPluginState,
+      isEditorViewMode: props.editorViewMode,
+      isSelected: props.isSelected,
+      isInline: true
+    }, jsx(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
       identifier: identifier,
       isSelected: props.isSelected,
@@ -128,13 +137,18 @@ export const MediaInline = props => {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
       }
-    });
+    }));
   }
-  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+  return jsx(MediaViewerContainer, {
+    mediaNode: props.node,
+    mediaPluginState: props.mediaPluginState,
+    isEditorViewMode: props.editorViewMode,
+    isSelected: props.isSelected
+  }, jsx(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
-  });
+  }));
 };
 const MediaInlineSharedState = ({
   identifier,
@@ -147,12 +161,13 @@ const MediaInlineSharedState = ({
   view
 }) => {
   const {
+    editorViewModeState,
     mediaState
-  } = useSharedPluginState(api, ['media']);
+  } = useSharedPluginState(api, ['editorViewMode', 'media']);
   if (!mediaState) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(MediaInline, {
+  return jsx(MediaInline, {
     identifier: identifier,
     mediaProvider: mediaProvider,
     mediaPluginState: mediaState,
@@ -160,7 +175,8 @@ const MediaInlineSharedState = ({
     isSelected: isSelected,
     view: view,
     getPos: getPos,
-    contextIdentifierProvider: contextIdentifierProvider
+    contextIdentifierProvider: contextIdentifierProvider,
+    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
   });
 };
 export class MediaInlineNodeView extends SelectionBasedNodeView {
@@ -194,7 +210,7 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
       view
     } = this;
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
@@ -204,7 +220,7 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
         if (!mediaProvider) {
           return null;
         }
-        return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
+        return jsx(MediaInlineSharedState, {
           identifier: this.node.attrs.id,
           mediaProvider: mediaProvider,
           node: this.node,

package/dist/es2019/nodeviews/mediaSingle.js

@@ -18,6 +18,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -165,10 +166,10 @@ export default class MediaSingleNode extends Component {
       tr.setSelection(NodeSelection.create(tr.doc, pos));
       return dispatch(tr);
     });
-    // Workaround for iOS 16 Caption selection issue
-    // @see https://product-fabric.atlassian.net/browse/MEX-2012
     _defineProperty(this, "onMediaSingleClicked", event => {
       var _this$captionPlaceHol;
+      // Workaround for iOS 16 Caption selection issue
+      // @see https://product-fabric.atlassian.net/browse/MEX-2012
       if (!browser.ios) {
         return;
       }
@@ -242,7 +243,9 @@ export default class MediaSingleNode extends Component {
       pluginInjectionApi,
       width: containerWidth,
       lineLength,
-      dispatchAnalyticsEvent
+      dispatchAnalyticsEvent,
+      editorViewMode,
+      mediaPluginState
     } = this.props;
     const {
       layout,
@@ -346,14 +349,20 @@ export default class MediaSingleNode extends Component {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
+    return jsx(MediaViewerContainer, {
+      mediaPluginState: mediaPluginState,
+      isEditorViewMode: editorViewMode,
+      mediaNode: node,
+      isSelected: isSelected,
+      isInline: false
+    }, canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
       showLegacyNotification: widthType !== 'pixel'
     }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
       lineLength: contentWidthForLegacyExperience,
       pctWidth: mediaSingleWidthAttribute
     }), MediaChildren) : jsx(MediaSingle, _extends({}, mediaSingleProps, {
       pctWidth: mediaSingleWidthAttribute
-    }), MediaChildren);
+    }), MediaChildren));
   }
 }
 _defineProperty(MediaSingleNode, "defaultProps", {
@@ -377,8 +386,10 @@ const MediaSingleNodeWrapper = ({
   const {
     widthState,
     mediaState,
-    annotationState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation']);
+    annotationState,
+    editorDisabledState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
   return jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -395,7 +406,9 @@ const MediaSingleNodeWrapper = ({
     annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
-    pluginInjectionApi: pluginInjectionApi
+    pluginInjectionApi: pluginInjectionApi,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
   });
 };
 class MediaSingleNodeView extends ReactNodeView {

package/dist/es2019/toolbar/comments.js

@@ -2,14 +2,17 @@ import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-export const commentButton = (intl, state, api) => {
+export const commentButton = (intl, _state, api) => {
   const title = intl.formatMessage(messages.addCommentOnMedia);
   const onClickHandler = (state, dispatch) => {
-    if (api && api.annotation) {
-      api.annotation.actions.setInlineCommentDraftState(true,
+    if (api !== null && api !== void 0 && api.annotation && state.selection instanceof NodeSelection) {
+      const mediaNode = state.selection.node.firstChild;
+      const command = api.annotation.actions.showCommentForBlockNode(mediaNode) || api.annotation.actions.setInlineCommentDraftState(true,
       // TODO: might need to update to reflect it's from media floating toolbar
-      INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+      INPUT_METHOD.FLOATING_TB, 'block', true);
+      command(state, dispatch);
     }
     return true;
   };