@atlaskit/renderer 109.18.1 → 109.19.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.19.1
+
+### Patch Changes
+
+- [#91808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91808) [`00e5dcfdf240`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00e5dcfdf240) - [ux] Does not add comment button on hover on media that is inside comment or inline comment rendereres
+
+## 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

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

@@ -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", "mediaElement"];
+var _excluded = ["marks", "mediaElement", "isDrafting"];
 /** @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; }
@@ -121,6 +121,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     mediaElement = _ref5.mediaElement,
+    _ref5$isDrafting = _ref5.isDrafting,
+    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
   var _useState = (0, _react.useState)('default'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -160,7 +162,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   var onClick = function onClick(e) {
@@ -201,7 +203,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         ssr = _this$props.ssr,
         width = _this$props.width,
         height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement;
+        mediaSingleElement = _this$props.mediaSingleElement,
+        _this$props$isDraftin = _this$props.isDrafting,
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
@@ -223,7 +227,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -311,7 +316,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     }) : dataAttributes;
   }, [applyDraftAnnotation, dataAttributes]);
   return (0, _react2.jsx)(Media, (0, _extends2.default)({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 var _default = exports.default = MediaWithDraftAnnotation;

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

@@ -16,6 +16,7 @@ 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 */
@@ -113,8 +114,9 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
 
   // TODO: put appearance-based padding into theme instead
 
-  var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
+  var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
+  var padding = isFullPage ? _style.FullPagePadding * 2 : 0;
   var calcDimensions = (0, _react.useCallback)(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
@@ -147,22 +149,34 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   }, [height, width]);
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
     setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = (0, _AnnotationHoverContext.useAnnotationHoverDispatch)(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  var isFullPageRenderer = isFullPage || isFullWidth;
   (0, _react.useEffect)(function () {
     var mediaSingleElement = ref.current;
-    var callback = function callback(event) {
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
-    if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
+    if (mediaSingleElement && isFullPageRenderer) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
-      if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+      if (mediaSingleElement && isFullPageRenderer) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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.1";
+var packageVersion = "109.19.1";
 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/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/media/index.js

@@ -101,6 +101,7 @@ const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
   mediaElement,
+  isDrafting = false,
   ...rest
 }) => {
   var _marks$map;
@@ -134,7 +135,7 @@ const CommentBadgeWrapper = ({
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   const onClick = e => {
@@ -168,7 +169,8 @@ class Media extends PureComponent {
         ssr,
         width,
         height,
-        mediaSingleElement
+        mediaSingleElement,
+        isDrafting = false
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -193,7 +195,8 @@ class Media extends PureComponent {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -274,7 +277,8 @@ const MediaWithDraftAnnotation = props => {
     'data-renderer-mark': true
   } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 export default MediaWithDraftAnnotation;

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

@@ -9,6 +9,7 @@ import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideL
 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 => {
@@ -100,8 +101,9 @@ const MediaSingleWithChildren = props => {
 
   // TODO: put appearance-based padding into theme instead
 
-  const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  const isFullPage = rendererAppearance === 'full-page';
   const isFullWidth = rendererAppearance === 'full-width';
+  const padding = isFullPage ? FullPagePadding * 2 : 0;
   const calcDimensions = useCallback(mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     const maxWidth = containerWidth;
@@ -133,22 +135,35 @@ const MediaSingleWithChildren = props => {
   const {
     setHoverTarget
   } = useAnnotationRangeDispatch();
+  const {
+    cancelTimeout,
+    initiateTimeout,
+    setIsWithinRange
+  } = useAnnotationHoverDispatch();
+  const isFullPageRenderer = isFullPage || isFullWidth;
   useEffect(() => {
     const mediaSingleElement = ref.current;
-    const callback = event => {
+    const handleMouseEnter = event => {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
-    if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+    const handleMouseLeave = () => {
+      initiateTimeout();
+    };
+    if (mediaSingleElement && isFullPageRenderer) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return () => {
-      if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+      if (mediaSingleElement && isFullPageRenderer) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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.1";
+const packageVersion = "109.19.1";
 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/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/media/index.js

@@ -8,7 +8,7 @@ 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", "mediaElement"];
+var _excluded = ["marks", "mediaElement", "isDrafting"];
 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); }; }
@@ -112,6 +112,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     mediaElement = _ref5.mediaElement,
+    _ref5$isDrafting = _ref5.isDrafting,
+    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = _objectWithoutProperties(_ref5, _excluded);
   var _useState = useState('default'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -151,7 +153,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   var onClick = function onClick(e) {
@@ -192,7 +194,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         ssr = _this$props.ssr,
         width = _this$props.width,
         height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement;
+        mediaSingleElement = _this$props.mediaSingleElement,
+        _this$props$isDraftin = _this$props.isDrafting,
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
@@ -214,7 +218,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -302,7 +307,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     }) : dataAttributes;
   }, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 export default MediaWithDraftAnnotation;

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

@@ -10,6 +10,7 @@ import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideL
 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) {
@@ -103,8 +104,9 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
 
   // TODO: put appearance-based padding into theme instead
 
-  var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
+  var padding = isFullPage ? FullPagePadding * 2 : 0;
   var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
@@ -137,22 +139,34 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   }, [height, width]);
   var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
     setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = useAnnotationHoverDispatch(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  var isFullPageRenderer = isFullPage || isFullWidth;
   useEffect(function () {
     var mediaSingleElement = ref.current;
-    var callback = function callback(event) {
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
-    if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
+    if (mediaSingleElement && isFullPageRenderer) {
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
-      if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+      if (mediaSingleElement && isFullPageRenderer) {
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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.1";
+var packageVersion = "109.19.1";
 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/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/react/nodes/media/index.d.ts

@@ -25,6 +25,7 @@ export type MediaProps = MediaCardProps & {
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
+    isDrafting: boolean;
 };
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

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/react/nodes/media/index.d.ts

@@ -25,6 +25,7 @@ export type MediaProps = MediaCardProps & {
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
+    isDrafting: boolean;
 };
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

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.1",
+  "version": "109.19.1",
   "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",