@atlaskit/renderer 109.10.4 → 109.10.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 109.10.6
+
+### Patch Changes
+
+- [#84179](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84179) [`8bd86714a915`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bd86714a915) - Fixed annotation highlight support for media elements by allow mark to be changed to a block level element
+
+## 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/marks/annotation.js

@@ -22,7 +22,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     dataAttributes = _ref.dataAttributes,
     _ref$annotationParent = _ref.annotationParentIds,
     annotationParentIds = _ref$annotationParent === void 0 ? [] : _ref$annotationParent,
-    allowAnnotations = _ref.allowAnnotations;
+    allowAnnotations = _ref.allowAnnotations,
+    useBlockLevel = _ref.useBlockLevel;
   var data = _objectSpread(_objectSpread({}, dataAttributes), (0, _adfSchema.buildAnnotationMarkDataAttributes)({
     id: id,
     annotationType: annotationType
@@ -32,7 +33,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({

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

@@ -25,23 +25,74 @@ 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,
+    useBlockLevel: 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 +102,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 +128,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 +155,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.6";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -17,7 +17,8 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    id = _ref.id;
+    id = _ref.id,
+    useBlockLevel = _ref.useBlockLevel;
   var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
   var states = (0, _react.useContext)(_context.InlineCommentsStateContext);
   var hasFocus = (0, _hooks.useHasFocusEvent)({
@@ -50,6 +51,7 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };

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

@@ -1,29 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkComponent = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject;
 /** @jsx jsx */
-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 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; }
 // 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"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
+};
+var blockStyles = function blockStyles() {
+  return (0, _react2.css)((0, _defineProperty2.default)({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), _styles.mediaAnnotationStyles));
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -32,7 +35,8 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     id = _ref.id,
     state = _ref.state,
     hasFocus = _ref.hasFocus,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    useBlockLevel = _ref.useBlockLevel;
   var annotationIds = (0, _react.useMemo)(function () {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
@@ -61,15 +65,9 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? (0, _react2.jsx)("mark", (0, _extends2.default)({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : (0, _react2.jsx)("mark", (0, _extends2.default)({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
+  return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
+    id: id
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), {}, {
+    css: useBlockLevel ? blockStyles : markStyles
   }), children);
 };

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/marks/annotation.js

@@ -11,7 +11,8 @@ const AnnotationComponent = ({
   children,
   dataAttributes,
   annotationParentIds = [],
-  allowAnnotations
+  allowAnnotations,
+  useBlockLevel
 }) => {
   const data = {
     ...dataAttributes,
@@ -25,7 +26,8 @@ const AnnotationComponent = ({
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/React.createElement("span", _extends({

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,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';
+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,
+    useBlockLevel: 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 +87,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 +115,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 +143,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.6";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -8,7 +8,8 @@ const MarkElement = ({
   annotationParentIds,
   children,
   dataAttributes,
-  id
+  id,
+  useBlockLevel
 }) => {
   const updateSubscriber = useInlineCommentSubscriberContext();
   const states = useContext(InlineCommentsStateContext);
@@ -42,7 +43,8 @@ const MarkElement = ({
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };
 export { MarkElement };

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

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState, mediaAnnotationStyles } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -20,12 +19,14 @@ const markStyles = () => css`
     &[data-has-focus='true'] {
       ${AnnotationSharedCSSByState().focus};
     }
-
-    & div.rich-media-item {
-      ${mediaAnnotationStyles};
-    }
   }
 `;
+const blockStyles = () => css({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent',
+  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: mediaAnnotationStyles
+});
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -33,7 +34,8 @@ export const MarkComponent = ({
   id,
   state,
   hasFocus,
-  onClick
+  onClick,
+  useBlockLevel
 }) => {
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
   const onMarkClick = useCallback(event => {
@@ -62,15 +64,11 @@ export const MarkComponent = ({
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? jsx("mark", _extends({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : jsx("mark", _extends({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children);
+  return jsx(useBlockLevel ? 'div' : 'mark', {
+    id,
+    [getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
+    ...accessibility,
+    ...overriddenData,
+    css: useBlockLevel ? blockStyles : markStyles
+  }, children);
 };

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/marks/annotation.js

@@ -15,7 +15,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     dataAttributes = _ref.dataAttributes,
     _ref$annotationParent = _ref.annotationParentIds,
     annotationParentIds = _ref$annotationParent === void 0 ? [] : _ref$annotationParent,
-    allowAnnotations = _ref.allowAnnotations;
+    allowAnnotations = _ref.allowAnnotations,
+    useBlockLevel = _ref.useBlockLevel;
   var data = _objectSpread(_objectSpread({}, dataAttributes), buildAnnotationMarkDataAttributes({
     id: id,
     annotationType: annotationType
@@ -25,7 +26,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
-      annotationType: annotationType
+      annotationType: annotationType,
+      useBlockLevel: useBlockLevel
     }, children);
   }
   return /*#__PURE__*/React.createElement("span", _extends({

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,70 @@ 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,
+    useBlockLevel: 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 +94,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 +120,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 +147,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.6";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -8,7 +8,8 @@ var MarkElement = function MarkElement(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    id = _ref.id;
+    id = _ref.id,
+    useBlockLevel = _ref.useBlockLevel;
   var updateSubscriber = useInlineCommentSubscriberContext();
   var states = useContext(InlineCommentsStateContext);
   var hasFocus = useHasFocusEvent({
@@ -41,7 +42,8 @@ var MarkElement = function MarkElement(_ref) {
     annotationParentIds: activeParentIds,
     onClick: onClick,
     hasFocus: hasFocus,
-    state: states[id]
+    state: states[id],
+    useBlockLevel: useBlockLevel
   }, children);
 };
 export { MarkElement };

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

@@ -1,13 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 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, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState, mediaAnnotationStyles } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -15,7 +14,14 @@ 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"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
+};
+var blockStyles = function blockStyles() {
+  return css(_defineProperty({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, "&[data-mark-annotation-state='".concat(AnnotationMarkStates.ACTIVE, "']"), mediaAnnotationStyles));
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -24,7 +30,8 @@ export var MarkComponent = function MarkComponent(_ref) {
     id = _ref.id,
     state = _ref.state,
     hasFocus = _ref.hasFocus,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    useBlockLevel = _ref.useBlockLevel;
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
@@ -53,15 +60,9 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? jsx("mark", _extends({
-    id: id,
-    onClickCapture: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
-  }), children) : jsx("mark", _extends({
-    id: id,
-    onClick: onMarkClick
-  }, accessibility, overriddenData, {
-    css: markStyles
+  return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
+    id: id
+  }, getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), {}, {
+    css: useBlockLevel ? blockStyles : markStyles
   }), children);
 };

package/dist/types/react/marks/annotation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkProps, AnnotationMarkMeta } from '../types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { MarkProps, AnnotationMarkMeta } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
 export default AnnotationComponent;

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/react/types.d.ts

@@ -53,6 +53,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationType: AnnotationTypes;
     annotationParentIds: string[];
     allowAnnotations: boolean;
+    useBlockLevel?: boolean;
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;

package/dist/types/ui/annotations/element/index.d.ts

@@ -5,6 +5,7 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
+    useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: MarkElementProps) => JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => JSX.Element;
 export { MarkElement };

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
+import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,6 +9,45 @@ type MarkComponentProps = {
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
+    useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, HTMLElement>;
 export {};

package/dist/types-ts4.5/react/marks/annotation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkProps, AnnotationMarkMeta } from '../types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { MarkProps, AnnotationMarkMeta } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
 export default AnnotationComponent;

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/dist/types-ts4.5/react/types.d.ts

@@ -53,6 +53,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationType: AnnotationTypes;
     annotationParentIds: string[];
     allowAnnotations: boolean;
+    useBlockLevel?: boolean;
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;

package/dist/types-ts4.5/ui/annotations/element/index.d.ts

@@ -5,6 +5,7 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationParentIds: AnnotationId[];
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
+    useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: MarkElementProps) => JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => JSX.Element;
 export { MarkElement };

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
+import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,6 +9,45 @@ type MarkComponentProps = {
     state: AnnotationMarkStates | null;
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
+    useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-disabled': boolean;
+    'aria-details'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css: () => import("@emotion/react").SerializedStyles;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, HTMLElement>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.10.4",
+  "version": "109.10.6",
   "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.20.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",