@atlaskit/renderer 109.8.4 → 109.10.0

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.8.4";
+var packageVersion = "109.10.0";
 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,10 +29,8 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
     document.addEventListener('selectionchange', onSelectionChange);
     return function () {
       document.removeEventListener('selectionchange', onSelectionChange);
+      clearSelectionRange();
     };
-  }, [rendererDOM, range, 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/nodes/mediaSingle/index.d.ts

@@ -17,6 +17,7 @@ export interface Props {
     featureFlags?: MediaFeatureFlags;
     allowCaptions?: boolean;
     isInsideOfInlineExtension?: boolean;
+    dataAttributes?: Record<string, any>;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {

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

@@ -48,6 +48,7 @@ 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/AnnotationRangeContext.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface AnnotationRangeStateContext {
+    range: Range | null;
+    type: 'selection' | 'hover' | null;
+}
+interface AnnotationRangeDispatchContext {
+    clearRange: () => void;
+    clearSelectionRange: () => void;
+    clearHoverRange: () => void;
+    setRange: (range: Range) => void;
+    setHoverTarget?: (target: HTMLElement) => void;
+}
+export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;
+export declare const AnnotationRangeDispatchContext: React.Context<AnnotationRangeDispatchContext>;
+export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, }: {
+    children?: ReactNode;
+    allowCommentsOnMedia?: boolean | undefined;
+}) => JSX.Element;
+export declare const useAnnotationRangeState: () => AnnotationRangeStateContext;
+export declare const useAnnotationRangeDispatch: () => AnnotationRangeDispatchContext;
+export {};

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { AnnotationByMatches, InlineCommentSelectionComponentProps } from '@atlaskit/editor-common/types';
+import type { ApplyAnnotation } from '../../../actions/index';
+import type { Position } from '../types';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+type Props = {
+    range: Range;
+    component: React.ComponentType<InlineCommentSelectionComponentProps>;
+    wrapperDOM: React.RefObject<HTMLDivElement>;
+    documentPosition: Position | false;
+    isAnnotationAllowed: boolean;
+    onClose: () => void;
+    applyAnnotation: ApplyAnnotation;
+    applyAnnotationDraftAt: (position: Position) => void;
+    clearAnnotationDraft: () => void;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    generateIndexMatch?: (pos: Position) => false | AnnotationByMatches;
+};
+export declare const Mounter: React.MemoExoticComponent<(props: Props) => JSX.Element>;
+export {};

package/dist/types/ui/annotations/hover/range-validator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Position } from '../types';
+import type { InlineCommentHoverComponentProps } from '@atlaskit/editor-common/types';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+type Props = {
+    component: React.ComponentType<InlineCommentHoverComponentProps>;
+    rendererRef: React.RefObject<HTMLDivElement>;
+    applyAnnotationDraftAt: (position: Position) => void;
+    clearAnnotationDraft: () => void;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+};
+export declare const RangeValidator: (props: Props) => JSX.Element | null;
+export {};

package/dist/types/ui/annotations/selection/index.d.ts

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

package/dist/{types-ts4.5/ui/annotations/selection → types/ui/annotations}/wrapper.d.ts

@@ -4,5 +4,5 @@ type Props = {
     rendererRef: React.RefObject<HTMLDivElement>;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };
-export declare const Wrapper: (props: React.PropsWithChildren<Props>) => JSX.Element;
+export declare const AnnotationsContextWrapper: (props: React.PropsWithChildren<Props>) => JSX.Element;
 export {};

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

@@ -17,6 +17,7 @@ export interface Props {
     featureFlags?: MediaFeatureFlags;
     allowCaptions?: boolean;
     isInsideOfInlineExtension?: boolean;
+    dataAttributes?: Record<string, any>;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {

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

@@ -48,6 +48,7 @@ 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/AnnotationRangeContext.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface AnnotationRangeStateContext {
+    range: Range | null;
+    type: 'selection' | 'hover' | null;
+}
+interface AnnotationRangeDispatchContext {
+    clearRange: () => void;
+    clearSelectionRange: () => void;
+    clearHoverRange: () => void;
+    setRange: (range: Range) => void;
+    setHoverTarget?: (target: HTMLElement) => void;
+}
+export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;
+export declare const AnnotationRangeDispatchContext: React.Context<AnnotationRangeDispatchContext>;
+export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, }: {
+    children?: ReactNode;
+    allowCommentsOnMedia?: boolean | undefined;
+}) => JSX.Element;
+export declare const useAnnotationRangeState: () => AnnotationRangeStateContext;
+export declare const useAnnotationRangeDispatch: () => AnnotationRangeDispatchContext;
+export {};

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { AnnotationByMatches, InlineCommentSelectionComponentProps } from '@atlaskit/editor-common/types';
+import type { ApplyAnnotation } from '../../../actions/index';
+import type { Position } from '../types';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+type Props = {
+    range: Range;
+    component: React.ComponentType<InlineCommentSelectionComponentProps>;
+    wrapperDOM: React.RefObject<HTMLDivElement>;
+    documentPosition: Position | false;
+    isAnnotationAllowed: boolean;
+    onClose: () => void;
+    applyAnnotation: ApplyAnnotation;
+    applyAnnotationDraftAt: (position: Position) => void;
+    clearAnnotationDraft: () => void;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    generateIndexMatch?: (pos: Position) => false | AnnotationByMatches;
+};
+export declare const Mounter: React.MemoExoticComponent<(props: Props) => JSX.Element>;
+export {};