@atlaskit/renderer 109.18.0 → 109.19.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.19.0
+
+### Minor Changes
+
+- [#90964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90964) [`6e7df33eb280`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e7df33eb280) - [ux] [ED-22992] Auto-dismiss comment button on media if mouse rolling away from media and comment popup, remove popup position transition so that popup does not appear sliding across the page when mouse moving from one media to another
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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

@@ -15,6 +15,8 @@ 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");
+var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
 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 +146,35 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       height: height
     };
   }, [height, width]);
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = (0, _AnnotationHoverContext.useAnnotationHoverDispatch)(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  (0, _react.useEffect)(function () {
+    var mediaSingleElement = ref.current;
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
+      }
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+    return function () {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnnotationHoverDispatch = exports.useAnnotationHoverContext = exports.AnnotationHoverContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+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 AnnotationHoverStateContext = /*#__PURE__*/(0, _react.createContext)({
+  isWithinRange: false
+});
+var AnnotationHoverDispatchContext = /*#__PURE__*/(0, _react.createContext)({
+  cancelTimeout: function cancelTimeout() {},
+  initiateTimeout: function initiateTimeout() {},
+  setIsWithinRange: function setIsWithinRange() {}
+});
+var AnnotationHoverContext = exports.AnnotationHoverContext = function AnnotationHoverContext(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isWithinRange = _useState2[0],
+    setIsWithinRange = _useState2[1];
+  var timeoutHandler = (0, _react.useRef)();
+  var cancelTimeout = (0, _react.useCallback)(function () {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  var initiateTimeout = (0, _react.useCallback)(function () {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(function () {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  var stateData = (0, _react.useMemo)(function () {
+    return {
+      isWithinRange: isWithinRange
+    };
+  }, [isWithinRange]);
+  var dispatchData = (0, _react.useMemo)(function () {
+    return {
+      cancelTimeout: cancelTimeout,
+      initiateTimeout: initiateTimeout,
+      setIsWithinRange: setIsWithinRange
+    };
+  }, [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/_react.default.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/_react.default.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+var useAnnotationHoverContext = exports.useAnnotationHoverContext = function useAnnotationHoverContext() {
+  return (0, _react.useContext)(AnnotationHoverStateContext);
+};
+var useAnnotationHoverDispatch = exports.useAnnotationHoverDispatch = function useAnnotationHoverDispatch() {
+  return (0, _react.useContext)(AnnotationHoverDispatchContext);
+};

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/cjs/ui/annotations/hover/mounter.js

@@ -18,6 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    isWithinRange = props.isWithinRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -123,6 +124,7 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _mounter = require("./mounter");
 var _RendererActionsContext = require("../../RendererActionsContext");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
+var _AnnotationHoverContext = require("../contexts/AnnotationHoverContext");
 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) {
@@ -23,11 +24,14 @@ var RangeValidator = exports.RangeValidator = function RangeValidator(props) {
   var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type;
+  var _useAnnotationHoverCo = (0, _AnnotationHoverContext.useAnnotationHoverContext)(),
+    isWithinRange = _useAnnotationHoverCo.isWithinRange;
   if (!range || type !== 'hover') {
     return null;
   }
   var documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/_react.default.createElement(_mounter.Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

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

@@ -26,6 +26,7 @@ var _useLoadAnnotations = require("./hooks/use-load-annotations");
 var _useEvents = require("./hooks/use-events");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _AnnotationRangeContext = require("./contexts/AnnotationRangeContext");
+var _AnnotationHoverContext = require("./contexts/AnnotationHoverContext");
 var _draft = require("./draft");
 var _element = require("./element");
 var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -54,12 +55,12 @@ var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrappe
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/_react.default.createElement(_AnnotationRangeContext.AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/_react.default.createElement(_wrapper.AnnotationsContextWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_AnnotationHoverContext.AnnotationHoverContext, null, /*#__PURE__*/_react.default.createElement(_wrapper.AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/_react.default.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/_react.default.createElement(_view.AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };

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

@@ -1,13 +1,15 @@
 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';
+import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 const isMediaElement = media => {
@@ -129,6 +131,37 @@ const MediaSingleWithChildren = props => {
     width,
     height
   }), [height, width]);
+  const {
+    setHoverTarget
+  } = useAnnotationRangeDispatch();
+  const {
+    cancelTimeout,
+    initiateTimeout,
+    setIsWithinRange
+  } = useAnnotationHoverDispatch();
+  useEffect(() => {
+    const mediaSingleElement = ref.current;
+    const handleMouseEnter = event => {
+      cancelTimeout();
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
+      }
+    };
+    const handleMouseLeave = () => {
+      initiateTimeout();
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+    return () => {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

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

@@ -0,0 +1,46 @@
+import React, { createContext, useState, useContext, useMemo, useRef, useCallback } from 'react';
+const AnnotationHoverStateContext = /*#__PURE__*/createContext({
+  isWithinRange: false
+});
+const AnnotationHoverDispatchContext = /*#__PURE__*/createContext({
+  cancelTimeout: () => {},
+  initiateTimeout: () => {},
+  setIsWithinRange: () => {}
+});
+export const AnnotationHoverContext = ({
+  children
+}) => {
+  const [isWithinRange, setIsWithinRange] = useState(false);
+  const timeoutHandler = useRef();
+  const cancelTimeout = useCallback(() => {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  const initiateTimeout = useCallback(() => {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(() => {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  const stateData = useMemo(() => ({
+    isWithinRange
+  }), [isWithinRange]);
+  const dispatchData = useMemo(() => ({
+    cancelTimeout,
+    initiateTimeout,
+    setIsWithinRange
+  }), [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/React.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/React.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+export const useAnnotationHoverContext = () => {
+  return useContext(AnnotationHoverStateContext);
+};
+export const useAnnotationHoverDispatch = () => {
+  return useContext(AnnotationHoverDispatchContext);
+};

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/es2019/ui/annotations/hover/mounter.js

@@ -8,6 +8,7 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
     range,
+    isWithinRange,
     isAnnotationAllowed,
     wrapperDOM,
     onClose: onCloseProps,
@@ -110,6 +111,7 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
 export const RangeValidator = props => {
   const {
     component,
@@ -18,11 +19,15 @@ export const RangeValidator = props => {
     range,
     type
   } = useAnnotationRangeState();
+  const {
+    isWithinRange
+  } = useAnnotationHoverContext();
   if (!range || type !== 'hover') {
     return null;
   }
   const documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/React.createElement(Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

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

@@ -7,6 +7,7 @@ import { useLoadAnnotations } from './hooks/use-load-annotations';
 import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
+import { AnnotationHoverContext } from './contexts/AnnotationHoverContext';
 const LoadAnnotations = /*#__PURE__*/React.memo(({
   adfDocument
 }) => {
@@ -37,14 +38,14 @@ export const AnnotationsWrapper = props => {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 ? void 0 : (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
+  }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/React.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

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

@@ -2,13 +2,15 @@ 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';
+import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 var isMediaElement = function isMediaElement(media) {
@@ -134,6 +136,35 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       height: height
     };
   }, [height, width]);
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = useAnnotationHoverDispatch(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  useEffect(function () {
+    var mediaSingleElement = ref.current;
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
+      if (event.buttons === 0) {
+        setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
+      }
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
+    if (mediaSingleElement) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+    return function () {
+      if (mediaSingleElement) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

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

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useState, useContext, useMemo, useRef, useCallback } from 'react';
+var AnnotationHoverStateContext = /*#__PURE__*/createContext({
+  isWithinRange: false
+});
+var AnnotationHoverDispatchContext = /*#__PURE__*/createContext({
+  cancelTimeout: function cancelTimeout() {},
+  initiateTimeout: function initiateTimeout() {},
+  setIsWithinRange: function setIsWithinRange() {}
+});
+export var AnnotationHoverContext = function AnnotationHoverContext(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isWithinRange = _useState2[0],
+    setIsWithinRange = _useState2[1];
+  var timeoutHandler = useRef();
+  var cancelTimeout = useCallback(function () {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  var initiateTimeout = useCallback(function () {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(function () {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  var stateData = useMemo(function () {
+    return {
+      isWithinRange: isWithinRange
+    };
+  }, [isWithinRange]);
+  var dispatchData = useMemo(function () {
+    return {
+      cancelTimeout: cancelTimeout,
+      initiateTimeout: initiateTimeout,
+      setIsWithinRange: setIsWithinRange
+    };
+  }, [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/React.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/React.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+export var useAnnotationHoverContext = function useAnnotationHoverContext() {
+  return useContext(AnnotationHoverStateContext);
+};
+export var useAnnotationHoverDispatch = function useAnnotationHoverDispatch() {
+  return useContext(AnnotationHoverDispatchContext);
+};

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/esm/ui/annotations/hover/mounter.js

@@ -8,6 +8,7 @@ import { RendererContext as ActionsContext } from '../../RendererActionsContext'
 export var Mounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    isWithinRange = props.isWithinRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -113,6 +114,7 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
 export var RangeValidator = function RangeValidator(props) {
   var component = props.component,
     rendererRef = props.rendererRef,
@@ -14,11 +15,14 @@ export var RangeValidator = function RangeValidator(props) {
   var _useAnnotationRangeSt = useAnnotationRangeState(),
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type;
+  var _useAnnotationHoverCo = useAnnotationHoverContext(),
+    isWithinRange = _useAnnotationHoverCo.isWithinRange;
   if (!range || type !== 'hover') {
     return null;
   }
   var documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/React.createElement(Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

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

@@ -7,6 +7,7 @@ import { useLoadAnnotations } from './hooks/use-load-annotations';
 import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
+import { AnnotationHoverContext } from './contexts/AnnotationHoverContext';
 var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
   var adfDocument = _ref.adfDocument;
   useLoadAnnotations({
@@ -33,14 +34,14 @@ export var AnnotationsWrapper = function AnnotationsWrapper(props) {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
+  }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/React.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

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/ui/annotations/contexts/AnnotationHoverContext.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface AnnotationHoverStateContext {
+    isWithinRange: boolean;
+}
+export interface AnnotationHoverDispatchContext {
+    cancelTimeout: () => void;
+    initiateTimeout: () => void;
+    setIsWithinRange: (isWithinRange: boolean) => void;
+}
+export declare const AnnotationHoverContext: ({ children, }: {
+    children?: ReactNode;
+}) => JSX.Element;
+export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
+export declare const useAnnotationHoverDispatch: () => AnnotationHoverDispatchContext;

package/dist/types/ui/annotations/hover/mounter.d.ts

@@ -5,6 +5,7 @@ import type { Position } from '../types';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
+    isWithinRange: boolean;
     component: React.ComponentType<InlineCommentHoverComponentProps>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;

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/dist/types-ts4.5/ui/annotations/contexts/AnnotationHoverContext.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface AnnotationHoverStateContext {
+    isWithinRange: boolean;
+}
+export interface AnnotationHoverDispatchContext {
+    cancelTimeout: () => void;
+    initiateTimeout: () => void;
+    setIsWithinRange: (isWithinRange: boolean) => void;
+}
+export declare const AnnotationHoverContext: ({ children, }: {
+    children?: ReactNode;
+}) => JSX.Element;
+export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
+export declare const useAnnotationHoverDispatch: () => AnnotationHoverDispatchContext;

package/dist/types-ts4.5/ui/annotations/hover/mounter.d.ts

@@ -5,6 +5,7 @@ import type { Position } from '../types';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
+    isWithinRange: boolean;
     component: React.ComponentType<InlineCommentHoverComponentProps>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.18.0",
+  "version": "109.19.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.12.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.28.0",
+    "@atlaskit/editor-common": "^78.29.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.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",