@atlaskit/renderer 109.20.3 → 109.21.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 109.21.0
+
+### Minor Changes
+
+- [#93519](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93519) [`587934fc0174`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/587934fc0174) - Allow real time comments to correctly infer position of comment on media
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.20.3
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -169,11 +169,11 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     }
   }, {
     key: "getPositionFromRange",
-    value: function getPositionFromRange(range) {
+    value: function getPositionFromRange(range, isCommentsOnMediaBugFixEnabled) {
       if (!this.doc || !this.schema || !range) {
         return false;
       }
-      return (0, _steps.getPosFromRange)(range);
+      return (0, _steps.getPosFromRange)(range, isCommentsOnMediaBugFixEnabled);
     }
   }, {
     key: "getAnnotationMarks",
@@ -218,7 +218,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     }
   }, {
     key: "applyAnnotation",
-    value: function applyAnnotation(pos, annotation) {
+    value: function applyAnnotation(pos, annotation, isCommentsOnMediaBugFixEnabled) {
       if (!this.doc || !pos || !this.schema) {
         return false;
       }
@@ -227,10 +227,13 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       var annotationId = annotation.annotationId,
         annotationType = annotation.annotationType;
       var step;
-
+      var beforeNodePos = isCommentsOnMediaBugFixEnabled ?
+      // As part of fix for RAP, `from` points to the position right before media node
+      // hence, -1 is not needed
+      from :
       // If from points to a node position,
       // we need to 1 position before it for nodeAt to return the node itself
-      var beforeNodePos = Math.max(from - 1, 0);
+      Math.max(from - 1, 0);
       var possibleNode = this.doc.nodeAt(beforeNodePos);
       if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
         step = new _transform.AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({

package/dist/cjs/react/index.js

@@ -381,7 +381,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var childHasLink = node.firstChild && node.firstChild.marks.filter(function (m) {
         return isLinkMark(m) || _this5.allowMediaLinking === true;
       }).length;
-      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         isInsideOfBlockNode: isInsideOfBlockNode,
         childHasLink: childHasLink,
         allowCaptions: this.media && this.media.allowCaptions,

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

@@ -293,6 +293,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState5 = (0, _react.useState)(),
@@ -304,17 +306,19 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     shouldApplyDraftAnnotation = _useState8[0],
     setShouldApplyDraftAnnotation = _useState8[1];
   (0, _react.useEffect)(function () {
+    var _draftPosition$from;
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    var posToCheck = isCommentsOnMediaBugFixEnabled ? ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1 : draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from;
+    if (draftPosition !== null && posToCheck === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition(posToCheck);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = (0, _react.useMemo)(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {

package/dist/cjs/steps/index.js

@@ -27,6 +27,16 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
+function findMediaParent(element) {
+  var parentElement = element.parentElement;
+  if (!parentElement || isRoot(parentElement)) {
+    return null;
+  }
+  if (parentElement.dataset.nodeType === 'mediaSingle') {
+    return parentElement;
+  }
+  return findMediaParent(parentElement);
+}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -163,18 +173,28 @@ function resolvePos(node, offset) {
   }
   return resolvedPos + offset;
 }
-function getPosFromRange(range) {
+function getPosFromRange(range, isCommentsOnMediaBugFixEnabled) {
   var startContainer = range.startContainer,
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
-    var pos = getStartPos(parent);
-    return {
-      from: pos,
-      to: pos
-    };
+  var possibleMediaElement = findParent(startContainer);
+  if (possibleMediaElement && getNodeType(possibleMediaElement) === 'media') {
+    var pos;
+    if (isCommentsOnMediaBugFixEnabled) {
+      var mediaSingleElement = findMediaParent(possibleMediaElement);
+      if (mediaSingleElement) {
+        pos = getStartPos(mediaSingleElement);
+      }
+    } else {
+      pos = getStartPos(possibleMediaElement);
+    }
+    if (pos !== undefined) {
+      return {
+        from: pos,
+        to: pos
+      };
+    }
   }
   var from = resolvePos(startContainer, startOffset);
   var to = resolvePos(endContainer, endOffset);

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

package/dist/cjs/ui/annotations/hover/mounter.js

@@ -13,6 +13,7 @@ var _draft = require("../draft");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _RendererActionsContext = require("../../RendererActionsContext");
+var _context = require("../context");
 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; }
 var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
@@ -33,6 +34,8 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
     if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
       return false;
@@ -50,8 +53,8 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
         eventType: _analytics.EVENT_TYPE.TRACK
       }).fire(_analyticsListeners.FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   var createIndexCallback = (0, _react.useCallback)(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/cjs/ui/annotations/hover/range-validator.js

@@ -10,9 +10,11 @@ var _mounter = require("./mounter");
 var _RendererActionsContext = require("../../RendererActionsContext");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 var _AnnotationHoverContext = require("../contexts/AnnotationHoverContext");
+var _context = require("../context");
 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; }
 var RangeValidator = exports.RangeValidator = function RangeValidator(props) {
+  var _providers$inlineComm;
   var component = props.component,
     rendererRef = props.rendererRef,
     applyAnnotationDraftAt = props.applyAnnotationDraftAt,
@@ -26,10 +28,12 @@ var RangeValidator = exports.RangeValidator = function RangeValidator(props) {
     type = _useAnnotationRangeSt.type;
   var _useAnnotationHoverCo = (0, _AnnotationHoverContext.useAnnotationHoverContext)(),
     isWithinRange = _useAnnotationHoverCo.isWithinRange;
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = (_providers$inlineComm = providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false;
   if (!range || type !== 'hover') {
     return null;
   }
-  var documentPosition = actions.getPositionFromRange(range);
+  var documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
   return /*#__PURE__*/_react.default.createElement(_mounter.Mounter, {
     isWithinRange: isWithinRange,
     range: range,

package/dist/cjs/ui/annotations/selection/mounter.js

@@ -13,6 +13,7 @@ var _draft = require("../draft");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _RendererActionsContext = require("../../RendererActionsContext");
+var _context = require("../context");
 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; }
 var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#__PURE__*/_react.default.memo(function (props) {
@@ -33,6 +34,8 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
@@ -59,8 +62,8 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
         eventType: _analytics.EVENT_TYPE.TRACK
       }).fire(_analyticsListeners.FabricChannel.editor);
     }
-    return applyAnnotation(positionToAnnotate, annotation);
-  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   var createIndexCallback = (0, _react.useCallback)(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/cjs/ui/annotations/selection/range-validator.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _userSelection = require("../hooks/user-selection");
 var _mounter = require("./mounter");
 var _RendererActionsContext = require("../../RendererActionsContext");
+var _context = require("../context");
 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; }
 var SelectionRangeValidator = exports.SelectionRangeValidator = function SelectionRangeValidator(props) {
@@ -27,10 +28,12 @@ var SelectionRangeValidator = exports.SelectionRangeValidator = function Selecti
     range = _useUserSelectionRang2[0],
     draftRange = _useUserSelectionRang2[1],
     clearRange = _useUserSelectionRang2[2];
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   if (!range && !draftRange) {
     return null;
   }
-  var documentPosition = actions.getPositionFromRange(range);
+  var documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
 
   // This property is drilled down to consumers when a new range is selected to test it's validity
   var isAnnotationAllowedOnRange = false;

package/dist/es2019/actions/index.js

@@ -145,11 +145,11 @@ export default class RendererActions {
     }
     return this._privateValidatePositionsForAnnotation(pos.from, pos.to);
   }
-  getPositionFromRange(range) {
+  getPositionFromRange(range, isCommentsOnMediaBugFixEnabled) {
     if (!this.doc || !this.schema || !range) {
       return false;
     }
-    return getPosFromRange(range);
+    return getPosFromRange(range, isCommentsOnMediaBugFixEnabled);
   }
   getAnnotationMarks() {
     const {
@@ -192,7 +192,7 @@ export default class RendererActions {
     }
     return getAnnotationIdsFromRange(pos, this.doc, this.schema);
   }
-  applyAnnotation(pos, annotation) {
+  applyAnnotation(pos, annotation, isCommentsOnMediaBugFixEnabled) {
     if (!this.doc || !pos || !this.schema) {
       return false;
     }
@@ -205,10 +205,13 @@ export default class RendererActions {
       annotationType
     } = annotation;
     let step;
-
+    const beforeNodePos = isCommentsOnMediaBugFixEnabled ?
+    // As part of fix for RAP, `from` points to the position right before media node
+    // hence, -1 is not needed
+    from :
     // If from points to a node position,
     // we need to 1 position before it for nodeAt to return the node itself
-    const beforeNodePos = Math.max(from - 1, 0);
+    Math.max(from - 1, 0);
     const possibleNode = this.doc.nodeAt(beforeNodePos);
     if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
       step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({

package/dist/es2019/react/index.js

@@ -337,7 +337,7 @@ export default class ReactSerializer {
     const isLinkMark = mark => mark.type === link;
     const childHasLink = node.firstChild && node.firstChild.marks.filter(m => isLinkMark(m) || this.allowMediaLinking === true).length;
     return {
-      ...this.getProps(node),
+      ...this.getProps(node, path),
       isInsideOfBlockNode,
       childHasLink,
       allowCaptions: this.media && this.media.allowCaptions,

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
+import React, { PureComponent, Fragment, useEffect, useState, useMemo, useContext } from 'react';
 import { jsx, css } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -15,7 +15,7 @@ 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 { AnnotationsDraftContext } from '../../../ui/annotations/context';
+import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
@@ -271,6 +271,8 @@ class Media extends PureComponent {
 }
 const MediaWithDraftAnnotation = props => {
   const draftPosition = React.useContext(AnnotationsDraftContext);
+  const providers = useContext(ProvidersContext);
+  const isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   const {
     dataAttributes
   } = props;
@@ -278,17 +280,19 @@ const MediaWithDraftAnnotation = props => {
   const [position, setPosition] = useState();
   const [shouldApplyDraftAnnotation, setShouldApplyDraftAnnotation] = useState(false);
   useEffect(() => {
+    var _draftPosition$from;
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    const posToCheck = isCommentsOnMediaBugFixEnabled ? ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1 : draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from;
+    if (draftPosition !== null && posToCheck === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition(posToCheck);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
     ...dataAttributes,

package/dist/es2019/steps/index.js

@@ -19,6 +19,18 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
+function findMediaParent(element) {
+  const {
+    parentElement
+  } = element;
+  if (!parentElement || isRoot(parentElement)) {
+    return null;
+  }
+  if (parentElement.dataset.nodeType === 'mediaSingle') {
+    return parentElement;
+  }
+  return findMediaParent(parentElement);
+}
 function findParentBeforePointer(element) {
   const {
     parentElement
@@ -157,20 +169,30 @@ export function resolvePos(node, offset) {
   }
   return resolvedPos + offset;
 }
-export function getPosFromRange(range) {
+export function getPosFromRange(range, isCommentsOnMediaBugFixEnabled) {
   const {
     startContainer,
     startOffset,
     endContainer,
     endOffset
   } = range;
-  const parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
-    const pos = getStartPos(parent);
-    return {
-      from: pos,
-      to: pos
-    };
+  const possibleMediaElement = findParent(startContainer);
+  if (possibleMediaElement && getNodeType(possibleMediaElement) === 'media') {
+    let pos;
+    if (isCommentsOnMediaBugFixEnabled) {
+      const mediaSingleElement = findMediaParent(possibleMediaElement);
+      if (mediaSingleElement) {
+        pos = getStartPos(mediaSingleElement);
+      }
+    } else {
+      pos = getStartPos(possibleMediaElement);
+    }
+    if (pos !== undefined) {
+      return {
+        from: pos,
+        to: pos
+      };
+    }
   }
   const from = resolvePos(startContainer, startOffset);
   const to = resolvePos(endContainer, endOffset);

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

package/dist/es2019/ui/annotations/hover/mounter.js

@@ -4,6 +4,7 @@ import { updateWindowSelectionAroundDraft } from '../draft';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export const Mounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
@@ -21,6 +22,8 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
   } = props;
   const [draftDocumentPosition, setDraftDocumentPosition] = useState();
   const actions = useContext(ActionsContext);
+  const providers = useContext(ProvidersContext);
+  const isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   const onCreateCallback = useCallback(annotationId => {
     if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
       return false;
@@ -38,8 +41,8 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   const createIndexCallback = useCallback(() => {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/es2019/ui/annotations/hover/range-validator.js

@@ -3,7 +3,9 @@ import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
+import { ProvidersContext } from '../context';
 export const RangeValidator = props => {
+  var _providers$inlineComm;
   const {
     component,
     rendererRef,
@@ -22,10 +24,12 @@ export const RangeValidator = props => {
   const {
     isWithinRange
   } = useAnnotationHoverContext();
+  const providers = useContext(ProvidersContext);
+  const isCommentsOnMediaBugFixEnabled = (_providers$inlineComm = providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false;
   if (!range || type !== 'hover') {
     return null;
   }
-  const documentPosition = actions.getPositionFromRange(range);
+  const documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
   return /*#__PURE__*/React.createElement(Mounter, {
     isWithinRange: isWithinRange,
     range: range,

package/dist/es2019/ui/annotations/selection/mounter.js

@@ -4,6 +4,7 @@ import { updateWindowSelectionAroundDraft } from '../draft';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
@@ -21,6 +22,8 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   } = props;
   const [draftDocumentPosition, setDraftDocumentPosition] = useState();
   const actions = useContext(ActionsContext);
+  const providers = useContext(ProvidersContext);
+  const isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   const onCreateCallback = useCallback(annotationId => {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
@@ -47,8 +50,8 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(positionToAnnotate, annotation);
-  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   const createIndexCallback = useCallback(() => {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/es2019/ui/annotations/selection/range-validator.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { useUserSelectionRange } from '../hooks/user-selection';
 import { SelectionInlineCommentMounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export const SelectionRangeValidator = props => {
   const {
     selectionComponent,
@@ -14,10 +15,12 @@ export const SelectionRangeValidator = props => {
   const [range, draftRange, clearRange] = useUserSelectionRange({
     rendererRef
   });
+  const providers = useContext(ProvidersContext);
+  const isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   if (!range && !draftRange) {
     return null;
   }
-  const documentPosition = actions.getPositionFromRange(range);
+  const documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
 
   // This property is drilled down to consumers when a new range is selected to test it's validity
   let isAnnotationAllowedOnRange = false;

package/dist/esm/actions/index.js

@@ -162,11 +162,11 @@ var RendererActions = /*#__PURE__*/function () {
     }
   }, {
     key: "getPositionFromRange",
-    value: function getPositionFromRange(range) {
+    value: function getPositionFromRange(range, isCommentsOnMediaBugFixEnabled) {
       if (!this.doc || !this.schema || !range) {
         return false;
       }
-      return getPosFromRange(range);
+      return getPosFromRange(range, isCommentsOnMediaBugFixEnabled);
     }
   }, {
     key: "getAnnotationMarks",
@@ -211,7 +211,7 @@ var RendererActions = /*#__PURE__*/function () {
     }
   }, {
     key: "applyAnnotation",
-    value: function applyAnnotation(pos, annotation) {
+    value: function applyAnnotation(pos, annotation, isCommentsOnMediaBugFixEnabled) {
       if (!this.doc || !pos || !this.schema) {
         return false;
       }
@@ -220,10 +220,13 @@ var RendererActions = /*#__PURE__*/function () {
       var annotationId = annotation.annotationId,
         annotationType = annotation.annotationType;
       var step;
-
+      var beforeNodePos = isCommentsOnMediaBugFixEnabled ?
+      // As part of fix for RAP, `from` points to the position right before media node
+      // hence, -1 is not needed
+      from :
       // If from points to a node position,
       // we need to 1 position before it for nodeAt to return the node itself
-      var beforeNodePos = Math.max(from - 1, 0);
+      Math.max(from - 1, 0);
       var possibleNode = this.doc.nodeAt(beforeNodePos);
       if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
         step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({

package/dist/esm/react/index.js

@@ -374,7 +374,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var childHasLink = node.firstChild && node.firstChild.marks.filter(function (m) {
         return isLinkMark(m) || _this5.allowMediaLinking === true;
       }).length;
-      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         isInsideOfBlockNode: isInsideOfBlockNode,
         childHasLink: childHasLink,
         allowCaptions: this.media && this.media.allowCaptions,

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

@@ -17,7 +17,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, Fragment, useEffect, useState, useMemo } from 'react';
+import React, { PureComponent, Fragment, useEffect, useState, useMemo, useContext } from 'react';
 import { jsx, css } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -30,7 +30,7 @@ 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 { AnnotationsDraftContext } from '../../../ui/annotations/context';
+import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
@@ -284,6 +284,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
 }(PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var draftPosition = React.useContext(AnnotationsDraftContext);
+  var providers = useContext(ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState5 = useState(),
@@ -295,17 +297,19 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     shouldApplyDraftAnnotation = _useState8[0],
     setShouldApplyDraftAnnotation = _useState8[1];
   useEffect(function () {
+    var _draftPosition$from;
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    var posToCheck = isCommentsOnMediaBugFixEnabled ? ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1 : draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from;
+    if (draftPosition !== null && posToCheck === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition(posToCheck);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = useMemo(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {

package/dist/esm/steps/index.js

@@ -19,6 +19,16 @@ function findParent(element) {
   }
   return findParent(parentElement);
 }
+function findMediaParent(element) {
+  var parentElement = element.parentElement;
+  if (!parentElement || isRoot(parentElement)) {
+    return null;
+  }
+  if (parentElement.dataset.nodeType === 'mediaSingle') {
+    return parentElement;
+  }
+  return findMediaParent(parentElement);
+}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -155,18 +165,28 @@ export function resolvePos(node, offset) {
   }
   return resolvedPos + offset;
 }
-export function getPosFromRange(range) {
+export function getPosFromRange(range, isCommentsOnMediaBugFixEnabled) {
   var startContainer = range.startContainer,
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
-    var pos = getStartPos(parent);
-    return {
-      from: pos,
-      to: pos
-    };
+  var possibleMediaElement = findParent(startContainer);
+  if (possibleMediaElement && getNodeType(possibleMediaElement) === 'media') {
+    var pos;
+    if (isCommentsOnMediaBugFixEnabled) {
+      var mediaSingleElement = findMediaParent(possibleMediaElement);
+      if (mediaSingleElement) {
+        pos = getStartPos(mediaSingleElement);
+      }
+    } else {
+      pos = getStartPos(possibleMediaElement);
+    }
+    if (pos !== undefined) {
+      return {
+        from: pos,
+        to: pos
+      };
+    }
   }
   var from = resolvePos(startContainer, startOffset);
   var to = resolvePos(endContainer, endOffset);

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

package/dist/esm/ui/annotations/hover/mounter.js

@@ -5,6 +5,7 @@ import { updateWindowSelectionAroundDraft } from '../draft';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export var Mounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
@@ -23,6 +24,8 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = useContext(ActionsContext);
+  var providers = useContext(ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var onCreateCallback = useCallback(function (annotationId) {
     if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
       return false;
@@ -40,8 +43,8 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   var createIndexCallback = useCallback(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/esm/ui/annotations/hover/range-validator.js

@@ -3,7 +3,9 @@ import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
+import { ProvidersContext } from '../context';
 export var RangeValidator = function RangeValidator(props) {
+  var _providers$inlineComm;
   var component = props.component,
     rendererRef = props.rendererRef,
     applyAnnotationDraftAt = props.applyAnnotationDraftAt,
@@ -17,10 +19,12 @@ export var RangeValidator = function RangeValidator(props) {
     type = _useAnnotationRangeSt.type;
   var _useAnnotationHoverCo = useAnnotationHoverContext(),
     isWithinRange = _useAnnotationHoverCo.isWithinRange;
+  var providers = useContext(ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = (_providers$inlineComm = providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false;
   if (!range || type !== 'hover') {
     return null;
   }
-  var documentPosition = actions.getPositionFromRange(range);
+  var documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
   return /*#__PURE__*/React.createElement(Mounter, {
     isWithinRange: isWithinRange,
     range: range,

package/dist/esm/ui/annotations/selection/mounter.js

@@ -5,6 +5,7 @@ import { updateWindowSelectionAroundDraft } from '../draft';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
@@ -23,6 +24,8 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = useContext(ActionsContext);
+  var providers = useContext(ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var onCreateCallback = useCallback(function (annotationId) {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
@@ -49,8 +52,8 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(positionToAnnotate, annotation);
-  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
   var createIndexCallback = useCallback(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;

package/dist/esm/ui/annotations/selection/range-validator.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import { useUserSelectionRange } from '../hooks/user-selection';
 import { SelectionInlineCommentMounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { ProvidersContext } from '../context';
 export var SelectionRangeValidator = function SelectionRangeValidator(props) {
   var selectionComponent = props.selectionComponent,
     rendererRef = props.rendererRef,
@@ -17,10 +18,12 @@ export var SelectionRangeValidator = function SelectionRangeValidator(props) {
     range = _useUserSelectionRang2[0],
     draftRange = _useUserSelectionRang2[1],
     clearRange = _useUserSelectionRang2[2];
+  var providers = useContext(ProvidersContext);
+  var isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   if (!range && !draftRange) {
     return null;
   }
-  var documentPosition = actions.getPositionFromRange(range);
+  var documentPosition = actions.getPositionFromRange(range, isCommentsOnMediaBugFixEnabled);
 
   // This property is drilled down to consumers when a new range is selected to test it's validity
   var isAnnotationAllowedOnRange = false;

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

@@ -22,7 +22,7 @@ export interface RendererActionsOptions {
     deleteAnnotation: (annotationId: string, annotationType: 'inlineComment') => ActionResult;
     isValidAnnotationRange: (range: Range) => boolean;
 }
-export type ApplyAnnotation = (pos: Position, annotation: Annotation) => AnnotationActionResult;
+export type ApplyAnnotation = (pos: Position, annotation: Annotation, isCommentsOnMediaBugFixEnabled?: boolean) => AnnotationActionResult;
 export interface AnnotationsRendererActionsOptions {
     isValidAnnotationPosition: (pos: Position) => boolean;
     applyAnnotation: ApplyAnnotation;
@@ -52,10 +52,10 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isValidAnnotationPosition(pos: Position): boolean;
-    getPositionFromRange(range: Range | null): Position | false;
+    getPositionFromRange(range: Range | null, isCommentsOnMediaBugFixEnabled?: boolean): Position | false;
     getAnnotationMarks(): Mark[];
     getAnnotationsByPosition(range: Range): string[];
-    applyAnnotation(pos: Position, annotation: Annotation): AnnotationActionResult;
+    applyAnnotation(pos: Position, annotation: Annotation, isCommentsOnMediaBugFixEnabled?: boolean): AnnotationActionResult;
     generateAnnotationIndexMatch(pos: Position): AnnotationByMatches | false;
 }
 export {};

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

@@ -6,7 +6,7 @@ interface AnnotationStepOptions {
     annotationId: string;
     annotationType: 'inlineComment';
 }
-export declare function getPosFromRange(range: Range): {
+export declare function getPosFromRange(range: Range, isCommentsOnMediaBugFixEnabled?: boolean): {
     from: number;
     to: number;
 } | false;

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

@@ -22,7 +22,7 @@ export interface RendererActionsOptions {
     deleteAnnotation: (annotationId: string, annotationType: 'inlineComment') => ActionResult;
     isValidAnnotationRange: (range: Range) => boolean;
 }
-export type ApplyAnnotation = (pos: Position, annotation: Annotation) => AnnotationActionResult;
+export type ApplyAnnotation = (pos: Position, annotation: Annotation, isCommentsOnMediaBugFixEnabled?: boolean) => AnnotationActionResult;
 export interface AnnotationsRendererActionsOptions {
     isValidAnnotationPosition: (pos: Position) => boolean;
     applyAnnotation: ApplyAnnotation;
@@ -52,10 +52,10 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isValidAnnotationPosition(pos: Position): boolean;
-    getPositionFromRange(range: Range | null): Position | false;
+    getPositionFromRange(range: Range | null, isCommentsOnMediaBugFixEnabled?: boolean): Position | false;
     getAnnotationMarks(): Mark[];
     getAnnotationsByPosition(range: Range): string[];
-    applyAnnotation(pos: Position, annotation: Annotation): AnnotationActionResult;
+    applyAnnotation(pos: Position, annotation: Annotation, isCommentsOnMediaBugFixEnabled?: boolean): AnnotationActionResult;
     generateAnnotationIndexMatch(pos: Position): AnnotationByMatches | false;
 }
 export {};

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

@@ -6,7 +6,7 @@ interface AnnotationStepOptions {
     annotationId: string;
     annotationType: 'inlineComment';
 }
-export declare function getPosFromRange(range: Range): {
+export declare function getPosFromRange(range: Range, isCommentsOnMediaBugFixEnabled?: boolean): {
     from: number;
     to: number;
 } | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.20.3",
+  "version": "109.21.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.33.0",
+    "@atlaskit/editor-common": "^78.34.0",
     "@atlaskit/editor-json-transformer": "^8.11.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "4.0.0",
@@ -51,7 +51,7 @@
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",