box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/elements/common/annotator-context/useAnnotatorEvents.ts

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { EventEmitter } from 'events';
+import noop from 'lodash/noop';
+import { AnnotationActionEvent, Status } from './types';
+
+export interface UseAnnotatorEventsProps {
+    eventEmitter: EventEmitter;
+    onAnnotationDeleteEnd?: (annotationId: string) => void;
+    onAnnotationDeleteStart?: (annotationId: string) => void;
+    onAnnotationReplyAddEnd?: (eventData: { annotationId: string; reply: Object; requestId: string }) => void;
+    onAnnotationReplyAddStart?: (eventData: { annotationId: string; reply: Object; requestId: string }) => void;
+    onAnnotationReplyDeleteEnd?: (eventData: { annotationId: string; id: string }) => void;
+    onAnnotationReplyDeleteStart?: (eventData: { annotationId: string; id: string }) => void;
+    onAnnotationReplyUpdateEnd?: (eventData: { annotationId: string; reply: Object }) => void;
+    onAnnotationReplyUpdateStart?: (eventData: { annotationId: string; reply: Object }) => void;
+    onAnnotationUpdateEnd?: (annotation: Object) => void;
+    onAnnotationUpdateStart?: (annotation: Object) => void;
+    onSidebarAnnotationSelected?: (annotationId: string) => void;
+}
+
+function useAnnotatorEvents({
+    eventEmitter,
+    onAnnotationDeleteEnd = noop,
+    onAnnotationDeleteStart = noop,
+    onAnnotationReplyAddEnd = noop,
+    onAnnotationReplyAddStart = noop,
+    onAnnotationReplyDeleteEnd = noop,
+    onAnnotationReplyDeleteStart = noop,
+    onAnnotationReplyUpdateEnd = noop,
+    onAnnotationReplyUpdateStart = noop,
+    onAnnotationUpdateEnd = noop,
+    onAnnotationUpdateStart = noop,
+    onSidebarAnnotationSelected = noop,
+}: UseAnnotatorEventsProps) {
+    const emitAnnotationActiveChangeEvent = (annotationId: string | null, fileVersionId: string) => {
+        eventEmitter.emit('annotations_active_change', { annotationId, fileVersionId });
+    };
+
+    const emitAddAnnotationEvent = (annotation: Object, requestId: string, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation,
+            meta: { status, requestId },
+        };
+        eventEmitter.emit('annotations_create', actionEvent);
+    };
+
+    const emitAddAnnotationStartEvent = (annotation: Object, requestId: string) => {
+        emitAddAnnotationEvent(annotation, requestId, Status.PENDING);
+    };
+    const emitAddAnnotationEndEvent = (annotation: Object, requestId: string) => {
+        emitAddAnnotationEvent(annotation, requestId, Status.SUCCESS);
+    };
+
+    const emitDeleteAnnotationEvent = (id: string, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation: { id },
+            meta: { status },
+        };
+        eventEmitter.emit('annotations_delete', actionEvent);
+    };
+
+    const emitDeleteAnnotationStartEvent = (id: string) => {
+        emitDeleteAnnotationEvent(id, Status.PENDING);
+    };
+    const emitDeleteAnnotationEndEvent = (id: string) => {
+        emitDeleteAnnotationEvent(id, Status.SUCCESS);
+        eventEmitter.emit('annotations_remove', id);
+    };
+
+    const emitUpdateAnnotationEvent = (annotation: Object, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation,
+            meta: { status },
+        };
+        eventEmitter.emit('annotations_update', actionEvent);
+    };
+
+    const emitUpdateAnnotationStartEvent = (annotation: Object) => {
+        emitUpdateAnnotationEvent(annotation, Status.PENDING);
+    };
+    const emitUpdateAnnotationEndEvent = (annotation: Object) => {
+        emitUpdateAnnotationEvent(annotation, Status.SUCCESS);
+    };
+
+    const emitUpdateAnnotationReplyEvent = (reply: Object, annotationId: string, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation: { id: annotationId },
+            annotationReply: reply,
+            meta: { status },
+        };
+        eventEmitter.emit('annotations_reply_update', actionEvent);
+    };
+
+    const emitUpdateAnnotationReplyStartEvent = (reply: Object, annotationId: string) => {
+        emitUpdateAnnotationReplyEvent(reply, annotationId, Status.PENDING);
+    };
+    const emitUpdateAnnotationReplyEndEvent = (reply: Object, annotationId: string) => {
+        emitUpdateAnnotationReplyEvent(reply, annotationId, Status.SUCCESS);
+    };
+
+    const emitDeleteAnnotationReplyEvent = (id: string, annotationId: string, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation: { id: annotationId },
+            annotationReply: { id },
+            meta: { status },
+        };
+        eventEmitter.emit('annotations_reply_delete', actionEvent);
+    };
+
+    const emitDeleteAnnotationReplyStartEvent = (id: string, annotationId: string) => {
+        emitDeleteAnnotationReplyEvent(id, annotationId, Status.PENDING);
+    };
+    const emitDeleteAnnotationReplyEndEvent = (id: string, annotationId: string) => {
+        emitDeleteAnnotationReplyEvent(id, annotationId, Status.SUCCESS);
+    };
+
+    const emitAddAnnotationReplyEvent = (reply: Object, annotationId: string, requestId: string, status: Status) => {
+        const actionEvent: AnnotationActionEvent = {
+            annotation: { id: annotationId },
+            annotationReply: reply,
+            meta: { status, requestId },
+        };
+        eventEmitter.emit('annotations_reply_create', actionEvent);
+    };
+
+    const emitAddAnnotationReplyStartEvent = (reply: Object, annotationId: string, requestId: string) => {
+        emitAddAnnotationReplyEvent(reply, annotationId, requestId, Status.PENDING);
+    };
+    const emitAddAnnotationReplyEndEvent = (reply: Object, annotationId: string, requestId: string) => {
+        emitAddAnnotationReplyEvent(reply, annotationId, requestId, Status.SUCCESS);
+    };
+
+    React.useEffect(() => {
+        eventEmitter.addListener('annotations_active_set', onSidebarAnnotationSelected);
+        eventEmitter.addListener('annotations_remove', onAnnotationDeleteEnd);
+        eventEmitter.addListener('annotations_remove_start', onAnnotationDeleteStart);
+        eventEmitter.addListener('sidebar.annotations_update', onAnnotationUpdateEnd);
+        eventEmitter.addListener('sidebar.annotations_update_start', onAnnotationUpdateStart);
+        eventEmitter.addListener('sidebar.annotations_reply_create', onAnnotationReplyAddEnd);
+        eventEmitter.addListener('sidebar.annotations_reply_create_start', onAnnotationReplyAddStart);
+        eventEmitter.addListener('sidebar.annotations_reply_delete', onAnnotationReplyDeleteEnd);
+        eventEmitter.addListener('sidebar.annotations_reply_delete_start', onAnnotationReplyDeleteStart);
+        eventEmitter.addListener('sidebar.annotations_reply_update', onAnnotationReplyUpdateEnd);
+        eventEmitter.addListener('sidebar.annotations_reply_update_start', onAnnotationReplyUpdateStart);
+        return () => {
+            eventEmitter.removeListener('annotations_active_set', onSidebarAnnotationSelected);
+            eventEmitter.removeListener('annotations_remove', onAnnotationDeleteEnd);
+            eventEmitter.removeListener('annotations_remove_start', onAnnotationDeleteStart);
+            eventEmitter.removeListener('sidebar.annotations_update', onAnnotationUpdateEnd);
+            eventEmitter.removeListener('sidebar.annotations_update_start', onAnnotationUpdateStart);
+            eventEmitter.removeListener('sidebar.annotations_reply_create', onAnnotationReplyAddEnd);
+            eventEmitter.removeListener('sidebar.annotations_reply_create_start', onAnnotationReplyAddStart);
+            eventEmitter.removeListener('sidebar.annotations_reply_delete', onAnnotationReplyDeleteEnd);
+            eventEmitter.removeListener('sidebar.annotations_reply_delete_start', onAnnotationReplyDeleteStart);
+            eventEmitter.removeListener('sidebar.annotations_reply_update', onAnnotationReplyUpdateEnd);
+            eventEmitter.removeListener('sidebar.annotations_reply_update_start', onAnnotationReplyUpdateStart);
+        };
+    }, [
+        eventEmitter,
+        onAnnotationDeleteEnd,
+        onAnnotationDeleteStart,
+        onAnnotationReplyAddEnd,
+        onAnnotationReplyAddStart,
+        onAnnotationReplyDeleteEnd,
+        onAnnotationReplyDeleteStart,
+        onAnnotationReplyUpdateEnd,
+        onAnnotationReplyUpdateStart,
+        onAnnotationUpdateEnd,
+        onAnnotationUpdateStart,
+        onSidebarAnnotationSelected,
+    ]);
+
+    return {
+        emitAddAnnotationEndEvent,
+        emitAddAnnotationReplyEndEvent,
+        emitAddAnnotationReplyStartEvent,
+        emitAddAnnotationStartEvent,
+        emitAnnotationActiveChangeEvent,
+        emitDeleteAnnotationEndEvent,
+        emitDeleteAnnotationReplyEndEvent,
+        emitDeleteAnnotationReplyStartEvent,
+        emitDeleteAnnotationStartEvent,
+        emitUpdateAnnotationEndEvent,
+        emitUpdateAnnotationReplyEndEvent,
+        emitUpdateAnnotationReplyStartEvent,
+        emitUpdateAnnotationStartEvent,
+    };
+}
+
+export default useAnnotatorEvents;

package/src/elements/common/annotator-context/withAnnotations.js.flow

@@ -7,47 +7,84 @@
 import * as React from "react";
 import getProp from "lodash/get";
 import { generatePath, match as matchType, matchPath } from "react-router-dom";
+import { Location } from "history";
 import AnnotatorContext from "./AnnotatorContext";
 import {
-  Action,
-  Annotator,
-  AnnotationActionEvent,
-  AnnotatorState,
-  GetMatchPath,
-  MatchParams,
-  Status
+    Action,
+    Annotator,
+    AnnotationActionEvent,
+    AnnotatorState,
+    GetMatchPath,
+    MatchParams,
+    Status
 } from "./types";
-declare var ANNOTATIONS_PATH: any; // "/:sidebar/annotations/:fileVersionId/:annotationId?"
-export interface WithAnnotationsProps {
-  onAnnotator: (annotator: Annotator) => void;
-  onPreviewDestroy: () => void;
-}
-export interface ComponentWithAnnotations {
-  emitActiveChangeEvent: (id: string | null) => void;
-  emitRemoveEvent: (id: string) => void;
-  getAction: (eventData: AnnotationActionEvent) => Action;
-  getAnnotationsPath: (fileVersionId?: string, annotationId?: string) => string;
-  getMatchPath: GetMatchPath;
-  handleActiveChange: (annotationId: string | null) => void;
-  handleAnnotationChangeEvent: (id: string | null) => void;
-  handleAnnotationCreate: (eventData: AnnotationActionEvent) => void;
-  handleAnnotator: (annotator: Annotator) => void;
-  handleAnnotatorEvent: (x: {
-    event: string,
-    data?: mixed,
+export type ActiveChangeEvent = {
+    annotationId: string | null,
+    fileVersionId: string,
+    ...
+};
+export type ActiveChangeEventHandler = (event: ActiveChangeEvent) => void;
+export type ComponentWithAnnotations = {
+    emitActiveAnnotationChangeEvent: (id: string | null) => void,
+    emitAnnotationRemoveEvent: (id: string, isStartEvent?: boolean) => void,
+    emitAnnotationReplyCreateEvent: (
+        reply: Object,
+        requestId: string,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void,
+    emitAnnotationReplyDeleteEvent: (
+        id: string,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void,
+    emitAnnotationReplyUpdateEvent: (
+        reply: Object,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void,
+    emitAnnotationUpdateEvent: (
+        annotation: Object,
+        isStartEvent?: boolean
+    ) => void,
+    getAction: (eventData: AnnotationActionEvent) => Action,
+    getAnnotationsPath: (
+        fileVersionId?: string,
+        annotationId?: string | null
+    ) => string,
+    getMatchPath: GetMatchPath,
+    handleActiveChange: ActiveChangeEventHandler,
+    handleAnnotationChangeEvent: (id: string | null) => void,
+    handleAnnotationCreate: (eventData: AnnotationActionEvent) => void,
+    handleAnnotationDelete: (eventData: AnnotationActionEvent) => void,
+    handleAnnotationFetchError: (x: {
+        error: Error,
+        ...
+    }) => void,
+    handleAnnotationReplyCreate: (eventData: AnnotationActionEvent) => void,
+    handleAnnotationReplyDelete: (eventData: AnnotationActionEvent) => void,
+    handleAnnotationReplyUpdate: (eventData: AnnotationActionEvent) => void,
+    handleAnnotationUpdate: (eventData: AnnotationActionEvent) => void,
+    handleAnnotator: (annotator: Annotator) => void,
+    handlePreviewDestroy: (shouldReset?: boolean) => void,
+    ...
+};
+export type WithAnnotationsProps = {
+    location?: Location,
+    onAnnotator: (annotator: Annotator) => void,
+    onError?: (
+        error: Error,
+        code: string,
+        contextInfo?: { [key: string]: mixed, ... }
+    ) => void,
+    onPreviewDestroy: (shouldReset?: boolean) => void,
     ...
-  }) => void;
-  handlePreviewDestroy: () => void;
-}
+};
 export type WithAnnotationsComponent<P> = React.ComponentClass<
-  P & WithAnnotationsProps
->;
+    P & WithAnnotationsProps
+    >;
+declare var ANNOTATIONS_PATH: any; // "/:sidebar/annotations/:fileVersionId/:annotationId?"
 declare var defaultState: AnnotatorState;
-declare type WithHistoryProps = {
-  history?: History,
-  ...
-};
-declare type ResultProps<P> = P & WithAnnotationsProps & WithHistoryProps;
 declare export default function withAnnotations<P: { [key: string]: any }>(
-  WrappedComponent: React.ComponentType<P>
+    WrappedComponent: React.ComponentType<P>
 ): WithAnnotationsComponent<P>;

package/src/elements/common/annotator-context/withAnnotations.tsx

@@ -13,15 +13,29 @@ export type ActiveChangeEvent = {
 export type ActiveChangeEventHandler = (event: ActiveChangeEvent) => void;
 
 export type ComponentWithAnnotations = {
-    emitActiveChangeEvent: (id: string | null) => void;
-    emitRemoveEvent: (id: string) => void;
+    emitActiveAnnotationChangeEvent: (id: string | null) => void;
+    emitAnnotationRemoveEvent: (id: string, isStartEvent?: boolean) => void;
+    emitAnnotationReplyCreateEvent: (
+        reply: Object,
+        requestId: string,
+        annotationId: string,
+        isStartEvent?: boolean,
+    ) => void;
+    emitAnnotationReplyDeleteEvent: (id: string, annotationId: string, isStartEvent?: boolean) => void;
+    emitAnnotationReplyUpdateEvent: (reply: Object, annotationId: string, isStartEvent?: boolean) => void;
+    emitAnnotationUpdateEvent: (annotation: Object, isStartEvent?: boolean) => void;
     getAction: (eventData: AnnotationActionEvent) => Action;
     getAnnotationsPath: (fileVersionId?: string, annotationId?: string | null) => string;
     getMatchPath: GetMatchPath;
     handleActiveChange: ActiveChangeEventHandler;
     handleAnnotationChangeEvent: (id: string | null) => void;
     handleAnnotationCreate: (eventData: AnnotationActionEvent) => void;
+    handleAnnotationDelete: (eventData: AnnotationActionEvent) => void;
     handleAnnotationFetchError: ({ error }: { error: Error }) => void;
+    handleAnnotationReplyCreate: (eventData: AnnotationActionEvent) => void;
+    handleAnnotationReplyDelete: (eventData: AnnotationActionEvent) => void;
+    handleAnnotationReplyUpdate: (eventData: AnnotationActionEvent) => void;
+    handleAnnotationUpdate: (eventData: AnnotationActionEvent) => void;
     handleAnnotator: (annotator: Annotator) => void;
     handlePreviewDestroy: (shouldReset?: boolean) => void;
 };
@@ -41,6 +55,7 @@ const defaultState: AnnotatorState = {
     activeAnnotationFileVersionId: null,
     activeAnnotationId: null,
     annotation: null,
+    annotationReply: null,
     error: null,
     meta: null,
 };
@@ -65,7 +80,7 @@ export default function withAnnotations<P extends object>(
             this.state = { ...defaultState, activeAnnotationId };
         }
 
-        emitActiveChangeEvent = (id: string | null) => {
+        emitActiveAnnotationChangeEvent = (id: string | null) => {
             const { annotator } = this;
 
             if (!annotator) {
@@ -75,20 +90,96 @@ export default function withAnnotations<P extends object>(
             annotator.emit('annotations_active_set', id);
         };
 
-        emitRemoveEvent = (id: string) => {
+        emitAnnotationRemoveEvent = (id: string, isStartEvent = false) => {
             const { annotator } = this;
 
             if (!annotator) {
                 return;
             }
 
-            annotator.emit('annotations_remove', id);
+            // Event name does not include "sidebar" namespace because of backwards compatibility with Preview
+            const event = isStartEvent ? 'annotations_remove_start' : 'annotations_remove';
+
+            annotator.emit(event, id);
+        };
+
+        emitAnnotationUpdateEvent = (annotation: Object, isStartEvent = false) => {
+            const { annotator } = this;
+
+            if (!annotator) {
+                return;
+            }
+
+            const event = isStartEvent ? 'sidebar.annotations_update_start' : 'sidebar.annotations_update';
+
+            annotator.emit(event, annotation);
+        };
+
+        emitAnnotationReplyCreateEvent = (
+            reply: Object,
+            requestId: string,
+            annotationId: string,
+            isStartEvent = false,
+        ) => {
+            const { annotator } = this;
+
+            if (!annotator) {
+                return;
+            }
+
+            const event = isStartEvent ? 'sidebar.annotations_reply_create_start' : 'sidebar.annotations_reply_create';
+
+            annotator.emit(event, { annotationId, reply, requestId });
+        };
+
+        emitAnnotationReplyDeleteEvent = (id: string, annotationId: string, isStartEvent = false) => {
+            const { annotator } = this;
+
+            if (!annotator) {
+                return;
+            }
+
+            const event = isStartEvent ? 'sidebar.annotations_reply_delete_start' : 'sidebar.annotations_reply_delete';
+
+            annotator.emit(event, { annotationId, id });
+        };
+
+        emitAnnotationReplyUpdateEvent = (reply: Object, annotationId: string, isStartEvent = false) => {
+            const { annotator } = this;
+
+            if (!annotator) {
+                return;
+            }
+
+            const event = isStartEvent ? 'sidebar.annotations_reply_update_start' : 'sidebar.annotations_reply_update';
+
+            annotator.emit(event, { annotationId, reply });
         };
 
         getAction({ meta: { status }, error }: AnnotationActionEvent): Action {
             return status === Status.SUCCESS || error ? Action.CREATE_END : Action.CREATE_START;
         }
 
+        getDeleteAction({ meta: { status }, error }: AnnotationActionEvent): Action {
+            return status === Status.SUCCESS || error ? Action.DELETE_END : Action.DELETE_START;
+        }
+
+        getUpdateAction({ meta: { status }, error }: AnnotationActionEvent): Action {
+            return status === Status.SUCCESS || error ? Action.UPDATE_END : Action.UPDATE_START;
+        }
+
+        getReplyCreateAction({ meta: { status }, error }: AnnotationActionEvent): Action {
+            return status === Status.SUCCESS || error ? Action.REPLY_CREATE_END : Action.REPLY_CREATE_START;
+        }
+
+        getReplyDeleteAction({ meta: { status }, error }: AnnotationActionEvent): Action {
+            return status === Status.SUCCESS || error ? Action.REPLY_DELETE_END : Action.REPLY_DELETE_START;
+        }
+
+        getReplyUpdateAction({ meta: { status }, error }: AnnotationActionEvent): Action {
+            return status === Status.SUCCESS || error ? Action.REPLY_UPDATE_END : Action.REPLY_UPDATE_START;
+        }
+
         getAnnotationsPath(fileVersionId?: string, annotationId?: string | null): string {
             if (!fileVersionId) {
                 return '/activity';
@@ -126,6 +217,64 @@ export default function withAnnotations<P extends object>(
             });
         };
 
+        handleAnnotationDelete = (eventData: AnnotationActionEvent) => {
+            const { annotation = null, error = null, meta = null } = eventData;
+
+            this.setState({
+                action: this.getDeleteAction(eventData),
+                annotation,
+                error,
+                meta,
+            });
+        };
+
+        handleAnnotationUpdate = (eventData: AnnotationActionEvent) => {
+            const { annotation = null, error = null, meta = null } = eventData;
+
+            this.setState({
+                action: this.getUpdateAction(eventData),
+                annotation,
+                error,
+                meta,
+            });
+        };
+
+        handleAnnotationReplyCreate = (eventData: AnnotationActionEvent) => {
+            const { annotation = null, annotationReply = null, error = null, meta = null } = eventData;
+
+            this.setState({
+                action: this.getReplyCreateAction(eventData),
+                annotation,
+                annotationReply,
+                error,
+                meta,
+            });
+        };
+
+        handleAnnotationReplyDelete = (eventData: AnnotationActionEvent) => {
+            const { annotation = null, annotationReply = null, error = null, meta = null } = eventData;
+
+            this.setState({
+                action: this.getReplyDeleteAction(eventData),
+                annotation,
+                annotationReply,
+                error,
+                meta,
+            });
+        };
+
+        handleAnnotationReplyUpdate = (eventData: AnnotationActionEvent) => {
+            const { annotation = null, annotationReply = null, error = null, meta = null } = eventData;
+
+            this.setState({
+                action: this.getReplyUpdateAction(eventData),
+                annotation,
+                annotationReply,
+                error,
+                meta,
+            });
+        };
+
         handleActiveChange: ActiveChangeEventHandler = ({ annotationId, fileVersionId }): void => {
             this.setState({ activeAnnotationFileVersionId: fileVersionId, activeAnnotationId: annotationId });
         };
@@ -142,7 +291,12 @@ export default function withAnnotations<P extends object>(
             this.annotator = annotator;
             this.annotator.addListener('annotations_active_change', this.handleActiveChange);
             this.annotator.addListener('annotations_create', this.handleAnnotationCreate);
+            this.annotator.addListener('annotations_delete', this.handleAnnotationDelete);
             this.annotator.addListener('annotations_fetch_error', this.handleAnnotationFetchError);
+            this.annotator.addListener('annotations_update', this.handleAnnotationUpdate);
+            this.annotator.addListener('annotations_reply_create', this.handleAnnotationReplyCreate);
+            this.annotator.addListener('annotations_reply_delete', this.handleAnnotationReplyDelete);
+            this.annotator.addListener('annotations_reply_update', this.handleAnnotationReplyUpdate);
         };
 
         handlePreviewDestroy = (shouldReset = true): void => {
@@ -153,7 +307,12 @@ export default function withAnnotations<P extends object>(
             if (this.annotator) {
                 this.annotator.removeListener('annotations_active_change', this.handleActiveChange);
                 this.annotator.removeListener('annotations_create', this.handleAnnotationCreate);
+                this.annotator.removeListener('annotations_delete', this.handleAnnotationDelete);
                 this.annotator.removeListener('annotations_fetch_error', this.handleAnnotationFetchError);
+                this.annotator.removeListener('annotations_update', this.handleAnnotationUpdate);
+                this.annotator.removeListener('annotations_reply_create', this.handleAnnotationReplyCreate);
+                this.annotator.removeListener('annotations_reply_delete', this.handleAnnotationReplyDelete);
+                this.annotator.removeListener('annotations_reply_update', this.handleAnnotationReplyUpdate);
             }
 
             this.annotator = null;
@@ -163,8 +322,12 @@ export default function withAnnotations<P extends object>(
             return (
                 <AnnotatorContext.Provider
                     value={{
-                        emitActiveChangeEvent: this.emitActiveChangeEvent,
-                        emitRemoveEvent: this.emitRemoveEvent,
+                        emitActiveAnnotationChangeEvent: this.emitActiveAnnotationChangeEvent,
+                        emitAnnotationRemoveEvent: this.emitAnnotationRemoveEvent,
+                        emitAnnotationReplyCreateEvent: this.emitAnnotationReplyCreateEvent,
+                        emitAnnotationReplyDeleteEvent: this.emitAnnotationReplyDeleteEvent,
+                        emitAnnotationReplyUpdateEvent: this.emitAnnotationReplyUpdateEvent,
+                        emitAnnotationUpdateEvent: this.emitAnnotationUpdateEvent,
                         getAnnotationsMatchPath: this.getMatchPath,
                         getAnnotationsPath: this.getAnnotationsPath,
                         state: this.state,

package/src/elements/common/annotator-context/withAnnotatorContext.js.flow

@@ -8,15 +8,35 @@ import * as React from "react";
 import AnnotatorContext from "./AnnotatorContext";
 import { AnnotatorState, GetMatchPath } from "./types";
 export interface WithAnnotatorContextProps {
-  annotatorState?: AnnotatorState;
-  emitAnnotatorActiveChangeEvent?: (id: string) => void;
-  emitRemoveEvent?: (id: string) => void;
-  getAnnotationsMatchPath?: GetMatchPath;
-  getAnnotationsPath?: (
-    fileVersionId?: string,
-    annotationId?: string
-  ) => string;
+    annotatorState?: AnnotatorState;
+    emitActiveAnnotationChangeEvent?: (id: string) => void;
+    emitAnnotationRemoveEvent?: (id: string, isStartEvent?: boolean) => void;
+    emitAnnotationReplyCreateEvent?: (
+        reply: Object,
+        requestId: string,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void;
+    emitAnnotationReplyDeleteEvent?: (
+        id: string,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void;
+    emitAnnotationReplyUpdateEvent?: (
+        reply: Object,
+        annotationId: string,
+        isStartEvent?: boolean
+    ) => void;
+    emitAnnotationUpdateEvent?: (
+        annotation: Object,
+        isStartEvent?: boolean
+    ) => void;
+    getAnnotationsMatchPath?: GetMatchPath;
+    getAnnotationsPath?: (
+        fileVersionId?: string,
+        annotationId?: string
+    ) => string;
 }
 declare export default function withAnnotatorContext<P: { ... }>(
-  WrappedComponent: React.ComponentType<P>
+    WrappedComponent: React.ComponentType<P>
 ): void;

package/src/elements/common/annotator-context/withAnnotatorContext.tsx

@@ -4,8 +4,17 @@ import { AnnotatorState, GetMatchPath } from './types';
 
 export interface WithAnnotatorContextProps {
     annotatorState?: AnnotatorState;
-    emitAnnotatorActiveChangeEvent?: (id: string) => void;
-    emitRemoveEvent?: (id: string) => void;
+    emitActiveAnnotationChangeEvent?: (id: string) => void;
+    emitAnnotationRemoveEvent?: (id: string, isStartEvent?: boolean) => void;
+    emitAnnotationReplyCreateEvent?: (
+        reply: Object,
+        requestId: string,
+        annotationId: string,
+        isStartEvent?: boolean,
+    ) => void;
+    emitAnnotationReplyDeleteEvent?: (id: string, annotationId: string, isStartEvent?: boolean) => void;
+    emitAnnotationReplyUpdateEvent?: (reply: Object, annotationId: string, isStartEvent?: boolean) => void;
+    emitAnnotationUpdateEvent?: (annotation: Object, isStartEvent?: boolean) => void;
     getAnnotationsMatchPath?: GetMatchPath;
     getAnnotationsPath?: (fileVersionId?: string, annotationId?: string) => string;
 }
@@ -13,13 +22,27 @@ export interface WithAnnotatorContextProps {
 export default function withAnnotatorContext<P extends {}>(WrappedComponent: React.ComponentType<P>) {
     return React.forwardRef<React.RefForwardingComponent<React.ComponentType<P>>, P>((props, ref) => (
         <AnnotatorContext.Consumer>
-            {({ emitActiveChangeEvent, emitRemoveEvent, getAnnotationsMatchPath, getAnnotationsPath, state }) => (
+            {({
+                emitActiveAnnotationChangeEvent,
+                emitAnnotationRemoveEvent,
+                emitAnnotationReplyCreateEvent,
+                emitAnnotationReplyDeleteEvent,
+                emitAnnotationReplyUpdateEvent,
+                emitAnnotationUpdateEvent,
+                getAnnotationsMatchPath,
+                getAnnotationsPath,
+                state,
+            }) => (
                 <WrappedComponent
                     ref={ref}
                     {...props}
                     annotatorState={state}
-                    emitAnnotatorActiveChangeEvent={emitActiveChangeEvent}
-                    emitRemoveEvent={emitRemoveEvent}
+                    emitActiveAnnotationChangeEvent={emitActiveAnnotationChangeEvent}
+                    emitAnnotationRemoveEvent={emitAnnotationRemoveEvent}
+                    emitAnnotationReplyCreateEvent={emitAnnotationReplyCreateEvent}
+                    emitAnnotationReplyDeleteEvent={emitAnnotationReplyDeleteEvent}
+                    emitAnnotationReplyUpdateEvent={emitAnnotationReplyUpdateEvent}
+                    emitAnnotationUpdateEvent={emitAnnotationUpdateEvent}
                     getAnnotationsMatchPath={getAnnotationsMatchPath}
                     getAnnotationsPath={getAnnotationsPath}
                 />