box-annotations 5.2.1-beta.11 → 5.2.1-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.11",
+    "version": "5.2.1-beta.13",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -28,13 +28,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
-        "@box/blueprint-web": "^14.27.0",
-        "@box/blueprint-web-assets": "^4.116.6",
-        "@box/collaboration-popover": "^1.61.30",
+        "@box/blueprint-web": "^14.30.0",
+        "@box/blueprint-web-assets": "^4.117.2",
+        "@box/collaboration-popover": "^1.62.3",
         "@box/languages": "^1.1.0",
-        "@box/readable-time": "^1.40.30",
-        "@box/threaded-annotations": "^1.86.0",
-        "@box/user-selector": "^1.75.30",
+        "@box/readable-time": "^1.41.3",
+        "@box/threaded-annotations": "^1.89.1",
+        "@box/user-selector": "^1.76.3",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -128,12 +128,12 @@
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^14.27.0",
-        "@box/blueprint-web-assets": "^4.116.6",
-        "@box/collaboration-popover": "^1.61.30",
-        "@box/readable-time": "^1.40.30",
-        "@box/threaded-annotations": "^1.86.0",
-        "@box/user-selector": "^1.75.30"
+        "@box/blueprint-web": "^14.30.0",
+        "@box/blueprint-web-assets": "^4.117.2",
+        "@box/collaboration-popover": "^1.62.3",
+        "@box/readable-time": "^1.41.3",
+        "@box/threaded-annotations": "^1.89.1",
+        "@box/user-selector": "^1.76.3"
     },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",

package/src/@types/model.ts

@@ -86,6 +86,13 @@ export interface Rect extends Position {
     width: number;
 }
 
+export interface ReplyPermissions {
+    can_delete?: boolean;
+    can_edit?: boolean;
+    can_reply?: boolean;
+    can_resolve?: boolean;
+}
+
 export interface Reply {
     created_at: string;
     created_by: User;
@@ -95,6 +102,7 @@ export interface Reply {
         id: string;
         type: string;
     };
+    permissions?: ReplyPermissions;
     type: 'reply';
 }
 

package/src/BoxAnnotations.ts

@@ -16,6 +16,7 @@ type Annotator = {
 type AnnotationsOptions = {
     features: Features;
     intl: IntlOptions;
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
 };
 
 export type Features = {

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -82,35 +82,28 @@ export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
     id: reply.id,
     message: deserializeMentionMarkup(reply.message),
     permissions: {
-        canDelete: false,
+        canDelete: reply.permissions?.can_delete ?? false,
         canEdit: false,
-        canReply: true,
-        canResolve: false,
+        canReply: reply.permissions?.can_reply ?? false,
+        canResolve: reply.permissions?.can_resolve ?? false,
     },
 });
 
-/**
- * Converts an Annotation's description (root message) to a TextMessageType.
- * The root message gets resolve permission from the annotation's permissions.
- * Falls back to annotation-level fields when the description object is sparse
- * (the list endpoint returns description with only { message }).
- */
-const descriptionToTextMessage = (
-    annotation: Annotation,
-    reply: Reply,
-): TextMessageTypeV2 => ({
+// The root message shares the annotation's author and permissions; description
+// comes back sparse ({ message } only) from the list endpoint.
+const descriptionToTextMessage = (annotation: Annotation): TextMessageTypeV2 => ({
     author: {
-        email: (reply.created_by ?? annotation.created_by)?.login ?? '',
-        id: parseInt((reply.created_by ?? annotation.created_by)?.id ?? '0', 10),
-        name: (reply.created_by ?? annotation.created_by)?.name ?? '',
+        email: annotation.created_by?.login ?? '',
+        id: parseInt(annotation.created_by?.id ?? '0', 10),
+        name: annotation.created_by?.name ?? '',
     },
-    createdAt: new Date(reply.created_at ?? annotation.created_at).getTime(),
-    id: reply.id ?? annotation.id,
-    message: deserializeMentionMarkup(reply.message),
+    createdAt: new Date(annotation.created_at).getTime(),
+    id: annotation.id,
+    message: deserializeMentionMarkup(annotation.description?.message ?? ''),
     permissions: {
         canDelete: annotation.permissions?.can_delete ?? false,
         canEdit: annotation.permissions?.can_edit ?? false,
-        canReply: true,
+        canReply: annotation.permissions?.can_reply ?? false,
         canResolve: annotation.permissions?.can_resolve ?? false,
     },
 });
@@ -123,7 +116,7 @@ export const annotationToMessages = (annotation: Annotation): TextMessageTypeV2[
     const messages: TextMessageTypeV2[] = [];
 
     if (annotation.description) {
-        messages.push(descriptionToTextMessage(annotation, annotation.description));
+        messages.push(descriptionToTextMessage(annotation));
     }
 
     if (annotation.replies) {

package/src/common/AnnotationCallbacksContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export type AnnotationCallbacks = {
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+};
+
+export default createContext<AnnotationCallbacks>({});

package/src/common/BaseAnnotator.scss

@@ -28,3 +28,14 @@
 .ba-Layer--popup {
     z-index: 4;
 }
+
+.ba-PopupPortal {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+
+    .ba-Popup {
+        z-index: 150;
+        pointer-events: auto;
+    }
+}

package/src/common/BaseAnnotator.ts

@@ -44,6 +44,7 @@ export type Options = {
     initialViewMode?: ViewMode;
     intl: IntlOptions;
     locale?: string;
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
     token: string;
 };
 
@@ -70,6 +71,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     intl: IntlShape;
 
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+
     store: store.AppStore;
 
     constructor({
@@ -82,6 +85,7 @@ export default class BaseAnnotator extends EventEmitter {
         initialMode,
         initialViewMode = 'annotations',
         intl,
+        onCopyLink,
         token,
     }: Options) {
         super();
@@ -111,6 +115,7 @@ export default class BaseAnnotator extends EventEmitter {
         this.container = container;
         this.features = features;
         this.intl = i18n.createIntlProvider(intl);
+        this.onCopyLink = onCopyLink;
         this.store = store.createStore(initialState, {
             api: new API({ apiHost, token }),
         });

package/src/common/BaseManager.ts

@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
+import { AnnotationCallbacks } from './AnnotationCallbacksContext';
 import { applyResinTags } from '../utils/resin';
 import { TARGET_TYPE } from '../constants';
 
@@ -14,6 +15,7 @@ export type Options = {
 };
 
 export type Props = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };

package/src/common/DeselectListener.tsx

@@ -8,7 +8,7 @@ export default function DeselectListener(): null {
     React.useEffect(() => {
         const handleMouseDown = (event: MouseEvent): void => {
             // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
-            if ((event.target as Element | null)?.closest?.('.ba-PopupV2')) return;
+            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/common/withProviders.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { IntlShape, RawIntlProvider } from 'react-intl';
 import { Provider as StoreProvider } from 'react-redux';
 import { Store } from 'redux';
+import AnnotationCallbacksContext, { AnnotationCallbacks } from './AnnotationCallbacksContext';
 
 type WrapperProps = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };
@@ -11,11 +13,13 @@ type WrapperProps = {
 type WrapperReturn<P> = React.FC<P & WrapperProps>;
 
 export default function withProviders<P extends object>(WrappedComponent: React.ComponentType<P>): WrapperReturn<P> {
-    return function RootProvider({ intl, store, ...rest }: P & WrapperProps): JSX.Element {
+    return function RootProvider({ callbacks, intl, store, ...rest }: P & WrapperProps): JSX.Element {
         return (
             <RawIntlProvider value={intl}>
                 <StoreProvider store={store}>
-                    <WrappedComponent {...(rest as P)} />
+                    <AnnotationCallbacksContext.Provider value={callbacks ?? {}}>
+                        <WrappedComponent {...(rest as P)} />
+                    </AnnotationCallbacksContext.Provider>
                 </StoreProvider>
             </RawIntlProvider>
         );

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -33,12 +33,6 @@ export type Props = {
 
 const options: Partial<Options> = {
     modifiers: [
-        {
-            name: 'eventListeners',
-            options: {
-                scroll: false,
-            },
-        },
         {
             name: 'offset',
             options: {
@@ -48,7 +42,6 @@ const options: Partial<Options> = {
         {
             name: 'preventOverflow',
             options: {
-                altAxis: true,
                 padding: 50,
             },
         },

package/src/components/Popups/PopupV2.tsx

@@ -17,6 +17,7 @@ import type { JSONContent } from '@tiptap/core';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
 
 import { annotationToMessages, collaboratorToUserContact } from '../../adapters/threadedAnnotationsAdapters';
+import AnnotationCallbacksContext from '../../common/AnnotationCallbacksContext';
 import {
     createReplyAction,
     deleteAnnotationAction,
@@ -24,7 +25,7 @@ import {
     updateAnnotationAction,
 } from '../../store/annotations/actions';
 import { getAnnotation } from '../../store/annotations/selectors';
-import { getApiHost, getToken } from '../../store/options';
+import { getApiHost, getFileVersionId, getToken } from '../../store/options';
 import { fetchCollaboratorsAction } from '../../store/users/actions';
 
 import type { AppState, AppThunkDispatch } from '../../store/types';
@@ -80,12 +81,21 @@ const fetchAvatarBlob = async (apiHost: string, token: string, userId: string):
 const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
     const intl = useIntl();
     const dispatch = useDispatch<AppThunkDispatch>();
+    const { onCopyLink: consumerOnCopyLink } = React.useContext(AnnotationCallbacksContext);
     const popupRef = React.useRef<HTMLDivElement>(null);
     const popperRef = React.useRef<Instance>();
     const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
 
     const apiHost = useSelector(getApiHost);
+    const fileVersionId = useSelector(getFileVersionId);
     const token = useSelector(getToken);
+    const onCopyLink = React.useMemo(
+        () =>
+            consumerOnCopyLink && annotationId && fileVersionId
+                ? () => consumerOnCopyLink({ annotationId, fileVersionId })
+                : undefined,
+        [consumerOnCopyLink, annotationId, fileVersionId],
+    );
     const annotation = useSelector((state: AppState) =>
         annotationId ? getAnnotation(state, annotationId) : undefined,
     );
@@ -235,6 +245,16 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch, onSubmit],
     );
 
+    const handleEdit = React.useCallback(
+        async (id: string, content: JSONContent | null): Promise<void> => {
+            if (!annotationId || id !== annotationId) return;
+            const doc = createDocumentNode(content);
+            const { text } = serializeMentionMarkup(doc);
+            await dispatch(updateAnnotationAction({ annotationId, payload: { message: text } }));
+        },
+        [annotationId, dispatch],
+    );
+
     const handleThreadDelete = React.useCallback(
         async (): Promise<void> => {
             if (annotationId) {
@@ -293,7 +313,9 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
                                     isResolved={isResolved}
                                     messages={threadMessages}
                                     onAvatarClick={noop}
+                                    onCopyLink={onCopyLink}
                                     onDelete={noop}
+                                    onEdit={handleEdit}
                                     onPost={handlePost}
                                     onResolve={handleResolve}
                                     onThreadDelete={handleThreadDelete}

package/src/document/DocumentAnnotator.ts

@@ -103,7 +103,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
             // Annotations mode
             managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
@@ -224,6 +224,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
@@ -22,6 +23,7 @@ export type Props = {
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
     redoDrawingPathGroup: () => void;
     resetDrawing: () => void;
     rotation: number;
@@ -46,6 +48,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         drawnPathGroups,
         isCreating,
         location,
+        popupPortalEl,
         redoDrawingPathGroup,
         resetDrawing,
         rotation,
@@ -176,20 +179,22 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
-                <PopupDrawingToolbar
-                    ref={popupDrawingToolbarRef}
-                    canComment={hasDrawnPathGroups}
-                    canRedo={hasStashedPathGroups}
-                    canUndo={hasDrawnPathGroups}
-                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
-                    onDelete={handleDelete}
-                    onRedo={handleRedo}
-                    onReply={handleReply}
-                    onUndo={handleUndo}
-                    reference={drawingSVGGroup}
-                />
-            )}
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && popupPortalEl &&
+                ReactDOM.createPortal(
+                    <PopupDrawingToolbar
+                        ref={popupDrawingToolbarRef}
+                        canComment={hasDrawnPathGroups}
+                        canRedo={hasStashedPathGroups}
+                        canUndo={hasDrawnPathGroups}
+                        className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                        onDelete={handleDelete}
+                        onRedo={handleRedo}
+                        onReply={handleReply}
+                        onUndo={handleUndo}
+                        reference={drawingSVGGroup}
+                    />,
+                    popupPortalEl,
+                )}
         </>
     );
 };

package/src/drawing/DrawingManager.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 DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class DrawingListManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--drawing');
         this.reactEl.dataset.testid = 'ba-Layer--drawing';
@@ -14,6 +25,6 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} {...props} />);
+        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/image/ImageAnnotator.ts

@@ -74,7 +74,7 @@ export default class ImageAnnotator extends BaseAnnotator {
             }
 
             this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
-            this.managers.add(new DrawingManager({ 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

@@ -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/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';
@@ -121,7 +122,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}
@@ -131,7 +133,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                     reference={reference}
                     value={message}
                 />
-            </div>
+            </div>,
+            popupPortalEl,
         );
     }
 

package/src/popup/PopupManager.tsx

@@ -20,16 +20,18 @@ export default class PopupManager extends BaseManager {
         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
+                callbacks={callbacks}
+                intl={intl}
                 location={this.location}
-                {...props}
                 popupPortalEl={this.popupPortalEl}
+                store={store}
                 targetType={this.targetType}
             />,
         );