@atlaskit/renderer 115.0.2 → 115.0.4

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

@@ -1,13 +1,21 @@
-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 const useAnnotationStateByTypeEvent = ({
   type,
   updateSubscriber
 }) => {
   const [states, setStates] = useState({});
+  const {
+    dispatch
+  } = useAnnotationManagerDispatch();
+  const {
+    annotations
+  } = useAnnotationManagerState();
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -32,12 +40,26 @@ export const useAnnotationStateByTypeEvent = ({
         ...nextStates
       });
     };
-    updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
-    return () => {
-      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 () => {
+        updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
+      };
+    }
+  }, [states, type, updateSubscriber, dispatch]);
+  const annotationMarkStates = useMemo(() => {
+    return Object.values(annotations).reduce((acc, curr) => {
+      return {
+        ...acc,
+        [curr.id]: curr.markState
+      };
+    }, {});
+  }, [annotations]);
+  if (fg('platform_editor_comments_api_manager')) {
+    return annotationMarkStates;
+  } else {
+    return states;
+  }
 };
 export const useHasFocusEvent = ({
   id,
@@ -45,6 +67,10 @@ export const useHasFocusEvent = ({
 }) => {
   const [hasFocus, setHasFocus] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const {
+    currentSelectedAnnotationId,
+    currentHoveredAnnotationId
+  } = useAnnotationManagerState();
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -67,21 +93,30 @@ export const useHasFocusEvent = ({
         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 () => {
-      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 () => {
+        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,
-    isHovered
-  };
+  if (fg('platform_editor_comments_api_manager')) {
+    return {
+      hasFocus: currentSelectedAnnotationId === id,
+      isHovered: currentHoveredAnnotationId === id
+    };
+  } else {
+    return {
+      hasFocus,
+      isHovered
+    };
+  }
 };
 export const useAnnotationClickEvent = props => {
   const [annotationClickEvent, setAnnotationClickEvent] = useState(null);
@@ -90,6 +125,22 @@ export const useAnnotationClickEvent = props => {
     createAnalyticsEvent,
     isNestedRender
   } = props;
+  const {
+    currentSelectedAnnotationId,
+    currentSelectedMarkRef
+  } = useAnnotationManagerState();
+  const selectedAnnotation = useMemo(() => {
+    return currentSelectedAnnotationId && currentSelectedMarkRef ? {
+      annotations: [{
+        id: currentSelectedAnnotationId,
+        type: AnnotationTypes.INLINE_COMMENT
+      }],
+      clickElementTarget: currentSelectedMarkRef
+    } : {
+      annotations: [],
+      clickElementTarget: undefined
+    };
+  }, [currentSelectedAnnotationId, currentSelectedMarkRef]);
   useLayoutEffect(() => {
     if (!updateSubscriber || isNestedRender) {
       return;
@@ -131,12 +182,18 @@ export const useAnnotationClickEvent = props => {
         document.activeElement.blur();
       }
     };
-    updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
-    updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
-    return () => {
-      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 () => {
+        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/es2019/ui/annotations/hooks/use-load-annotations.js

@@ -3,6 +3,7 @@ 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 const useLoadAnnotations = ({
   adfDocument,
   isNestedRender,
@@ -10,6 +11,9 @@ export const useLoadAnnotations = ({
 }) => {
   const actions = useContext(ActionsContext);
   const providers = useContext(ProvidersContext);
+  const {
+    dispatch
+  } = useAnnotationManagerDispatch();
   useEffect(() => {
     if (!providers) {
       return;
@@ -41,11 +45,24 @@ export const useLoadAnnotations = ({
         ...acc,
         [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(id => {
+            var _payload$id$state;
+            return {
+              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(data => data.state === 'active').length
       });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete]);
+  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete, dispatch]);
 };

package/dist/es2019/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';
 const LoadAnnotations = /*#__PURE__*/React.memo(({
   adfDocument,
   isNestedRender,
@@ -28,17 +30,17 @@ const LoadAnnotations = /*#__PURE__*/React.memo(({
 export const AnnotationsPositionContext = /*#__PURE__*/React.createContext({
   startPos: 1
 });
-export const AnnotationsWrapper = props => {
-  var _annotationProvider$i, _annotationProvider$i2;
+export const AnnotationsWrapperInner = props => {
+  var _providers$inlineComm, _providers$inlineComm2;
   const {
     children,
-    annotationProvider,
     rendererRef,
     adfDocument,
     isNestedRender,
     onLoadComplete
   } = props;
-  const updateSubscriber = annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.updateSubscriber;
+  const providers = useContext(ProvidersContext);
+  const updateSubscriber = providers && providers.inlineComment && providers.inlineComment.updateSubscriber;
   const inlineCommentAnnotationsState = useAnnotationStateByTypeEvent({
     type: AnnotationTypes.INLINE_COMMENT,
     updateSubscriber: updateSubscriber || null
@@ -46,12 +48,10 @@ export const AnnotationsWrapper = props => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  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 ? 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 ? 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,
@@ -63,5 +63,42 @@ export const AnnotationsWrapper = props => {
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     isNestedRender: isNestedRender,
     createAnalyticsEvent: createAnalyticsEvent
-  }), children)))));
+  }), children))));
+};
+export const AnnotationsWrapper = props => {
+  const {
+    children,
+    annotationProvider,
+    rendererRef,
+    adfDocument,
+    isNestedRender,
+    onLoadComplete
+  } = props;
+  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 ? 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/es2019/ui/annotations/selection/mounter.js

@@ -1,11 +1,13 @@
-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 const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
@@ -23,6 +25,14 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   } = props;
   const [draftDocumentPosition, setDraftDocumentPosition] = useState();
   const actions = useContext(ActionsContext);
+  const {
+    isDrafting,
+    draftId
+  } = useAnnotationManagerState();
+  const {
+    annotationManager,
+    dispatch
+  } = useAnnotationManagerDispatch();
   const inlineNodeTypes = useMemo(() => {
     if (fg('annotations_defensive_node_name_calculations')) {
       if (!actions.isRangeAnnotatable(range)) {
@@ -175,6 +185,167 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     removeDraftModeCallback();
     onCloseProps();
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent, inlineNodeTypes]);
+  useEffect(() => {
+    if (fg('platform_editor_comments_api_manager')) {
+      const allowAnnotation = () => {
+        if (isDrafting) {
+          return false;
+        }
+        return isAnnotationAllowed;
+      };
+      annotationManager === null || annotationManager === void 0 ? void 0 : annotationManager.hook('allowAnnotation', allowAnnotation);
+      return () => {
+        annotationManager === null || annotationManager === void 0 ? void 0 : annotationManager.unhook('allowAnnotation', allowAnnotation);
+      };
+    }
+  }, [annotationManager, isAnnotationAllowed, isDrafting]);
+  useEffect(() => {
+    if (fg('platform_editor_comments_api_manager')) {
+      const startDraft = () => {
+        var _result$inlineNodeTyp;
+        if (isDrafting) {
+          return {
+            success: false,
+            reason: 'draft-in-progress'
+          };
+        }
+        if (!actions.isValidAnnotationRange(range)) {
+          return {
+            success: false,
+            reason: 'invalid-range'
+          };
+        }
+        const id = uuid();
+        const 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 ? void 0 : annotationManager.hook('startDraft', startDraft);
+      return () => {
+        annotationManager === null || annotationManager === void 0 ? void 0 : annotationManager.unhook('startDraft', startDraft);
+      };
+    }
+  }, [annotationManager, isDrafting, applyDraftModeCallback, actions, range, dispatch]);
+  useEffect(() => {
+    if (fg('platform_editor_comments_api_manager')) {
+      const 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 ? void 0 : annotationManager.hook('clearDraft', clearDraft);
+      return () => {
+        annotationManager === null || annotationManager === void 0 ? void 0 : annotationManager.unhook('clearDraft', clearDraft);
+      };
+    }
+  }, [annotationManager, onCloseCallback, isDrafting, dispatch]);
+  useEffect(() => {
+    if (fg('platform_editor_comments_api_manager')) {
+      const applyDraft = id => {
+        if (!isDrafting || !draftId) {
+          return {
+            success: false,
+            reason: 'draft-not-started'
+          };
+        }
+        const 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,
+            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 ? void 0 : annotationManager.hook('applyDraft', applyDraft);
+      return () => {
+        annotationManager === null || annotationManager === void 0 ? 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.
+  const nop = useMemo(() => () => false, []);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
     draftRange: draftRange
@@ -183,11 +354,11 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     ,
     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/esm/ui/Renderer/index.js

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