@atlaskit/renderer 109.10.7 → 109.11.1

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

@@ -1,6 +1,5 @@
-import { useContext, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
-import { AnnotationsDraftContext } from '../context';
 import { isRangeInsideOfRendererContainer } from './utils';
 export const useUserSelectionRange = props => {
   const {
@@ -8,35 +7,40 @@ export const useUserSelectionRange = props => {
       current: rendererDOM
     }
   } = props;
+  const selectionTimeoutRef = useRef();
   const {
-    clearSelectionRange,
+    clearRange,
     setRange
   } = useAnnotationRangeDispatch();
   const {
     range,
+    draftRange,
     type
   } = useAnnotationRangeState();
-  const annotationDraftPosition = useContext(AnnotationsDraftContext);
-  const hasAnnotationDraft = !!annotationDraftPosition;
   useEffect(() => {
     if (!document || !rendererDOM) {
       return;
     }
     const onSelectionChange = event => {
-      const sel = document.getSelection();
-      if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1 || hasAnnotationDraft) {
-        return;
-      }
-      const _range = sel.getRangeAt(0);
-      if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
-        setRange(_range.cloneRange());
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
       }
+      selectionTimeoutRef.current = setTimeout(() => {
+        const sel = document.getSelection();
+        if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          return;
+        }
+        const _range = sel.getRangeAt(0);
+        if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          setRange(_range.cloneRange());
+        }
+      }, 250);
     };
     document.addEventListener('selectionchange', onSelectionChange);
     return () => {
       document.removeEventListener('selectionchange', onSelectionChange);
-      clearSelectionRange();
+      clearRange();
     };
-  }, [rendererDOM, hasAnnotationDraft, setRange, clearSelectionRange]);
-  return [type === 'selection' ? range : null, clearSelectionRange];
+  }, [rendererDOM, setRange, clearRange]);
+  return [type === 'selection' ? range : null, draftRange, clearRange];
 };

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

@@ -8,6 +8,7 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
     range,
+    draftRange,
     isAnnotationAllowed,
     wrapperDOM,
     onClose: onCloseProps,
@@ -21,7 +22,16 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const [draftDocumentPosition, setDraftDocumentPosition] = useState();
   const actions = useContext(ActionsContext);
   const onCreateCallback = useCallback(annotationId => {
-    if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
+    // We want to support creation on a documentPosition if the user is only using ranges
+    // but we want to prioritize draft positions if they are being used by consumers
+    const positionToAnnotate = draftDocumentPosition || documentPosition;
+    if (!positionToAnnotate || !applyAnnotation) {
+      return false;
+    }
+
+    // Evaluate position validity when the user commits the position to be annotated
+    const isCreateAllowedOnPosition = actions.isValidAnnotationPosition(positionToAnnotate);
+    if (!isCreateAllowedOnPosition) {
       return false;
     }
     const annotation = {
@@ -37,8 +47,8 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
   const createIndexCallback = useCallback(() => {
     if (!documentPosition || !generateIndexMatch) {
       return false;
@@ -65,7 +75,7 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     setDraftDocumentPosition(documentPosition);
     applyAnnotationDraftAt(documentPosition);
     if (createAnalyticsEvent) {
-      const uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
+      const uniqueAnnotationsInRange = range ? actions.getAnnotationsByPosition(range) : [];
       createAnalyticsEvent({
         action: ACTION.OPENED,
         actionSubject: ACTION_SUBJECT.ANNOTATION,
@@ -110,6 +120,7 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    draftRange: draftRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -11,21 +11,29 @@ export const SelectionRangeValidator = props => {
     createAnalyticsEvent
   } = props;
   const actions = useContext(ActionsContext);
-  const [range, clearRange] = useUserSelectionRange({
+  const [range, draftRange, clearRange] = useUserSelectionRange({
     rendererRef
   });
-  if (!range) {
+  if (!range && !draftRange) {
     return null;
   }
   const documentPosition = actions.getPositionFromRange(range);
-  const isAnnotationAllowed = documentPosition && actions.isValidAnnotationPosition(documentPosition);
+
+  // This property is drilled down to consumers when a new range is selected to test it's validity
+  let isAnnotationAllowedOnRange = false;
+  try {
+    isAnnotationAllowedOnRange = documentPosition && actions.isValidAnnotationPosition(documentPosition);
+  } catch {
+    isAnnotationAllowedOnRange = false;
+  }
   return /*#__PURE__*/React.createElement(SelectionInlineCommentMounter, {
     range: range,
+    draftRange: draftRange,
     wrapperDOM: rendererRef,
     component: selectionComponent,
     onClose: clearRange,
     documentPosition: documentPosition,
-    isAnnotationAllowed: isAnnotationAllowed,
+    isAnnotationAllowed: isAnnotationAllowedOnRange,
     applyAnnotation: actions.applyAnnotation.bind(actions),
     applyAnnotationDraftAt: applyAnnotationDraftAt,
     generateIndexMatch: actions.generateAnnotationIndexMatch.bind(actions),

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

@@ -2,8 +2,16 @@ import React, { useCallback, useContext } from 'react';
 import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
 import { HoverRangeValidator } from './hover';
 import { SelectionRangeValidator } from './selection';
+import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/AnnotationRangeContext';
 export const AnnotationsContextWrapper = props => {
   const providers = useContext(ProvidersContext);
+  const {
+    range
+  } = useAnnotationRangeState();
+  const {
+    setDraftRange,
+    clearDraftRange
+  } = useAnnotationRangeDispatch();
   const {
     rendererRef,
     createAnalyticsEvent,
@@ -12,6 +20,11 @@ export const AnnotationsContextWrapper = props => {
   const inlineCommentProvider = providers && providers.inlineComment;
   const selectionComponent = inlineCommentProvider && inlineCommentProvider.selectionComponent;
   const hoverComponent = inlineCommentProvider && inlineCommentProvider.hoverComponent;
+
+  // We want to set the draft to the range the user highlighted
+  const setRangeForDraft = useCallback(() => {
+    setDraftRange(range);
+  }, [range, setDraftRange]);
   const render = useCallback(({
     applyAnnotationDraftAt,
     clearAnnotationDraft
@@ -33,5 +46,8 @@ export const AnnotationsContextWrapper = props => {
   if (!selectionComponent && !hoverComponent) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
-  return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, null, render);
+  return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, {
+    setDraftRange: setRangeForDraft,
+    clearDraftRange: clearDraftRange
+  }, render);
 };

package/dist/esm/actions/index.js

@@ -134,6 +134,9 @@ var RendererActions = /*#__PURE__*/function () {
   }, {
     key: "isValidAnnotationRange",
     value: function isValidAnnotationRange(range) {
+      if (!range) {
+        return false;
+      }
       var pos = getPosFromRange(range);
       if (!pos || !this.doc) {
         return false;
@@ -151,7 +154,7 @@ var RendererActions = /*#__PURE__*/function () {
   }, {
     key: "getPositionFromRange",
     value: function getPositionFromRange(range) {
-      if (!this.doc || !this.schema) {
+      if (!this.doc || !this.schema || !range) {
         return false;
       }
       return getPosFromRange(range);

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

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

@@ -25,14 +25,24 @@ export var AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Compon
       position: null
     });
     _defineProperty(_assertThisInitialized(_this), "applyAnnotationDraftAt", function (nextPosition) {
-      var position = _this.state.position;
-      if (!position) {
-        _this.setState({
-          position: nextPosition
-        });
-      }
+      var setDraftRange = _this.props.setDraftRange;
+
+      // Set the draft range to preserve it downstream
+      setDraftRange();
+
+      // We need to support a new draft being made while one exists and overwrite it
+      // Set the document position for the newly created draft
+      _this.setState({
+        position: nextPosition
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "clearAnnotationDraft", function () {
+      var clearDraftRange = _this.props.clearDraftRange;
+
+      // Clear the draft range
+      clearDraftRange();
+
+      // Clear the draft position in the document
       _this.setState({
         position: null
       });

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

@@ -1,4 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
 function reducer(state, action) {
   switch (action.type) {
@@ -6,40 +9,58 @@ function reducer(state, action) {
       if (!!state.range || !!state.type) {
         return {
           range: null,
+          draftRange: null,
           type: null
         };
       }
       return state;
     case 'clearSelection':
       if (state.type === 'selection') {
-        return {
+        return _objectSpread(_objectSpread({}, state), {}, {
           range: null,
           type: null
-        };
+        });
+      }
+      return state;
+    case 'clearDraftSelection':
+      if (state.type === 'selection') {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          draftRange: null
+        });
       }
       return state;
     case 'clearHover':
       if (state.type === 'hover') {
         return {
           range: null,
+          draftRange: null,
           type: null
         };
       }
       return state;
     case 'setSelection':
       if (state.range !== action.range || state.type !== 'selection') {
-        return {
+        return _objectSpread(_objectSpread({}, state), {}, {
           range: action.range,
           type: 'selection'
+        });
+      }
+      return state;
+    case 'setDraftSelection':
+      if (state.draftRange !== action.draftRange || state.type !== 'selection') {
+        return {
+          range: null,
+          draftRange: action.draftRange,
+          type: null
         };
       }
       return state;
     case 'setHover':
       if (state.range !== action.range || state.type !== 'hover') {
-        return {
+        return _objectSpread(_objectSpread({}, state), {}, {
           range: action.range,
           type: 'hover'
-        };
+        });
       }
       return state;
   }
@@ -47,24 +68,29 @@ function reducer(state, action) {
 }
 export var AnnotationRangeStateContext = /*#__PURE__*/createContext({
   range: null,
+  draftRange: null,
   type: null
 });
 export var AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
   clearRange: function clearRange() {},
   clearSelectionRange: function clearSelectionRange() {},
+  clearDraftRange: function clearDraftRange() {},
   clearHoverRange: function clearHoverRange() {},
-  setRange: function setRange() {}
+  setRange: function setRange() {},
+  setDraftRange: function setDraftRange() {}
 });
 export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
   var children = _ref.children,
     allowCommentsOnMedia = _ref.allowCommentsOnMedia;
   var _useReducer = useReducer(reducer, {
       range: null,
+      draftRange: null,
       type: null
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     _useReducer2$ = _useReducer2[0],
     range = _useReducer2$.range,
+    draftRange = _useReducer2$.draftRange,
     type = _useReducer2$.type,
     dispatch = _useReducer2[1];
   var clearRange = useCallback(function () {
@@ -77,6 +103,11 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       type: 'clearSelection'
     });
   }, []);
+  var clearDraftRange = useCallback(function () {
+    return dispatch({
+      type: 'clearDraftSelection'
+    });
+  }, []);
   var clearHoverRange = useCallback(function () {
     return dispatch({
       type: 'clearHover'
@@ -88,6 +119,12 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       range: range
     });
   }, []);
+  var setDraftRange = useCallback(function (range) {
+    dispatch({
+      type: 'setDraftSelection',
+      draftRange: range
+    });
+  }, []);
   var setHoverTarget = useCallback(function (target) {
     var range = document.createRange();
     range.setStartBefore(target);
@@ -100,18 +137,21 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
   var stateData = useMemo(function () {
     return {
       range: range,
+      draftRange: draftRange,
       type: type
     };
-  }, [range, type]);
+  }, [range, draftRange, type]);
   var dispatchData = useMemo(function () {
     return {
       clearRange: clearRange,
       clearSelectionRange: clearSelectionRange,
+      clearDraftRange: clearDraftRange,
       clearHoverRange: clearHoverRange,
       setRange: setRange,
+      setDraftRange: setDraftRange,
       setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined
     };
-  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearHoverRange, setRange, setHoverTarget]);
+  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearDraftRange, clearHoverRange, setRange, setDraftRange, setHoverTarget]);
   return /*#__PURE__*/React.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/React.createElement(AnnotationRangeDispatchContext.Provider, {

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

@@ -1,36 +1,40 @@
-import { useContext, useEffect } from 'react';
+import { useEffect, useRef } 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 selectionTimeoutRef = useRef();
   var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
-    clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
+    clearRange = _useAnnotationRangeDi.clearRange,
     setRange = _useAnnotationRangeDi.setRange;
   var _useAnnotationRangeSt = useAnnotationRangeState(),
     range = _useAnnotationRangeSt.range,
+    draftRange = _useAnnotationRangeSt.draftRange,
     type = _useAnnotationRangeSt.type;
-  var annotationDraftPosition = useContext(AnnotationsDraftContext);
-  var hasAnnotationDraft = !!annotationDraftPosition;
   useEffect(function () {
     if (!document || !rendererDOM) {
       return;
     }
     var onSelectionChange = function onSelectionChange(event) {
-      var sel = document.getSelection();
-      if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1 || hasAnnotationDraft) {
-        return;
-      }
-      var _range = sel.getRangeAt(0);
-      if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
-        setRange(_range.cloneRange());
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
       }
+      selectionTimeoutRef.current = setTimeout(function () {
+        var sel = document.getSelection();
+        if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          return;
+        }
+        var _range = sel.getRangeAt(0);
+        if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          setRange(_range.cloneRange());
+        }
+      }, 250);
     };
     document.addEventListener('selectionchange', onSelectionChange);
     return function () {
       document.removeEventListener('selectionchange', onSelectionChange);
-      clearSelectionRange();
+      clearRange();
     };
-  }, [rendererDOM, hasAnnotationDraft, setRange, clearSelectionRange]);
-  return [type === 'selection' ? range : null, clearSelectionRange];
+  }, [rendererDOM, setRange, clearRange]);
+  return [type === 'selection' ? range : null, draftRange, clearRange];
 };

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

@@ -8,6 +8,7 @@ import { RendererContext as ActionsContext } from '../../RendererActionsContext'
 export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    draftRange = props.draftRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -23,7 +24,16 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     setDraftDocumentPosition = _useState2[1];
   var actions = useContext(ActionsContext);
   var onCreateCallback = useCallback(function (annotationId) {
-    if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
+    // We want to support creation on a documentPosition if the user is only using ranges
+    // but we want to prioritize draft positions if they are being used by consumers
+    var positionToAnnotate = draftDocumentPosition || documentPosition;
+    if (!positionToAnnotate || !applyAnnotation) {
+      return false;
+    }
+
+    // Evaluate position validity when the user commits the position to be annotated
+    var isCreateAllowedOnPosition = actions.isValidAnnotationPosition(positionToAnnotate);
+    if (!isCreateAllowedOnPosition) {
       return false;
     }
     var annotation = {
@@ -39,8 +49,8 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
         eventType: EVENT_TYPE.TRACK
       }).fire(FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
   var createIndexCallback = useCallback(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;
@@ -68,7 +78,7 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     setDraftDocumentPosition(documentPosition);
     applyAnnotationDraftAt(documentPosition);
     if (createAnalyticsEvent) {
-      var uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
+      var uniqueAnnotationsInRange = range ? actions.getAnnotationsByPosition(range) : [];
       createAnalyticsEvent({
         action: ACTION.OPENED,
         actionSubject: ACTION_SUBJECT.ANNOTATION,
@@ -113,6 +123,7 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    draftRange: draftRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -13,21 +13,30 @@ export var SelectionRangeValidator = function SelectionRangeValidator(props) {
   var _useUserSelectionRang = useUserSelectionRange({
       rendererRef: rendererRef
     }),
-    _useUserSelectionRang2 = _slicedToArray(_useUserSelectionRang, 2),
+    _useUserSelectionRang2 = _slicedToArray(_useUserSelectionRang, 3),
     range = _useUserSelectionRang2[0],
-    clearRange = _useUserSelectionRang2[1];
-  if (!range) {
+    draftRange = _useUserSelectionRang2[1],
+    clearRange = _useUserSelectionRang2[2];
+  if (!range && !draftRange) {
     return null;
   }
   var documentPosition = actions.getPositionFromRange(range);
-  var isAnnotationAllowed = documentPosition && actions.isValidAnnotationPosition(documentPosition);
+
+  // This property is drilled down to consumers when a new range is selected to test it's validity
+  var isAnnotationAllowedOnRange = false;
+  try {
+    isAnnotationAllowedOnRange = documentPosition && actions.isValidAnnotationPosition(documentPosition);
+  } catch (_unused) {
+    isAnnotationAllowedOnRange = false;
+  }
   return /*#__PURE__*/React.createElement(SelectionInlineCommentMounter, {
     range: range,
+    draftRange: draftRange,
     wrapperDOM: rendererRef,
     component: selectionComponent,
     onClose: clearRange,
     documentPosition: documentPosition,
-    isAnnotationAllowed: isAnnotationAllowed,
+    isAnnotationAllowed: isAnnotationAllowedOnRange,
     applyAnnotation: actions.applyAnnotation.bind(actions),
     applyAnnotationDraftAt: applyAnnotationDraftAt,
     generateIndexMatch: actions.generateAnnotationIndexMatch.bind(actions),

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

@@ -2,14 +2,25 @@ import React, { useCallback, useContext } from 'react';
 import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
 import { HoverRangeValidator } from './hover';
 import { SelectionRangeValidator } from './selection';
+import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/AnnotationRangeContext';
 export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props) {
   var providers = useContext(ProvidersContext);
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    range = _useAnnotationRangeSt.range;
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    setDraftRange = _useAnnotationRangeDi.setDraftRange,
+    clearDraftRange = _useAnnotationRangeDi.clearDraftRange;
   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;
+
+  // We want to set the draft to the range the user highlighted
+  var setRangeForDraft = useCallback(function () {
+    setDraftRange(range);
+  }, [range, setDraftRange]);
   var render = useCallback(function (_ref) {
     var applyAnnotationDraftAt = _ref.applyAnnotationDraftAt,
       clearAnnotationDraft = _ref.clearAnnotationDraft;
@@ -30,5 +41,8 @@ export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props)
   if (!selectionComponent && !hoverComponent) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
-  return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, null, render);
+  return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, {
+    setDraftRange: setRangeForDraft,
+    clearDraftRange: clearDraftRange
+  }, render);
 };

package/dist/types/actions/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnnotationActionResult, AnnotationByMatches } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { Node, Schema, Mark } from '@atlaskit/editor-prosemirror/model';
-import { Step, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { AnalyticsEventPayload } from '../analytics/events';
+import type { Node, Schema, Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Step } from '@atlaskit/editor-prosemirror/transform';
+import { RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import type { AnalyticsEventPayload } from '../analytics/events';
 type ActionResult = {
     step: Step;
     doc: JSONDocNode;
@@ -50,9 +51,9 @@ export default class RendererActions implements RendererActionsOptions, Annotati
         doc: JSONDocNode;
     };
     annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
-    isValidAnnotationRange(range: Range): boolean;
+    isValidAnnotationRange(range: Range | null): boolean;
     isValidAnnotationPosition(pos: Position): boolean;
-    getPositionFromRange(range: Range): Position | false;
+    getPositionFromRange(range: Range | null): Position | false;
     getAnnotationMarks(): Mark[];
     getAnnotationsByPosition(range: Range): string[];
     applyAnnotation(pos: Position, annotation: Annotation): AnnotationActionResult;

package/dist/types/ui/annotations/context.d.ts

@@ -8,6 +8,8 @@ export type AnnotationsDraftContextWrapperChildrenProps = {
 };
 export type RenderCallbackType = (props: React.PropsWithChildren<AnnotationsDraftContextWrapperChildrenProps>) => React.ReactNode;
 type Props = {
+    setDraftRange: () => void;
+    clearDraftRange: () => void;
     children: RenderCallbackType;
 };
 type State = {

package/dist/types/ui/annotations/contexts/AnnotationRangeContext.d.ts

@@ -2,13 +2,16 @@ import type { ReactNode } from 'react';
 import React from 'react';
 interface AnnotationRangeStateContext {
     range: Range | null;
+    draftRange: Range | null;
     type: 'selection' | 'hover' | null;
 }
 interface AnnotationRangeDispatchContext {
     clearRange: () => void;
     clearSelectionRange: () => void;
+    clearDraftRange: () => void;
     clearHoverRange: () => void;
     setRange: (range: Range) => void;
+    setDraftRange: (draftRange: Range | null) => void;
     setHoverTarget?: (target: HTMLElement) => void;
 }
 export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;

package/dist/types/ui/annotations/hooks/user-selection.d.ts

@@ -2,5 +2,5 @@
 type Props = {
     rendererRef: React.RefObject<HTMLDivElement>;
 };
-export declare const useUserSelectionRange: (props: Props) => [Range | null, () => void];
+export declare const useUserSelectionRange: (props: Props) => [Range | null, Range | null, () => void];
 export {};