@atlaskit/renderer 109.17.3 → 109.18.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 109.18.1
+
+### Patch Changes
+
+- [#90969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90969) [`e6b63a9cbe78`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6b63a9cbe78) - Fix issues with comment hover for media nodes
+
+## 109.18.0
+
+### Minor Changes
+
+- [#90742](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90742) [`f893b885cc0a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f893b885cc0a) - [ux] Add comment on media badge states
+
+### Patch Changes
+
+- [#90680](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90680) [`876804648156`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/876804648156) - ED-22917 fix comment positioning logic to account for inline-card comments
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- [#89296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89296) [`14a5e5877b97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14a5e5877b97) - [ux] [ED-22875] - Removed borders from multi-bodied extensions
+- Updated dependencies
+
 ## 109.17.3
 
 ### Patch Changes

package/dist/cjs/react/nodes/extensionFrame.js

@@ -1,20 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 /** @jsx jsx */
+
+var containerCSS = (0, _react.css)({
+  minHeight: '100px'
+});
 var ExtensionFrame = function ExtensionFrame(props) {
-  var containerCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"));
   return (0, _react.jsx)("div", {
     css: containerCSS,
-    className: "extension-frame",
     "data-extension-frame": "true",
     style: {
       flexBasis: "100%"

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,6 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -35,7 +35,7 @@ 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"];
+var _excluded = ["marks", "mediaElement"];
 /** @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; }
@@ -120,7 +120,16 @@ var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
+    mediaElement = _ref5.mediaElement,
     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var _useState = (0, _react.useState)('default'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    entered = _useState4[0],
+    setEntered = _useState4[1];
   var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
   var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
@@ -130,6 +139,27 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       state: _adfSchema.AnnotationMarkStates.ACTIVE
     }
   });
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        if (mutation.attributeName === 'data-has-focus') {
+          var _mutation$target$pare;
+          var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaElement) {
+      observer.observe(mediaElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaElement, setStatus]);
   if (!activeParentIds.length) {
     return null;
   }
@@ -142,6 +172,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     }
   };
   return (0, _react2.jsx)(CommentBadge, (0, _extends2.default)({
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
     onClick: onClick
   }, rest));
 };
@@ -246,14 +283,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    shouldApplyDraftAnnotation = _useState4[0],
-    setShouldApplyDraftAnnotation = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    shouldApplyDraftAnnotation = _useState8[0],
+    setShouldApplyDraftAnnotation = _useState8[1];
   (0, _react.useEffect)(function () {
     if (pos === undefined) {
       return;

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

@@ -15,6 +15,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _style = require("../../../ui/Renderer/style");
 var _styles = require("./styles");
+var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 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; }
 /** @jsx jsx */
@@ -144,6 +145,24 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       height: height
     };
   }, [height, width]);
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  (0, _react.useEffect)(function () {
+    var mediaSingleElement = ref.current;
+    var callback = function callback(event) {
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+      }
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', callback);
+    }
+    return function () {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', callback);
+      }
+    };
+  }, [setHoverTarget]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/cjs/steps/index.js

@@ -52,6 +52,23 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+
+/**
+ * This returns the text content of a node excluding content
+ * inside inline cards (spans with data-inline-card="true").
+ */
+function getPMTextContent(node) {
+  if (isTextNode(node)) {
+    return node.textContent;
+  }
+  if (isElementNode(node)) {
+    if (node.dataset.inlineCard === 'true') {
+      return '';
+    }
+    return Array.from(node.childNodes).map(getPMTextContent).join('');
+  }
+  return '';
+}
 function resolveNodePos(node) {
   var resolvedPos = 0;
   var prev = node.previousSibling;
@@ -60,7 +77,7 @@ function resolveNodePos(node) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {
-        resolvedPos += prev.textContent.length;
+        resolvedPos += getPMTextContent(prev).length;
       } else {
         resolvedPos += 1;
       }
@@ -104,7 +121,8 @@ function resolvePos(node, offset) {
     while (current && current.parentElement !== parent) {
       current = current.parentNode;
       if (current) {
-        resolvedPos += resolveNodePos(current);
+        var nodePos = resolveNodePos(current);
+        resolvedPos += nodePos;
       }
     }
   } else {

package/dist/cjs/ui/MediaCard.js

@@ -21,7 +21,6 @@ var _traverse = require("@atlaskit/adf-utils/traverse");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _utils = require("@atlaskit/editor-common/utils");
-var _AnnotationRangeContext = require("./annotations/contexts/AnnotationRangeContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -269,7 +268,6 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
         mediaClient = _this$props5.mediaClient,
-        setHoverTarget = _this$props5.setHoverTarget,
         dataAttributes = _this$props5.dataAttributes;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -305,15 +303,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
-      }), dataAttributes, {
-        onMouseEnter: function onMouseEnter(event) {
-          // We will not allow a hover target to be set if any mouse button is depressed during the mouse enter state.
-          // This could be due to the user trying to select text across the document.
-          if (event.buttons === 0) {
-            setHoverTarget && setHoverTarget(event.target);
-          }
-        }
-      }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+      }), dataAttributes), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
         identifier: identifier,
         alt: alt,
         contextId: contextId,
@@ -371,11 +361,8 @@ var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_
 };
 var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
   var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
-  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
-    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
   return /*#__PURE__*/_react.default.createElement(MediaCardView, (0, _extends2.default)({}, props, {
-    mediaClient: mediaClient,
-    setHoverTarget: setHoverTarget
+    mediaClient: mediaClient
   }));
 };
 var MediaCard = exports.MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);

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

package/dist/cjs/ui/annotations/contexts/AnnotationRangeContext.js

@@ -162,9 +162,11 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
     });
   }, []);
   var setHoverTarget = (0, _react.useCallback)(function (target) {
+    // the HoverComponent expects an element deeply nested inside media, these classes work with the current implementation
+    var mediaNode = target.querySelector('.media-card-inline-player, .media-file-card-view');
     var range = document.createRange();
-    range.setStartBefore(target);
-    range.setEndAfter(target);
+    range.setStartBefore(mediaNode);
+    range.setEndAfter(mediaNode);
     dispatch({
       type: 'setHover',
       range: range

package/dist/es2019/react/nodes/extensionFrame.js

@@ -1,15 +1,12 @@
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
+const containerCSS = css({
+  minHeight: '100px'
+});
 const ExtensionFrame = props => {
-  const containerCSS = css`
-    border: 1px solid ${`var(--ds-border, ${N30})`};
-    min-height: 100px;
-  `;
   return jsx("div", {
     css: containerCSS,
-    className: "extension-frame",
     "data-extension-frame": "true",
     style: {
       flexBasis: `100%`

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

@@ -100,9 +100,12 @@ const MediaAnnotations = ({
 const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
+  mediaElement,
   ...rest
 }) => {
   var _marks$map;
+  const [status, setStatus] = useState('default');
+  const [entered, setEntered] = useState(false);
   const updateSubscriber = useInlineCommentSubscriberContext();
   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 : [''],
@@ -110,6 +113,27 @@ const CommentBadgeWrapper = ({
       state: AnnotationMarkStates.ACTIVE
     }
   });
+  useEffect(() => {
+    const observer = new MutationObserver(mutationList => {
+      mutationList.forEach(mutation => {
+        if (mutation.attributeName === 'data-has-focus') {
+          var _mutation$target$pare;
+          const elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaElement) {
+      observer.observe(mediaElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [mediaElement, setStatus]);
   if (!activeParentIds.length) {
     return null;
   }
@@ -122,6 +146,9 @@ const CommentBadgeWrapper = ({
     }
   };
   return jsx(CommentBadge, _extends({
+    onMouseEnter: () => setEntered(true),
+    onMouseLeave: () => setEntered(false),
+    status: entered ? 'entered' : status,
     onClick: onClick
   }, rest));
 };

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

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import { default as React, Fragment, useCallback, useContext, useMemo } from 'react';
+import { default as React, Fragment, useCallback, useContext, useMemo, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
+import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 const isMediaElement = media => {
@@ -129,6 +130,25 @@ const MediaSingleWithChildren = props => {
     width,
     height
   }), [height, width]);
+  const {
+    setHoverTarget
+  } = useAnnotationRangeDispatch();
+  useEffect(() => {
+    const mediaSingleElement = ref.current;
+    const callback = event => {
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+      }
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', callback);
+    }
+    return () => {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', callback);
+      }
+    };
+  }, [setHoverTarget]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/es2019/steps/index.js

@@ -46,6 +46,23 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+
+/**
+ * This returns the text content of a node excluding content
+ * inside inline cards (spans with data-inline-card="true").
+ */
+function getPMTextContent(node) {
+  if (isTextNode(node)) {
+    return node.textContent;
+  }
+  if (isElementNode(node)) {
+    if (node.dataset.inlineCard === 'true') {
+      return '';
+    }
+    return Array.from(node.childNodes).map(getPMTextContent).join('');
+  }
+  return '';
+}
 function resolveNodePos(node) {
   let resolvedPos = 0;
   let prev = node.previousSibling;
@@ -54,7 +71,7 @@ function resolveNodePos(node) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {
-        resolvedPos += prev.textContent.length;
+        resolvedPos += getPMTextContent(prev).length;
       } else {
         resolvedPos += 1;
       }
@@ -98,7 +115,8 @@ export function resolvePos(node, offset) {
     while (current && current.parentElement !== parent) {
       current = current.parentNode;
       if (current) {
-        resolvedPos += resolveNodePos(current);
+        const nodePos = resolveNodePos(current);
+        resolvedPos += nodePos;
       }
     }
   } else {

package/dist/es2019/ui/MediaCard.js

@@ -5,7 +5,6 @@ import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
-import { useAnnotationRangeDispatch } from './annotations/contexts/AnnotationRangeContext';
 export const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -201,7 +200,6 @@ export class MediaCardView extends Component {
       shouldEnableDownloadButton,
       ssr,
       mediaClient,
-      setHoverTarget,
       dataAttributes
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
@@ -238,15 +236,7 @@ export class MediaCardView extends Component {
       contextIdentifierProvider,
       originalDimensions,
       fileState
-    }), dataAttributes, {
-      onMouseEnter: event => {
-        // We will not allow a hover target to be set if any mouse button is depressed during the mouse enter state.
-        // This could be due to the user trying to select text across the document.
-        if (event.buttons === 0) {
-          setHoverTarget && setHoverTarget(event.target);
-        }
-      }
-    }), /*#__PURE__*/React.createElement(Card, {
+    }), dataAttributes), /*#__PURE__*/React.createElement(Card, {
       identifier: identifier,
       alt: alt,
       contextId: contextId,
@@ -303,12 +293,8 @@ export const getClipboardAttrs = ({
 };
 export const MediaCardInternal = props => {
   const mediaClient = useContext(MediaClientContext);
-  const {
-    setHoverTarget
-  } = useAnnotationRangeDispatch();
   return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
-    mediaClient: mediaClient,
-    setHoverTarget: setHoverTarget
+    mediaClient: mediaClient
   }));
 };
 export const MediaCard = withImageLoader(MediaCardInternal);

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

package/dist/es2019/ui/annotations/contexts/AnnotationRangeContext.js

@@ -145,9 +145,11 @@ export const AnnotationRangeProvider = ({
     });
   }, []);
   const setHoverTarget = useCallback(target => {
+    // the HoverComponent expects an element deeply nested inside media, these classes work with the current implementation
+    const mediaNode = target.querySelector('.media-card-inline-player, .media-file-card-view');
     const range = document.createRange();
-    range.setStartBefore(target);
-    range.setEndAfter(target);
+    range.setStartBefore(mediaNode);
+    range.setEndAfter(mediaNode);
     dispatch({
       type: 'setHover',
       range

package/dist/esm/react/nodes/extensionFrame.js

@@ -1,14 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
+var containerCSS = css({
+  minHeight: '100px'
+});
 var ExtensionFrame = function ExtensionFrame(props) {
-  var containerCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n  "])), "var(--ds-border, ".concat(N30, ")"));
   return jsx("div", {
     css: containerCSS,
-    className: "extension-frame",
     "data-extension-frame": "true",
     style: {
       flexBasis: "100%"

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

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,8 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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";
-var _excluded = ["marks"];
+var _excluded = ["marks", "mediaElement"];
 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); }; }
@@ -111,7 +111,16 @@ var CommentBadge = injectIntl(CommentBadgeComponent);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
+    mediaElement = _ref5.mediaElement,
     rest = _objectWithoutProperties(_ref5, _excluded);
+  var _useState = useState('default'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    entered = _useState4[0],
+    setEntered = _useState4[1];
   var updateSubscriber = useInlineCommentSubscriberContext();
   var activeParentIds = useInlineCommentsFilter({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
@@ -121,6 +130,27 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       state: AnnotationMarkStates.ACTIVE
     }
   });
+  useEffect(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        if (mutation.attributeName === 'data-has-focus') {
+          var _mutation$target$pare;
+          var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaElement) {
+      observer.observe(mediaElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaElement, setStatus]);
   if (!activeParentIds.length) {
     return null;
   }
@@ -133,6 +163,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     }
   };
   return jsx(CommentBadge, _extends({
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
     onClick: onClick
   }, rest));
 };
@@ -237,14 +274,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var draftPosition = React.useContext(AnnotationsDraftContext);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shouldApplyDraftAnnotation = _useState4[0],
-    setShouldApplyDraftAnnotation = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    shouldApplyDraftAnnotation = _useState8[0],
+    setShouldApplyDraftAnnotation = _useState8[1];
   useEffect(function () {
     if (pos === undefined) {
       return;

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

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 
-import { default as React, Fragment, useCallback, useContext, useMemo } from 'react';
+import { default as React, Fragment, useCallback, useContext, useMemo, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
+import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 var isMediaElement = function isMediaElement(media) {
@@ -134,6 +135,24 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       height: height
     };
   }, [height, width]);
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  useEffect(function () {
+    var mediaSingleElement = ref.current;
+    var callback = function callback(event) {
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+      }
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', callback);
+    }
+    return function () {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', callback);
+      }
+    };
+  }, [setHoverTarget]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/esm/steps/index.js

@@ -44,6 +44,23 @@ function isNodeInlineMark(node) {
 function isElementInlineMark(element) {
   return !!element && Boolean(element.dataset.rendererMark);
 }
+
+/**
+ * This returns the text content of a node excluding content
+ * inside inline cards (spans with data-inline-card="true").
+ */
+function getPMTextContent(node) {
+  if (isTextNode(node)) {
+    return node.textContent;
+  }
+  if (isElementNode(node)) {
+    if (node.dataset.inlineCard === 'true') {
+      return '';
+    }
+    return Array.from(node.childNodes).map(getPMTextContent).join('');
+  }
+  return '';
+}
 function resolveNodePos(node) {
   var resolvedPos = 0;
   var prev = node.previousSibling;
@@ -52,7 +69,7 @@ function resolveNodePos(node) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {
-        resolvedPos += prev.textContent.length;
+        resolvedPos += getPMTextContent(prev).length;
       } else {
         resolvedPos += 1;
       }
@@ -96,7 +113,8 @@ export function resolvePos(node, offset) {
     while (current && current.parentElement !== parent) {
       current = current.parentNode;
       if (current) {
-        resolvedPos += resolveNodePos(current);
+        var nodePos = resolveNodePos(current);
+        resolvedPos += nodePos;
       }
     }
   } else {

package/dist/esm/ui/MediaCard.js

@@ -17,7 +17,6 @@ import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
-import { useAnnotationRangeDispatch } from './annotations/contexts/AnnotationRangeContext';
 export var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
   if (!doc) {
@@ -259,7 +258,6 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
         mediaClient = _this$props5.mediaClient,
-        setHoverTarget = _this$props5.setHoverTarget,
         dataAttributes = _this$props5.dataAttributes;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -295,15 +293,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
-      }), dataAttributes, {
-        onMouseEnter: function onMouseEnter(event) {
-          // We will not allow a hover target to be set if any mouse button is depressed during the mouse enter state.
-          // This could be due to the user trying to select text across the document.
-          if (event.buttons === 0) {
-            setHoverTarget && setHoverTarget(event.target);
-          }
-        }
-      }), /*#__PURE__*/React.createElement(Card, {
+      }), dataAttributes), /*#__PURE__*/React.createElement(Card, {
         identifier: identifier,
         alt: alt,
         contextId: contextId,
@@ -361,11 +351,8 @@ export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
 };
 export var MediaCardInternal = function MediaCardInternal(props) {
   var mediaClient = useContext(MediaClientContext);
-  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
-    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
   return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
-    mediaClient: mediaClient,
-    setHoverTarget: setHoverTarget
+    mediaClient: mediaClient
   }));
 };
 export var MediaCard = withImageLoader(MediaCardInternal);

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

package/dist/esm/ui/annotations/contexts/AnnotationRangeContext.js

@@ -152,9 +152,11 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
     });
   }, []);
   var setHoverTarget = useCallback(function (target) {
+    // the HoverComponent expects an element deeply nested inside media, these classes work with the current implementation
+    var mediaNode = target.querySelector('.media-card-inline-player, .media-file-card-view');
     var range = document.createRange();
-    range.setStartBefore(target);
-    range.setEndAfter(target);
+    range.setStartBefore(mediaNode);
+    range.setEndAfter(mediaNode);
     dispatch({
       type: 'setHover',
       range: range

package/dist/types/ui/MediaCard.d.ts

@@ -49,7 +49,6 @@ export declare const mediaIdentifierMap: Map<string, Identifier>;
 export declare const getListOfIdentifiersFromDoc: (doc?: ADFEntity) => Identifier[];
 export declare class MediaCardView extends Component<MediaCardProps & {
     mediaClient?: MediaClient;
-    setHoverTarget?: (target: HTMLElement) => void;
 }, State> {
     state: State;
     componentDidMount(): Promise<void>;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -49,7 +49,6 @@ export declare const mediaIdentifierMap: Map<string, Identifier>;
 export declare const getListOfIdentifiersFromDoc: (doc?: ADFEntity) => Identifier[];
 export declare class MediaCardView extends Component<MediaCardProps & {
     mediaClient?: MediaClient;
-    setHoverTarget?: (target: HTMLElement) => void;
 }, State> {
     state: State;
     componentDidMount(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.17.3",
+  "version": "109.18.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,14 +24,14 @@
     "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.8.0",
+    "@atlaskit/adf-schema": "^35.9.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.12.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.26.0",
+    "@atlaskit/editor-common": "^78.28.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -47,7 +47,7 @@
     "@atlaskit/media-ui": "^25.7.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.55.0",
+    "@atlaskit/smart-card": "^26.56.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",
@@ -71,7 +71,7 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/css-reset": "^6.8.0",
+    "@atlaskit/css-reset": "^6.9.0",
     "@atlaskit/editor-test-helpers": "^18.20.0",
     "@atlaskit/link-provider": "^1.9.0",
     "@atlaskit/link-test-helpers": "^7.0.0",