@atlaskit/editor-plugin-media 1.16.5 → 1.17.0

package/dist/cjs/nodeviews/mediaSingle.js

@@ -34,7 +34,6 @@ var _captions = require("../commands/captions");
 var _main = require("../pm-plugins/main");
 var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
 var _CommentBadge = require("../ui/CommentBadge");
-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");
@@ -329,7 +328,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -343,7 +342,6 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         lineLength = _this$props2.lineLength,
         dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
         editorViewMode = _this$props2.editorViewMode,
-        mediaPluginState = _this$props2.mediaPluginState,
         editorDisabled = _this$props2.editorDisabled,
         annotationPluginState = _this$props2.annotationPluginState;
       var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
@@ -430,6 +428,16 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
           canResize = canResize && !disabledNode;
         }
       }
+      var isBadgePosOffsetRight = function isBadgePosOffsetRight() {
+        var pos = getPos();
+        if (pos !== undefined) {
+          var _$pos = view.state.doc.resolve(pos);
+          var _table = view.state.schema.nodes.table;
+          var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)(_$pos, [_table]);
+          return foundTableNode ? '2px' : '14px';
+        }
+      };
+      var badgeOffsetRight = isBadgePosOffsetRight();
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
         shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
@@ -441,9 +449,11 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        badgeOffsetRight: badgeOffsetRight,
         getPos: getPos,
         isDrafting: isCurrentNodeDrafting
       }), (0, _react2.jsx)("div", {
@@ -452,13 +462,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      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, {
+      return (0, _react2.jsx)(_react.Fragment, null, 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,

package/dist/cjs/plugin.js

@@ -269,6 +269,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        var _api$editorViewMode;
         return (0, _toolbar.floatingToolbar)(state, intl, {
           providerFactory: providerFactory,
           allowMediaInline: options && (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', options.featureFlags),
@@ -282,7 +283,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          getEditorFeatureFlags: options && options.getEditorFeatureFlags
+          getEditorFeatureFlags: options && options.getEditorFeatureFlags,
+          isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view'
         }, api);
       }
     }

package/dist/cjs/toolbar/comments.js

@@ -45,6 +45,7 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
       description: title
-    })
+    }),
+    supportsViewMode: true
   };
 };

package/dist/cjs/toolbar/index.js

@@ -77,10 +77,14 @@ var generateFilePreviewItem = exports.generateFilePreviewItem = function generat
         mediaPluginState: mediaPluginState,
         intl: intl
       });
-    }
+    },
+    supportsViewMode: true
   };
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
+  if (isViewOnly) {
+    return [];
+  }
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [{
     type: 'separator'
@@ -182,7 +186,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
     allowImagePreview = options.allowImagePreview,
-    getEditorFeatureFlags = options.getEditorFeatureFlags;
+    getEditorFeatureFlags = options.getEditorFeatureFlags,
+    isViewOnly = options.isViewOnly;
   var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
   var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
@@ -406,9 +411,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'separator'
       });
     }
-    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia) {
+    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia && (!isViewOnly || isViewOnly && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.comments-in-media-toolbar-button')) //This is required until this fix is merged: https://product-fabric.atlassian.net/browse/ED-23180
+    ) {
       toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi), {
-        type: 'separator'
+        type: 'separator',
+        supportsViewMode: true
       });
     }
     if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
@@ -446,11 +453,13 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               mediaLinkingState: mediaLinkingState,
               onAddLink: editLink,
               onEditLink: editLink,
-              onOpenLink: openLink
+              onOpenLink: openLink,
+              isViewOnly: isViewOnly
             });
           }
           return null;
-        }
+        },
+        supportsViewMode: true
       });
     }
     // Preview Support
@@ -460,11 +469,28 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
       if (!(0, _mediaSingle2.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
         toolbarButtons.push(generateFilePreviewItem(pluginState, intl), {
-          type: 'separator'
+          type: 'separator',
+          supportsViewMode: true
         });
       }
     }
   }
+  if (isViewOnly) {
+    toolbarButtons.push({
+      id: 'editor.media.image.download',
+      type: 'button',
+      icon: _download.default,
+      onClick: function onClick() {
+        (0, _utils2.downloadMedia)(pluginState, isViewOnly);
+        return true;
+      },
+      title: intl.formatMessage(_mediaUi.messages.download),
+      supportsViewMode: true
+    }, {
+      type: 'separator',
+      supportsViewMode: true
+    });
+  }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a7;
     toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
@@ -483,7 +509,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
     title: intl.formatMessage(_messages.default.remove),
     onClick: remove,
-    testId: 'media-toolbar-remove-button'
+    testId: 'media-toolbar-remove-button',
+    supportsViewMode: false
   };
   var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
     type: 'copy-button',
@@ -491,10 +518,14 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaSingle
-    }, {
-      type: 'separator'
-    }]
-  }, removeButton]);
+    }],
+    supportsViewMode: true
+  }]);
+  items.push({
+    type: 'separator',
+    supportsViewMode: false
+  });
+  items.push(removeButton);
   return items;
 };
 var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
@@ -517,7 +548,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
-    allowResizing = options.allowResizing;
+    allowResizing = options.allowResizing,
+    isViewOnly = options.isViewOnly;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
@@ -563,7 +595,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -33,7 +33,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     onAddLink = _ref.onAddLink,
     onEditLink = _ref.onEditLink,
     onOpenLink = _ref.onOpenLink,
-    isInlineNode = _ref.isInlineNode;
+    isInlineNode = _ref.isInlineNode,
+    isViewOnly = _ref.isViewOnly;
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showLinkingControls = _useState2[0],
@@ -61,7 +62,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
     var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
     var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)(_react.Fragment, null, !isViewOnly && (0, _react2.jsx)("div", {
       css: wrapperStyles
     }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       onClick: onEditLink,
@@ -84,7 +85,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   } else {
     var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    return !isViewOnly ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: _title,
@@ -95,6 +96,6 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       icon: (0, _react2.jsx)(_link.default, {
         label: _title
       })
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;
   }
 };

package/dist/cjs/toolbar/mediaInline.js

@@ -249,7 +249,7 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
   });
 
   //Image Preview
-  if (options.allowImagePreview) {
+  if (!options.isViewOnly && options.allowImagePreview) {
     inlineImageItems.push((0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
       type: 'separator'
     });

package/dist/cjs/toolbar/utils.js

@@ -39,13 +39,13 @@ var getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedNearestMediaC
   return null;
 };
 var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaPluginState, isViewMode) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
-          selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+          selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
           if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig)) {
             _context.next = 10;
             break;
@@ -72,7 +72,7 @@ var downloadMedia = exports.downloadMedia = /*#__PURE__*/function () {
       }
     }, _callee, null, [[0, 13]]);
   }));
-  return function downloadMedia(_x) {
+  return function downloadMedia(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();

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

@@ -19,7 +19,9 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     view = _ref.view,
     getPos = _ref.getPos,
     intl = _ref.intl,
-    isDrafting = _ref.isDrafting;
+    isDrafting = _ref.isDrafting,
+    badgeOffsetRight = _ref.badgeOffsetRight,
+    commentsOnMediaBugFixEnabled = _ref.commentsOnMediaBugFixEnabled;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     entered = _useState2[0],
@@ -56,12 +58,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
   }
   var mediaElement = view.domAtPos(pos + 1).node;
   return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
+    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
+    badgeOffsetRight: badgeOffsetRight,
     width: mediaNode.attrs.width,
     height: mediaNode.attrs.height,
     onClick: onClick,
     mediaElement: mediaElement,
     intl: intl,
-    isEditor: true,
     status: entered ? 'entered' : status,
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);

package/dist/es2019/nodeviews/mediaSingle.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
@@ -19,7 +19,6 @@ import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { CommentBadge } from '../ui/CommentBadge';
-import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -230,7 +229,7 @@ export default class MediaSingleNode extends Component {
     });
   }
   render() {
-    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild;
+    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit2, _mediaOptions$getEdit3;
     const {
       selected,
       getPos,
@@ -246,7 +245,6 @@ export default class MediaSingleNode extends Component {
       lineLength,
       dispatchAnalyticsEvent,
       editorViewMode,
-      mediaPluginState,
       editorDisabled,
       annotationPluginState
     } = this.props;
@@ -343,6 +341,18 @@ export default class MediaSingleNode extends Component {
         canResize = canResize && !disabledNode;
       }
     }
+    const isBadgePosOffsetRight = () => {
+      const pos = getPos();
+      if (pos !== undefined) {
+        const $pos = view.state.doc.resolve(pos);
+        const {
+          table
+        } = view.state.schema.nodes;
+        const foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
+        return foundTableNode ? '2px' : '14px';
+      }
+    };
+    const badgeOffsetRight = isBadgePosOffsetRight();
     let shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     if (getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
       shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
@@ -354,9 +364,11 @@ export default class MediaSingleNode extends Component {
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
     }, commentsOnMedia && jsx(CommentBadge, {
+      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
       view: view,
       api: pluginInjectionApi,
       mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+      badgeOffsetRight: badgeOffsetRight,
       getPos: getPos,
       isDrafting: isCurrentNodeDrafting
     }), jsx("div", {
@@ -365,13 +377,7 @@ export default class MediaSingleNode extends Component {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    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, {
+    return jsx(Fragment, null, canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
       showLegacyNotification: widthType !== 'pixel'
     }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
       lineLength: contentWidthForLegacyExperience,

package/dist/es2019/plugin.js

@@ -262,21 +262,25 @@ export const mediaPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
-        providerFactory,
-        allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
-        allowResizing: options && options.allowResizing,
-        allowResizingInTables: options && options.allowResizingInTables,
-        allowCommentsOnMedia: options && options.allowCommentsOnMedia,
-        allowLinking: options && options.allowLinking,
-        allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
-        allowAltTextOnImages: options && options.allowAltTextOnImages,
-        allowImagePreview: options && options.allowImagePreview,
-        altTextValidator: options && options.altTextValidator,
-        fullWidthEnabled: options && options.fullWidthEnabled,
-        allowMediaInlineImages: options && options.allowMediaInlineImages,
-        getEditorFeatureFlags: options && options.getEditorFeatureFlags
-      }, api)
+      floatingToolbar: (state, intl, providerFactory) => {
+        var _api$editorViewMode, _api$editorViewMode$s;
+        return floatingToolbar(state, intl, {
+          providerFactory,
+          allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
+          allowResizing: options && options.allowResizing,
+          allowResizingInTables: options && options.allowResizingInTables,
+          allowCommentsOnMedia: options && options.allowCommentsOnMedia,
+          allowLinking: options && options.allowLinking,
+          allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
+          allowAltTextOnImages: options && options.allowAltTextOnImages,
+          allowImagePreview: options && options.allowImagePreview,
+          altTextValidator: options && options.altTextValidator,
+          fullWidthEnabled: options && options.fullWidthEnabled,
+          allowMediaInlineImages: options && options.allowMediaInlineImages,
+          getEditorFeatureFlags: options && options.getEditorFeatureFlags,
+          isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view'
+        }, api);
+      }
     }
   };
 };

package/dist/es2019/toolbar/comments.js

@@ -37,6 +37,7 @@ export const commentButton = (intl, state, api) => {
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: title
-    })
+    }),
+    supportsViewMode: true
   };
 };

package/dist/es2019/toolbar/index.js

@@ -63,10 +63,14 @@ export const generateFilePreviewItem = (mediaPluginState, intl) => {
         mediaPluginState: mediaPluginState,
         intl: intl
       });
-    }
+    },
+    supportsViewMode: true
   };
 };
-const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) => {
+const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
+  if (isViewOnly) {
+    return [];
+  }
   const {
     mediaGroup
   } = state.schema.nodes;
@@ -171,7 +175,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowMediaInline,
     allowMediaInlineImages,
     allowImagePreview,
-    getEditorFeatureFlags
+    getEditorFeatureFlags,
+    isViewOnly
   } = options;
   const editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   let toolbarButtons = [];
@@ -403,9 +408,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'separator'
       });
     }
-    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia) {
+    if (editorFeatureFlags && editorFeatureFlags.commentsOnMedia && allowCommentsOnMedia && (!isViewOnly || isViewOnly && getBooleanFF('platform.editor.live-view.comments-in-media-toolbar-button')) //This is required until this fix is merged: https://product-fabric.atlassian.net/browse/ED-23180
+    ) {
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
-        type: 'separator'
+        type: 'separator',
+        supportsViewMode: true
       });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
@@ -449,11 +456,13 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               mediaLinkingState: mediaLinkingState,
               onAddLink: editLink,
               onEditLink: editLink,
-              onOpenLink: openLink
+              onOpenLink: openLink,
+              isViewOnly: isViewOnly
             });
           }
           return null;
-        }
+        },
+        supportsViewMode: true
       });
     }
     // Preview Support
@@ -463,11 +472,28 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
       if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
         toolbarButtons.push(generateFilePreviewItem(pluginState, intl), {
-          type: 'separator'
+          type: 'separator',
+          supportsViewMode: true
         });
       }
     }
   }
+  if (isViewOnly) {
+    toolbarButtons.push({
+      id: 'editor.media.image.download',
+      type: 'button',
+      icon: DownloadIcon,
+      onClick: () => {
+        downloadMedia(pluginState, isViewOnly);
+        return true;
+      },
+      title: intl.formatMessage(messages.download),
+      supportsViewMode: true
+    }, {
+      type: 'separator',
+      supportsViewMode: true
+    });
+  }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a7;
     toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
@@ -486,7 +512,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
     title: intl.formatMessage(commonMessages.remove),
     onClick: remove,
-    testId: 'media-toolbar-remove-button'
+    testId: 'media-toolbar-remove-button',
+    supportsViewMode: false
   };
   const items = [...toolbarButtons, {
     type: 'copy-button',
@@ -494,10 +521,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       state,
       formatMessage: intl.formatMessage,
       nodeType: mediaSingle
-    }, {
-      type: 'separator'
-    }]
-  }, removeButton];
+    }],
+    supportsViewMode: true
+  }];
+  items.push({
+    type: 'separator',
+    supportsViewMode: false
+  });
+  items.push(removeButton);
   return items;
 };
 const getMediaTypeMessage = selectedNodeTypeSingle => {
@@ -518,7 +549,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     allowAltTextOnImages,
     providerFactory,
     allowMediaInline,
-    allowResizing
+    allowResizing,
+    isViewOnly
   } = options;
   const mediaPluginState = stateKey.getState(state);
   const mediaLinkingState = getMediaLinkingState(state);
@@ -564,7 +596,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -21,7 +21,8 @@ export const LinkToolbarAppearance = ({
   onAddLink,
   onEditLink,
   onOpenLink,
-  isInlineNode
+  isInlineNode,
+  isViewOnly
 }) => {
   const [showLinkingControls, setShowLinkingControls] = useState(true);
   useEffect(() => {
@@ -47,7 +48,7 @@ export const LinkToolbarAppearance = ({
     const isValidUrl = isSafeUrl(mediaLinkingState.link);
     const title = intl.formatMessage(linkToolbarMessages.editLink);
     const linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
-    return jsx(Fragment, null, jsx("div", {
+    return jsx(Fragment, null, !isViewOnly && jsx("div", {
       css: wrapperStyles
     }, jsx(ToolbarButton, {
       onClick: onEditLink,
@@ -70,7 +71,7 @@ export const LinkToolbarAppearance = ({
     }), jsx(Separator, null));
   } else {
     const title = intl.formatMessage(linkToolbarMessages.addLink);
-    return jsx(Fragment, null, jsx(ToolbarButton, {
+    return !isViewOnly ? jsx(Fragment, null, jsx(ToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: title,
@@ -81,6 +82,6 @@ export const LinkToolbarAppearance = ({
       icon: jsx(LinkIcon, {
         label: title
       })
-    }), jsx(Separator, null));
+    }), jsx(Separator, null)) : null;
   }
 };

package/dist/es2019/toolbar/mediaInline.js

@@ -243,7 +243,7 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
   });
 
   //Image Preview
-  if (options.allowImagePreview) {
+  if (!options.isViewOnly && options.allowImagePreview) {
     inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
       type: 'separator'
     });