@atlaskit/editor-plugin-media 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [#77601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77601) [`ee98d2aa7c8a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee98d2aa7c8a) - [ED-22199] Update media card wrapper so that it applies comments styles according to comment status
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -45,6 +45,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var figureWrapperStyles = (0, _react2.css)({
+  margin: 0
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MediaSingleNode, _Component);
@@ -421,7 +424,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
       var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: [_styles.figureWrapper],
+        css: figureWrapperStyles,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, (0, _react2.jsx)("div", {

package/dist/cjs/nodeviews/styles.js

@@ -4,36 +4,54 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.figureWrapper = exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = exports.MediaCardWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = exports.MediaCardWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _templateObject, _templateObject2, _templateObject3;
-/** @jsx jsx */
+var _colors = require("@atlaskit/theme/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
 var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
-var figureWrapper = exports.figureWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
-var absoluteDiv = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));
-var forcedDimensions = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n"])));
+var absoluteDivStyles = (0, _react2.css)({
+  position: 'absolute',
+  width: '100%',
+  height: '100%'
+});
+var forcedDimensionsStyles = (0, _react2.css)({
+  width: '100%',
+  position: 'relative'
+});
+var boxShadowColorByStatus = {
+  draft: "var(--ds-background-accent-yellow-subtle, ".concat(_colors.Y300, ")"),
+  focus: "var(--ds-background-accent-yellow-subtle, ".concat(_colors.Y300, ")"),
+  blur: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y200, ")")
+};
+var commentStatusStyleMap = function commentStatusStyleMap(status) {
+  return "3px 3px 0px 0px ".concat(boxShadowColorByStatus[status]);
+};
 var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref) {
   var dimensions = _ref.dimensions,
     children = _ref.children,
     selected = _ref.selected,
     _ref$borderWidth = _ref.borderWidth,
     borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
-    onContextMenu = _ref.onContextMenu;
+    onContextMenu = _ref.onContextMenu,
+    commentStatus = _ref.commentStatus;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return (0, _react2.jsx)("div", {
     "data-testid": "media-card-wrapper",
-    style: {
+    style: _objectSpread({
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
-    }
+    }, commentStatus && {
+      boxShadow: "".concat(commentStatusStyleMap(commentStatus))
+    })
   }, (0, _react2.jsx)("div", {
-    css: forcedDimensions,
+    css: forcedDimensionsStyles,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
@@ -41,6 +59,6 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
   }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
     borderColor: "var(--custom-palette-color)"
   }), (0, _react2.jsx)("div", {
-    css: absoluteDiv
+    css: absoluteDivStyles
   }, children)));
 };

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

@@ -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 = function generateFilePreviewItem(mediaPluginState, intl, editorState) {
+  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 && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.preview-in-full-page')) {
+      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, state), {
+          type: 'separator'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
 import React, { Component } from 'react';
-import { jsx } from '@emotion/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';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -23,7 +23,10 @@ import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaS
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { figureWrapper, MediaSingleNodeSelector } from './styles';
+import { MediaSingleNodeSelector } from './styles';
+const figureWrapperStyles = css({
+  margin: 0
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -334,7 +337,7 @@ export default class MediaSingleNode extends Component {
     const shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
-      css: [figureWrapper],
+      css: figureWrapperStyles,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
     }, jsx("div", {

package/dist/es2019/nodeviews/styles.js

@@ -2,26 +2,31 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
+import { Y200, Y300 } from '@atlaskit/theme/colors';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
-export const figureWrapper = css`
-  margin: 0;
-`;
-const absoluteDiv = css`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`;
-const forcedDimensions = css`
-  width: 100%;
-  position: relative;
-`;
+const absoluteDivStyles = css({
+  position: 'absolute',
+  width: '100%',
+  height: '100%'
+});
+const forcedDimensionsStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+const boxShadowColorByStatus = {
+  draft: `var(--ds-background-accent-yellow-subtle, ${Y300})`,
+  focus: `var(--ds-background-accent-yellow-subtle, ${Y300})`,
+  blur: `var(--ds-background-accent-yellow-subtler, ${Y200})`
+};
+const commentStatusStyleMap = status => `3px 3px 0px 0px ${boxShadowColorByStatus[status]}`;
 export const MediaCardWrapper = ({
   dimensions,
   children,
   selected,
   borderWidth = 0,
-  onContextMenu
+  onContextMenu,
+  commentStatus
 }) => {
   const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
@@ -30,10 +35,13 @@ export const MediaCardWrapper = ({
       borderColor: `var(--custom-palette-color)`,
       borderWidth: `${calculatedBorderWidth}px`,
       borderStyle: 'solid',
-      borderRadius: `${calculatedBorderWidth * 2}px`
+      borderRadius: `${calculatedBorderWidth * 2}px`,
+      ...(commentStatus && {
+        boxShadow: `${commentStatusStyleMap(commentStatus)}`
+      })
     }
   }, jsx("div", {
-    css: forcedDimensions,
+    css: forcedDimensionsStyles,
     style: {
       paddingBottom: `${dimensions.height / dimensions.width * 100}%`
     },
@@ -41,6 +49,6 @@ export const MediaCardWrapper = ({
   }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
     borderColor: `var(--custom-palette-color)`
   }), jsx("div", {
-    css: absoluteDiv
+    css: absoluteDivStyles
   }, children)));
 };

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'
-  }, {
+const generateFilePreviewItem = (mediaPluginState, intl, editorState) => {
+  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 && getBooleanFF('platform.editor.media.preview-in-full-page')) {
+      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, state), {
+          type: 'separator'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

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

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 
 import React, { Component } from 'react';
-import { jsx } from '@emotion/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';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -36,7 +36,10 @@ import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaS
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { figureWrapper, MediaSingleNodeSelector } from './styles';
+import { MediaSingleNodeSelector } from './styles';
+var figureWrapperStyles = css({
+  margin: 0
+});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
@@ -413,7 +416,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
       var MediaChildren = jsx("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: [figureWrapper],
+        css: figureWrapperStyles,
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, jsx("div", {

package/dist/esm/nodeviews/styles.js

@@ -1,32 +1,51 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
+import { Y200, Y300 } from '@atlaskit/theme/colors';
 export var MediaInlineNodeSelector = 'media-inline-node';
 export var MediaSingleNodeSelector = 'media-single-node';
-export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
-var absoluteDiv = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));
-var forcedDimensions = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n"])));
+var absoluteDivStyles = css({
+  position: 'absolute',
+  width: '100%',
+  height: '100%'
+});
+var forcedDimensionsStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+var boxShadowColorByStatus = {
+  draft: "var(--ds-background-accent-yellow-subtle, ".concat(Y300, ")"),
+  focus: "var(--ds-background-accent-yellow-subtle, ".concat(Y300, ")"),
+  blur: "var(--ds-background-accent-yellow-subtler, ".concat(Y200, ")")
+};
+var commentStatusStyleMap = function commentStatusStyleMap(status) {
+  return "3px 3px 0px 0px ".concat(boxShadowColorByStatus[status]);
+};
 export var MediaCardWrapper = function MediaCardWrapper(_ref) {
   var dimensions = _ref.dimensions,
     children = _ref.children,
     selected = _ref.selected,
     _ref$borderWidth = _ref.borderWidth,
     borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
-    onContextMenu = _ref.onContextMenu;
+    onContextMenu = _ref.onContextMenu,
+    commentStatus = _ref.commentStatus;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
     "data-testid": "media-card-wrapper",
-    style: {
+    style: _objectSpread({
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
-    }
+    }, commentStatus && {
+      boxShadow: "".concat(commentStatusStyleMap(commentStatus))
+    })
   }, jsx("div", {
-    css: forcedDimensions,
+    css: forcedDimensionsStyles,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
@@ -34,6 +53,6 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
   }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
     borderColor: "var(--custom-palette-color)"
   }), jsx("div", {
-    css: absoluteDiv
+    css: absoluteDivStyles
   }, children)));
 };

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'
-  }, {
+var generateFilePreviewItem = function generateFilePreviewItem(mediaPluginState, intl, editorState) {
+  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 && getBooleanFF('platform.editor.media.preview-in-full-page')) {
+      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, state), {
+          type: 'separator'
+        });
+      }
+    }
   }
   if (allowAltTextOnImages) {
     var _pluginInjectionApi$a8;

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/nodeviews/styles.d.ts

@@ -2,15 +2,16 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { NumericalCardDimensions } from '@atlaskit/media-card';
+import type { CommentStatus } from '../types';
 export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
-export declare const figureWrapper: import("@emotion/react").SerializedStyles;
 type MediaCardWrapperProps = {
     dimensions: NumericalCardDimensions;
     children: React.ReactNode;
     selected?: boolean;
     borderWidth?: number;
     onContextMenu?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    commentStatus?: CommentStatus;
 };
-export declare const MediaCardWrapper: ({ dimensions, children, selected, borderWidth, onContextMenu, }: MediaCardWrapperProps) => jsx.JSX.Element;
+export declare const MediaCardWrapper: ({ dimensions, children, selected, borderWidth, onContextMenu, commentStatus, }: MediaCardWrapperProps) => jsx.JSX.Element;
 export {};

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

@@ -12,6 +12,7 @@ interface PlaceholderTextOptions {
     allowInserting?: boolean;
 }
 export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type CommentStatus = 'draft' | 'focus' | 'blur';
 export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
@@ -34,6 +35,7 @@ export interface MediaOptions {
     allowRemoteDimensionsFetch?: boolean;
     allowDropzoneDropLine?: boolean;
     allowMarkingUploadsAsIncomplete?: boolean;
+    allowImagePreview?: boolean;
     fullWidthEnabled?: boolean;
     uploadErrorHandler?: (state: MediaState) => void;
     waitForMediaUpload?: boolean;
@@ -107,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/nodeviews/styles.d.ts

@@ -2,15 +2,16 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { NumericalCardDimensions } from '@atlaskit/media-card';
+import type { CommentStatus } from '../types';
 export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
-export declare const figureWrapper: import("@emotion/react").SerializedStyles;
 type MediaCardWrapperProps = {
     dimensions: NumericalCardDimensions;
     children: React.ReactNode;
     selected?: boolean;
     borderWidth?: number;
     onContextMenu?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    commentStatus?: CommentStatus;
 };
-export declare const MediaCardWrapper: ({ dimensions, children, selected, borderWidth, onContextMenu, }: MediaCardWrapperProps) => jsx.JSX.Element;
+export declare const MediaCardWrapper: ({ dimensions, children, selected, borderWidth, onContextMenu, commentStatus, }: MediaCardWrapperProps) => jsx.JSX.Element;
 export {};

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

@@ -12,6 +12,7 @@ interface PlaceholderTextOptions {
     allowInserting?: boolean;
 }
 export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type CommentStatus = 'draft' | 'focus' | 'blur';
 export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
@@ -34,6 +35,7 @@ export interface MediaOptions {
     allowRemoteDimensionsFetch?: boolean;
     allowDropzoneDropLine?: boolean;
     allowMarkingUploadsAsIncomplete?: boolean;
+    allowImagePreview?: boolean;
     fullWidthEnabled?: boolean;
     uploadErrorHandler?: (state: MediaState) => void;
     waitForMediaUpload?: boolean;
@@ -107,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.0",
+  "version": "1.5.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.2.0",
     "@atlaskit/button": "^17.6.0",
-    "@atlaskit/editor-common": "^78.8.0",
+    "@atlaskit/editor-common": "^78.9.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
@@ -59,10 +59,10 @@
     "@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": "^3.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.38.0",
@@ -146,6 +146,9 @@
     },
     "platform.editor.media.autoselect-inserted-image_oumto": {
       "type": "boolean"
+    },
+    "platform.editor.media.preview-in-full-page": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",