box-annotations 5.2.1-beta.7 → 5.3.0

package/src/highlight/HighlightContainer.tsx

@@ -13,6 +13,7 @@ import {
     getCreatorStatus,
     getIsPromoting,
     getIsSelecting,
+    getRotation,
     getSelectionForLocation,
     isCreatorStagedHighlight,
     Mode,
@@ -33,6 +34,7 @@ export type Props = {
     isPending: boolean;
     isPromoting: boolean;
     isSelecting: boolean;
+    rotation: number;
     selection: SelectionItem | null;
     staged: CreatorItemHighlight | null;
 };
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         isPending: getCreatorStatus(state) === CreatorStatus.pending,
         isPromoting: getIsPromoting(state),
         isSelecting: getIsSelecting(state),
+        rotation: getRotation(state),
         selection: getSelectionForLocation(state, location),
         staged: isCreatorStagedHighlight(staged) ? staged : null,
     };

package/src/highlight/HighlightCreatorManager.ts

@@ -1,6 +1,7 @@
 import {
     AppStore,
     getIsSelecting,
+    getRotation,
     SelectionArg as Selection,
     setIsSelectingAction,
     setSelectionAction,
@@ -41,18 +42,18 @@ export default class HighlightCreatorManager implements Manager {
         this.store.dispatch(setSelectionAction(null));
 
         this.referenceEl.addEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('mouseup', this.handleMouseUp);
     }
 
-    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
-        return Object.assign(this.referenceEl.style, styles);
+    style(): CSSStyleDeclaration {
+        return this.referenceEl.style;
     }
 
     destroy(): void {
         clearTimeout(this.selectionChangeTimer);
 
         this.referenceEl.removeEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('mouseup', this.handleMouseUp);
     }
 
     handleMouseDown = ({ buttons }: MouseEvent): void => {
@@ -72,7 +73,9 @@ export default class HighlightCreatorManager implements Manager {
         }
 
         this.selectionChangeTimer = window.setTimeout(() => {
-            this.store.dispatch(setSelectionAction(this.getSelection()));
+            const selection = this.getSelection();
+            const rotation = getRotation(this.store.getState());
+            this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
             this.store.dispatch(setIsSelectingAction(false));
         }, this.selectionChangeDelay);
     };

package/src/highlight/HighlightListener.ts

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { AppStore, getIsSelecting, SelectionArg as Selection, setSelectionAction } from '../store';
+import { AppStore, getIsSelecting, getRotation, SelectionArg as Selection, setSelectionAction } from '../store';
 
 export type Options = {
     getSelection: () => Selection | null;
@@ -30,7 +30,9 @@ export default class HighlightListener {
             return;
         }
 
-        this.store.dispatch(setSelectionAction(this.getSelection()));
+        const selection = this.getSelection();
+        const rotation = getRotation(this.store.getState());
+        this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
     };
 
     debounceHandleSelectionChange = debounce(this.handleSelectionChange, SELECTION_CHANGE_DEBOUNCE);

package/src/highlight/HighlightManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import HighlightContainer from './HighlightContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class HighlightManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--highlight');
         this.reactEl.dataset.testid = 'ba-Layer--highlight';
@@ -14,6 +25,6 @@ export default class HighlightManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<HighlightContainer location={this.location} {...props} />);
+        this.root.render(<HighlightContainer location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/image/ImageAnnotator.ts

@@ -73,8 +73,8 @@ export default class ImageAnnotator extends BaseAnnotator {
                 return this.managers;
             }
 
-            this.managers.add(new PopupManager({ referenceEl, resinTags }));
-            this.managers.add(new DrawingManager({ referenceEl, resinTags }));
+            this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
+            this.managers.add(new DrawingManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
             this.managers.add(new RegionManager({ referenceEl, resinTags }));
             this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));
         }
@@ -124,6 +124,7 @@ export default class ImageAnnotator extends BaseAnnotator {
             });
 
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });

package/src/media/MediaAnnotator.ts

@@ -46,7 +46,7 @@ export default class MediaAnnotator extends BaseAnnotator {
 
 
     addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
@@ -108,6 +108,7 @@ export default class MediaAnnotator extends BaseAnnotator {
                 width: `${referenceEl.offsetWidth}px`,
             });
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });

package/src/popup/PopupContainer.tsx

@@ -20,6 +20,13 @@ import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
+import { TARGET_TYPE } from '../constants';
+
+export type OwnProps = {
+    location: number;
+    popupPortalEl?: HTMLElement | null;
+    targetType?: TARGET_TYPE;
+};
 
 export type Props = {
     activeAnnotationId: string | null;
@@ -32,7 +39,7 @@ export type Props = {
     status: CreatorStatus;
 };
 
-export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+export const mapStateToProps = (state: AppState, { location }: OwnProps): Props => {
     return {
         activeAnnotationId: getActiveAnnotationId(state),
         isPromoting: getIsPromoting(state),

package/src/popup/PopupLayer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
 import PopupV2 from '../components/Popups/PopupV2';
@@ -29,6 +30,7 @@ export type Props = {
     location: number;
     message: string;
     mode: Mode;
+    popupPortalEl?: HTMLElement | null;
     referenceId: string | null;
     resetCreator: () => void;
     setMessage: (message: string) => void;
@@ -43,6 +45,8 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
     [Mode.REGION]: isCreatorStagedRegion,
 };
 
+const ACTIVE_TARGET_OBSERVER_TIMEOUT_MS = 10000;
+
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
         activeAnnotationId,
@@ -53,6 +57,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         isThreadedAnnotation = false,
         message,
         mode,
+        popupPortalEl,
         referenceId,
         resetCreator,
         setMessage,
@@ -95,13 +100,39 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    // activeAnnotationId can be set (e.g. via deep link) before the target DOM node mounts;
+    // observe until it appears, or give up after ACTIVE_TARGET_OBSERVER_TIMEOUT_MS.
     React.useEffect(() => {
-        if (activeAnnotationId && isThreadedAnnotation) {
-            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
-            setActiveReference(el);
-        } else {
+        if (!activeAnnotationId || !isThreadedAnnotation) {
             setActiveReference(null);
+            return noop;
+        }
+
+        const selector = `[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`;
+        const existing = document.querySelector(selector);
+        if (existing) {
+            setActiveReference(existing);
+            return noop;
         }
+
+        setActiveReference(null);
+        const observer = new MutationObserver(() => {
+            const el = document.querySelector(selector);
+            if (el) {
+                setActiveReference(el);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        const timeoutId = window.setTimeout(() => {
+            observer.disconnect();
+        }, ACTIVE_TARGET_OBSERVER_TIMEOUT_MS);
+
+        return () => {
+            observer.disconnect();
+            window.clearTimeout(timeoutId);
+        };
     }, [activeAnnotationId, isThreadedAnnotation]);
 
     const showCreator = canCreate && canReply && reference && staged;
@@ -111,6 +142,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
             <div className="ba-PopupLayer-popup">
                 <PopupV2
                     onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
                     reference={reference}
                 />
             </div>
@@ -118,7 +150,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     }
 
     if (showCreator) {
-        return (
+        if (!popupPortalEl) return null;
+        return ReactDOM.createPortal(
             <div className="ba-PopupLayer-popup">
                 <PopupReply
                     isPending={isPending}
@@ -128,7 +161,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                     reference={reference}
                     value={message}
                 />
-            </div>
+            </div>,
+            popupPortalEl,
         );
     }
 
@@ -138,6 +172,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                 <PopupV2
                     annotationId={activeAnnotationId}
                     onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
                     reference={activeReference}
                 />
             </div>

package/src/popup/PopupManager.tsx

@@ -1,19 +1,39 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import PopupContainer from './PopupContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class PopupManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--popup');
         this.reactEl.dataset.testid = 'ba-Layer--popup';
     }
 
-    render(props: Props): void {
+    render({ callbacks, intl, store }: Props): void {
         if (!this.root) {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
-       
-        this.root.render(<PopupContainer location={this.location}  {...props} targetType={this.targetType} />);
+
+        this.root.render(
+            <PopupContainer
+                callbacks={callbacks}
+                intl={intl}
+                location={this.location}
+                popupPortalEl={this.popupPortalEl}
+                store={store}
+                targetType={this.targetType}
+            />,
+        );
     }
 }

package/src/region/RegionCreation.tsx

@@ -9,9 +9,9 @@ import { getVideoCurrentTimeInMilliseconds } from '../utils/useVideoTiming';
 
 type Props = {
     isCreating: boolean;
-    isRotated: boolean;
     location: number;
     resetCreator: () => void;
+    rotation: number;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemRegion | null) => void;
     setStatus: (status: CreatorStatus) => void;
@@ -27,13 +27,19 @@ type State = {
 export default class RegionCreation extends React.PureComponent<Props, State> {
     static defaultProps = {
         isCreating: false,
-        isRotated: false,
+        rotation: 0,
     };
 
     state: State = {};
 
     handleAbort = (): void => {
-        const { resetCreator } = this.props;
+        const { resetCreator, staged } = this.props;
+
+        // Click-away (a click too small to start a new region) must not discard an in-progress comment/annotation
+        if (staged) {
+            return;
+        }
+
         resetCreator();
     };
 
@@ -57,11 +63,7 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
     };
 
     render(): JSX.Element | null {
-        const { isCreating, isRotated, staged } = this.props;
-
-        if (isRotated) {
-            return null;
-        }
+        const { isCreating, rotation, staged } = this.props;
 
         return (
             <>
@@ -71,6 +73,7 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
                         onAbort={this.handleAbort}
                         onStart={this.handleStart}
                         onStop={this.handleStop}
+                        rotation={rotation}
                     />
                 )}
 

package/src/region/RegionCreationContainer.tsx

@@ -19,7 +19,7 @@ import withProviders from '../common/withProviders';
 
 export type Props = {
     isCreating: boolean;
-    isRotated: boolean;
+    rotation: number;
     staged: CreatorItemRegion | null;
 };
 
@@ -28,7 +28,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
 
     return {
         isCreating: getAnnotationMode(state) === Mode.REGION && getCreatorStatus(state) !== CreatorStatus.pending,
-        isRotated: !!getRotation(state),
+        rotation: getRotation(state),
         staged: isCreatorStagedRegion(staged) ? staged : null,
     };
 };

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/store/annotations/actions.ts

@@ -121,6 +121,95 @@ export const updateAnnotationAction = createAsyncThunk<
     },
 );
 
+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 { 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');
 export const setIsInitialized = createAction('SET_IS_INITIALIZED');

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';
 
@@ -58,6 +64,48 @@ 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/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,
@@ -16,7 +16,7 @@ const emitCreateEvent = (action: AsyncAction, status: Status): void => {
 };
 
 const createHandler = (status: Status) => (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
-    emitCreateEvent(action, status);
+    emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
 
 const handleCreateErrorEvents = createHandler(Status.ERROR);
 const handleCreatePendingEvents = createHandler(Status.PENDING);