@atlaskit/renderer 109.15.0 → 109.15.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 109.15.3
+
+### Patch Changes
+
+- [#88742](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88742) [`6771cedeadd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6771cedeadd3) - Add UI for comment badge in Renderer, clean up props
+
+## 109.15.2
+
+### Patch Changes
+
+- [#88323](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88323) [`b56b60b50087`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b56b60b50087) - Support nested annotation marks for media nodes in renderer
+- Updated dependencies
+
+## 109.15.1
+
+### Patch Changes
+
+- [#87575](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87575) [`d528eb09243a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d528eb09243a) - Update renderer to force skip context media client
+
 ## 109.15.0
 
 ### Minor Changes

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -14,6 +13,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -21,16 +22,22 @@ var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-contex
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
 var _MediaCard = require("../../../ui/MediaCard");
+var _adfSchema = require("@atlaskit/adf-schema");
 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");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("../../../ui/annotations/hooks");
+var _excluded = ["marks"];
+/** @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 _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 */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MediaBorder = function MediaBorder(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
@@ -85,6 +92,47 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     useBlockLevel: true
   }, children);
 };
+var MediaAnnotations = function MediaAnnotations(_ref4) {
+  var _ref4$marks = _ref4.marks,
+    marks = _ref4$marks === void 0 ? [] : _ref4$marks,
+    children = _ref4.children;
+  // Early Exit
+  if (marks.length === 0) {
+    return (0, _react2.jsx)(_react.Fragment, null, children);
+  }
+
+  // Recursive marks
+  var currentMark = marks[0];
+  var otherMarks = marks.slice(1);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(MediaAnnotation, {
+    key: currentMark.attrs.id,
+    mark: currentMark
+  }, otherMarks.length ? (0, _react2.jsx)(MediaAnnotations, {
+    marks: otherMarks
+  }, children) : (0, _react2.jsx)(_react.Fragment, null, children)));
+};
+var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
+  var _marks$map;
+  var marks = _ref5.marks,
+    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+    annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map !== void 0 ? _marks$map : [''],
+    filter: {
+      state: _adfSchema.AnnotationMarkStates.ACTIVE
+    }
+  });
+  if (!activeParentIds.length) {
+    return null;
+  }
+
+  // todo: handle onClick
+  return (0, _react2.jsx)(CommentBadge, (0, _extends2.default)({
+    onClick: function onClick() {}
+  }, rest));
+};
 var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -101,8 +149,11 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
         featureFlags = _this$props.featureFlags,
         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;
+        ssr = _this$props.ssr,
+        width = _this$props.width,
+        height = _this$props.height,
+        mediaSingleElement = _this$props.mediaSingleElement;
+      var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
@@ -111,15 +162,20 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
-      }, (0, _react2.jsx)(MediaAnnotation, {
-        mark: annotationMark
+      }, (0, _react2.jsx)(MediaAnnotations, {
+        marks: annotationMarks
       }, (0, _react2.jsx)(MediaBorder, {
         mark: borderMark
       }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
+      }, !!annotationMarks && (0, _react2.jsx)(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaElement: mediaSingleElement,
+        width: width,
+        height: height
+      }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -165,7 +165,8 @@ var MediaSingle = function MediaSingle(props) {
       originalDimensions: originalDimensions,
       onExternalImageLoaded: onExternalImageLoaded,
       disableOverlay: true,
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      mediaSingleElement: ref.current
     });
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [_styles.uiMediaSingleBaseStyles, _styles.uiMediaSingleLayoutStyles] : [_styles.uiMediaSingleBaseStyles];
     return (0, _react2.jsx)(_ui.MediaSingle, {

package/dist/cjs/react/utils/EditorMediaClientProvider.js

@@ -20,6 +20,12 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
   var mediaProvider = (0, _providerFactory.useProvider)('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   var contextMediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -43,6 +49,6 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/_react.default.createElement(_mediaClientReact.MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

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.15.0";
+var packageVersion = "109.15.3";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import React, { PureComponent, Fragment } from 'react';
@@ -9,12 +9,16 @@ import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 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';
+import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+import { injectIntl } from 'react-intl-next';
+import { useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 const MediaBorder = ({
   mark,
   children
@@ -72,6 +76,46 @@ const MediaAnnotation = ({
     useBlockLevel: true
   }, children);
 };
+const MediaAnnotations = ({
+  marks = [],
+  children
+}) => {
+  // Early Exit
+  if (marks.length === 0) {
+    return jsx(Fragment, null, children);
+  }
+
+  // Recursive marks
+  const currentMark = marks[0];
+  const otherMarks = marks.slice(1);
+  return jsx(Fragment, null, jsx(MediaAnnotation, {
+    key: currentMark.attrs.id,
+    mark: currentMark
+  }, otherMarks.length ? jsx(MediaAnnotations, {
+    marks: otherMarks
+  }, children) : jsx(Fragment, null, children)));
+};
+const CommentBadge = injectIntl(CommentBadgeComponent);
+const CommentBadgeWrapper = ({
+  marks,
+  ...rest
+}) => {
+  var _marks$map;
+  const activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map !== void 0 ? _marks$map : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  if (!activeParentIds.length) {
+    return null;
+  }
+
+  // todo: handle onClick
+  return jsx(CommentBadge, _extends({
+    onClick: () => {}
+  }, rest));
+};
 export default class Media extends PureComponent {
   constructor(props) {
     super(props);
@@ -85,9 +129,12 @@ export default class Media extends PureComponent {
         featureFlags,
         shouldOpenMediaViewer: allowMediaViewer,
         enableDownloadButton,
-        ssr
+        ssr,
+        width,
+        height,
+        mediaSingleElement
       } = this.props;
-      const annotationMark = this.props.isAnnotationMark ? this.props.marks.find(this.props.isAnnotationMark) : undefined;
+      const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
@@ -96,8 +143,8 @@ export default class Media extends PureComponent {
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
-      }, jsx(MediaAnnotation, {
-        mark: annotationMark
+      }, jsx(MediaAnnotations, {
+        marks: annotationMarks
       }, jsx(MediaBorder, {
         mark: borderMark
       }, jsx(AnalyticsContext, {
@@ -106,7 +153,12 @@ export default class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, jsx(MediaCard, _extends({
+      }, !!annotationMarks && jsx(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaElement: mediaSingleElement,
+        width: width,
+        height: height
+      }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -150,7 +150,8 @@ const MediaSingle = props => {
       originalDimensions,
       onExternalImageLoaded,
       disableOverlay: true,
-      featureFlags
+      featureFlags,
+      mediaSingleElement: ref.current
     });
     const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
     return jsx(UIMediaSingle, {

package/dist/es2019/react/utils/EditorMediaClientProvider.js

@@ -7,6 +7,12 @@ export const EditorMediaClientProvider = ({
 }) => {
   const [mediaClientConfig, setMediaClientConfig] = useState();
   const mediaProvider = useProvider('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   const contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -28,6 +34,6 @@ export const EditorMediaClientProvider = ({
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

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.15.0";
+const packageVersion = "109.15.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,6 +5,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["marks"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
@@ -17,12 +19,16 @@ import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 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';
+import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+import { injectIntl } from 'react-intl-next';
+import { useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 var MediaBorder = function MediaBorder(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
@@ -77,6 +83,47 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     useBlockLevel: true
   }, children);
 };
+var MediaAnnotations = function MediaAnnotations(_ref4) {
+  var _ref4$marks = _ref4.marks,
+    marks = _ref4$marks === void 0 ? [] : _ref4$marks,
+    children = _ref4.children;
+  // Early Exit
+  if (marks.length === 0) {
+    return jsx(Fragment, null, children);
+  }
+
+  // Recursive marks
+  var currentMark = marks[0];
+  var otherMarks = marks.slice(1);
+  return jsx(Fragment, null, jsx(MediaAnnotation, {
+    key: currentMark.attrs.id,
+    mark: currentMark
+  }, otherMarks.length ? jsx(MediaAnnotations, {
+    marks: otherMarks
+  }, children) : jsx(Fragment, null, children)));
+};
+var CommentBadge = injectIntl(CommentBadgeComponent);
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
+  var _marks$map;
+  var marks = _ref5.marks,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  var activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map !== void 0 ? _marks$map : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  if (!activeParentIds.length) {
+    return null;
+  }
+
+  // todo: handle onClick
+  return jsx(CommentBadge, _extends({
+    onClick: function onClick() {}
+  }, rest));
+};
 var Media = /*#__PURE__*/function (_PureComponent) {
   _inherits(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -93,8 +140,11 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         featureFlags = _this$props.featureFlags,
         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;
+        ssr = _this$props.ssr,
+        width = _this$props.width,
+        height = _this$props.height,
+        mediaSingleElement = _this$props.mediaSingleElement;
+      var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
@@ -103,15 +153,20 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
-      }, jsx(MediaAnnotation, {
-        mark: annotationMark
+      }, jsx(MediaAnnotations, {
+        marks: annotationMarks
       }, jsx(MediaBorder, {
         mark: borderMark
       }, jsx(AnalyticsContext, {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, jsx(MediaCard, _extends({
+      }, !!annotationMarks && jsx(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaElement: mediaSingleElement,
+        width: width,
+        height: height
+      }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -155,7 +155,8 @@ var MediaSingle = function MediaSingle(props) {
       originalDimensions: originalDimensions,
       onExternalImageLoaded: onExternalImageLoaded,
       disableOverlay: true,
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      mediaSingleElement: ref.current
     });
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
     return jsx(UIMediaSingle, {

package/dist/esm/react/utils/EditorMediaClientProvider.js

@@ -10,6 +10,12 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
   var mediaProvider = useProvider('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   var contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -33,6 +39,6 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

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.15.0";
+var packageVersion = "109.15.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -19,6 +19,9 @@ export type MediaProps = MediaCardProps & {
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
+    mediaSingleElement?: HTMLElement | null;
+    width?: number;
+    height?: number;
 };
 export default class Media extends PureComponent<MediaProps, {}> {
     constructor(props: MediaProps);

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

@@ -19,6 +19,9 @@ export type MediaProps = MediaCardProps & {
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
+    mediaSingleElement?: HTMLElement | null;
+    width?: number;
+    height?: number;
 };
 export default class Media extends PureComponent<MediaProps, {}> {
     constructor(props: MediaProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.15.0",
+  "version": "109.15.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,22 +29,22 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.10.0",
+    "@atlaskit/button": "^17.11.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.23.0",
+    "@atlaskit/editor-common": "^78.24.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/link-datasource": "^1.25.0",
+    "@atlaskit/link-datasource": "^1.26.0",
     "@atlaskit/media-card": "^77.10.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^25.5.0",
+    "@atlaskit/media-ui": "^25.6.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.52.0",
@@ -71,7 +71,7 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/css-reset": "^6.7.0",
+    "@atlaskit/css-reset": "^6.8.0",
     "@atlaskit/editor-test-helpers": "^18.20.0",
     "@atlaskit/link-provider": "^1.9.0",
     "@atlaskit/link-test-helpers": "^7.0.0",
@@ -98,6 +98,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-live-clock": "^5.0.0",
+    "react-magnetic-di": "^2.2.6",
     "react-moment": "^1.1.2",
     "react-test-renderer": "^16.8.0",
     "rxjs": "^5.5.0",