@atlaskit/renderer 118.6.5 → 118.6.7

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 118.6.7
+
+### Patch Changes
+
+- [#165439](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165439)
+  [`1b15e228a1e86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b15e228a1e86) -
+  Fixed an issue which meant the new annotation manager still realied on a FG to be enabled when in
+  fact it should be enabled if an instance of the manager is supplied. Thie removed all dependencies
+  relying on the FG.
+
+## 118.6.6
+
+### Patch Changes
+
+- [#163587](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163587)
+  [`59a3ee21507aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/59a3ee21507aa) -
+  EDITOR-835 - Can not start another draft after starting a draft in renderer
+- Updated dependencies
+
 ## 118.6.5
 
 ### Patch Changes

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

@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.5";
+var packageVersion = "118.6.7";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -128,9 +128,11 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
   var _useAnnotationManager2 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
     currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
+  var isAnnotationManagerEnabled = !!annotationManager;
 
   // after creating a new annotation, we need to set the markRef to the new mark
   var markRef = (0, _react.useCallback)(function (node) {
@@ -169,7 +171,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
       // prevents from opening link URL inside webView in Safari
       event.preventDefault();
     }
-    if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+    if (isAnnotationManagerEnabled) {
       // currentTarget is the right element if there are multiple overlapping annotations
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -185,7 +187,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
         annotationIds: annotationIds
       });
     }
-  }, [annotationIds, onClick, state]);
+  }, [annotationIds, onClick, state, isAnnotationManagerEnabled]);
   var onMarkEnter = function onMarkEnter(evt) {
     var _document$activeEleme;
     var focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -12,7 +12,6 @@ var _types = require("@atlaskit/editor-common/types");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _types2 = require("@atlaskit/analytics-listeners/types");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
 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; }
@@ -24,9 +23,11 @@ var useAnnotationStateByTypeEvent = exports.useAnnotationStateByTypeEvent = func
     states = _useState2[0],
     setStates = _useState2[1];
   var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
   var _useAnnotationManager2 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
     annotations = _useAnnotationManager2.annotations;
+  var isAnnotationManagerEnabled = !!annotationManager;
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber) {
       return;
@@ -45,19 +46,19 @@ var useAnnotationStateByTypeEvent = exports.useAnnotationStateByTypeEvent = func
       }, {});
       setStates(_objectSpread(_objectSpread({}, states), nextStates));
     };
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       return function () {
         updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       };
     }
-  }, [states, type, updateSubscriber, dispatch]);
+  }, [states, type, updateSubscriber, dispatch, isAnnotationManagerEnabled]);
   var annotationMarkStates = (0, _react.useMemo)(function () {
     return Object.values(annotations).reduce(function (acc, curr) {
       return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, curr.markState));
     }, {});
   }, [annotations]);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+  if (isAnnotationManagerEnabled) {
     return annotationMarkStates;
   } else {
     return states;
@@ -77,6 +78,9 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
   var _useAnnotationManager3 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
     currentSelectedAnnotationId = _useAnnotationManager3.currentSelectedAnnotationId,
     currentHoveredAnnotationId = _useAnnotationManager3.currentHoveredAnnotationId;
+  var _useAnnotationManager4 = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager4.annotationManager;
+  var isAnnotationManagerEnabled = !!annotationManager;
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber) {
       return;
@@ -99,7 +103,7 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
         document.activeElement.blur();
       }
     };
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
       updateSubscriber.on(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -111,8 +115,8 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
         updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
       };
     }
-  }, [id, updateSubscriber]);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+  }, [id, updateSubscriber, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return {
       hasFocus: currentSelectedAnnotationId === id,
       isHovered: currentHoveredAnnotationId === id
@@ -136,9 +140,12 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
   var updateSubscriber = props.updateSubscriber,
     createAnalyticsEvent = props.createAnalyticsEvent,
     isNestedRender = props.isNestedRender;
-  var _useAnnotationManager4 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
-    currentSelectedAnnotationId = _useAnnotationManager4.currentSelectedAnnotationId,
-    currentSelectedMarkRef = _useAnnotationManager4.currentSelectedMarkRef;
+  var _useAnnotationManager5 = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager5.annotationManager;
+  var isAnnotationManagerEnabled = !!annotationManager;
+  var _useAnnotationManager6 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
+    currentSelectedAnnotationId = _useAnnotationManager6.currentSelectedAnnotationId,
+    currentSelectedMarkRef = _useAnnotationManager6.currentSelectedMarkRef;
   var selectedAnnotation = (0, _react.useMemo)(function () {
     return currentSelectedAnnotationId && currentSelectedMarkRef && currentSelectedMarkRef.id === currentSelectedAnnotationId ? {
       annotations: [{
@@ -196,7 +203,7 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         document.activeElement.blur();
       }
     };
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.on(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       return function () {
@@ -204,8 +211,8 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         updateSubscriber.off(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       };
     }
-  }, [updateSubscriber, createAnalyticsEvent, isNestedRender]);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+  }, [updateSubscriber, createAnalyticsEvent, isNestedRender, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return isNestedRender ? null : selectedAnnotation;
   } else {
     return annotationClickEvent;

package/dist/cjs/ui/annotations/hooks/use-load-annotations.js

@@ -21,7 +21,9 @@ var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotation
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var providers = (0, _react.useContext)(_context.ProvidersContext);
   var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
+  var isAnnotationManagerEnabled = !!annotationManager;
   (0, _react.useEffect)(function () {
     if (!providers) {
       return;
@@ -51,7 +53,7 @@ var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotation
       var payload = data.reduce(function (acc, value) {
         return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, value.id, value));
       }, {});
-      if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+      if (isAnnotationManagerEnabled) {
         dispatch({
           type: 'loadAnnotation',
           data: Object.keys(payload).map(function (id) {
@@ -72,5 +74,5 @@ var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotation
       });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch]);
+  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch, isAnnotationManagerEnabled]);
 };

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

@@ -9,6 +9,7 @@ var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 var _utils = require("./utils");
 var _steps = require("../../../steps");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
 var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = (0, _react.useRef)();
@@ -19,7 +20,10 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type,
     selectionDraftRange = _useAnnotationRangeSt.selectionDraftRange;
+  var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    annotationManager = _useAnnotationManager.annotationManager;
   var lastRangeRef = (0, _react.useRef)(null);
+  var isAnnotationManagerEnabled = !!annotationManager;
   var onSelectionChange = (0, _react.useCallback)(function (event) {
     if ((0, _platformFeatureFlags.fg)('platform_renderer_triple_click_selects_paragraph')) {
       if (selectionTimeoutRef.current) {
@@ -29,6 +33,9 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -66,6 +73,9 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
       selectionTimeoutRef.current = setTimeout(function () {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -100,7 +110,7 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
   (0, _react.useEffect)(function () {
     if (!document || !rendererDOM) {
       return;

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

@@ -67,6 +67,7 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
     // 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
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -169,7 +170,12 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
         }
       }
     });
-    var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    var positionToAnnotate = (0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -219,12 +225,9 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     if (annotationManager) {
       var startDraft = function startDraft() {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         var id = (0, _v.default)();
         var result = applyDraftModeCallback({
           annotationId: id,

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

@@ -26,6 +26,8 @@ var SelectionRangeValidator = exports.SelectionRangeValidator = function Selecti
     draftRange = _useUserSelectionRang2[2],
     clearRange = _useUserSelectionRang2[3];
   var selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "118.6.5";
+const packageVersion = "118.6.7";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -133,11 +133,13 @@ export const MarkComponent = ({
   const intl = useIntl();
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
   const {
+    annotationManager,
     dispatch
   } = useAnnotationManagerDispatch();
   const {
     currentSelectedAnnotationId
   } = useAnnotationManagerState();
+  const isAnnotationManagerEnabled = !!annotationManager;
 
   // after creating a new annotation, we need to set the markRef to the new mark
   const markRef = useCallback(node => {
@@ -176,7 +178,7 @@ export const MarkComponent = ({
       // prevents from opening link URL inside webView in Safari
       event.preventDefault();
     }
-    if (fg('platform_editor_comments_api_manager')) {
+    if (isAnnotationManagerEnabled) {
       // currentTarget is the right element if there are multiple overlapping annotations
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -192,7 +194,7 @@ export const MarkComponent = ({
         annotationIds
       });
     }
-  }, [annotationIds, onClick, state]);
+  }, [annotationIds, onClick, state, isAnnotationManagerEnabled]);
   const onMarkEnter = evt => {
     var _document$activeEleme;
     const focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -3,7 +3,6 @@ import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 export const useAnnotationStateByTypeEvent = ({
   type,
@@ -11,11 +10,13 @@ export const useAnnotationStateByTypeEvent = ({
 }) => {
   const [states, setStates] = useState({});
   const {
+    annotationManager,
     dispatch
   } = useAnnotationManagerDispatch();
   const {
     annotations
   } = useAnnotationManagerState();
+  const isAnnotationManagerEnabled = !!annotationManager;
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -40,13 +41,13 @@ export const useAnnotationStateByTypeEvent = ({
         ...nextStates
       });
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       return () => {
         updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       };
     }
-  }, [states, type, updateSubscriber, dispatch]);
+  }, [states, type, updateSubscriber, dispatch, isAnnotationManagerEnabled]);
   const annotationMarkStates = useMemo(() => {
     return Object.values(annotations).reduce((acc, curr) => {
       return {
@@ -55,7 +56,7 @@ export const useAnnotationStateByTypeEvent = ({
       };
     }, {});
   }, [annotations]);
-  if (fg('platform_editor_comments_api_manager')) {
+  if (isAnnotationManagerEnabled) {
     return annotationMarkStates;
   } else {
     return states;
@@ -71,6 +72,10 @@ export const useHasFocusEvent = ({
     currentSelectedAnnotationId,
     currentHoveredAnnotationId
   } = useAnnotationManagerState();
+  const {
+    annotationManager
+  } = useAnnotationManagerDispatch();
+  const isAnnotationManagerEnabled = !!annotationManager;
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -93,7 +98,7 @@ export const useHasFocusEvent = ({
         document.activeElement.blur();
       }
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
       updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -105,8 +110,8 @@ export const useHasFocusEvent = ({
         updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
       };
     }
-  }, [id, updateSubscriber]);
-  if (fg('platform_editor_comments_api_manager')) {
+  }, [id, updateSubscriber, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return {
       hasFocus: currentSelectedAnnotationId === id,
       isHovered: currentHoveredAnnotationId === id
@@ -129,6 +134,10 @@ export const useAnnotationClickEvent = props => {
     createAnalyticsEvent,
     isNestedRender
   } = props;
+  const {
+    annotationManager
+  } = useAnnotationManagerDispatch();
+  const isAnnotationManagerEnabled = !!annotationManager;
   const {
     currentSelectedAnnotationId,
     currentSelectedMarkRef
@@ -187,7 +196,7 @@ export const useAnnotationClickEvent = props => {
         document.activeElement.blur();
       }
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       return () => {
@@ -195,8 +204,8 @@ export const useAnnotationClickEvent = props => {
         updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       };
     }
-  }, [updateSubscriber, createAnalyticsEvent, isNestedRender]);
-  if (fg('platform_editor_comments_api_manager')) {
+  }, [updateSubscriber, createAnalyticsEvent, isNestedRender, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return isNestedRender ? null : selectedAnnotation;
   } else {
     return annotationClickEvent;

package/dist/es2019/ui/annotations/hooks/use-load-annotations.js

@@ -12,8 +12,10 @@ export const useLoadAnnotations = ({
   const actions = useContext(ActionsContext);
   const providers = useContext(ProvidersContext);
   const {
+    annotationManager,
     dispatch
   } = useAnnotationManagerDispatch();
+  const isAnnotationManagerEnabled = !!annotationManager;
   useEffect(() => {
     if (!providers) {
       return;
@@ -45,7 +47,7 @@ export const useLoadAnnotations = ({
         ...acc,
         [value.id]: value
       }), {});
-      if (fg('platform_editor_comments_api_manager')) {
+      if (isAnnotationManagerEnabled) {
         dispatch({
           type: 'loadAnnotation',
           data: Object.keys(payload).map(id => {
@@ -64,5 +66,5 @@ export const useLoadAnnotations = ({
       });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch]);
+  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch, isAnnotationManagerEnabled]);
 };

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

@@ -3,6 +3,7 @@ import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts
 import { isRangeInsideOfRendererContainer } from './utils';
 import { isRoot } from '../../../steps';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
 export const useUserSelectionRange = props => {
   const {
     rendererRef: {
@@ -19,7 +20,11 @@ export const useUserSelectionRange = props => {
     type,
     selectionDraftRange
   } = useAnnotationRangeState();
+  const {
+    annotationManager
+  } = useAnnotationManagerDispatch();
   const lastRangeRef = useRef(null);
+  const isAnnotationManagerEnabled = !!annotationManager;
   const onSelectionChange = useCallback(event => {
     if (fg('platform_renderer_triple_click_selects_paragraph')) {
       if (selectionTimeoutRef.current) {
@@ -29,6 +34,9 @@ export const useUserSelectionRange = props => {
         const sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         let _range = sel.getRangeAt(0);
@@ -67,6 +75,9 @@ export const useUserSelectionRange = props => {
       selectionTimeoutRef.current = setTimeout(() => {
         const sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         const _range = sel.getRangeAt(0);
@@ -103,7 +114,7 @@ export const useUserSelectionRange = props => {
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
   useEffect(() => {
     if (!document || !rendererDOM) {
       return;

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

@@ -64,6 +64,7 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const onCreateCallback = useCallback(annotationId => {
     // 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
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     const positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -166,7 +167,12 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
         }
       }
     });
-    const positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    const positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -216,12 +222,9 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     if (annotationManager) {
       const startDraft = () => {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         const id = uuid();
         const result = applyDraftModeCallback({
           annotationId: id,

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

@@ -13,6 +13,8 @@ export const SelectionRangeValidator = props => {
     rendererRef
   });
   const selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.5";
+var packageVersion = "118.6.7";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -124,9 +124,11 @@ export var MarkComponent = function MarkComponent(_ref) {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var _useAnnotationManager = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
   var _useAnnotationManager2 = useAnnotationManagerState(),
     currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
+  var isAnnotationManagerEnabled = !!annotationManager;
 
   // after creating a new annotation, we need to set the markRef to the new mark
   var markRef = useCallback(function (node) {
@@ -165,7 +167,7 @@ export var MarkComponent = function MarkComponent(_ref) {
       // prevents from opening link URL inside webView in Safari
       event.preventDefault();
     }
-    if (fg('platform_editor_comments_api_manager')) {
+    if (isAnnotationManagerEnabled) {
       // currentTarget is the right element if there are multiple overlapping annotations
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -181,7 +183,7 @@ export var MarkComponent = function MarkComponent(_ref) {
         annotationIds: annotationIds
       });
     }
-  }, [annotationIds, onClick, state]);
+  }, [annotationIds, onClick, state, isAnnotationManagerEnabled]);
   var onMarkEnter = function onMarkEnter(evt) {
     var _document$activeEleme;
     var focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -7,7 +7,6 @@ import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref) {
   var type = _ref.type,
@@ -17,9 +16,11 @@ export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEven
     states = _useState2[0],
     setStates = _useState2[1];
   var _useAnnotationManager = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
   var _useAnnotationManager2 = useAnnotationManagerState(),
     annotations = _useAnnotationManager2.annotations;
+  var isAnnotationManagerEnabled = !!annotationManager;
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -38,19 +39,19 @@ export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEven
       }, {});
       setStates(_objectSpread(_objectSpread({}, states), nextStates));
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       return function () {
         updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
       };
     }
-  }, [states, type, updateSubscriber, dispatch]);
+  }, [states, type, updateSubscriber, dispatch, isAnnotationManagerEnabled]);
   var annotationMarkStates = useMemo(function () {
     return Object.values(annotations).reduce(function (acc, curr) {
       return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, curr.id, curr.markState));
     }, {});
   }, [annotations]);
-  if (fg('platform_editor_comments_api_manager')) {
+  if (isAnnotationManagerEnabled) {
     return annotationMarkStates;
   } else {
     return states;
@@ -70,6 +71,9 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
   var _useAnnotationManager3 = useAnnotationManagerState(),
     currentSelectedAnnotationId = _useAnnotationManager3.currentSelectedAnnotationId,
     currentHoveredAnnotationId = _useAnnotationManager3.currentHoveredAnnotationId;
+  var _useAnnotationManager4 = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager4.annotationManager;
+  var isAnnotationManagerEnabled = !!annotationManager;
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -92,7 +96,7 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
         document.activeElement.blur();
       }
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
       updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -104,8 +108,8 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
         updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
       };
     }
-  }, [id, updateSubscriber]);
-  if (fg('platform_editor_comments_api_manager')) {
+  }, [id, updateSubscriber, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return {
       hasFocus: currentSelectedAnnotationId === id,
       isHovered: currentHoveredAnnotationId === id
@@ -129,9 +133,12 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
   var updateSubscriber = props.updateSubscriber,
     createAnalyticsEvent = props.createAnalyticsEvent,
     isNestedRender = props.isNestedRender;
-  var _useAnnotationManager4 = useAnnotationManagerState(),
-    currentSelectedAnnotationId = _useAnnotationManager4.currentSelectedAnnotationId,
-    currentSelectedMarkRef = _useAnnotationManager4.currentSelectedMarkRef;
+  var _useAnnotationManager5 = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager5.annotationManager;
+  var isAnnotationManagerEnabled = !!annotationManager;
+  var _useAnnotationManager6 = useAnnotationManagerState(),
+    currentSelectedAnnotationId = _useAnnotationManager6.currentSelectedAnnotationId,
+    currentSelectedMarkRef = _useAnnotationManager6.currentSelectedMarkRef;
   var selectedAnnotation = useMemo(function () {
     return currentSelectedAnnotationId && currentSelectedMarkRef && currentSelectedMarkRef.id === currentSelectedAnnotationId ? {
       annotations: [{
@@ -189,7 +196,7 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         document.activeElement.blur();
       }
     };
-    if (!fg('platform_editor_comments_api_manager')) {
+    if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       return function () {
@@ -197,8 +204,8 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
       };
     }
-  }, [updateSubscriber, createAnalyticsEvent, isNestedRender]);
-  if (fg('platform_editor_comments_api_manager')) {
+  }, [updateSubscriber, createAnalyticsEvent, isNestedRender, isAnnotationManagerEnabled]);
+  if (isAnnotationManagerEnabled) {
     return isNestedRender ? null : selectedAnnotation;
   } else {
     return annotationClickEvent;

package/dist/esm/ui/annotations/hooks/use-load-annotations.js

@@ -14,7 +14,9 @@ export var useLoadAnnotations = function useLoadAnnotations(_ref) {
   var actions = useContext(ActionsContext);
   var providers = useContext(ProvidersContext);
   var _useAnnotationManager = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager.annotationManager,
     dispatch = _useAnnotationManager.dispatch;
+  var isAnnotationManagerEnabled = !!annotationManager;
   useEffect(function () {
     if (!providers) {
       return;
@@ -44,7 +46,7 @@ export var useLoadAnnotations = function useLoadAnnotations(_ref) {
       var payload = data.reduce(function (acc, value) {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, value.id, value));
       }, {});
-      if (fg('platform_editor_comments_api_manager')) {
+      if (isAnnotationManagerEnabled) {
         dispatch({
           type: 'loadAnnotation',
           data: Object.keys(payload).map(function (id) {
@@ -65,5 +67,5 @@ export var useLoadAnnotations = function useLoadAnnotations(_ref) {
       });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch]);
+  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch, isAnnotationManagerEnabled]);
 };

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

@@ -3,6 +3,7 @@ import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts
 import { isRangeInsideOfRendererContainer } from './utils';
 import { isRoot } from '../../../steps';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
 export var useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = useRef();
@@ -13,7 +14,10 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type,
     selectionDraftRange = _useAnnotationRangeSt.selectionDraftRange;
+  var _useAnnotationManager = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager.annotationManager;
   var lastRangeRef = useRef(null);
+  var isAnnotationManagerEnabled = !!annotationManager;
   var onSelectionChange = useCallback(function (event) {
     if (fg('platform_renderer_triple_click_selects_paragraph')) {
       if (selectionTimeoutRef.current) {
@@ -23,6 +27,9 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -60,6 +67,9 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
       selectionTimeoutRef.current = setTimeout(function () {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if (isAnnotationManagerEnabled) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -94,7 +104,7 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
   useEffect(function () {
     if (!document || !rendererDOM) {
       return;

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

@@ -58,6 +58,7 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
   var onCreateCallback = useCallback(function (annotationId) {
     // 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
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -160,7 +161,12 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
         }
       }
     });
-    var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    var positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -210,12 +216,9 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     if (annotationManager) {
       var startDraft = function startDraft() {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         var id = uuid();
         var result = applyDraftModeCallback({
           annotationId: id,

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

@@ -17,6 +17,8 @@ export var SelectionRangeValidator = function SelectionRangeValidator(props) {
     draftRange = _useUserSelectionRang2[2],
     clearRange = _useUserSelectionRang2[3];
   var selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.6.5",
+	"version": "118.6.7",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,13 +52,13 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.13.0",
-		"@atlaskit/smart-card": "^38.5.0",
+		"@atlaskit/smart-card": "^38.6.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.8.0",
+		"@atlaskit/tmp-editor-statsig": "^5.10.0",
 		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/link-provider": "^3.2.0",
+		"@atlaskit/link-provider": "^3.3.0",
 		"@atlaskit/media-core": "^36.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
@@ -81,7 +81,7 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/css-reset": "^7.3.0",
-		"@atlaskit/link-provider": "^3.2.0",
+		"@atlaskit/link-provider": "^3.3.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/linking-common": "^9.0.0",
 		"@atlaskit/media-core": "^36.1.0",