@atlaskit/renderer 109.10.7 → 109.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.11.1
+
+### Patch Changes
+
+- [#85141](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85141) [`eb4d99e5be1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eb4d99e5be1e) - Adding a try-catch around selection validation to prevent errors being thrown by nested renderers
+
+## 109.11.0
+
+### Minor Changes
+
+- [#84616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84616) [`57b0c76cdce6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57b0c76cdce6) - Adding support for draft ranges in selection component for renderer annotation provider
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.10.7
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -141,6 +141,9 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
   }, {
     key: "isValidAnnotationRange",
     value: function isValidAnnotationRange(range) {
+      if (!range) {
+        return false;
+      }
       var pos = (0, _steps.getPosFromRange)(range);
       if (!pos || !this.doc) {
         return false;
@@ -158,7 +161,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getPositionFromRange",
     value: function getPositionFromRange(range) {
-      if (!this.doc || !this.schema) {
+      if (!this.doc || !this.schema || !range) {
         return false;
       }
       return (0, _steps.getPosFromRange)(range);

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.10.7";
+var packageVersion = "109.11.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -35,14 +35,24 @@ var AnnotationsDraftContextWrapper = exports.AnnotationsDraftContextWrapper = /*
       position: null
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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/cjs/ui/annotations/contexts/AnnotationRangeContext.js

@@ -7,49 +7,70 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAnnotationRangeState = exports.useAnnotationRangeDispatch = exports.AnnotationRangeStateContext = exports.AnnotationRangeProvider = exports.AnnotationRangeDispatchContext = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function reducer(state, action) {
   switch (action.type) {
     case 'clear':
       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;
   }
@@ -57,24 +78,29 @@ function reducer(state, action) {
 }
 var AnnotationRangeStateContext = exports.AnnotationRangeStateContext = /*#__PURE__*/(0, _react.createContext)({
   range: null,
+  draftRange: null,
   type: null
 });
 var AnnotationRangeDispatchContext = exports.AnnotationRangeDispatchContext = /*#__PURE__*/(0, _react.createContext)({
   clearRange: function clearRange() {},
   clearSelectionRange: function clearSelectionRange() {},
+  clearDraftRange: function clearDraftRange() {},
   clearHoverRange: function clearHoverRange() {},
-  setRange: function setRange() {}
+  setRange: function setRange() {},
+  setDraftRange: function setDraftRange() {}
 });
 var AnnotationRangeProvider = exports.AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
   var children = _ref.children,
     allowCommentsOnMedia = _ref.allowCommentsOnMedia;
   var _useReducer = (0, _react.useReducer)(reducer, {
       range: null,
+      draftRange: null,
       type: null
     }),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     _useReducer2$ = _useReducer2[0],
     range = _useReducer2$.range,
+    draftRange = _useReducer2$.draftRange,
     type = _useReducer2$.type,
     dispatch = _useReducer2[1];
   var clearRange = (0, _react.useCallback)(function () {
@@ -87,6 +113,11 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       type: 'clearSelection'
     });
   }, []);
+  var clearDraftRange = (0, _react.useCallback)(function () {
+    return dispatch({
+      type: 'clearDraftSelection'
+    });
+  }, []);
   var clearHoverRange = (0, _react.useCallback)(function () {
     return dispatch({
       type: 'clearHover'
@@ -98,6 +129,12 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       range: range
     });
   }, []);
+  var setDraftRange = (0, _react.useCallback)(function (range) {
+    dispatch({
+      type: 'setDraftSelection',
+      draftRange: range
+    });
+  }, []);
   var setHoverTarget = (0, _react.useCallback)(function (target) {
     var range = document.createRange();
     range.setStartBefore(target);
@@ -110,18 +147,21 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
   var stateData = (0, _react.useMemo)(function () {
     return {
       range: range,
+      draftRange: draftRange,
       type: type
     };
-  }, [range, type]);
+  }, [range, draftRange, type]);
   var dispatchData = (0, _react.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.default.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/_react.default.createElement(AnnotationRangeDispatchContext.Provider, {

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

@@ -6,37 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUserSelectionRange = void 0;
 var _react = require("react");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
-var _context = require("../context");
 var _utils = require("./utils");
 var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
+  var selectionTimeoutRef = (0, _react.useRef)();
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
-    clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
+    clearRange = _useAnnotationRangeDi.clearRange,
     setRange = _useAnnotationRangeDi.setRange;
   var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
     range = _useAnnotationRangeSt.range,
+    draftRange = _useAnnotationRangeSt.draftRange,
     type = _useAnnotationRangeSt.type;
-  var annotationDraftPosition = (0, _react.useContext)(_context.AnnotationsDraftContext);
-  var hasAnnotationDraft = !!annotationDraftPosition;
   (0, _react.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 && (0, _utils.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 && (0, _utils.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/cjs/ui/annotations/selection/mounter.js

@@ -18,6 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#__PURE__*/_react.default.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    draftRange = props.draftRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -33,7 +34,16 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     setDraftDocumentPosition = _useState2[1];
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var onCreateCallback = (0, _react.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 = {
@@ -49,8 +59,8 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
         eventType: _analytics.EVENT_TYPE.TRACK
       }).fire(_analyticsListeners.FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
   var createIndexCallback = (0, _react.useCallback)(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;
@@ -78,7 +88,7 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     setDraftDocumentPosition(documentPosition);
     applyAnnotationDraftAt(documentPosition);
     if (createAnalyticsEvent) {
-      var uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
+      var uniqueAnnotationsInRange = range ? actions.getAnnotationsByPosition(range) : [];
       createAnalyticsEvent({
         action: _analytics.ACTION.OPENED,
         actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
@@ -123,6 +133,7 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(Component, {
     range: range,
+    draftRange: draftRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

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

@@ -23,21 +23,30 @@ var SelectionRangeValidator = exports.SelectionRangeValidator = function Selecti
   var _useUserSelectionRang = (0, _userSelection.useUserSelectionRange)({
       rendererRef: rendererRef
     }),
-    _useUserSelectionRang2 = (0, _slicedToArray2.default)(_useUserSelectionRang, 2),
+    _useUserSelectionRang2 = (0, _slicedToArray2.default)(_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.default.createElement(_mounter.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/cjs/ui/annotations/wrapper.js

@@ -9,16 +9,27 @@ var _react = _interopRequireWildcard(require("react"));
 var _context = require("./context");
 var _hover = require("./hover");
 var _selection = require("./selection");
+var _AnnotationRangeContext = require("./contexts/AnnotationRangeContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var AnnotationsContextWrapper = exports.AnnotationsContextWrapper = function AnnotationsContextWrapper(props) {
   var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    range = _useAnnotationRangeSt.range;
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.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 = (0, _react.useCallback)(function () {
+    setDraftRange(range);
+  }, [range, setDraftRange]);
   var render = (0, _react.useCallback)(function (_ref) {
     var applyAnnotationDraftAt = _ref.applyAnnotationDraftAt,
       clearAnnotationDraft = _ref.clearAnnotationDraft;
@@ -39,5 +50,8 @@ var AnnotationsContextWrapper = exports.AnnotationsContextWrapper = function Ann
   if (!selectionComponent && !hoverComponent) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
-  return /*#__PURE__*/_react.default.createElement(_context.AnnotationsDraftContextWrapper, null, render);
+  return /*#__PURE__*/_react.default.createElement(_context.AnnotationsDraftContextWrapper, {
+    setDraftRange: setRangeForDraft,
+    clearDraftRange: clearDraftRange
+  }, render);
 };

package/dist/es2019/actions/index.js

@@ -121,6 +121,9 @@ export default class RendererActions {
     });
   }
   isValidAnnotationRange(range) {
+    if (!range) {
+      return false;
+    }
     const pos = getPosFromRange(range);
     if (!pos || !this.doc) {
       return false;
@@ -134,7 +137,7 @@ export default class RendererActions {
     return this._privateValidatePositionsForAnnotation(pos.from, pos.to);
   }
   getPositionFromRange(range) {
-    if (!this.doc || !this.schema) {
+    if (!this.doc || !this.schema || !range) {
       return false;
     }
     return getPosFromRange(range);

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.10.7";
+const packageVersion = "109.11.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -11,15 +11,27 @@ export class AnnotationsDraftContextWrapper extends React.Component {
     });
     _defineProperty(this, "applyAnnotationDraftAt", nextPosition => {
       const {
-        position
-      } = this.state;
-      if (!position) {
-        this.setState({
-          position: nextPosition
-        });
-      }
+        setDraftRange
+      } = this.props;
+
+      // 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(this, "clearAnnotationDraft", () => {
+      const {
+        clearDraftRange
+      } = this.props;
+
+      // Clear the draft range
+      clearDraftRange();
+
+      // Clear the draft position in the document
       this.setState({
         position: null
       });

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

@@ -5,6 +5,7 @@ function reducer(state, action) {
       if (!!state.range || !!state.type) {
         return {
           range: null,
+          draftRange: null,
           type: null
         };
       }
@@ -12,15 +13,25 @@ function reducer(state, action) {
     case 'clearSelection':
       if (state.type === 'selection') {
         return {
+          ...state,
           range: null,
           type: null
         };
       }
       return state;
+    case 'clearDraftSelection':
+      if (state.type === 'selection') {
+        return {
+          ...state,
+          draftRange: null
+        };
+      }
+      return state;
     case 'clearHover':
       if (state.type === 'hover') {
         return {
           range: null,
+          draftRange: null,
           type: null
         };
       }
@@ -28,14 +39,25 @@ function reducer(state, action) {
     case 'setSelection':
       if (state.range !== action.range || state.type !== 'selection') {
         return {
+          ...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 {
+          ...state,
           range: action.range,
           type: 'hover'
         };
@@ -46,13 +68,16 @@ function reducer(state, action) {
 }
 export const AnnotationRangeStateContext = /*#__PURE__*/createContext({
   range: null,
+  draftRange: null,
   type: null
 });
 export const AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
   clearRange: () => {},
   clearSelectionRange: () => {},
+  clearDraftRange: () => {},
   clearHoverRange: () => {},
-  setRange: () => {}
+  setRange: () => {},
+  setDraftRange: () => {}
 });
 export const AnnotationRangeProvider = ({
   children,
@@ -60,9 +85,11 @@ export const AnnotationRangeProvider = ({
 }) => {
   const [{
     range,
+    draftRange,
     type
   }, dispatch] = useReducer(reducer, {
     range: null,
+    draftRange: null,
     type: null
   });
   const clearRange = useCallback(() => dispatch({
@@ -71,6 +98,9 @@ export const AnnotationRangeProvider = ({
   const clearSelectionRange = useCallback(() => dispatch({
     type: 'clearSelection'
   }), []);
+  const clearDraftRange = useCallback(() => dispatch({
+    type: 'clearDraftSelection'
+  }), []);
   const clearHoverRange = useCallback(() => dispatch({
     type: 'clearHover'
   }), []);
@@ -78,6 +108,12 @@ export const AnnotationRangeProvider = ({
     type: 'setSelection',
     range
   }), []);
+  const setDraftRange = useCallback(range => {
+    dispatch({
+      type: 'setDraftSelection',
+      draftRange: range
+    });
+  }, []);
   const setHoverTarget = useCallback(target => {
     const range = document.createRange();
     range.setStartBefore(target);
@@ -89,15 +125,18 @@ export const AnnotationRangeProvider = ({
   }, []);
   const stateData = useMemo(() => ({
     range,
+    draftRange,
     type
-  }), [range, type]);
+  }), [range, draftRange, type]);
   const dispatchData = useMemo(() => ({
     clearRange,
     clearSelectionRange,
+    clearDraftRange,
     clearHoverRange,
     setRange,
+    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, {