@atlaskit/editor-plugin-media 1.10.1 → 1.12.0

package/dist/es2019/toolbar/filePreviewItem.js

@@ -1,32 +1,9 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
-import { MediaViewer } from '@atlaskit/media-viewer';
+import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
 import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
-const RenderMediaViewer = ({
-  mediaClientConfig,
-  onClose,
-  selectedNodeAttrs
-}) => {
-  const {
-    id,
-    collection = ''
-  } = selectedNodeAttrs;
-  const identifier = {
-    id,
-    mediaItemType: 'file',
-    collectionName: collection
-  };
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-    collectionName: collection,
-    items: [],
-    mediaClientConfig: mediaClientConfig,
-    selectedItem: identifier,
-    onClose: onClose
-  }), document.body);
-};
 export const FilePreviewItem = ({
   mediaPluginState,
   intl

package/dist/es2019/toolbar/utils.js

@@ -6,14 +6,16 @@ import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { isVideo } from '../utils/media-single';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
-  const selectedNode = mediaPluginState.selectedMediaContainerNode();
+  var _mediaPluginState$sel;
+  const 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;
 };
 export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
-  const selectedNode = mediaPluginState.selectedMediaContainerNode();
+  var _mediaPluginState$sel2;
+  const 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/es2019/ui/MediaViewer/MediaViewerContainer.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import React, { Fragment, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getSelectedNearestMediaContainerNodeAttrs } from '../../toolbar/utils';
+import { isVideo } from '../../utils/is-type';
+import { RenderMediaViewer } from './PortalWrapper';
+const interactiveStyles = css({
+  cursor: 'pointer'
+});
+export const mediaViewerContainerTestID = 'media-viewer-container-test';
+export const MediaViewerContainer = ({
+  mediaNode,
+  mediaPluginState,
+  isEditorViewMode = false,
+  isSelected = true,
+  isInline = false,
+  children
+}) => {
+  var _mediaNode$firstChild;
+  const [showViewer, setShowMediaViewer] = useState(false);
+  useEffect(() => {
+    setShowMediaViewer(isSelected);
+  }, [isSelected]);
+  const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  const mediaClientConfig = mediaPluginState.mediaClientConfig;
+  const showMediaViewer = () => {
+    setShowMediaViewer(true);
+  };
+  const closeMediaViewer = () => {
+    setShowMediaViewer(false);
+  };
+  const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
+  const enableMediaViewer = getBooleanFF('platform.editor.media.preview-in-full-page') && isEditorViewMode;
+  const shouldShowViewer = enableMediaViewer && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia;
+  return jsx(Fragment, null, enableMediaViewer ? jsx(Fragment, null, isInline ? jsx("span", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children) : jsx("div", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children), shouldShowViewer && jsx(RenderMediaViewer, {
+    selectedNodeAttrs: selectedNodeAttrs,
+    mediaClientConfig: mediaClientConfig,
+    onClose: closeMediaViewer
+  })) : children);
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MediaViewer } from '@atlaskit/media-viewer';
+export const RenderMediaViewer = ({
+  mediaClientConfig,
+  onClose,
+  selectedNodeAttrs
+}) => {
+  const {
+    id,
+    collection = ''
+  } = selectedNodeAttrs;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};

package/dist/esm/nodeviews/mediaInline.js

@@ -12,7 +12,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
-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';
@@ -20,6 +22,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';
@@ -170,7 +173,7 @@ export var MediaInline = function MediaInline(props) {
    * before the prerequisites meet
    */
   if (!viewMediaClientConfig || isContextIdUnsync) {
-    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+    return jsx(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
     });
@@ -180,7 +183,13 @@ export var MediaInline = function MediaInline(props) {
     return 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,
@@ -191,13 +200,18 @@ export var 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.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
-  });
+  }));
 };
 var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
   var identifier = _ref3.identifier,
@@ -208,12 +222,13 @@ var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
     api = _ref3.api,
     view = _ref3.view;
-  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+  var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode', 'media']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
     mediaState = _useSharedPluginState.mediaState;
   if (!mediaState) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(MediaInline, {
+  return jsx(MediaInline, {
     identifier: identifier,
     mediaProvider: mediaProvider,
     mediaPluginState: mediaState,
@@ -221,7 +236,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'
   });
 };
 export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
@@ -268,7 +284,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         api = props.api;
       var view = this.view;
       var getPos = this.getPos;
-      return /*#__PURE__*/React.createElement(WithProviders, {
+      return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref4) {
@@ -277,7 +293,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           if (!mediaProvider) {
             return null;
           }
-          return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
+          return jsx(MediaInlineSharedState, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
             node: _this.node,

package/dist/esm/nodeviews/mediaSingle.js

@@ -31,6 +31,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';
@@ -229,10 +230,10 @@ var MediaSingleNode = /*#__PURE__*/function (_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(_assertThisInitialized(_this), "onMediaSingleClicked", function (event) {
       var _this$captionPlaceHol;
+      // Workaround for iOS 16 Caption selection issue
+      // @see https://product-fabric.atlassian.net/browse/MEX-2012
       if (!browser.ios) {
         return;
       }
@@ -331,7 +332,9 @@ var MediaSingleNode = /*#__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,
@@ -425,14 +428,20 @@ var MediaSingleNode = /*#__PURE__*/function (_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));
     }
   }]);
   return MediaSingleNode;
@@ -455,10 +464,12 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     eventDispatcher = _ref5.eventDispatcher,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
     forwardRef = _ref5.forwardRef;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation']),
+  var _useSharedPluginState = 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 jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -475,7 +486,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/esm/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 var commentButton = function commentButton(intl, state, api) {
+export var commentButton = function commentButton(intl, _state, api) {
   var title = intl.formatMessage(messages.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 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
-      INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
+      INPUT_METHOD.FLOATING_TB, 'block', true);
+      command(state, dispatch);
     }
     return true;
   };

package/dist/esm/toolbar/filePreviewItem.js

@@ -1,34 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
-import { MediaViewer } from '@atlaskit/media-viewer';
+import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
 import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
-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.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-    collectionName: collection,
-    items: [],
-    mediaClientConfig: mediaClientConfig,
-    selectedItem: identifier,
-    onClose: onClose
-  }), document.body);
-};
-export var FilePreviewItem = function FilePreviewItem(_ref2) {
-  var mediaPluginState = _ref2.mediaPluginState,
-    intl = _ref2.intl;
+export var FilePreviewItem = function FilePreviewItem(_ref) {
+  var mediaPluginState = _ref.mediaPluginState,
+    intl = _ref.intl;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMediaViewerVisible = _useState2[0],

package/dist/esm/toolbar/utils.js

@@ -8,14 +8,16 @@ import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { isVideo } from '../utils/media-single';
 export var 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;
 };
 export var 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/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import React, { Fragment, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getSelectedNearestMediaContainerNodeAttrs } from '../../toolbar/utils';
+import { isVideo } from '../../utils/is-type';
+import { RenderMediaViewer } from './PortalWrapper';
+var interactiveStyles = css({
+  cursor: 'pointer'
+});
+export var mediaViewerContainerTestID = 'media-viewer-container-test';
+export var 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showViewer = _useState2[0],
+    setShowMediaViewer = _useState2[1];
+  useEffect(function () {
+    setShowMediaViewer(isSelected);
+  }, [isSelected]);
+  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
+  var mediaClientConfig = mediaPluginState.mediaClientConfig;
+  var showMediaViewer = function showMediaViewer() {
+    setShowMediaViewer(true);
+  };
+  var closeMediaViewer = function closeMediaViewer() {
+    setShowMediaViewer(false);
+  };
+  var isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
+  var enableMediaViewer = getBooleanFF('platform.editor.media.preview-in-full-page') && isEditorViewMode;
+  var shouldShowViewer = enableMediaViewer && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia;
+  return jsx(Fragment, null, enableMediaViewer ? jsx(Fragment, null, isInline ? jsx("span", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children) : jsx("div", {
+    onClick: showMediaViewer,
+    css: interactiveStyles,
+    "data-testid": mediaViewerContainerTestID
+  }, children), shouldShowViewer && jsx(RenderMediaViewer, {
+    selectedNodeAttrs: selectedNodeAttrs,
+    mediaClientConfig: mediaClientConfig,
+    onClose: closeMediaViewer
+  })) : children);
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MediaViewer } from '@atlaskit/media-viewer';
+export 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.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+    collectionName: collection,
+    items: [],
+    mediaClientConfig: mediaClientConfig,
+    selectedItem: identifier,
+    onClose: onClose
+  }), document.body);
+};

package/dist/types/next-plugin-type.d.ts

@@ -4,6 +4,7 @@ import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
@@ -18,6 +19,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ContextIdentifierPlugin>,
+        OptionalPlugin<EditorViewModePlugin>,
         GuidelinePlugin,
         GridPlugin,
         WidthPlugin,

package/dist/types/nodeviews/mediaInline.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
@@ -22,6 +22,7 @@ export interface MediaInlineProps {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     mediaPluginState: MediaPluginState;
+    editorViewMode?: boolean;
 }
 export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaNodeUpdater;
 /**
@@ -32,7 +33,7 @@ export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaN
  */
 export declare const updateMediaNodeAttributes: (props: MediaInlineProps, mediaNodeUpdater: MediaNodeUpdater) => Promise<void>;
 export declare const handleNewNode: (props: MediaInlineProps) => void;
-export declare const MediaInline: (props: MediaInlineProps) => JSX.Element;
+export declare const MediaInline: (props: MediaInlineProps) => jsx.JSX.Element;
 export interface MediaInlineNodeViewProps {
     providerFactory: ProviderFactory;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
@@ -45,6 +46,6 @@ export declare class MediaInlineNodeView extends SelectionBasedNodeView<MediaInl
     };
     ignoreMutation(): boolean;
     viewShouldUpdate(nextNode: PMNode): boolean;
-    render(props: MediaInlineNodeViewProps): JSX.Element;
+    render(props: MediaInlineNodeViewProps): jsx.JSX.Element;
 }
 export declare const ReactMediaInlineNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => (node: PMNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types/nodeviews/mediaSingle.d.ts

@@ -14,8 +14,7 @@ import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-
 import type { CardEvent } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
-import type { ForwardRef, getPosHandler } from '../types';
-import type { MediaOptions } from '../types';
+import type { ForwardRef, getPosHandler, MediaOptions } from '../types';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import type { MediaSingleNodeProps, MediaSingleNodeViewProps } from './types';
 export interface MediaSingleNodeState {

package/dist/types/nodeviews/types.d.ts

@@ -26,6 +26,8 @@ export interface MediaSingleNodeProps {
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    editorViewMode?: boolean;
+    editorDisabled?: boolean;
 }
 export interface MediaSingleNodeViewProps {
     eventDispatcher: EventDispatcher;

package/dist/types/toolbar/comments.d.ts

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
-export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;
+export declare const commentButton: (intl: IntlShape, _state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;

package/dist/types/ui/MediaViewer/MediaViewerContainer.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type MediaPluginState } from '../../types';
+type MediaViewerContainerProps = {
+    mediaNode: PMNode;
+    mediaPluginState: MediaPluginState;
+    isEditorViewMode?: boolean;
+    isSelected?: boolean;
+    isInline?: boolean;
+    children?: React.ReactNode;
+};
+export declare const mediaViewerContainerTestID = "media-viewer-container-test";
+export declare const MediaViewerContainer: ({ mediaNode, mediaPluginState, isEditorViewMode, isSelected, isInline, children, }: MediaViewerContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/MediaViewer/PortalWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type MediaBaseAttributes } from '@atlaskit/adf-schema';
+import type { MediaClientConfig } from '@atlaskit/media-client';
+interface RenderMediaViewerProps {
+    mediaClientConfig: MediaClientConfig;
+    onClose: () => void;
+    selectedNodeAttrs: MediaBaseAttributes;
+}
+export declare const RenderMediaViewer: ({ mediaClientConfig, onClose, selectedNodeAttrs, }: RenderMediaViewerProps) => React.ReactPortal;
+export {};

package/dist/types/ui/ResizableMediaSingle/types.d.ts

@@ -24,4 +24,5 @@ export type Props = MediaSingleProps & {
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     mediaSingleWidth?: number;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    disableHandles?: boolean;
 };

package/dist/types-ts4.5/next-plugin-type.d.ts

@@ -4,6 +4,7 @@ import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
@@ -18,6 +19,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ContextIdentifierPlugin>,
+        OptionalPlugin<EditorViewModePlugin>,
         GuidelinePlugin,
         GridPlugin,
         WidthPlugin,

package/dist/types-ts4.5/nodeviews/mediaInline.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
@@ -22,6 +22,7 @@ export interface MediaInlineProps {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     mediaPluginState: MediaPluginState;
+    editorViewMode?: boolean;
 }
 export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaNodeUpdater;
 /**
@@ -32,7 +33,7 @@ export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaN
  */
 export declare const updateMediaNodeAttributes: (props: MediaInlineProps, mediaNodeUpdater: MediaNodeUpdater) => Promise<void>;
 export declare const handleNewNode: (props: MediaInlineProps) => void;
-export declare const MediaInline: (props: MediaInlineProps) => JSX.Element;
+export declare const MediaInline: (props: MediaInlineProps) => jsx.JSX.Element;
 export interface MediaInlineNodeViewProps {
     providerFactory: ProviderFactory;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
@@ -45,6 +46,6 @@ export declare class MediaInlineNodeView extends SelectionBasedNodeView<MediaInl
     };
     ignoreMutation(): boolean;
     viewShouldUpdate(nextNode: PMNode): boolean;
-    render(props: MediaInlineNodeViewProps): JSX.Element;
+    render(props: MediaInlineNodeViewProps): jsx.JSX.Element;
 }
 export declare const ReactMediaInlineNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, dispatchAnalyticsEvent?: DispatchAnalyticsEvent) => (node: PMNode, view: EditorView, getPos: getPosHandler) => NodeView;