@atlaskit/renderer 109.9.0 → 109.10.1

package/dist/esm/ui/MediaCard.js

@@ -17,6 +17,7 @@ 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) {
@@ -257,7 +258,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         featureFlags = _this$props5.featureFlags,
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
-        mediaClient = _this$props5.mediaClient;
+        mediaClient = _this$props5.mediaClient,
+        setHoverTarget = _this$props5.setHoverTarget;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -285,13 +287,21 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
+      return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
         id: id,
         alt: alt,
         collection: collection,
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
+      }), {
+        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, {
         identifier: identifier,
         alt: alt,
@@ -350,8 +360,11 @@ 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
+    mediaClient: mediaClient,
+    setHoverTarget: setHoverTarget
   }));
 };
 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.9.0";
+var packageVersion = "109.10.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -344,7 +344,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature, _this$featureFlags2;
+        var _featureFlags$feature, _featureFlags$feature2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -354,7 +354,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           onComplete(stat);
         }
         var rendererOutput = jsx(RendererContextProvider, {
-          value: this.featureFlags(this.props.featureFlags)
+          value: featureFlags
         }, jsx(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
         }, jsx(AnalyticsContext.Provider, {
@@ -389,7 +389,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
-        var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.featureFlags) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.rendererRenderTracking) === null || _this$featureFlags2 === void 0 ? void 0 : _this$featureFlags2[ACTION_SUBJECT.RENDERER];
+        var rendererRenderTracking = featureFlags === null || featureFlags === void 0 || (_featureFlags$feature2 = featureFlags.featureFlags) === null || _featureFlags$feature2 === void 0 || (_featureFlags$feature2 = _featureFlags$feature2.rendererRenderTracking) === null || _featureFlags$feature2 === void 0 ? void 0 : _featureFlags$feature2[ACTION_SUBJECT.RENDERER];
         var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
           componentProps: this.props,
           action: ACTION.RE_RENDERED,
@@ -399,7 +399,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return jsx(Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
-        var _featureFlags$feature2;
+        var _featureFlags$feature3;
         if (onError) {
           onError(e);
         }
@@ -410,7 +410,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature3 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
           addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
         }, jsx(UnsupportedBlock, null));

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

@@ -0,0 +1,126 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
+function reducer(state, action) {
+  switch (action.type) {
+    case 'clear':
+      if (!!state.range || !!state.type) {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'clearSelection':
+      if (state.type === 'selection') {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'clearHover':
+      if (state.type === 'hover') {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'setSelection':
+      if (state.range !== action.range || state.type !== 'selection') {
+        return {
+          range: action.range,
+          type: 'selection'
+        };
+      }
+      return state;
+    case 'setHover':
+      if (state.range !== action.range || state.type !== 'hover') {
+        return {
+          range: action.range,
+          type: 'hover'
+        };
+      }
+      return state;
+  }
+  return state;
+}
+export var AnnotationRangeStateContext = /*#__PURE__*/createContext({
+  range: null,
+  type: null
+});
+export var AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
+  clearRange: function clearRange() {},
+  clearSelectionRange: function clearSelectionRange() {},
+  clearHoverRange: function clearHoverRange() {},
+  setRange: function setRange() {}
+});
+export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
+  var children = _ref.children,
+    allowCommentsOnMedia = _ref.allowCommentsOnMedia;
+  var _useReducer = useReducer(reducer, {
+      range: null,
+      type: null
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    range = _useReducer2$.range,
+    type = _useReducer2$.type,
+    dispatch = _useReducer2[1];
+  var clearRange = useCallback(function () {
+    return dispatch({
+      type: 'clear'
+    });
+  }, []);
+  var clearSelectionRange = useCallback(function () {
+    return dispatch({
+      type: 'clearSelection'
+    });
+  }, []);
+  var clearHoverRange = useCallback(function () {
+    return dispatch({
+      type: 'clearHover'
+    });
+  }, []);
+  var setRange = useCallback(function (range) {
+    return dispatch({
+      type: 'setSelection',
+      range: range
+    });
+  }, []);
+  var setHoverTarget = useCallback(function (target) {
+    var range = document.createRange();
+    range.setStartBefore(target);
+    range.setEndAfter(target);
+    dispatch({
+      type: 'setHover',
+      range: range
+    });
+  }, []);
+  var stateData = useMemo(function () {
+    return {
+      range: range,
+      type: type
+    };
+  }, [range, type]);
+  var dispatchData = useMemo(function () {
+    return {
+      clearRange: clearRange,
+      clearSelectionRange: clearSelectionRange,
+      clearHoverRange: clearHoverRange,
+      setRange: setRange,
+      setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined
+    };
+  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearHoverRange, setRange, setHoverTarget]);
+  return /*#__PURE__*/React.createElement(AnnotationRangeStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/React.createElement(AnnotationRangeDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+export var useAnnotationRangeState = function useAnnotationRangeState() {
+  return useContext(AnnotationRangeStateContext);
+};
+export var useAnnotationRangeDispatch = function useAnnotationRangeDispatch() {
+  return useContext(AnnotationRangeDispatchContext);
+};

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

@@ -9,13 +9,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
+import { AnnotationSharedCSSByState, mediaAnnotationStyles } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.rich-media-item {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus, mediaAnnotationStyles);
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/esm/ui/annotations/hooks/user-selection.js

@@ -1,13 +1,15 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useContext, useCallback, useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
+import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { AnnotationsDraftContext } from '../context';
 import { isRangeInsideOfRendererContainer } from './utils';
 export var useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    range = _useState2[0],
-    setRange = _useState2[1];
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
+    setRange = _useAnnotationRangeDi.setRange;
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
   var annotationDraftPosition = useContext(AnnotationsDraftContext);
   var hasAnnotationDraft = !!annotationDraftPosition;
   useEffect(function () {
@@ -27,11 +29,8 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
     document.addEventListener('selectionchange', onSelectionChange);
     return function () {
       document.removeEventListener('selectionchange', onSelectionChange);
-      setRange(null);
+      clearSelectionRange();
     };
-  }, [rendererDOM, hasAnnotationDraft]);
-  var clearRange = useCallback(function () {
-    setRange(null);
-  }, []);
-  return [range, clearRange];
+  }, [rendererDOM, hasAnnotationDraft, setRange, clearSelectionRange]);
+  return [type === 'selection' ? range : null, clearSelectionRange];
 };

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

@@ -0,0 +1 @@
+export { RangeValidator as HoverRangeValidator } from './range-validator';

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

@@ -0,0 +1,124 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState, useContext } from 'react';
+import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { updateWindowSelectionAroundDraft } from '../draft';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+export var Mounter = /*#__PURE__*/React.memo(function (props) {
+  var Component = props.component,
+    range = props.range,
+    isAnnotationAllowed = props.isAnnotationAllowed,
+    wrapperDOM = props.wrapperDOM,
+    onCloseProps = props.onClose,
+    clearAnnotationDraft = props.clearAnnotationDraft,
+    applyAnnotationDraftAt = props.applyAnnotationDraftAt,
+    documentPosition = props.documentPosition,
+    applyAnnotation = props.applyAnnotation,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    generateIndexMatch = props.generateIndexMatch;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    draftDocumentPosition = _useState2[0],
+    setDraftDocumentPosition = _useState2[1];
+  var actions = useContext(ActionsContext);
+  var onCreateCallback = useCallback(function (annotationId) {
+    if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
+      return false;
+    }
+    var annotation = {
+      annotationId: annotationId,
+      annotationType: AnnotationTypes.INLINE_COMMENT
+    };
+    if (createAnalyticsEvent) {
+      createAnalyticsEvent({
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+        attributes: {},
+        eventType: EVENT_TYPE.TRACK
+      }).fire(FabricChannel.editor);
+    }
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+  var createIndexCallback = useCallback(function () {
+    if (!documentPosition || !generateIndexMatch) {
+      return false;
+    }
+    var result = generateIndexMatch(documentPosition);
+    if (!result) {
+      return false;
+    }
+    return result;
+  }, [documentPosition, generateIndexMatch]);
+  var applyDraftModeCallback = useCallback(function () {
+    var keepNativeSelection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (!documentPosition || !isAnnotationAllowed) {
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {},
+          eventType: EVENT_TYPE.TRACK
+        }).fire(FabricChannel.editor);
+      }
+      return;
+    }
+    setDraftDocumentPosition(documentPosition);
+    applyAnnotationDraftAt(documentPosition);
+    if (createAnalyticsEvent) {
+      var uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
+      createAnalyticsEvent({
+        action: ACTION.OPENED,
+        actionSubject: ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          overlap: uniqueAnnotationsInRange.length
+        }
+      }).fire(FabricChannel.editor);
+    }
+    window.requestAnimationFrame(function () {
+      if (keepNativeSelection) {
+        updateWindowSelectionAroundDraft(documentPosition);
+      } else {
+        var sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+        }
+      }
+    });
+  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, actions, range]);
+  var removeDraftModeCallback = useCallback(function () {
+    clearAnnotationDraft();
+    setDraftDocumentPosition(null);
+    var sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, [clearAnnotationDraft]);
+  var onCloseCallback = useCallback(function () {
+    if (createAnalyticsEvent) {
+      createAnalyticsEvent({
+        action: ACTION.CLOSED,
+        actionSubject: ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {}
+      }).fire(FabricChannel.editor);
+    }
+    removeDraftModeCallback();
+    onCloseProps();
+  }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(Component, {
+    range: range,
+    wrapperDOM: wrapperDOM.current,
+    isAnnotationAllowed: isAnnotationAllowed,
+    onClose: onCloseCallback,
+    onCreate: onCreateCallback,
+    getAnnotationIndexMatch: createIndexCallback,
+    applyDraftMode: applyDraftModeCallback,
+    removeDraftMode: removeDraftModeCallback
+  });
+});

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

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { Mounter } from './mounter';
+import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+export var RangeValidator = function RangeValidator(props) {
+  var component = props.component,
+    rendererRef = props.rendererRef,
+    applyAnnotationDraftAt = props.applyAnnotationDraftAt,
+    clearAnnotationDraft = props.clearAnnotationDraft,
+    createAnalyticsEvent = props.createAnalyticsEvent;
+  var actions = useContext(ActionsContext);
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    clearHoverRange = _useAnnotationRangeDi.clearHoverRange;
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
+  if (!range || type !== 'hover') {
+    return null;
+  }
+  var documentPosition = actions.getPositionFromRange(range);
+  return /*#__PURE__*/React.createElement(Mounter, {
+    range: range,
+    wrapperDOM: rendererRef,
+    component: component,
+    onClose: clearHoverRange,
+    documentPosition: documentPosition,
+    isAnnotationAllowed: true,
+    applyAnnotation: actions.applyAnnotation.bind(actions),
+    applyAnnotationDraftAt: applyAnnotationDraftAt,
+    generateIndexMatch: actions.generateAnnotationIndexMatch.bind(actions),
+    clearAnnotationDraft: clearAnnotationDraft,
+    createAnalyticsEvent: createAnalyticsEvent
+  });
+};

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { AnnotationView } from './view';
-import { SelectionComponentWrapper } from './selection';
+import { AnnotationsContextWrapper } from './wrapper';
 import { ProvidersContext, InlineCommentsStateContext } from './context';
 import { useLoadAnnotations } from './hooks/use-load-annotations';
 import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
 var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
   var adfDocument = _ref.adfDocument;
   useLoadAnnotations({
@@ -14,6 +15,7 @@ var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
   return null;
 });
 export var AnnotationsWrapper = function AnnotationsWrapper(props) {
+  var _annotationProvider$i, _annotationProvider$i2;
   var children = props.children,
     annotationProvider = props.annotationProvider,
     rendererRef = props.rendererRef,
@@ -29,14 +31,16 @@ export var AnnotationsWrapper = function AnnotationsWrapper(props) {
     value: annotationProvider
   }, /*#__PURE__*/React.createElement(InlineCommentsStateContext.Provider, {
     value: inlineCommentAnnotationsState
-  }, /*#__PURE__*/React.createElement(SelectionComponentWrapper, {
+  }, /*#__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, {
     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/ui/annotations/selection/index.js

@@ -1 +1 @@
-export { Wrapper as SelectionComponentWrapper } from './wrapper';
+export { SelectionRangeValidator } from './range-validator';

package/dist/esm/ui/annotations/{selection/wrapper.js → wrapper.js}

@@ -1,25 +1,33 @@
 import React, { useCallback, useContext } from 'react';
-import { AnnotationsDraftContextWrapper, ProvidersContext } from '../context';
-import { SelectionRangeValidator } from './range-validator';
-export var Wrapper = function Wrapper(props) {
+import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
+import { HoverRangeValidator } from './hover';
+import { SelectionRangeValidator } from './selection';
+export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props) {
   var providers = useContext(ProvidersContext);
   var rendererRef = props.rendererRef,
     createAnalyticsEvent = props.createAnalyticsEvent,
     children = props.children;
   var inlineCommentProvider = providers && providers.inlineComment;
   var selectionComponent = inlineCommentProvider && inlineCommentProvider.selectionComponent;
+  var hoverComponent = inlineCommentProvider && inlineCommentProvider.hoverComponent;
   var render = useCallback(function (_ref) {
     var applyAnnotationDraftAt = _ref.applyAnnotationDraftAt,
       clearAnnotationDraft = _ref.clearAnnotationDraft;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(SelectionRangeValidator, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, !!hoverComponent && /*#__PURE__*/React.createElement(HoverRangeValidator, {
+      createAnalyticsEvent: createAnalyticsEvent,
+      rendererRef: rendererRef,
+      component: hoverComponent,
+      applyAnnotationDraftAt: applyAnnotationDraftAt,
+      clearAnnotationDraft: clearAnnotationDraft
+    }), !!selectionComponent && /*#__PURE__*/React.createElement(SelectionRangeValidator, {
       createAnalyticsEvent: createAnalyticsEvent,
       rendererRef: rendererRef,
       selectionComponent: selectionComponent,
       applyAnnotationDraftAt: applyAnnotationDraftAt,
       clearAnnotationDraft: clearAnnotationDraft
     }));
-  }, [selectionComponent, children, rendererRef, createAnalyticsEvent]);
-  if (!selectionComponent) {
+  }, [hoverComponent, selectionComponent, children, rendererRef, createAnalyticsEvent]);
+  if (!selectionComponent && !hoverComponent) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
   return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, null, render);

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

@@ -8,9 +8,9 @@ export declare function CodeWithIntl(props: MarkProps<{
 }> & WrappedComponentProps): JSX.Element;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     codeBidiWarningTooltipEnabled: boolean;
-} & import("../types").MarkMeta & WrappedComponentProps<"intl">>> & {
+} & import("../types").MarkMeta & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         codeBidiWarningTooltipEnabled: boolean;
-    } & import("../types").MarkMeta & WrappedComponentProps<"intl">>;
+    } & import("../types").MarkMeta & WrappedComponentProps>;
 };
 export default _default;

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

@@ -9,7 +9,7 @@ export interface Props {
     codeBidiWarningTooltipEnabled: boolean;
     className?: string;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/react/nodes/codeBlock/components/codeBlockCopyButton.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     content: string;
 };
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/react/nodes/codeBlock/components/codeBlockWrapButton.d.ts

@@ -1,10 +1,10 @@
 import type { Dispatch, SetStateAction } from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     setWrapLongLines: Dispatch<SetStateAction<boolean>>;
     wrapLongLines?: boolean;
 };
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

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

@@ -4,8 +4,8 @@ export interface Props {
     timestamp: string;
     parentIsIncompleteTask?: boolean;
 }
-export declare const DateComponent: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+export declare const DateComponent: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 declare function DateWithFormatContext(props: Props): JSX.Element;
 export default DateWithFormatContext;

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

@@ -29,7 +29,7 @@ import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
 import type { NodeComponentsProps } from '../../ui/Renderer/types';
 declare const WindowedCodeBlock: React.ComponentType<import("./codeBlock/codeBlock").Props> & Loadable.LoadableComponent;
-declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock/codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock/codeBlock").Props & import("react-intl-next").WrappedComponentProps>> & Loadable.LoadableComponent;
 declare const TaskList: React.ComponentType<import("./taskList").Props> & Loadable.LoadableComponent;
 declare const TaskItem: React.ComponentType<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent;
 declare const DecisionList: React.ComponentType<import("./decisionList").Props> & Loadable.LoadableComponent;
@@ -66,10 +66,10 @@ declare const BlockCard: React.ComponentType<{
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
-declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
-declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
+declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps>> & Loadable.LoadableComponent;
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
-declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps>> & Loadable.LoadableComponent;
 export declare const nodeToReact: {
     [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };

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

@@ -32,7 +32,7 @@ export type MediaInlineProps = {
     ssr?: MediaSSR;
 };
 export declare const RenderMediaInline: ({ rendererAppearance, clipboardAttrs, collection: collectionName, eventHandlers, identifier, }: RenderMediaInlineProps) => JSX.Element;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
-    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps & MediaInlineAttrs>> & {
+    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps & MediaInlineAttrs>;
 };
 export default _default;