box-annotations 5.2.1-beta.8 → 5.3.1-beta.0

package/src/region/RegionCreator.tsx

@@ -4,6 +4,7 @@ import PointerCapture, { Status as DrawingStatus } from '../components/PointerCa
 import PopupCursor from '../components/Popups/PopupCursor';
 import RegionRect, { RegionRectRef } from './RegionRect';
 import useAutoScroll from '../common/useAutoScroll';
+import { getElementLocalPosition } from '../utils/rotate';
 import { Rect } from '../@types';
 import { styleShape } from './regionUtil';
 import './RegionCreator.scss';
@@ -13,6 +14,7 @@ type Props = {
     onAbort: () => void;
     onStart: () => void;
     onStop: (shape: Rect) => void;
+    rotation?: number;
 };
 
 const MIN_X = 0; // Minimum region x position must be positive
@@ -22,7 +24,7 @@ const MIN_SIZE = 10; // Minimum region size must be large enough to be clickable
 const isValid = (x1: number, y1: number, x2: number, y2: number): boolean =>
     Math.abs(x2 - x1) >= MIN_SIZE || Math.abs(y2 - y1) >= MIN_SIZE;
 
-export default function RegionCreator({ className, onAbort, onStart, onStop }: Props): JSX.Element {
+export default function RegionCreator({ className, onAbort, onStart, onStop, rotation = 0 }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
     const [isHovering, setIsHovering] = React.useState<boolean>(false);
     const creatorElRef = React.useRef<HTMLDivElement>(null);
@@ -34,18 +36,6 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
     const regionRectRef = React.useRef<RegionRectRef>(null);
     const renderHandleRef = React.useRef<number | null>(null);
 
-    // Drawing Helpers
-    const getPosition = (x: number, y: number): [number, number] => {
-        const { current: creatorEl } = creatorElRef;
-
-        if (!creatorEl) {
-            return [x, y];
-        }
-
-        // Calculate the new position based on the mouse position less the page offset
-        const { left, top } = creatorEl.getBoundingClientRect();
-        return [x - left, y - top];
-    };
     const getShape = (): Rect | null => {
         const { current: creatorEl } = creatorElRef;
         const { current: x1 } = positionX1Ref;
@@ -57,7 +47,9 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
             return null;
         }
 
-        const { height, width } = creatorEl.getBoundingClientRect();
+        // Get the element's dimensions (before any rotation is applied)
+        const width = creatorEl.offsetWidth;
+        const height = creatorEl.offsetHeight;
         const MAX_HEIGHT = height - MIN_SIZE;
         const MAX_WIDTH = width - MIN_SIZE;
         const MAX_X = Math.max(0, width - MIN_X);
@@ -88,7 +80,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
 
     // Drawing Lifecycle Callbacks
     const startDraw = (x: number, y: number): void => {
-        const [x1, y1] = getPosition(x, y);
+        const [x1, y1] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
 
         setDrawingStatus(DrawingStatus.dragging);
 
@@ -119,7 +111,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
 
     const updateDraw = React.useCallback(
         (x: number, y: number): void => {
-            const [x2, y2] = getPosition(x, y);
+            const [x2, y2] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
             const { current: x1 } = positionX1Ref;
             const { current: y1 } = positionY1Ref;
             const { current: prevX2 } = positionX2Ref;
@@ -138,7 +130,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
                 onStart();
             }
         },
-        [drawingStatus, onStart, setDrawingStatus],
+        [drawingStatus, onStart, rotation, setDrawingStatus],
     );
 
     // Event Handlers

package/src/region/RegionManager.tsx

@@ -14,6 +14,13 @@ export default class RegionListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<RegionAnnotationsContainer location={this.location} referenceEl={this.referenceEl} targetType={this.targetType} {...props} />);
+        this.root.render(
+            <RegionAnnotationsContainer
+                location={this.location}
+                referenceEl={this.referenceEl}
+                targetType={this.targetType}
+                {...props}
+            />,
+        );
     }
 }

package/src/region/RegionRect.scss

@@ -2,7 +2,7 @@
 
 $ba-RegionRect-color: $bdl-yellorange;
 $ba-RegionRect-bgColor--default: rgba($ba-RegionRect-color, 0); // Default color uses zero alpha value for transition
-$ba-RegionRect-bgColor--hover: rgba($ba-RegionRect-color, .1);
+$ba-RegionRect-bgColor--hover: rgba($ba-RegionRect-color, 0.1);
 $ba-RegionRect-bgColor--active: rgba($ba-RegionRect-color, 0);
 $ba-RegionRect-transitionDelay: 25ms;
 $ba-RegionRect-transitionDuration: 200ms;
@@ -21,29 +21,37 @@ $ba-RegionRect-transitionDuration: 200ms;
 
     &::after {
         position: absolute;
-        top: $border-size-outer;
-        right: $border-size-outer;
-        bottom: $border-size-outer;
-        left: $border-size-outer;
+        inset: $border-size-outer;
         display: block;
         background-color: $ba-RegionRect-bgColor--default;
         border-radius: $border-radius;
-        box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, .6), 0 0 0 0 rgba(0, 0, 0, 0);
-        transition: background-color $ba-RegionRect-transitionDuration ease, box-shadow $ba-RegionRect-transitionDuration ease;
+        box-shadow:
+            0 0 0 $border-size-inner rgba($white, 1),
+            0 0 0 $border-size-outer rgba($ba-RegionRect-color, 0.6),
+            0 0 0 0 rgb(0 0 0 / 0%);
+        transition:
+            background-color $ba-RegionRect-transitionDuration ease,
+            box-shadow $ba-RegionRect-transitionDuration ease;
         content: '';
     }
 
     &:hover {
         &::after {
             background-color: $ba-RegionRect-bgColor--hover;
-            box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1), 0 8px 16px 0 rgba(0, 0, 0, .1);
+            box-shadow:
+                0 0 0 $border-size-inner rgba($white, 1),
+                0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1),
+                0 8px 16px 0 rgb(0 0 0 / 10%);
         }
     }
 
     &.is-active {
         &::after {
             background-color: $ba-RegionRect-bgColor--active;
-            box-shadow: 0 0 0 $border-size-inner rgba($ba-RegionRect-color, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1), 0 8px 52px 0 rgba(0, 0, 0, .2);
+            box-shadow:
+                0 0 0 $border-size-inner rgba($ba-RegionRect-color, 1),
+                0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1),
+                0 8px 52px 0 rgb(0 0 0 / 20%);
             transition-delay: $ba-RegionRect-transitionDelay;
         }
     }

package/src/store/annotations/actions.ts

@@ -53,27 +53,24 @@ export const createReplyAction = createAsyncThunk<
     { annotationId: string; reply: Reply },
     { annotationId: string; message: string },
     AppThunkAPI
->(
-    'CREATE_REPLY',
-    async ({ annotationId, message }, { extra, getState, signal }) => {
-        const client = extra.api.getAnnotationsAPI();
-        const state = getState();
-        const fileId = getFileId(state);
-        const filePermissions = getPermissions(state);
-        const annotation = getAnnotation(state, annotationId);
-        const permissions = { ...filePermissions, ...annotation?.permissions };
+>('CREATE_REPLY', async ({ annotationId, message }, { extra, getState, signal }) => {
+    const client = extra.api.getAnnotationsAPI();
+    const state = getState();
+    const fileId = getFileId(state);
+    const filePermissions = getPermissions(state);
+    const annotation = getAnnotation(state, annotationId);
+    const permissions = { ...filePermissions, ...annotation?.permissions };
 
-        signal.addEventListener('abort', () => {
-            client.destroy();
-        });
+    signal.addEventListener('abort', () => {
+        client.destroy();
+    });
 
-        const reply = await new Promise<Reply>((resolve, reject) => {
-            client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
-        });
+    const reply = await new Promise<Reply>((resolve, reject) => {
+        client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
+    });
 
-        return { annotationId, reply };
-    },
-);
+    return { annotationId, reply };
+});
 
 export const deleteAnnotationAction = createAsyncThunk<string, string, AppThunkAPI>(
     'DELETE_ANNOTATION',
@@ -101,25 +98,99 @@ export const updateAnnotationAction = createAsyncThunk<
     Annotation,
     { annotationId: string; payload: { message?: string; status?: string } },
     AppThunkAPI
->(
-    'UPDATE_ANNOTATION',
-    async ({ annotationId, payload }, { extra, getState, signal }) => {
-        const client = extra.api.getAnnotationsAPI();
-        const state = getState();
-        const fileId = getFileId(state);
-        const filePermissions = getPermissions(state);
-        const existingAnnotation = getAnnotation(state, annotationId);
-        const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
-
-        signal.addEventListener('abort', () => {
-            client.destroy();
+>('UPDATE_ANNOTATION', async ({ annotationId, payload }, { extra, getState, signal }) => {
+    const client = extra.api.getAnnotationsAPI();
+    const state = getState();
+    const fileId = getFileId(state);
+    const filePermissions = getPermissions(state);
+    const existingAnnotation = getAnnotation(state, annotationId);
+    const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
+
+    signal.addEventListener('abort', () => {
+        client.destroy();
+    });
+
+    return new Promise<Annotation>((resolve, reject) => {
+        client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
+    });
+});
+
+export const updateReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; replyId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>('UPDATE_REPLY', async ({ annotationId, replyId, payload }, { extra, getState, signal }) => {
+    const client = extra.api.getThreadedCommentsAPI();
+    const state = getState();
+    const fileId = getFileId(state);
+    const annotation = getAnnotation(state, annotationId);
+    const reply = annotation?.replies?.find(r => r.id === replyId);
+
+    if (!reply) {
+        throw new Error(`updateReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+    }
+
+    signal.addEventListener('abort', () => {
+        client.destroy();
+    });
+
+    const updated = await new Promise<Reply>((resolve, reject) => {
+        client.updateComment({
+            commentId: replyId,
+            errorCallback: reject,
+            fileId,
+            message: payload.message,
+            permissions: reply.permissions ?? {},
+            status: payload.status,
+            successCallback: resolve,
         });
+    });
 
-        return new Promise<Annotation>((resolve, reject) => {
-            client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
+    return { annotationId, reply: updated };
+});
+
+export const deleteReplyAction = createAsyncThunk<
+    { annotationId: string; replyId: string },
+    { annotationId: string; replyId: string },
+    AppThunkAPI
+>('DELETE_REPLY', async ({ annotationId, replyId }, { extra, getState, signal }) => {
+    const client = extra.api.getThreadedCommentsAPI();
+    const state = getState();
+    const fileId = getFileId(state);
+    const annotation = getAnnotation(state, annotationId);
+    const reply = annotation?.replies?.find(r => r.id === replyId);
+
+    if (!reply) {
+        throw new Error(`deleteReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+    }
+
+    signal.addEventListener('abort', () => {
+        client.destroy();
+    });
+
+    await new Promise<void>((resolve, reject) => {
+        client.deleteComment({
+            commentId: replyId,
+            errorCallback: reject,
+            fileId,
+            permissions: reply.permissions ?? {},
+            successCallback: resolve,
         });
-    },
+    });
+
+    return { annotationId, replyId };
+});
+
+export type SidebarAnnotationUpdatePayload = Partial<Annotation> & { id: string };
+export type SidebarReplyMutationPayload = { annotationId: string; reply: Reply };
+export type SidebarReplyDeletePayload = { annotationId: string; replyId: string };
+
+export const applySidebarAnnotationUpdateAction = createAction<SidebarAnnotationUpdatePayload>(
+    'APPLY_SIDEBAR_ANNOTATION_UPDATE',
 );
+export const applySidebarReplyCreateAction = createAction<SidebarReplyMutationPayload>('APPLY_SIDEBAR_REPLY_CREATE');
+export const applySidebarReplyDeleteAction = createAction<SidebarReplyDeletePayload>('APPLY_SIDEBAR_REPLY_DELETE');
+export const applySidebarReplyUpdateAction = createAction<SidebarReplyMutationPayload>('APPLY_SIDEBAR_REPLY_UPDATE');
 
 export const removeAnnotationAction = createAction<string>('REMOVE_ANNOTATION');
 export const setActiveAnnotationIdAction = createAction<string | null>('SET_ACTIVE_ANNOTATION_ID');

package/src/store/annotations/reducer.ts

@@ -2,14 +2,20 @@ import { createReducer, combineReducers } from '@reduxjs/toolkit';
 import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
+    applySidebarAnnotationUpdateAction,
+    applySidebarReplyCreateAction,
+    applySidebarReplyDeleteAction,
+    applySidebarReplyUpdateAction,
     createAnnotationAction,
     createReplyAction,
     deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
     updateAnnotationAction,
+    updateReplyAction,
 } from './actions';
 import { setViewModeAction } from '../options/actions';
 
@@ -31,7 +37,9 @@ const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder
         .addCase(createAnnotationAction.fulfilled, (state, { payload: { id } }) => {
             state.push(id);
         })
-        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) =>
+            state.filter(annotationId => annotationId !== id),
+        )
         .addCase(removeAnnotationAction, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(({ id }) => state.indexOf(id) === -1 && state.push(id));
@@ -58,6 +66,46 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .addCase(updateAnnotationAction.fulfilled, (state, { payload }) => {
             state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
+        .addCase(updateReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.map(existing => (existing.id === reply.id ? reply : existing));
+            }
+        })
+        .addCase(deleteReplyAction.fulfilled, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+            }
+        })
+        .addCase(applySidebarAnnotationUpdateAction, (state, { payload }) => {
+            const existing = state[payload.id];
+            if (!existing) return;
+            Object.entries(payload).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    (existing as Record<string, unknown>)[key] = value;
+                }
+            });
+        })
+        .addCase(applySidebarReplyCreateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation) return;
+            const replies = annotation.replies ?? [];
+            if (replies.some(existing => existing.id === reply.id)) return;
+            annotation.replies = [...replies, reply];
+        })
+        .addCase(applySidebarReplyUpdateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.map(existing =>
+                existing.id === reply.id ? { ...existing, ...reply } : existing,
+            );
+        })
+        .addCase(applySidebarReplyDeleteAction, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+        })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;

package/src/store/creator/selectors.ts

@@ -11,13 +11,13 @@ export const getCreatorStaged = (state: State): CreatorItem | null => state.crea
 export const getCreatorStagedForLocation = (state: State, location: number): CreatorItem | null => {
     const staged = getCreatorStaged(state);
     // The location is typically a page and this selector was originally meant to only return the staged annotation
-    // (those that have been drawn but not saved) that belong to the page specified by the location. For documents, 
-    // the annotator creates new sets of managers(highlights, drawings, regions) for each page with the current 
-    // page number being the location e.g. page 4 of 10. This selector prevents a staged annotation from staying on 
-    // the screen when a user navigates to a different page. By default, the location value for managers is 1 which is  
+    // (those that have been drawn but not saved) that belong to the page specified by the location. For documents,
+    // the annotator creates new sets of managers(highlights, drawings, regions) for each page with the current
+    // page number being the location e.g. page 4 of 10. This selector prevents a staged annotation from staying on
+    // the screen when a user navigates to a different page. By default, the location value for managers is 1 which is
     // why this selector works for images. Video annotations will not work this way because they reference a timestamp, not a page,
-    // and the drawing canvas is the video player which has no pages. In this case, we just need to get the staged annotation and do the 
-    // locaton check for MEDIA_LOCATION_INDEX. The MEDIA_LOCATION_INDEX is a special value, set in the manager, that is used to indicate that 
+    // and the drawing canvas is the video player which has no pages. In this case, we just need to get the staged annotation and do the
+    // locaton check for MEDIA_LOCATION_INDEX. The MEDIA_LOCATION_INDEX is a special value, set in the manager, that is used to indicate that
     // the this is actually a staged video annotation with a timestamp as its location.
     if (location === MEDIA_LOCATION_INDEX) {
         return staged;

package/src/store/eventing/create.ts

@@ -1,9 +1,9 @@
 import eventManager from '../../common/EventManager';
 import { AsyncAction, Status } from './types';
 import { AppState } from '../types';
-import { Event } from '../../@types';
+import { Annotation, Event, NewAnnotation } from '../../@types';
 
-const emitCreateEvent = (action: AsyncAction, status: Status): void => {
+const emitCreateEvent = (action: AsyncAction<NewAnnotation, Annotation>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     eventManager.emit(Event.ANNOTATION_CREATE, {
         annotation: payload || arg,
@@ -15,8 +15,10 @@ const emitCreateEvent = (action: AsyncAction, status: Status): void => {
     });
 };
 
-const createHandler = (status: Status) => (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
-    emitCreateEvent(action, status);
+const createHandler =
+    (status: Status) =>
+    (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
+        emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
 
 const handleCreateErrorEvents = createHandler(Status.ERROR);
 const handleCreatePendingEvents = createHandler(Status.PENDING);

package/src/store/eventing/delete.ts

@@ -0,0 +1,26 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+const emitDeleteEvent = (action: AsyncAction<string, string>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const id = payload ?? arg;
+    eventManager.emit(Event.ANNOTATION_DELETE, {
+        annotation: id ? { id } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const deleteHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitDeleteEvent(action as AsyncAction<string, string>, status);
+
+const handleDeleteErrorEvents = deleteHandler(Status.ERROR);
+const handleDeletePendingEvents = deleteHandler(Status.PENDING);
+const handleDeleteSuccessEvents = deleteHandler(Status.SUCCESS);
+
+export { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents };

package/src/store/eventing/middleware.ts

@@ -2,28 +2,58 @@ import noop from 'lodash/noop';
 import { Action, Dispatch, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 import {
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
+    updateReplyAction,
 } from '../annotations/actions';
 import { navigateBoundingBoxHighlightAction } from '../boundingBoxHighlights/actions';
 import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
 import { handleAnnotationsInitialized } from './init';
+import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
+import { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents } from './delete';
 import { handleFetchErrorEvents } from './fetch';
-import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
+import { handleToggleAnnotationModeAction } from './mode';
+import {
+    handleReplyCreateErrorEvents,
+    handleReplyCreatePendingEvents,
+    handleReplyCreateSuccessEvents,
+} from './replyCreate';
+import {
+    handleReplyDeleteErrorEvents,
+    handleReplyDeletePendingEvents,
+    handleReplyDeleteSuccessEvents,
+} from './replyDelete';
+import {
+    handleReplyUpdateErrorEvents,
+    handleReplyUpdatePendingEvents,
+    handleReplyUpdateSuccessEvents,
+} from './replyUpdate';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
 import { handleSetStatusAction } from './status';
-import { handleToggleAnnotationModeAction } from './mode';
+import { handleUpdateErrorEvents, handleUpdatePendingEvents, handleUpdateSuccessEvents } from './update';
 import { resetCreatorAction, setStagedAction, setStatusAction } from '../creator';
 import { toggleAnnotationModeAction } from '../common/actions';
 
-// Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
-const eventHandlers: EventHandlerMap = {
+export const eventHandlers: EventHandlerMap = {
     [createAnnotationAction.fulfilled.toString()]: handleCreateSuccessEvents,
     [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.rejected.toString()]: handleCreateErrorEvents,
+    [createReplyAction.fulfilled.toString()]: handleReplyCreateSuccessEvents,
+    [createReplyAction.pending.toString()]: handleReplyCreatePendingEvents,
+    [createReplyAction.rejected.toString()]: handleReplyCreateErrorEvents,
+    [deleteAnnotationAction.fulfilled.toString()]: handleDeleteSuccessEvents,
+    [deleteAnnotationAction.pending.toString()]: handleDeletePendingEvents,
+    [deleteAnnotationAction.rejected.toString()]: handleDeleteErrorEvents,
+    [deleteReplyAction.fulfilled.toString()]: handleReplyDeleteSuccessEvents,
+    [deleteReplyAction.pending.toString()]: handleReplyDeletePendingEvents,
+    [deleteReplyAction.rejected.toString()]: handleReplyDeleteErrorEvents,
     [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
     [navigateBoundingBoxHighlightAction.toString()]: handleNavigateBoundingBoxHighlight,
     [resetCreatorAction.toString()]: handleResetCreatorAction,
@@ -32,22 +62,30 @@ const eventHandlers: EventHandlerMap = {
     [setStagedAction.toString()]: handleSetStagedAction,
     [setStatusAction.toString()]: handleSetStatusAction,
     [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
+    [updateAnnotationAction.fulfilled.toString()]: handleUpdateSuccessEvents,
+    [updateAnnotationAction.pending.toString()]: handleUpdatePendingEvents,
+    [updateAnnotationAction.rejected.toString()]: handleUpdateErrorEvents,
+    [updateReplyAction.fulfilled.toString()]: handleReplyUpdateSuccessEvents,
+    [updateReplyAction.pending.toString()]: handleReplyUpdatePendingEvents,
+    [updateReplyAction.rejected.toString()]: handleReplyUpdateErrorEvents,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {
-    return (store: MiddlewareAPI) => (next: Dispatch) => (action: Action): Action => {
-        const { type } = action;
-        // Retrieve the prevState as well as the nextState after the action has modified the state in order
-        // to pass all that information to the event handler
-        const prevState = store.getState();
-        const result = next(action);
-        const nextState = store.getState();
+    return (store: MiddlewareAPI) =>
+        (next: Dispatch) =>
+        (action: Action): Action => {
+            const { type } = action;
+            // Retrieve the prevState as well as the nextState after the action has modified the state in order
+            // to pass all that information to the event handler
+            const prevState = store.getState();
+            const result = next(action);
+            const nextState = store.getState();
 
-        const handler = handlers[type] || noop;
-        handler(prevState, nextState, action);
+            const handler = handlers[type] || noop;
+            handler(prevState, nextState, action);
 
-        return result;
-    };
+            return result;
+        };
 }
 
 export default getEventingMiddleware;

package/src/store/eventing/replyCreate.ts

@@ -0,0 +1,30 @@
+import eventManager from '../../common/EventManager';
+import { Reply, Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type ReplyCreateArg = { annotationId: string; message: string };
+type ReplyCreatePayload = { annotationId: string; reply: Reply };
+
+const emitReplyCreateEvent = (action: AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload?.reply) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    eventManager.emit(Event.ANNOTATION_REPLY_CREATE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: payload?.reply,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyCreateHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitReplyCreateEvent(action as AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status);
+
+const handleReplyCreateErrorEvents = replyCreateHandler(Status.ERROR);
+const handleReplyCreatePendingEvents = replyCreateHandler(Status.PENDING);
+const handleReplyCreateSuccessEvents = replyCreateHandler(Status.SUCCESS);
+
+export { handleReplyCreateErrorEvents, handleReplyCreatePendingEvents, handleReplyCreateSuccessEvents };

package/src/store/eventing/replyDelete.ts

@@ -0,0 +1,31 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+type ReplyDeleteArg = { annotationId: string; replyId: string };
+type ReplyDeletePayload = { annotationId: string; replyId: string };
+
+const emitReplyDeleteEvent = (action: AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    const replyId = payload?.replyId ?? arg?.replyId;
+    eventManager.emit(Event.ANNOTATION_REPLY_DELETE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: replyId ? { id: replyId } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyDeleteHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitReplyDeleteEvent(action as AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status);
+
+const handleReplyDeleteErrorEvents = replyDeleteHandler(Status.ERROR);
+const handleReplyDeletePendingEvents = replyDeleteHandler(Status.PENDING);
+const handleReplyDeleteSuccessEvents = replyDeleteHandler(Status.SUCCESS);
+
+export { handleReplyDeleteErrorEvents, handleReplyDeletePendingEvents, handleReplyDeleteSuccessEvents };