@atlaskit/renderer 109.8.4 → 109.10.0

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

@@ -56,7 +56,8 @@ const MediaSingle = props => {
     width: widthAttr,
     widthType,
     allowCaptions = false,
-    isInsideOfInlineExtension = false
+    isInsideOfInlineExtension = false,
+    dataAttributes
   } = props;
   const [externalImageDimensions, setExternalImageDimensions] = React.useState({
     width: 0,
@@ -165,7 +166,8 @@ const MediaSingle = props => {
         widthType
       },
       fullWidthMode: isFullWidth,
-      isInsideOfInlineExtension: isInsideOfInlineExtension
+      isInsideOfInlineExtension: isInsideOfInlineExtension,
+      dataAttributes: dataAttributes
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return jsx(WidthConsumer, null, ({

package/dist/es2019/ui/MediaCard.js

@@ -5,6 +5,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 const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -199,7 +200,8 @@ export class MediaCardView extends Component {
       featureFlags,
       shouldEnableDownloadButton,
       ssr,
-      mediaClient
+      mediaClient,
+      setHoverTarget
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -228,13 +230,21 @@ export class MediaCardView extends Component {
       collectionName: collection,
       occurrenceKey
     };
-    return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
+    return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
       id,
       alt,
       collection,
       contextIdentifierProvider,
       originalDimensions,
       fileState
+    }), {
+      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,
@@ -292,8 +302,12 @@ export const getClipboardAttrs = ({
 };
 export const MediaCardInternal = props => {
   const mediaClient = useContext(MediaClientContext);
+  const {
+    setHoverTarget
+  } = useAnnotationRangeDispatch();
   return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
-    mediaClient: mediaClient
+    mediaClient: mediaClient,
+    setHoverTarget: setHoverTarget
   }));
 };
 export const MediaCard = withImageLoader(MediaCardInternal);

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

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.8.4";
+const packageVersion = "109.10.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -330,7 +330,7 @@ export class Renderer extends PureComponent {
       }
     };
     try {
-      var _featureFlags$feature, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+      var _featureFlags$feature, _featureFlags$feature2, _featureFlags$feature3;
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
@@ -341,7 +341,7 @@ export class Renderer extends PureComponent {
         onComplete(stat);
       }
       const rendererOutput = jsx(RendererContextProvider, {
-        value: this.featureFlags(this.props.featureFlags)
+        value: featureFlags
       }, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
       }, jsx(AnalyticsContext.Provider, {
@@ -374,7 +374,7 @@ export class Renderer extends PureComponent {
         height: maxHeight,
         fadeHeight: fadeOutHeight
       }, rendererOutput) : rendererOutput;
-      const rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[ACTION_SUBJECT.RENDERER];
+      const rendererRenderTracking = featureFlags === null || featureFlags === void 0 ? void 0 : (_featureFlags$feature2 = featureFlags.featureFlags) === null || _featureFlags$feature2 === void 0 ? void 0 : (_featureFlags$feature3 = _featureFlags$feature2.rendererRenderTracking) === null || _featureFlags$feature3 === void 0 ? void 0 : _featureFlags$feature3[ACTION_SUBJECT.RENDERER];
       const reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
         componentProps: this.props,
         action: ACTION.RE_RENDERED,
@@ -384,7 +384,7 @@ export class Renderer extends PureComponent {
       });
       return jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
-      var _featureFlags$feature2;
+      var _featureFlags$feature4;
       if (onError) {
         onError(e);
       }
@@ -395,7 +395,7 @@ export class Renderer extends PureComponent {
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
-        useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+        useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
         addTelepointer: this.props.addTelepointer,
         onClick: handleWrapperOnClick
       }, jsx(UnsupportedBlock, null));

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

@@ -0,0 +1,112 @@
+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 const AnnotationRangeStateContext = /*#__PURE__*/createContext({
+  range: null,
+  type: null
+});
+export const AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
+  clearRange: () => {},
+  clearSelectionRange: () => {},
+  clearHoverRange: () => {},
+  setRange: () => {}
+});
+export const AnnotationRangeProvider = ({
+  children,
+  allowCommentsOnMedia
+}) => {
+  const [{
+    range,
+    type
+  }, dispatch] = useReducer(reducer, {
+    range: null,
+    type: null
+  });
+  const clearRange = useCallback(() => dispatch({
+    type: 'clear'
+  }), []);
+  const clearSelectionRange = useCallback(() => dispatch({
+    type: 'clearSelection'
+  }), []);
+  const clearHoverRange = useCallback(() => dispatch({
+    type: 'clearHover'
+  }), []);
+  const setRange = useCallback(range => dispatch({
+    type: 'setSelection',
+    range
+  }), []);
+  const setHoverTarget = useCallback(target => {
+    const range = document.createRange();
+    range.setStartBefore(target);
+    range.setEndAfter(target);
+    dispatch({
+      type: 'setHover',
+      range
+    });
+  }, []);
+  const stateData = useMemo(() => ({
+    range,
+    type
+  }), [range, type]);
+  const dispatchData = useMemo(() => ({
+    clearRange,
+    clearSelectionRange,
+    clearHoverRange,
+    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 const useAnnotationRangeState = () => {
+  return useContext(AnnotationRangeStateContext);
+};
+export const useAnnotationRangeDispatch = () => {
+  return useContext(AnnotationRangeDispatchContext);
+};

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 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';
 
@@ -20,6 +20,10 @@ const markStyles = () => css`
     &[data-has-focus='true'] {
       ${AnnotationSharedCSSByState().focus};
     }
+
+    & div.rich-media-item {
+      ${mediaAnnotationStyles};
+    }
   }
 `;
 export const MarkComponent = ({

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

@@ -1,4 +1,5 @@
-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 const useUserSelectionRange = props => {
@@ -7,7 +8,14 @@ export const useUserSelectionRange = props => {
       current: rendererDOM
     }
   } = props;
-  const [range, setRange] = useState(null);
+  const {
+    clearSelectionRange,
+    setRange
+  } = useAnnotationRangeDispatch();
+  const {
+    range,
+    type
+  } = useAnnotationRangeState();
   const annotationDraftPosition = useContext(AnnotationsDraftContext);
   const hasAnnotationDraft = !!annotationDraftPosition;
   useEffect(() => {
@@ -27,10 +35,8 @@ export const useUserSelectionRange = props => {
     document.addEventListener('selectionchange', onSelectionChange);
     return () => {
       document.removeEventListener('selectionchange', onSelectionChange);
+      clearSelectionRange();
     };
-  }, [rendererDOM, range, hasAnnotationDraft]);
-  const clearRange = useCallback(() => {
-    setRange(null);
-  }, []);
-  return [range, clearRange];
+  }, [rendererDOM, hasAnnotationDraft, setRange, clearSelectionRange]);
+  return [type === 'selection' ? range : null, clearSelectionRange];
 };

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

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

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

@@ -0,0 +1,121 @@
+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 const Mounter = /*#__PURE__*/React.memo(props => {
+  const {
+    component: Component,
+    range,
+    isAnnotationAllowed,
+    wrapperDOM,
+    onClose: onCloseProps,
+    clearAnnotationDraft,
+    applyAnnotationDraftAt,
+    documentPosition,
+    applyAnnotation,
+    createAnalyticsEvent,
+    generateIndexMatch
+  } = props;
+  const [draftDocumentPosition, setDraftDocumentPosition] = useState();
+  const actions = useContext(ActionsContext);
+  const onCreateCallback = useCallback(annotationId => {
+    if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
+      return false;
+    }
+    const annotation = {
+      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]);
+  const createIndexCallback = useCallback(() => {
+    if (!documentPosition || !generateIndexMatch) {
+      return false;
+    }
+    const result = generateIndexMatch(documentPosition);
+    if (!result) {
+      return false;
+    }
+    return result;
+  }, [documentPosition, generateIndexMatch]);
+  const applyDraftModeCallback = useCallback((keepNativeSelection = 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) {
+      const 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(() => {
+      if (keepNativeSelection) {
+        updateWindowSelectionAroundDraft(documentPosition);
+      } else {
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+        }
+      }
+    });
+  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, actions, range]);
+  const removeDraftModeCallback = useCallback(() => {
+    clearAnnotationDraft();
+    setDraftDocumentPosition(null);
+    const sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, [clearAnnotationDraft]);
+  const onCloseCallback = useCallback(() => {
+    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/es2019/ui/annotations/hover/range-validator.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import { Mounter } from './mounter';
+import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+export const RangeValidator = props => {
+  const {
+    component,
+    rendererRef,
+    applyAnnotationDraftAt,
+    clearAnnotationDraft,
+    createAnalyticsEvent
+  } = props;
+  const actions = useContext(ActionsContext);
+  const {
+    clearHoverRange
+  } = useAnnotationRangeDispatch();
+  const {
+    range,
+    type
+  } = useAnnotationRangeState();
+  if (!range || type !== 'hover') {
+    return null;
+  }
+  const 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/es2019/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';
 const LoadAnnotations = /*#__PURE__*/React.memo(({
   adfDocument
 }) => {
@@ -15,6 +16,7 @@ const LoadAnnotations = /*#__PURE__*/React.memo(({
   return null;
 });
 export const AnnotationsWrapper = props => {
+  var _annotationProvider$i, _annotationProvider$i2;
   const {
     children,
     annotationProvider,
@@ -33,14 +35,16 @@ export const 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 ? 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/es2019/ui/annotations/selection/index.js

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

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

@@ -1,7 +1,8 @@
 import React, { useCallback, useContext } from 'react';
-import { AnnotationsDraftContextWrapper, ProvidersContext } from '../context';
-import { SelectionRangeValidator } from './range-validator';
-export const Wrapper = props => {
+import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
+import { HoverRangeValidator } from './hover';
+import { SelectionRangeValidator } from './selection';
+export const AnnotationsContextWrapper = props => {
   const providers = useContext(ProvidersContext);
   const {
     rendererRef,
@@ -10,19 +11,26 @@ export const Wrapper = props => {
   } = props;
   const inlineCommentProvider = providers && providers.inlineComment;
   const selectionComponent = inlineCommentProvider && inlineCommentProvider.selectionComponent;
+  const hoverComponent = inlineCommentProvider && inlineCommentProvider.hoverComponent;
   const render = useCallback(({
     applyAnnotationDraftAt,
     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/esm/react/nodes/mediaSingle/index.js

@@ -59,7 +59,8 @@ var MediaSingle = function MediaSingle(props) {
     _props$allowCaptions = props.allowCaptions,
     allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
     _props$isInsideOfInli = props.isInsideOfInlineExtension,
-    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli;
+    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli,
+    dataAttributes = props.dataAttributes;
   var _React$useState = React.useState({
       width: 0,
       height: 0
@@ -170,7 +171,8 @@ var MediaSingle = function MediaSingle(props) {
         widthType: widthType
       },
       fullWidthMode: isFullWidth,
-      isInsideOfInlineExtension: isInsideOfInlineExtension
+      isInsideOfInlineExtension: isInsideOfInlineExtension,
+      dataAttributes: dataAttributes
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return jsx(WidthConsumer, null, function (_ref3) {

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);