@atlaskit/renderer 115.0.2 → 115.0.4

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

@@ -2,11 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 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,
     updateSubscriber = _ref.updateSubscriber;
@@ -14,6 +16,10 @@ export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEven
     _useState2 = _slicedToArray(_useState, 2),
     states = _useState2[0],
     setStates = _useState2[1];
+  var _useAnnotationManager = useAnnotationManagerDispatch(),
+    dispatch = _useAnnotationManager.dispatch;
+  var _useAnnotationManager2 = useAnnotationManagerState(),
+    annotations = _useAnnotationManager2.annotations;
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -32,12 +38,23 @@ export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEven
       }, {});
       setStates(_objectSpread(_objectSpread({}, states), nextStates));
     };
-    updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
-    return function () {
-      updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
-    };
-  }, [states, type, updateSubscriber]);
-  return states;
+    if (!fg('platform_editor_comments_api_manager')) {
+      updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
+      return function () {
+        updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
+      };
+    }
+  }, [states, type, updateSubscriber, dispatch]);
+  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')) {
+    return annotationMarkStates;
+  } else {
+    return states;
+  }
 };
 export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
   var id = _ref2.id,
@@ -50,6 +67,9 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     _useState6 = _slicedToArray(_useState5, 2),
     isHovered = _useState6[0],
     setIsHovered = _useState6[1];
+  var _useAnnotationManager3 = useAnnotationManagerState(),
+    currentSelectedAnnotationId = _useAnnotationManager3.currentSelectedAnnotationId,
+    currentHoveredAnnotationId = _useAnnotationManager3.currentHoveredAnnotationId;
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -72,21 +92,30 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
         document.activeElement.blur();
       }
     };
-    updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
-    updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
-    updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
-    updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_HOVERED, removeHoverEffect);
-    return function () {
-      updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
-      updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
-      updateSubscriber.off(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
-      updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
-    };
+    if (!fg('platform_editor_comments_api_manager')) {
+      updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
+      updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
+      updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
+      updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_HOVERED, removeHoverEffect);
+      return function () {
+        updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
+        updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
+        updateSubscriber.off(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
+        updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
+      };
+    }
   }, [id, updateSubscriber]);
-  return {
-    hasFocus: hasFocus,
-    isHovered: isHovered
-  };
+  if (fg('platform_editor_comments_api_manager')) {
+    return {
+      hasFocus: currentSelectedAnnotationId === id,
+      isHovered: currentHoveredAnnotationId === id
+    };
+  } else {
+    return {
+      hasFocus: hasFocus,
+      isHovered: isHovered
+    };
+  }
 };
 export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
   var _useState7 = useState(null),
@@ -96,6 +125,21 @@ 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 selectedAnnotation = useMemo(function () {
+    return currentSelectedAnnotationId && currentSelectedMarkRef ? {
+      annotations: [{
+        id: currentSelectedAnnotationId,
+        type: AnnotationTypes.INLINE_COMMENT
+      }],
+      clickElementTarget: currentSelectedMarkRef
+    } : {
+      annotations: [],
+      clickElementTarget: undefined
+    };
+  }, [currentSelectedAnnotationId, currentSelectedMarkRef]);
   useLayoutEffect(function () {
     if (!updateSubscriber || isNestedRender) {
       return;
@@ -140,12 +184,18 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         document.activeElement.blur();
       }
     };
-    updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
-    updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
-    return function () {
-      updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
-      updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
-    };
+    if (!fg('platform_editor_comments_api_manager')) {
+      updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
+      updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
+      return function () {
+        updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
+        updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
+      };
+    }
   }, [updateSubscriber, createAnalyticsEvent, isNestedRender]);
-  return annotationClickEvent;
+  if (fg('platform_editor_comments_api_manager')) {
+    return selectedAnnotation;
+  } else {
+    return annotationClickEvent;
+  }
 };

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

@@ -6,12 +6,15 @@ import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ProvidersContext } from '../context';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
 export var useLoadAnnotations = function useLoadAnnotations(_ref) {
   var adfDocument = _ref.adfDocument,
     isNestedRender = _ref.isNestedRender,
     onLoadComplete = _ref.onLoadComplete;
   var actions = useContext(ActionsContext);
   var providers = useContext(ProvidersContext);
+  var _useAnnotationManager = useAnnotationManagerDispatch(),
+    dispatch = _useAnnotationManager.dispatch;
   useEffect(function () {
     if (!providers) {
       return;
@@ -41,7 +44,20 @@ export var useLoadAnnotations = function useLoadAnnotations(_ref) {
       var payload = data.reduce(function (acc, value) {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, value.id, value));
       }, {});
-      updateSubscriberInlineComment.emit(AnnotationUpdateEvent.SET_ANNOTATION_STATE, payload);
+      if (fg('platform_editor_comments_api_manager')) {
+        dispatch({
+          type: 'loadAnnotation',
+          data: Object.keys(payload).map(function (id) {
+            var _payload$id$state;
+            return {
+              id: id,
+              markState: (_payload$id$state = payload[id].state) !== null && _payload$id$state !== void 0 ? _payload$id$state : undefined
+            };
+          })
+        });
+      } else {
+        updateSubscriberInlineComment.emit(AnnotationUpdateEvent.SET_ANNOTATION_STATE, payload);
+      }
       onLoadComplete && onLoadComplete({
         numberOfUnresolvedInlineComments: data.filter(function (data) {
           return data.state === 'active';
@@ -49,5 +65,5 @@ export var useLoadAnnotations = function useLoadAnnotations(_ref) {
       });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete]);
+  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch]);
 };

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AnnotationView } from './view';
 import { AnnotationsContextWrapper } from './wrapper';
 import { ProvidersContext, InlineCommentsStateContext } from './context';
@@ -8,6 +9,7 @@ import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
 import { AnnotationHoverContext } from './contexts/AnnotationHoverContext';
+import { AnnotationManagerProvider } from './contexts/AnnotationManagerContext';
 var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
   var adfDocument = _ref.adfDocument,
     isNestedRender = _ref.isNestedRender,
@@ -27,27 +29,25 @@ var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
 export var AnnotationsPositionContext = /*#__PURE__*/React.createContext({
   startPos: 1
 });
-export var AnnotationsWrapper = function AnnotationsWrapper(props) {
-  var _annotationProvider$i, _annotationProvider$i2;
+export var AnnotationsWrapperInner = function AnnotationsWrapperInner(props) {
+  var _providers$inlineComm, _providers$inlineComm2;
   var children = props.children,
-    annotationProvider = props.annotationProvider,
     rendererRef = props.rendererRef,
     adfDocument = props.adfDocument,
     isNestedRender = props.isNestedRender,
     onLoadComplete = props.onLoadComplete;
-  var updateSubscriber = annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.updateSubscriber;
+  var providers = useContext(ProvidersContext);
+  var updateSubscriber = providers && providers.inlineComment && providers.inlineComment.updateSubscriber;
   var inlineCommentAnnotationsState = useAnnotationStateByTypeEvent({
     type: AnnotationTypes.INLINE_COMMENT,
     updateSubscriber: updateSubscriber || null
   });
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  return /*#__PURE__*/React.createElement(ProvidersContext.Provider, {
-    value: annotationProvider
-  }, /*#__PURE__*/React.createElement(InlineCommentsStateContext.Provider, {
+  return /*#__PURE__*/React.createElement(InlineCommentsStateContext.Provider, {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
-    allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
+    allowCommentsOnMedia: (_providers$inlineComm = providers === null || providers === void 0 || (_providers$inlineComm2 = providers.inlineComment) === null || _providers$inlineComm2 === void 0 ? void 0 : _providers$inlineComm2.allowCommentsOnMedia) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false
   }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef,
@@ -59,5 +59,40 @@ export var AnnotationsWrapper = function AnnotationsWrapper(props) {
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     isNestedRender: isNestedRender,
     createAnalyticsEvent: createAnalyticsEvent
-  }), children)))));
+  }), children))));
+};
+export var AnnotationsWrapper = function AnnotationsWrapper(props) {
+  var children = props.children,
+    annotationProvider = props.annotationProvider,
+    rendererRef = props.rendererRef,
+    adfDocument = props.adfDocument,
+    isNestedRender = props.isNestedRender,
+    onLoadComplete = props.onLoadComplete;
+  if (!isNestedRender && fg('platform_editor_comments_api_manager')) {
+    var _annotationProvider$i, _annotationProvider$i2;
+    // We need to ensure there is a single instance of the annotation manager for the whole document
+    // and that it is the same instance for all annotations.
+    // This is because the annotation manager is responsible for managing the state of ALL annotations.
+    // This includes annotations inside extensions.
+    return /*#__PURE__*/React.createElement(ProvidersContext.Provider, {
+      value: annotationProvider
+    }, /*#__PURE__*/React.createElement(AnnotationManagerProvider, {
+      annotationManager: annotationProvider === null || annotationProvider === void 0 ? void 0 : annotationProvider.annotationManager,
+      updateSubscriber: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.updateSubscriber) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : undefined
+    }, /*#__PURE__*/React.createElement(AnnotationsWrapperInner, {
+      rendererRef: rendererRef,
+      adfDocument: adfDocument,
+      isNestedRender: isNestedRender,
+      onLoadComplete: onLoadComplete
+    }, children)));
+  } else {
+    return /*#__PURE__*/React.createElement(ProvidersContext.Provider, {
+      value: annotationProvider
+    }, /*#__PURE__*/React.createElement(AnnotationsWrapperInner, {
+      rendererRef: rendererRef,
+      adfDocument: adfDocument,
+      isNestedRender: isNestedRender,
+      onLoadComplete: onLoadComplete
+    }, children));
+  }
 };

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

@@ -1,12 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState, useContext, useMemo } from 'react';
-import { AnnotationTypes } from '@atlaskit/adf-schema';
+import React, { useCallback, useState, useContext, useMemo, useEffect } from 'react';
+import uuid from 'uuid/v4';
+import { AnnotationTypes, AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { updateWindowSelectionAroundDraft } from '../draft/dom';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { getRendererRangeInlineNodeNames } from '../../../actions/get-renderer-range-inline-node-names';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
+import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
@@ -25,6 +27,12 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = useContext(ActionsContext);
+  var _useAnnotationManager = useAnnotationManagerState(),
+    isDrafting = _useAnnotationManager.isDrafting,
+    draftId = _useAnnotationManager.draftId;
+  var _useAnnotationManager2 = useAnnotationManagerDispatch(),
+    annotationManager = _useAnnotationManager2.annotationManager,
+    dispatch = _useAnnotationManager2.dispatch;
   var inlineNodeTypes = useMemo(function () {
     if (fg('annotations_defensive_node_name_calculations')) {
       if (!actions.isRangeAnnotatable(range)) {
@@ -177,6 +185,171 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     removeDraftModeCallback();
     onCloseProps();
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent, inlineNodeTypes]);
+  useEffect(function () {
+    if (fg('platform_editor_comments_api_manager')) {
+      var allowAnnotation = function allowAnnotation() {
+        if (isDrafting) {
+          return false;
+        }
+        return isAnnotationAllowed;
+      };
+      annotationManager === null || annotationManager === void 0 || annotationManager.hook('allowAnnotation', allowAnnotation);
+      return function () {
+        annotationManager === null || annotationManager === void 0 || annotationManager.unhook('allowAnnotation', allowAnnotation);
+      };
+    }
+  }, [annotationManager, isAnnotationAllowed, isDrafting]);
+  useEffect(function () {
+    if (fg('platform_editor_comments_api_manager')) {
+      var startDraft = function startDraft() {
+        var _result$inlineNodeTyp;
+        if (isDrafting) {
+          return {
+            success: false,
+            reason: 'draft-in-progress'
+          };
+        }
+        if (!actions.isValidAnnotationRange(range)) {
+          return {
+            success: false,
+            reason: 'invalid-range'
+          };
+        }
+        var id = uuid();
+        var result = applyDraftModeCallback({
+          annotationId: id,
+          keepNativeSelection: false
+        });
+        if (!result) {
+          return {
+            success: false,
+            reason: 'invalid-range'
+          };
+        }
+        dispatch({
+          type: 'setDrafting',
+          data: {
+            isDrafting: true,
+            draftId: id,
+            draftActionResult: result
+          }
+        });
+        dispatch({
+          type: 'resetSelectedAnnotation'
+        });
+        return {
+          success: true,
+          // We cannot get a ref to the target element here
+          // because the draft is not yet applied to the DOM
+          targetElement: undefined,
+          inlineNodeTypes: (_result$inlineNodeTyp = result.inlineNodeTypes) !== null && _result$inlineNodeTyp !== void 0 ? _result$inlineNodeTyp : [],
+          actionResult: {
+            step: result.step,
+            doc: result.doc,
+            inlineNodeTypes: result.inlineNodeTypes,
+            targetNodeType: result.targetNodeType,
+            originalSelection: result.originalSelection,
+            numMatches: result.numMatches,
+            matchIndex: result.matchIndex,
+            pos: result.pos
+          }
+        };
+      };
+      annotationManager === null || annotationManager === void 0 || annotationManager.hook('startDraft', startDraft);
+      return function () {
+        annotationManager === null || annotationManager === void 0 || annotationManager.unhook('startDraft', startDraft);
+      };
+    }
+  }, [annotationManager, isDrafting, applyDraftModeCallback, actions, range, dispatch]);
+  useEffect(function () {
+    if (fg('platform_editor_comments_api_manager')) {
+      var clearDraft = function clearDraft() {
+        if (!isDrafting) {
+          return {
+            success: false,
+            reason: 'draft-not-started'
+          };
+        }
+        dispatch({
+          type: 'setDrafting',
+          data: {
+            isDrafting: false,
+            draftId: undefined,
+            draftActionResult: undefined
+          }
+        });
+        onCloseCallback();
+        return {
+          success: true
+        };
+      };
+      annotationManager === null || annotationManager === void 0 || annotationManager.hook('clearDraft', clearDraft);
+      return function () {
+        annotationManager === null || annotationManager === void 0 || annotationManager.unhook('clearDraft', clearDraft);
+      };
+    }
+  }, [annotationManager, onCloseCallback, isDrafting, dispatch]);
+  useEffect(function () {
+    if (fg('platform_editor_comments_api_manager')) {
+      var applyDraft = function applyDraft(id) {
+        if (!isDrafting || !draftId) {
+          return {
+            success: false,
+            reason: 'draft-not-started'
+          };
+        }
+        var result = onCreateCallback(id);
+        if (!result) {
+          return {
+            success: false,
+            reason: 'range-no-longer-exists'
+          };
+        }
+        onCloseCallback();
+        dispatch({
+          type: 'setDrafting',
+          data: {
+            isDrafting: false,
+            draftId: undefined,
+            draftActionResult: undefined
+          }
+        });
+        dispatch({
+          type: 'updateAnnotation',
+          data: {
+            id: id,
+            selected: true,
+            markState: AnnotationMarkStates.ACTIVE
+          }
+        });
+        return {
+          success: true,
+          targetElement: undefined,
+          actionResult: id !== draftId ? {
+            step: result.step,
+            doc: result.doc,
+            inlineNodeTypes: result.inlineNodeTypes,
+            targetNodeType: result.targetNodeType,
+            originalSelection: result.originalSelection,
+            numMatches: result.numMatches,
+            matchIndex: result.matchIndex,
+            pos: result.pos
+          } : undefined
+        };
+      };
+      annotationManager === null || annotationManager === void 0 || annotationManager.hook('applyDraft', applyDraft);
+      return function () {
+        annotationManager === null || annotationManager === void 0 || annotationManager.unhook('applyDraft', applyDraft);
+      };
+    }
+  }, [annotationManager, onCreateCallback, onCloseCallback, isDrafting, draftId, dispatch]);
+
+  // Please remove this NOP function when the flag platform_editor_comments_api_manager is removed.
+  var nop = useMemo(function () {
+    return function () {
+      return false;
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
     draftRange: draftRange
@@ -185,11 +358,11 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     ,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
-    onClose: onCloseCallback,
-    onCreate: onCreateCallback,
+    onClose: fg('platform_editor_comments_api_manager') ? nop : onCloseCallback,
+    onCreate: fg('platform_editor_comments_api_manager') ? nop : onCreateCallback,
     getAnnotationIndexMatch: createIndexCallback,
-    applyDraftMode: applyDraftModeCallback,
-    removeDraftMode: removeDraftModeCallback,
+    applyDraftMode: fg('platform_editor_comments_api_manager') ? nop : applyDraftModeCallback,
+    removeDraftMode: fg('platform_editor_comments_api_manager') ? nop : removeDraftModeCallback,
     inlineNodeTypes: inlineNodeTypes
   });
 });

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

@@ -0,0 +1,71 @@
+import React, { type ReactNode } from 'react';
+import { type AnnotationId, AnnotationMarkStates } from '@atlaskit/adf-schema';
+import type { AnnotationManager, ActionResult } from '@atlaskit/editor-common/annotation';
+import { AnnotationUpdateEmitter } from '@atlaskit/editor-common/types';
+interface AnnotationState {
+    id: AnnotationId;
+    markState: AnnotationMarkStates;
+}
+type AnnotationsStateRecord = Record<AnnotationId, AnnotationState>;
+interface AnnotationManagerStateContext {
+    isDrafting: boolean;
+    draftId: string | undefined;
+    draftMarkRef: HTMLElement | undefined;
+    draftActionResult: ActionResult | undefined;
+    annotations: AnnotationsStateRecord;
+    currentSelectedAnnotationId: AnnotationId | undefined;
+    currentSelectedMarkRef: HTMLElement | undefined;
+    currentHoveredAnnotationId: AnnotationId | undefined;
+}
+interface AnnotationManagerDispatchContext {
+    annotationManager: AnnotationManager | undefined;
+    dispatch: React.Dispatch<AnnotationManagerAction>;
+}
+declare const AnnotationManagerStateContext: React.Context<AnnotationManagerStateContext>;
+declare const AnnotationManagerDispatchContext: React.Context<AnnotationManagerDispatchContext>;
+type AnnotationManagerAction = {
+    type: 'reset';
+} | {
+    type: 'loadAnnotation';
+    data: {
+        id: AnnotationId;
+        markState?: AnnotationMarkStates;
+    }[];
+} | {
+    type: 'updateAnnotation';
+    data: {
+        id: AnnotationId;
+        selected?: boolean;
+        hovered?: boolean;
+        markState?: AnnotationMarkStates;
+    };
+} | {
+    type: 'resetSelectedAnnotation';
+} | {
+    type: 'resetHoveredAnnotation';
+} | {
+    type: 'setDrafting';
+    data: {
+        isDrafting: boolean;
+        draftId: string | undefined;
+        draftActionResult: ActionResult | undefined;
+    };
+} | {
+    type: 'setDraftMarkRef';
+    data: {
+        draftMarkRef: HTMLElement | undefined;
+    };
+} | {
+    type: 'setSelectedMarkRef';
+    data: {
+        markRef: HTMLElement | undefined;
+    };
+};
+export declare const AnnotationManagerProvider: ({ children, annotationManager, updateSubscriber, }: {
+    children?: ReactNode;
+    annotationManager?: AnnotationManager | undefined;
+    updateSubscriber?: AnnotationUpdateEmitter | undefined;
+}) => React.JSX.Element;
+export declare const useAnnotationManagerState: () => AnnotationManagerStateContext;
+export declare const useAnnotationManagerDispatch: () => AnnotationManagerDispatchContext;
+export {};

package/dist/types/ui/annotations/draft/component.d.ts

@@ -1,8 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { Position } from '../types';
 import { InsertDraftPosition } from '../types';
-import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { TextHighlighter } from '../../../react/types';
 export declare const AnnotationDraft: ({ draftPosition, children, }: React.PropsWithChildren<{
     draftPosition: Position;

package/dist/types/ui/annotations/element/mark.d.ts

@@ -27,6 +27,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -41,6 +42,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -58,6 +60,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -77,6 +80,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -94,6 +98,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -113,6 +118,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 }, string | React.JSXElementConstructor<any>>;
 export {};

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

@@ -3,4 +3,5 @@ import { type AnnotationsWrapperProps } from './types';
 export declare const AnnotationsPositionContext: React.Context<{
     startPos: number;
 }>;
+export declare const AnnotationsWrapperInner: (props: Omit<AnnotationsWrapperProps, 'annotationProvider'>) => React.JSX.Element;
 export declare const AnnotationsWrapper: (props: AnnotationsWrapperProps) => React.JSX.Element;