@atlaskit/editor-plugin-media 1.16.6 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media
 
+## 1.17.0
+
+### Minor Changes
+
+-   [#92514](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92514)
+    [`8f64cde1a25a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f64cde1a25a) -
+    [ux] Add floating toolbar to MediaSingle nodes for Live View editor
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 1.16.6
 
 ### Patch Changes

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");
@@ -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)) || {},
@@ -464,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/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';
@@ -246,7 +245,6 @@ export default class MediaSingleNode extends Component {
       lineLength,
       dispatchAnalyticsEvent,
       editorViewMode,
-      mediaPluginState,
       editorDisabled,
       annotationPluginState
     } = this.props;
@@ -379,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'
     });

package/dist/es2019/toolbar/utils.js

@@ -29,9 +29,9 @@ export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
   }
   return null;
 };
-export const downloadMedia = async mediaPluginState => {
+export const downloadMedia = async (mediaPluginState, isViewMode) => {
   try {
-    const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+    const selectedNodeAttrs = isViewMode ? getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) : getSelectedMediaContainerNodeAttrs(mediaPluginState);
     if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
       const {
         id,

package/dist/esm/nodeviews/mediaSingle.js

@@ -15,7 +15,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @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';
@@ -32,7 +32,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';
@@ -335,7 +334,6 @@ var MediaSingleNode = /*#__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)) || {},
@@ -456,13 +454,7 @@ var MediaSingleNode = /*#__PURE__*/function (_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/esm/plugin.js

@@ -258,6 +258,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        var _api$editorViewMode;
         return _floatingToolbar(state, intl, {
           providerFactory: providerFactory,
           allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
@@ -271,7 +272,8 @@ export var 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/esm/toolbar/comments.js

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

package/dist/esm/toolbar/index.js

@@ -67,10 +67,14 @@ export var generateFilePreviewItem = function generateFilePreviewItem(mediaPlugi
         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'
@@ -172,7 +176,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 : {},
@@ -396,9 +401,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         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)) {
@@ -436,11 +443,13 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               mediaLinkingState: mediaLinkingState,
               onAddLink: editLink,
               onEditLink: editLink,
-              onOpenLink: openLink
+              onOpenLink: openLink,
+              isViewOnly: isViewOnly
             });
           }
           return null;
-        }
+        },
+        supportsViewMode: true
       });
     }
     // Preview Support
@@ -450,11 +459,28 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
       if (!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: DownloadIcon,
+      onClick: function 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 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
@@ -473,7 +499,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     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
   };
   var items = [].concat(_toConsumableArray(toolbarButtons), [{
     type: 'copy-button',
@@ -481,10 +508,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) {
@@ -507,7 +538,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
-    allowResizing = options.allowResizing;
+    allowResizing = options.allowResizing,
+    isViewOnly = options.isViewOnly;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = 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 : {},
@@ -553,7 +585,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       var 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 || (_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/esm/toolbar/linking-toolbar-appearance.js

@@ -22,7 +22,8 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     onAddLink = _ref.onAddLink,
     onEditLink = _ref.onEditLink,
     onOpenLink = _ref.onOpenLink,
-    isInlineNode = _ref.isInlineNode;
+    isInlineNode = _ref.isInlineNode,
+    isViewOnly = _ref.isViewOnly;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     showLinkingControls = _useState2[0],
@@ -50,7 +51,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     var isValidUrl = isSafeUrl(mediaLinkingState.link);
     var title = intl.formatMessage(linkToolbarMessages.editLink);
     var 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,
@@ -73,7 +74,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     }), jsx(Separator, null));
   } else {
     var _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,
@@ -84,6 +85,6 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       icon: jsx(LinkIcon, {
         label: _title
       })
-    }), jsx(Separator, null));
+    }), jsx(Separator, null)) : null;
   }
 };

package/dist/esm/toolbar/mediaInline.js

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

package/dist/esm/toolbar/utils.js

@@ -32,13 +32,13 @@ export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNeare
   return null;
 };
 export var downloadMedia = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState, isViewMode) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;
     return _regeneratorRuntime.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;
@@ -65,7 +65,7 @@ export var downloadMedia = /*#__PURE__*/function () {
       }
     }, _callee, null, [[0, 13]]);
   }));
-  return function downloadMedia(_x) {
+  return function downloadMedia(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/types/toolbar/linking-toolbar-appearance.d.ts

@@ -12,5 +12,6 @@ export interface LinkingToolbarProps {
     onEditLink: React.MouseEventHandler;
     onOpenLink: React.MouseEventHandler;
     isInlineNode?: boolean;
+    isViewOnly?: boolean;
 }
-export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, }: LinkingToolbarProps) => jsx.JSX.Element | null;
+export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, isViewOnly, }: LinkingToolbarProps) => jsx.JSX.Element | null;

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

@@ -1,7 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaLinkingState } from '../pm-plugins/linking';

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

@@ -6,7 +6,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
-export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
+export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
 export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;

package/dist/types/types.d.ts

@@ -114,6 +114,7 @@ export type MediaFloatingToolbarOptions = {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
+    isViewOnly?: boolean;
 };
 export type MediaDecorationSpec = {
     type: 'media';

package/dist/types-ts4.5/toolbar/linking-toolbar-appearance.d.ts

@@ -12,5 +12,6 @@ export interface LinkingToolbarProps {
     onEditLink: React.MouseEventHandler;
     onOpenLink: React.MouseEventHandler;
     isInlineNode?: boolean;
+    isViewOnly?: boolean;
 }
-export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, }: LinkingToolbarProps) => jsx.JSX.Element | null;
+export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, isViewOnly, }: LinkingToolbarProps) => jsx.JSX.Element | null;

package/dist/types-ts4.5/toolbar/linking.d.ts

@@ -1,7 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaLinkingState } from '../pm-plugins/linking';

package/dist/types-ts4.5/toolbar/utils.d.ts

@@ -6,7 +6,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaPluginState } from '../pm-plugins/types';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const getSelectedNearestMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
-export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
+export declare const downloadMedia: (mediaPluginState: MediaPluginState, isViewMode?: boolean) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
 export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(editorView: EditorView, pos: number, mediaWidth: number) => number>;

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

@@ -114,6 +114,7 @@ export type MediaFloatingToolbarOptions = {
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
+    isViewOnly?: boolean;
 };
 export type MediaDecorationSpec = {
     type: 'media';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.16.6",
+  "version": "1.17.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
-    "@atlaskit/editor-common": "^78.36.0",
+    "@atlaskit/editor-common": "^78.37.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
     "@atlaskit/editor-plugin-annotation": "1.6.2",
@@ -154,6 +154,9 @@
     "platform.editor.media.preview-in-full-page": {
       "type": "boolean"
     },
+    "platform.editor.live-view.comments-in-media-toolbar-button": {
+      "type": "boolean"
+    },
     "platform.editor.live-view.disable-editing-in-view-mode_fi1rx": {
       "type": "boolean"
     }