@atlaskit/renderer 109.10.4 → 109.10.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/renderer
 
+## 109.10.5
+
+### Patch Changes
+
+- [#82755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82755) [`c204f74b46a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c204f74b46a5) - The media renderer node will now correctly render annotation marks if/when they're applied to the node.
+- Updated dependencies
+
 ## 109.10.4
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -85,7 +85,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var shouldSkipLinkMark = function shouldSkipLinkMark(mark) {
         return _this.allowMediaLinking !== true && isMedia && mark.type.name === 'link';
       };
-      return marks.reverse().reduce(function (content, mark) {
+      return marks.reduceRight(function (content, mark) {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
@@ -389,12 +389,16 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         _this$media;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var _node$type$schema$mar = node.type.schema.marks,
+        annotation = _node$type$schema$mar.annotation,
         link = _node$type$schema$mar.link,
         border = _node$type$schema$mar.border;
       var isChildOfMediaSingle = path.some(function (n) {
         var _n$type2;
         return ((_n$type2 = n.type) === null || _n$type2 === void 0 ? void 0 : _n$type2.name) === 'mediaSingle';
       });
+      var isAnnotationMark = function isAnnotationMark(mark) {
+        return mark.type === annotation;
+      };
       var isLinkMark = function isLinkMark(mark) {
         return mark.type === link;
       };
@@ -407,6 +411,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         }),
         isLinkMark: isLinkMark,
         isBorderMark: isBorderMark,
+        isAnnotationMark: isAnnotationMark,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,

package/dist/cjs/react/nodes/media/index.js

@@ -25,23 +25,73 @@ var _editorPalette = require("@atlaskit/editor-palette");
 var _utils = require("../../../utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _events = require("../../../analytics/events");
+var _annotation = _interopRequireDefault(require("../../marks/annotation"));
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+var MediaBorder = function MediaBorder(_ref) {
+  var _mark$attrs$color, _mark$attrs$size;
+  var mark = _ref.mark,
+    children = _ref.children;
+  if (!mark) {
+    return (0, _react2.jsx)(_react.Fragment, null, children);
+  }
+  var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
+  var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
+  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  return (0, _react2.jsx)("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
+  }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+var MediaLink = function MediaLink(_ref2) {
+  var mark = _ref2.mark,
+    children = _ref2.children,
+    onClick = _ref2.onClick;
+  if (!mark) {
+    return (0, _react2.jsx)(_react.Fragment, null, children);
+  }
+  var linkHref = mark === null || mark === void 0 ? void 0 : mark.attrs.href;
+  return (0, _react2.jsx)("a", {
+    href: linkHref,
+    rel: "noreferrer noopener",
+    onClick: onClick,
+    "data-block-link": linkHref,
+    css: _styles.linkStyle
+  }, children);
+};
+var MediaAnnotation = function MediaAnnotation(_ref3) {
+  var mark = _ref3.mark,
+    children = _ref3.children;
+  if (!mark) {
+    return (0, _react2.jsx)(_react.Fragment, null, children);
+  }
+  return (0, _react2.jsx)(_annotation.default, {
+    id: mark.attrs.id,
+    annotationType: mark.attrs.annotationType,
+    dataAttributes: {
+      'data-renderer-mark': true
+    }
+    // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
+    ,
+    annotationParentIds: [],
+    allowAnnotations: true
+  }, children);
+};
 var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
-  function Media() {
+  function Media(props) {
     var _this;
     (0, _classCallCheck2.default)(this, Media);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
-      var _borderMark$attrs$col, _borderMark$attrs$siz;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
       var _this$props = _this.props,
@@ -51,14 +101,20 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
         allowMediaViewer = _this$props.shouldOpenMediaViewer,
         enableDownloadButton = _this$props.enableDownloadButton,
         ssr = _this$props.ssr;
+      var annotationMark = _this.props.isAnnotationMark ? _this.props.marks.find(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
-      var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
-      var borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      var mediaComponent = (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+      return (0, _react2.jsx)(MediaLink, {
+        mark: linkMark,
+        onClick: _this.handleMediaLinkClickFn
+      }, (0, _react2.jsx)(MediaAnnotation, {
+        mark: annotationMark
+      }, (0, _react2.jsx)(MediaBorder, {
+        mark: borderMark
+      }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
@@ -71,23 +127,7 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
-      })));
-      var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
-      var mediaComponentWithBorder = borderMark ? (0, _react2.jsx)("div", {
-        "data-mark-type": "border",
-        "data-color": borderColor,
-        "data-size": borderWidth,
-        css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
-      }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
-        borderColor: borderColor
-      }), mediaComponent) : mediaComponent;
-      return linkHref ? (0, _react2.jsx)("a", {
-        href: linkHref,
-        rel: "noreferrer noopener",
-        onClick: _this.handleMediaLinkClick,
-        "data-block-link": linkHref,
-        css: _styles.linkStyle
-      }, mediaComponentWithBorder) : mediaComponentWithBorder;
+      }))))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {
       var _this$props2 = _this.props,
@@ -114,6 +154,7 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
         handler(event, _linkMark && linkHref);
       }
     });
+    _this.handleMediaLinkClickFn = _this.handleMediaLinkClick.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
   (0, _createClass2.default)(Media, [{

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.10.4";
+var packageVersion = "109.10.5";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/annotations/element/mark.js

@@ -23,7 +23,7 @@ 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; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.rich-media-item {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, _styles.mediaAnnotationStyles);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.media-file-card-view {\n      ", ";\n      z-index: -1;\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, _styles.mediaAnnotationStyles);
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/es2019/react/index.js

@@ -66,7 +66,7 @@ export default class ReactSerializer {
         return ((_n$type = n.type) === null || _n$type === void 0 ? void 0 : _n$type.name) !== 'mediaSingle';
       }) && isMedia && mark.type.name === 'border';
       const shouldSkipLinkMark = mark => this.allowMediaLinking !== true && isMedia && mark.type.name === 'link';
-      return marks.reverse().reduce((content, mark) => {
+      return marks.reduceRight((content, mark) => {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
@@ -342,6 +342,7 @@ export default class ReactSerializer {
     var _this$media;
     const {
       marks: {
+        annotation,
         link,
         border
       }
@@ -350,6 +351,7 @@ export default class ReactSerializer {
       var _n$type2;
       return ((_n$type2 = n.type) === null || _n$type2 === void 0 ? void 0 : _n$type2.name) === 'mediaSingle';
     });
+    const isAnnotationMark = mark => mark.type === annotation;
     const isLinkMark = mark => mark.type === link;
     const isBorderMark = mark => isChildOfMediaSingle && mark.type === border;
     return {
@@ -357,6 +359,7 @@ export default class ReactSerializer {
       marks: node.marks.filter(m => !isLinkMark(m) || this.allowMediaLinking === true),
       isLinkMark,
       isBorderMark,
+      isAnnotationMark,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,

package/dist/es2019/react/nodes/media/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -13,12 +13,68 @@ import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
+import AnnotationComponent from '../../marks/annotation';
 import { linkStyle, borderStyle } from './styles';
+const MediaBorder = ({
+  mark,
+  children
+}) => {
+  var _mark$attrs$color, _mark$attrs$size;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  const borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
+  const borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
+  const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: borderStyle(paletteColorValue, borderWidth)
+  }, jsx(MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+const MediaLink = ({
+  mark,
+  children,
+  onClick
+}) => {
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  const linkHref = mark === null || mark === void 0 ? void 0 : mark.attrs.href;
+  return jsx("a", {
+    href: linkHref,
+    rel: "noreferrer noopener",
+    onClick: onClick,
+    "data-block-link": linkHref,
+    css: linkStyle
+  }, children);
+};
+const MediaAnnotation = ({
+  mark,
+  children
+}) => {
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  return jsx(AnnotationComponent, {
+    id: mark.attrs.id,
+    annotationType: mark.attrs.annotationType,
+    dataAttributes: {
+      'data-renderer-mark': true
+    }
+    // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
+    ,
+    annotationParentIds: [],
+    allowAnnotations: true
+  }, children);
+};
 export default class Media extends PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     _defineProperty(this, "renderCard", (providers = {}) => {
-      var _borderMark$attrs$col, _borderMark$attrs$siz;
       const {
         contextIdentifierProvider
       } = providers;
@@ -30,14 +86,20 @@ export default class Media extends PureComponent {
         enableDownloadButton,
         ssr
       } = this.props;
+      const annotationMark = this.props.isAnnotationMark ? this.props.marks.find(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
-      const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
-      const borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      const mediaComponent = jsx(AnalyticsContext, {
+      return jsx(MediaLink, {
+        mark: linkMark,
+        onClick: this.handleMediaLinkClickFn
+      }, jsx(MediaAnnotation, {
+        mark: annotationMark
+      }, jsx(MediaBorder, {
+        mark: borderMark
+      }, jsx(AnalyticsContext, {
         data: {
           [MEDIA_CONTEXT]: {
             border: !!borderMark
@@ -52,23 +114,7 @@ export default class Media extends PureComponent {
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
-      })));
-      const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
-      const mediaComponentWithBorder = borderMark ? jsx("div", {
-        "data-mark-type": "border",
-        "data-color": borderColor,
-        "data-size": borderWidth,
-        css: borderStyle(paletteColorValue, borderWidth)
-      }, jsx(MediaBorderGapFiller, {
-        borderColor: borderColor
-      }), mediaComponent) : mediaComponent;
-      return linkHref ? jsx("a", {
-        href: linkHref,
-        rel: "noreferrer noopener",
-        onClick: this.handleMediaLinkClick,
-        "data-block-link": linkHref,
-        css: linkStyle
-      }, mediaComponentWithBorder) : mediaComponentWithBorder;
+      }))))));
     });
     _defineProperty(this, "handleMediaLinkClick", event => {
       const {
@@ -96,6 +142,7 @@ export default class Media extends PureComponent {
         handler(event, linkMark && linkHref);
       }
     });
+    this.handleMediaLinkClickFn = this.handleMediaLinkClick.bind(this);
   }
   render() {
     const {

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.10.4";
+const packageVersion = "109.10.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/annotations/element/mark.js

@@ -21,8 +21,9 @@ const markStyles = () => css`
       ${AnnotationSharedCSSByState().focus};
     }
 
-    & div.rich-media-item {
+    & div.media-file-card-view {
       ${mediaAnnotationStyles};
+      z-index: -1;
     }
   }
 `;

package/dist/esm/react/index.js

@@ -78,7 +78,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var shouldSkipLinkMark = function shouldSkipLinkMark(mark) {
         return _this.allowMediaLinking !== true && isMedia && mark.type.name === 'link';
       };
-      return marks.reverse().reduce(function (content, mark) {
+      return marks.reduceRight(function (content, mark) {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
@@ -382,12 +382,16 @@ var ReactSerializer = /*#__PURE__*/function () {
         _this$media;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var _node$type$schema$mar = node.type.schema.marks,
+        annotation = _node$type$schema$mar.annotation,
         link = _node$type$schema$mar.link,
         border = _node$type$schema$mar.border;
       var isChildOfMediaSingle = path.some(function (n) {
         var _n$type2;
         return ((_n$type2 = n.type) === null || _n$type2 === void 0 ? void 0 : _n$type2.name) === 'mediaSingle';
       });
+      var isAnnotationMark = function isAnnotationMark(mark) {
+        return mark.type === annotation;
+      };
       var isLinkMark = function isLinkMark(mark) {
         return mark.type === link;
       };
@@ -400,6 +404,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         }),
         isLinkMark: isLinkMark,
         isBorderMark: isBorderMark,
+        isAnnotationMark: isAnnotationMark,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,

package/dist/esm/react/nodes/media/index.js

@@ -10,7 +10,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, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -21,19 +21,69 @@ import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
+import AnnotationComponent from '../../marks/annotation';
 import { linkStyle, borderStyle } from './styles';
+var MediaBorder = function MediaBorder(_ref) {
+  var _mark$attrs$color, _mark$attrs$size;
+  var mark = _ref.mark,
+    children = _ref.children;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
+  var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
+  var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: borderStyle(paletteColorValue, borderWidth)
+  }, jsx(MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+var MediaLink = function MediaLink(_ref2) {
+  var mark = _ref2.mark,
+    children = _ref2.children,
+    onClick = _ref2.onClick;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  var linkHref = mark === null || mark === void 0 ? void 0 : mark.attrs.href;
+  return jsx("a", {
+    href: linkHref,
+    rel: "noreferrer noopener",
+    onClick: onClick,
+    "data-block-link": linkHref,
+    css: linkStyle
+  }, children);
+};
+var MediaAnnotation = function MediaAnnotation(_ref3) {
+  var mark = _ref3.mark,
+    children = _ref3.children;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  return jsx(AnnotationComponent, {
+    id: mark.attrs.id,
+    annotationType: mark.attrs.annotationType,
+    dataAttributes: {
+      'data-renderer-mark': true
+    }
+    // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
+    ,
+    annotationParentIds: [],
+    allowAnnotations: true
+  }, children);
+};
 var Media = /*#__PURE__*/function (_PureComponent) {
   _inherits(Media, _PureComponent);
   var _super = _createSuper(Media);
-  function Media() {
+  function Media(props) {
     var _this;
     _classCallCheck(this, Media);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
-      var _borderMark$attrs$col, _borderMark$attrs$siz;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
       var _this$props = _this.props,
@@ -43,14 +93,20 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         allowMediaViewer = _this$props.shouldOpenMediaViewer,
         enableDownloadButton = _this$props.enableDownloadButton,
         ssr = _this$props.ssr;
+      var annotationMark = _this.props.isAnnotationMark ? _this.props.marks.find(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
-      var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
-      var borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      var mediaComponent = jsx(AnalyticsContext, {
+      return jsx(MediaLink, {
+        mark: linkMark,
+        onClick: _this.handleMediaLinkClickFn
+      }, jsx(MediaAnnotation, {
+        mark: annotationMark
+      }, jsx(MediaBorder, {
+        mark: borderMark
+      }, jsx(AnalyticsContext, {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
@@ -63,23 +119,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
-      })));
-      var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
-      var mediaComponentWithBorder = borderMark ? jsx("div", {
-        "data-mark-type": "border",
-        "data-color": borderColor,
-        "data-size": borderWidth,
-        css: borderStyle(paletteColorValue, borderWidth)
-      }, jsx(MediaBorderGapFiller, {
-        borderColor: borderColor
-      }), mediaComponent) : mediaComponent;
-      return linkHref ? jsx("a", {
-        href: linkHref,
-        rel: "noreferrer noopener",
-        onClick: _this.handleMediaLinkClick,
-        "data-block-link": linkHref,
-        css: linkStyle
-      }, mediaComponentWithBorder) : mediaComponentWithBorder;
+      }))))));
     });
     _defineProperty(_assertThisInitialized(_this), "handleMediaLinkClick", function (event) {
       var _this$props2 = _this.props,
@@ -106,6 +146,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         handler(event, _linkMark && linkHref);
       }
     });
+    _this.handleMediaLinkClickFn = _this.handleMediaLinkClick.bind(_assertThisInitialized(_this));
     return _this;
   }
   _createClass(Media, [{

package/dist/esm/ui/Renderer/index.js

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.10.4";
+var packageVersion = "109.10.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/annotations/element/mark.js

@@ -15,7 +15,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.rich-media-item {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, mediaAnnotationStyles);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.media-file-card-view {\n      ", ";\n      z-index: -1;\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, mediaAnnotationStyles);
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/types/react/nodes/media/index.d.ts

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { MediaCardProps } from '../../../ui/MediaCard';
-import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { LinkDefinition, BorderMarkDefinition, AnnotationMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
@@ -11,15 +11,18 @@ export type MediaProps = MediaCardProps & {
     allowAltTextOnImages?: boolean;
     children?: React.ReactNode;
     isInsideOfBlockNode?: boolean;
-    marks: Array<LinkDefinition | BorderMarkDefinition>;
+    marks: Array<LinkDefinition | BorderMarkDefinition | AnnotationMarkDefinition>;
     isBorderMark: () => boolean;
     isLinkMark: () => boolean;
+    isAnnotationMark?: () => boolean;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
 };
 export default class Media extends PureComponent<MediaProps, {}> {
+    constructor(props: MediaProps);
+    private handleMediaLinkClickFn;
     private renderCard;
     private handleMediaLinkClick;
     render(): jsx.JSX.Element;

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { MediaCardProps } from '../../../ui/MediaCard';
-import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { LinkDefinition, BorderMarkDefinition, AnnotationMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
@@ -11,15 +11,18 @@ export type MediaProps = MediaCardProps & {
     allowAltTextOnImages?: boolean;
     children?: React.ReactNode;
     isInsideOfBlockNode?: boolean;
-    marks: Array<LinkDefinition | BorderMarkDefinition>;
+    marks: Array<LinkDefinition | BorderMarkDefinition | AnnotationMarkDefinition>;
     isBorderMark: () => boolean;
     isLinkMark: () => boolean;
+    isAnnotationMark?: () => boolean;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
 };
 export default class Media extends PureComponent<MediaProps, {}> {
+    constructor(props: MediaProps);
+    private handleMediaLinkClickFn;
     private renderCard;
     private handleMediaLinkClick;
     render(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.10.4",
+  "version": "109.10.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.7.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.18.0",
+    "@atlaskit/editor-common": "^78.19.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",