@atlaskit/editor-plugin-media 1.4.1 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-media
 
+## 1.6.0
+
+### Minor Changes
+
+- [#78166](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78166) [`8055c8ca1c32`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8055c8ca1c32) - [ux] Add support for preview button in floating toolbar to mediaInline nodes
+
+### Patch Changes
+
+- [#78326](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78326) [`4adb95539d29`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4adb95539d29) - Added logic to allow media single to access annotation state
+
+## 1.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.5.0
+
+### Minor Changes
+
+- [#76504](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76504) [`35deb7a5d492`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35deb7a5d492) - [ux] Add Media preview feature for full page Editor under FF
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.4.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -462,9 +462,10 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     eventDispatcher = _ref5.eventDispatcher,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
     forwardRef = _ref5.forwardRef;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation']),
     widthState = _useSharedPluginState.widthState,
-    mediaState = _useSharedPluginState.mediaState;
+    mediaState = _useSharedPluginState.mediaState,
+    annotationState = _useSharedPluginState.annotationState;
   return (0, _react2.jsx)(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -478,6 +479,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     selected: selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi

package/dist/cjs/plugin.js

@@ -277,6 +277,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
           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,

package/dist/cjs/toolbar/filePreviewItem.js

@@ -31,7 +31,7 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
   };
   var renderMediaViewer = function renderMediaViewer() {
     if (isMediaViewerVisible) {
-      var selectedNodeAttrs = (0, _utils.getSelectedMediaContainerNodeAttrs)(mediaPluginState);
+      var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
       if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
         var id = selectedNodeAttrs.id,
           _selectedNodeAttrs$co = selectedNodeAttrs.collection,
@@ -54,7 +54,7 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
   };
   var mediaViewer = renderMediaViewer();
   var tooltipContent = intl.formatMessage(_mediaUi.messages.preview);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: openMediaViewer,

package/dist/cjs/toolbar/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.floatingToolbar = void 0;
+exports.generateFilePreviewItem = exports.floatingToolbar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -67,11 +67,8 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
   }
   return true;
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
-  var mediaGroup = state.schema.nodes.mediaGroup;
-  var items = [{
-    type: 'separator'
-  }, {
+var generateFilePreviewItem = exports.generateFilePreviewItem = function generateFilePreviewItem(mediaPluginState, intl) {
+  return {
     type: 'custom',
     fallback: [],
     render: function render() {
@@ -81,7 +78,13 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
         intl: intl
       });
     }
-  }, {
+  };
+};
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var items = [{
+    type: 'separator'
+  }, generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -177,6 +180,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
+    allowImagePreview = options.allowImagePreview,
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
@@ -449,6 +453,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       });
     }
+    // Preview Support
+    if (allowImagePreview) {
+      var _mediaNode$attrs;
+      var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+      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'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

package/dist/cjs/toolbar/mediaInline.js

@@ -26,6 +26,7 @@ var _filePreviewItem = require("./filePreviewItem");
 var _imageBorder = require("./imageBorder");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _utils = require("./utils");
+var _index = require("./index");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
@@ -246,6 +247,13 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
       return null;
     }
   });
+
+  //Image Preview
+  if (options.allowImagePreview) {
+    inlineImageItems.push((0, _index.generateFilePreviewItem)(mediaPluginState, intl), {
+      type: 'separator'
+    });
+  }
   if (options.allowAltTextOnImages) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {

package/dist/cjs/toolbar/utils.js

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

package/dist/es2019/nodeviews/mediaSingle.js

@@ -376,8 +376,9 @@ const MediaSingleNodeWrapper = ({
 }) => {
   const {
     widthState,
-    mediaState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
+    mediaState,
+    annotationState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation']);
   return jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -391,6 +392,7 @@ const MediaSingleNodeWrapper = ({
     selected: selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi

package/dist/es2019/plugin.js

@@ -270,6 +270,7 @@ export const mediaPlugin = ({
         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,

package/dist/es2019/toolbar/filePreviewItem.js

@@ -4,7 +4,7 @@ import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { getSelectedMediaContainerNodeAttrs } from './utils';
+import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
 export const FilePreviewItem = ({
   mediaPluginState,
   intl
@@ -18,7 +18,7 @@ export const FilePreviewItem = ({
   };
   const renderMediaViewer = () => {
     if (isMediaViewerVisible) {
-      const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+      const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
       if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
         const {
           id,
@@ -42,7 +42,7 @@ export const FilePreviewItem = ({
   };
   const mediaViewer = renderMediaViewer();
   const tooltipContent = intl.formatMessage(messages.preview);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: openMediaViewer,

package/dist/es2019/toolbar/index.js

@@ -53,13 +53,8 @@ const handleRemoveMediaGroup = (state, dispatch) => {
   }
   return true;
 };
-const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) => {
-  const {
-    mediaGroup
-  } = state.schema.nodes;
-  const items = [{
-    type: 'separator'
-  }, {
+export const generateFilePreviewItem = (mediaPluginState, intl) => {
+  return {
     type: 'custom',
     fallback: [],
     render: () => {
@@ -69,7 +64,15 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
         intl: intl
       });
     }
-  }, {
+  };
+};
+const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) => {
+  const {
+    mediaGroup
+  } = state.schema.nodes;
+  const items = [{
+    type: 'separator'
+  }, generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -166,6 +169,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowAltTextOnImages,
     allowMediaInline,
     allowMediaInlineImages,
+    allowImagePreview,
     getEditorFeatureFlags
   } = options;
   const editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
@@ -452,6 +456,17 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
       });
     }
+    // Preview Support
+    if (allowImagePreview) {
+      var _mediaNode$attrs;
+      const selectedMediaSingleNode = getSelectedMediaSingle(state);
+      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'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

package/dist/es2019/toolbar/mediaInline.js

@@ -18,6 +18,7 @@ import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
+import { generateFilePreviewItem } from './index';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
   var _pluginInjectionApi$a, _pluginInjectionApi$f, _pluginInjectionApi$f2;
   const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
@@ -240,6 +241,13 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
       return null;
     }
   });
+
+  //Image Preview
+  if (options.allowImagePreview) {
+    inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
+      type: 'separator'
+    });
+  }
   if (options.allowAltTextOnImages) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {

package/dist/es2019/toolbar/utils.js

@@ -12,6 +12,21 @@ export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   }
   return null;
 };
+export const getSelectedNearestMediaContainerNodeAttrs = mediaPluginState => {
+  const selectedNode = mediaPluginState.selectedMediaContainerNode();
+  if (selectedNode) {
+    switch (selectedNode.type.name) {
+      case 'mediaSingle':
+        {
+          const childNode = selectedNode.firstChild;
+          return childNode === null || childNode === void 0 ? void 0 : childNode.attrs;
+        }
+      default:
+        return selectedNode.attrs;
+    }
+  }
+  return null;
+};
 export const downloadMedia = async mediaPluginState => {
   try {
     const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);

package/dist/esm/nodeviews/mediaSingle.js

@@ -455,9 +455,10 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     eventDispatcher = _ref5.eventDispatcher,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
     forwardRef = _ref5.forwardRef;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation']),
     widthState = _useSharedPluginState.widthState,
-    mediaState = _useSharedPluginState.mediaState;
+    mediaState = _useSharedPluginState.mediaState,
+    annotationState = _useSharedPluginState.annotationState;
   return jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
@@ -471,6 +472,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
     selected: selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     forwardRef: forwardRef,
     pluginInjectionApi: pluginInjectionApi

package/dist/esm/plugin.js

@@ -266,6 +266,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
           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,

package/dist/esm/toolbar/filePreviewItem.js

@@ -5,7 +5,7 @@ import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { getSelectedMediaContainerNodeAttrs } from './utils';
+import { getSelectedNearestMediaContainerNodeAttrs } from './utils';
 export var FilePreviewItem = function FilePreviewItem(_ref) {
   var mediaPluginState = _ref.mediaPluginState,
     intl = _ref.intl;
@@ -21,7 +21,7 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
   };
   var renderMediaViewer = function renderMediaViewer() {
     if (isMediaViewerVisible) {
-      var selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+      var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrs(mediaPluginState);
       if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
         var id = selectedNodeAttrs.id,
           _selectedNodeAttrs$co = selectedNodeAttrs.collection,
@@ -44,7 +44,7 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
   };
   var mediaViewer = renderMediaViewer();
   var tooltipContent = intl.formatMessage(messages.preview);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: openMediaViewer,

package/dist/esm/toolbar/index.js

@@ -57,11 +57,8 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
   }
   return true;
 };
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
-  var mediaGroup = state.schema.nodes.mediaGroup;
-  var items = [{
-    type: 'separator'
-  }, {
+export var generateFilePreviewItem = function generateFilePreviewItem(mediaPluginState, intl) {
+  return {
     type: 'custom',
     fallback: [],
     render: function render() {
@@ -71,7 +68,13 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
         intl: intl
       });
     }
-  }, {
+  };
+};
+var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var items = [{
+    type: 'separator'
+  }, generateFilePreviewItem(mediaPluginState, intl), {
     type: 'separator'
   }, {
     id: 'editor.media.card.download',
@@ -167,6 +170,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowAltTextOnImages = options.allowAltTextOnImages,
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
+    allowImagePreview = options.allowImagePreview,
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var editorFeatureFlags = getEditorFeatureFlags ? getEditorFeatureFlags() : undefined;
   var toolbarButtons = [];
@@ -439,6 +443,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       });
     }
+    // Preview Support
+    if (allowImagePreview) {
+      var _mediaNode$attrs;
+      var _selectedMediaSingleNode = getSelectedMediaSingle(state);
+      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'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

package/dist/esm/toolbar/mediaInline.js

@@ -18,6 +18,7 @@ import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
+import { generateFilePreviewItem } from './index';
 export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
   var _pluginInjectionApi$a, _pluginInjectionApi$f;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
@@ -236,6 +237,13 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
       return null;
     }
   });
+
+  //Image Preview
+  if (options.allowImagePreview) {
+    inlineImageItems.push(generateFilePreviewItem(mediaPluginState, intl), {
+      type: 'separator'
+    });
+  }
   if (options.allowAltTextOnImages) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {

package/dist/esm/toolbar/utils.js

@@ -14,6 +14,21 @@ export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContain
   }
   return null;
 };
+export var getSelectedNearestMediaContainerNodeAttrs = function getSelectedNearestMediaContainerNodeAttrs(mediaPluginState) {
+  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+  if (selectedNode) {
+    switch (selectedNode.type.name) {
+      case 'mediaSingle':
+        {
+          var childNode = selectedNode.firstChild;
+          return childNode === null || childNode === void 0 ? void 0 : childNode.attrs;
+        }
+      default:
+        return selectedNode.attrs;
+    }
+  }
+  return null;
+};
 export var downloadMedia = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState) {
     var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;

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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+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';
@@ -24,7 +25,8 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         FloatingToolbarPlugin,
         EditorDisabledPlugin,
         FocusPlugin,
-        SelectionPlugin
+        SelectionPlugin,
+        AnnotationPlugin
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -2,6 +2,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
@@ -20,6 +21,7 @@ export interface MediaSingleNodeProps {
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
     mediaPluginState: MediaPluginState;
+    annotationPluginState: InlineCommentPluginState;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

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

@@ -1,6 +1,8 @@
 import type { IntlShape } from 'react-intl-next';
-import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarConfig, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaPluginState } from '../pm-plugins/types';
 import type { MediaFloatingToolbarOptions } from '../types';
+export declare const generateFilePreviewItem: (mediaPluginState: MediaPluginState, intl: IntlShape) => FloatingToolbarItem<Command>;
 export declare const floatingToolbar: (state: EditorState, intl: IntlShape, options: MediaFloatingToolbarOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarConfig | undefined;

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

@@ -5,6 +5,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 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 removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;

package/dist/types/types.d.ts

@@ -35,6 +35,7 @@ export interface MediaOptions {
     allowRemoteDimensionsFetch?: boolean;
     allowDropzoneDropLine?: boolean;
     allowMarkingUploadsAsIncomplete?: boolean;
+    allowImagePreview?: boolean;
     fullWidthEnabled?: boolean;
     uploadErrorHandler?: (state: MediaState) => void;
     waitForMediaUpload?: boolean;
@@ -108,6 +109,7 @@ export type MediaFloatingToolbarOptions = {
     allowAdvancedToolBarOptions?: boolean;
     allowResizingInTables?: boolean;
     allowAltTextOnImages?: boolean;
+    allowImagePreview?: boolean;
     altTextValidator?: (value: string) => string[];
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;

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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+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';
@@ -24,7 +25,8 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         FloatingToolbarPlugin,
         EditorDisabledPlugin,
         FocusPlugin,
-        SelectionPlugin
+        SelectionPlugin,
+        AnnotationPlugin
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -2,6 +2,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { InlineCommentPluginState } from '@atlaskit/editor-plugin-annotation';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
@@ -20,6 +21,7 @@ export interface MediaSingleNodeProps {
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     fullWidthMode?: boolean;
     mediaPluginState: MediaPluginState;
+    annotationPluginState: InlineCommentPluginState;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
     isCopyPasteEnabled?: boolean;
     forwardRef: ForwardRef;

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

@@ -1,6 +1,8 @@
 import type { IntlShape } from 'react-intl-next';
-import type { ExtractInjectionAPI, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarConfig, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaPluginState } from '../pm-plugins/types';
 import type { MediaFloatingToolbarOptions } from '../types';
+export declare const generateFilePreviewItem: (mediaPluginState: MediaPluginState, intl: IntlShape) => FloatingToolbarItem<Command>;
 export declare const floatingToolbar: (state: EditorState, intl: IntlShape, options: MediaFloatingToolbarOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarConfig | undefined;

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

@@ -5,6 +5,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 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 removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;

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

@@ -35,6 +35,7 @@ export interface MediaOptions {
     allowRemoteDimensionsFetch?: boolean;
     allowDropzoneDropLine?: boolean;
     allowMarkingUploadsAsIncomplete?: boolean;
+    allowImagePreview?: boolean;
     fullWidthEnabled?: boolean;
     uploadErrorHandler?: (state: MediaState) => void;
     waitForMediaUpload?: boolean;
@@ -108,6 +109,7 @@ export type MediaFloatingToolbarOptions = {
     allowAdvancedToolBarOptions?: boolean;
     allowResizingInTables?: boolean;
     allowAltTextOnImages?: boolean;
+    allowImagePreview?: boolean;
     altTextValidator?: (value: string) => string[];
     getEditorFeatureFlags?: GetEditorFeatureFlags;
     fullWidthEnabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -40,6 +40,7 @@
     "@atlaskit/editor-common": "^78.9.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
+    "@atlaskit/editor-plugin-annotation": "1.0.1",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^1.2.0",
@@ -59,13 +60,13 @@
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.3.0",
-    "@atlaskit/media-ui": "^25.2.0",
-    "@atlaskit/media-viewer": "^48.2.0",
+    "@atlaskit/media-ui": "^25.3.0",
+    "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^3.1.0",
+    "@atlaskit/primitives": "^4.0.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.39.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",