@atlaskit/renderer 109.19.1 → 109.19.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.19.3
+
+### Patch Changes
+
+- [#92483](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92483) [`bd8804c2b4ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd8804c2b4ad) - Allow realtime comments to correctly infer position of comment on media
+
+## 109.19.2
+
+### Patch Changes
+
+- [#91468](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91468) [`4ad8a0bc6051`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ad8a0bc6051) - Fixes preview linking and annotation flow on media with annotation
+
 ## 109.19.1
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -230,7 +230,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
 
       // 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);
+      var beforeNodePos = Math.max(from, 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/nodes/media/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.linkStyle = exports.default = exports.borderStyle = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -30,12 +31,12 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _events = require("../../../analytics/events");
 var _annotation = _interopRequireDefault(require("../../marks/annotation"));
 var _context = require("../../../ui/annotations/context");
-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 _types = require("@atlaskit/editor-common/types");
 var _excluded = ["marks", "mediaElement", "isDrafting"];
+var _templateObject, _templateObject2;
 /** @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; }
@@ -43,6 +44,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var linkStyle = exports.linkStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
+var borderStyle = exports.borderStyle = function borderStyle(color, width) {
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
+};
 var MediaBorder = function MediaBorder(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
@@ -57,7 +62,7 @@ var MediaBorder = function MediaBorder(_ref) {
     "data-mark-type": "border",
     "data-color": borderColor,
     "data-size": borderWidth,
-    css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
+    css: borderStyle(paletteColorValue, borderWidth)
   }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
     borderColor: borderColor
   }), children);
@@ -75,7 +80,7 @@ var MediaLink = function MediaLink(_ref2) {
     rel: "noreferrer noopener",
     onClick: onClick,
     "data-block-link": linkHref,
-    css: _styles.linkStyle
+    css: linkStyle
   }, children);
 };
 var MediaAnnotation = function MediaAnnotation(_ref3) {
@@ -88,7 +93,8 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     id: mark.attrs.id,
     annotationType: mark.attrs.annotationType,
     dataAttributes: {
-      'data-renderer-mark': true
+      'data-renderer-mark': true,
+      'data-block-mark': true
     }
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
@@ -166,6 +172,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     return null;
   }
   var onClick = function onClick(e) {
+    e.preventDefault();
     if (updateSubscriber) {
       updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
@@ -300,9 +307,9 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    if (draftPosition !== null && draftPosition.from + 1 === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition((draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) + 1);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);

package/dist/cjs/steps/index.js

@@ -10,9 +10,6 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
-var getNodeType = function getNodeType(element) {
-  return element.dataset.nodeType;
-};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -26,6 +23,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 findParent(parentElement);
+}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -135,8 +142,8 @@ function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
+  var parent = findMediaParent(startContainer);
+  if (parent) {
     var pos = getStartPos(parent);
     return {
       from: pos,

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

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

@@ -34,6 +34,11 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var onMarkClick = (0, _react.useCallback)(function (event) {
+    // prevent inline mark logic for media block marks
+    if (event.currentTarget.getAttribute('data-block-mark')) {
+      return;
+    }
+
     // prevents multiple callback on overlapping annotations
     if (event.defaultPrevented || state !== _adfSchema.AnnotationMarkStates.ACTIVE) {
       return;

package/dist/es2019/actions/index.js

@@ -208,7 +208,7 @@ export default class RendererActions {
 
     // 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);
+    const beforeNodePos = Math.max(from, 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/nodes/media/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -16,11 +16,28 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext } from '../../../ui/annotations/context';
-import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+export const linkStyle = css`
+  position: absolute;
+  background: transparent;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: pointer;
+  width: 100% !important;
+  height: 100% !important;
+`;
+export const borderStyle = (color, width) => css`
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: ${width}px;
+  box-shadow: 0 0 0 ${width}px ${color};
+`;
 const MediaBorder = ({
   mark,
   children
@@ -69,7 +86,8 @@ const MediaAnnotation = ({
     id: mark.attrs.id,
     annotationType: mark.attrs.annotationType,
     dataAttributes: {
-      'data-renderer-mark': true
+      'data-renderer-mark': true,
+      'data-block-mark': true
     }
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
@@ -139,6 +157,7 @@ const CommentBadgeWrapper = ({
     return null;
   }
   const onClick = e => {
+    e.preventDefault();
     if (updateSubscriber) {
       updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
@@ -262,9 +281,9 @@ const MediaWithDraftAnnotation = props => {
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    if (draftPosition !== null && draftPosition.from + 1 === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition((draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) + 1);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);

package/dist/es2019/steps/index.js

@@ -2,7 +2,6 @@ import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
-const getNodeType = element => element.dataset.nodeType;
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -18,6 +17,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 findParent(parentElement);
+}
 function findParentBeforePointer(element) {
   const {
     parentElement
@@ -131,8 +142,8 @@ export function getPosFromRange(range) {
     endContainer,
     endOffset
   } = range;
-  const parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
+  const parent = findMediaParent(startContainer);
+  if (parent) {
     const pos = getStartPos(parent);
     return {
       from: pos,

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

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

@@ -33,6 +33,11 @@ export const MarkComponent = ({
 }) => {
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
   const onMarkClick = useCallback(event => {
+    // prevent inline mark logic for media block marks
+    if (event.currentTarget.getAttribute('data-block-mark')) {
+      return;
+    }
+
     // prevents multiple callback on overlapping annotations
     if (event.defaultPrevented || state !== AnnotationMarkStates.ACTIVE) {
       return;

package/dist/esm/actions/index.js

@@ -223,7 +223,7 @@ var RendererActions = /*#__PURE__*/function () {
 
       // 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);
+      var beforeNodePos = Math.max(from, 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/nodes/media/index.js

@@ -8,7 +8,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["marks", "mediaElement", "isDrafting"];
+var _templateObject, _templateObject2;
 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; }
 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); }; }
@@ -16,7 +18,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /** @jsx jsx */
 
 import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -29,11 +31,14 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext } from '../../../ui/annotations/context';
-import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
+export var borderStyle = function borderStyle(color, width) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
+};
 var MediaBorder = function MediaBorder(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
@@ -79,7 +84,8 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     id: mark.attrs.id,
     annotationType: mark.attrs.annotationType,
     dataAttributes: {
-      'data-renderer-mark': true
+      'data-renderer-mark': true,
+      'data-block-mark': true
     }
     // This should be fine being empty [] since the serializer serializeFragmentChild getMarkProps call always passes
     ,
@@ -157,6 +163,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     return null;
   }
   var onClick = function onClick(e) {
+    e.preventDefault();
     if (updateSubscriber) {
       updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
@@ -291,9 +298,9 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     if (pos === undefined) {
       return;
     }
-    if (draftPosition !== null && draftPosition.from === pos) {
+    if (draftPosition !== null && draftPosition.from + 1 === pos) {
       setShouldApplyDraftAnnotation(true);
-      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+      setPosition((draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) + 1);
     } else if (draftPosition === null && shouldApplyDraftAnnotation) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);

package/dist/esm/steps/index.js

@@ -2,9 +2,6 @@ import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
-var getNodeType = function getNodeType(element) {
-  return element.dataset.nodeType;
-};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -18,6 +15,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 findParent(parentElement);
+}
 function findParentBeforePointer(element) {
   var parentElement = element.parentElement;
   if (isRoot(parentElement) || !parentElement) {
@@ -127,8 +134,8 @@ export function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
-  var parent = findParent(startContainer);
-  if (parent && getNodeType(parent) === 'media') {
+  var parent = findMediaParent(startContainer);
+  if (parent) {
     var pos = getStartPos(parent);
     return {
       from: pos,

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

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

@@ -29,6 +29,11 @@ export var MarkComponent = function MarkComponent(_ref) {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var onMarkClick = useCallback(function (event) {
+    // prevent inline mark logic for media block marks
+    if (event.currentTarget.getAttribute('data-block-mark')) {
+      return;
+    }
+
     // prevents multiple callback on overlapping annotations
     if (event.defaultPrevented || state !== AnnotationMarkStates.ACTIVE) {
       return;

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

@@ -27,5 +27,7 @@ export type MediaProps = MediaCardProps & {
     height?: number;
     isDrafting: boolean;
 };
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

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

@@ -41,6 +41,7 @@ export interface NodeMeta {
 export interface MarkMeta {
     dataAttributes: {
         'data-renderer-mark': true;
+        'data-block-mark'?: true;
     };
     eventHandlers?: EventHandlers;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;

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

@@ -27,5 +27,7 @@ export type MediaProps = MediaCardProps & {
     height?: number;
     isDrafting: boolean;
 };
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

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

@@ -41,6 +41,7 @@ export interface NodeMeta {
 export interface MarkMeta {
     dataAttributes: {
         'data-renderer-mark': true;
+        'data-block-mark'?: true;
     };
     eventHandlers?: EventHandlers;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.19.1",
+  "version": "109.19.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/link-datasource": "^1.27.0",
+    "@atlaskit/link-datasource": "^1.28.0",
     "@atlaskit/media-card": "^77.11.0",
     "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",

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

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.linkStyle = exports.borderStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
-var linkStyle = exports.linkStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
-var borderStyle = exports.borderStyle = function borderStyle(color, width) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
-};

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

@@ -1,19 +0,0 @@
-import { css } from '@emotion/react';
-export const linkStyle = css`
-  position: absolute;
-  background: transparent;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  cursor: pointer;
-  width: 100% !important;
-  height: 100% !important;
-`;
-export const borderStyle = (color, width) => css`
-  position: absolute;
-  width: 100% !important;
-  height: 100% !important;
-  border-radius: ${width}px;
-  box-shadow: 0 0 0 ${width}px ${color};
-`;

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

@@ -1,7 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
-import { css } from '@emotion/react';
-export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
-export var borderStyle = function borderStyle(color, width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
-};

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

@@ -1,2 +0,0 @@
-export declare const linkStyle: import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

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

@@ -1,2 +0,0 @@
-export declare const linkStyle: import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;