box-annotations 5.2.1-beta.7 → 5.3.0

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.scss

@@ -1,5 +1,8 @@
 .ba-PopupV2 {
-    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 150;
     width: 348px;
 }
 

package/src/components/Popups/PopupV2.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
 import noop from 'lodash/noop';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
-import { BlueprintModernizationProvider } from '@box/blueprint-web';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { BlueprintModernizationProvider, TooltipProvider } from '@box/blueprint-web';
 import {
     MentionContextProvider,
     MessageEditorV2,
     ThreadedAnnotationsV2,
     serializeMentionMarkup,
+    serializeMessageToMarkdown,
 } from '@box/threaded-annotations';
 import type { DocumentNodeV2, TextMessageTypeV2 } from '@box/threaded-annotations';
 import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
@@ -15,16 +18,20 @@ 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,
+    deleteReplyAction,
     setActiveAnnotationIdAction,
     updateAnnotationAction,
+    updateReplyAction,
 } from '../../store/annotations/actions';
 import { getAnnotation } from '../../store/annotations/selectors';
-import { getApiHost, getToken } from '../../store/options';
+import { getApiHost, getFileId, getFileVersionId, getToken, isFeatureEnabled } from '../../store/options';
 import { fetchCollaboratorsAction } from '../../store/users/actions';
 
+import type { Token, TokenLiteral, TokenMap } from '../../@types';
 import type { AppState, AppThunkDispatch } from '../../store/types';
 
 import createPopper, { PopupReference } from './Popper';
@@ -35,6 +42,7 @@ import './PopupV2.scss';
 export type Props = {
     annotationId?: string;
     onSubmit: (text: string) => void;
+    popupPortalEl?: HTMLElement | null;
     reference: PopupReference;
 };
 
@@ -59,12 +67,35 @@ const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
     return { type: 'doc', content: [content] } as DocumentNodeV2;
 };
 
-// Callers render initials as a fallback on null.
-// A persistent null across all users usually indicates a stale token.
-const fetchAvatarBlob = async (apiHost: string, token: string, userId: string): Promise<string | null> => {
+const serializePopupMessage = (doc: DocumentNodeV2, isRichTextEnabled: boolean): string =>
+    isRichTextEnabled ? serializeMessageToMarkdown(doc) : serializeMentionMarkup(doc).text;
+
+const literalToString = (literal: TokenLiteral): string | null => {
+    if (!literal) return null;
+    if (typeof literal === 'string') return literal;
+    return literal.read ?? literal.write ?? null;
+};
+
+const resolveStringToken = async (token: Token, typedFileId: string): Promise<string | null> => {
+    const resolved = typeof token === 'function' ? await token(typedFileId) : token;
+    if (!resolved) return null;
+    if (typeof resolved === 'string') return resolved;
+    if (typedFileId in resolved) return literalToString((resolved as TokenMap)[typedFileId]);
+    return literalToString(resolved as TokenLiteral);
+};
+
+const fetchAvatarBlob = async (
+    apiHost: string,
+    token: Token,
+    fileId: string | null,
+    userId: string,
+): Promise<string | null> => {
     try {
+        if (!fileId) return null;
+        const stringToken = await resolveStringToken(token, `file_${fileId}`);
+        if (!stringToken) return null;
         const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
-            headers: { Authorization: `Bearer ${token}` },
+            headers: { Authorization: `Bearer ${stringToken}` },
         });
         if (!response.ok) return null;
         const blob = await response.blob();
@@ -74,15 +105,26 @@ const fetchAvatarBlob = async (apiHost: string, token: string, userId: string):
     }
 };
 
-const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
+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 fileId = useSelector(getFileId);
+    const fileVersionId = useSelector(getFileVersionId);
+    const isRichTextEnabled = useSelector((state: AppState) => isFeatureEnabled(state, 'isRichTextEnabled'));
     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,
     );
@@ -98,7 +140,7 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
             if (cached) return cached;
             const capturedApiHost = apiHost;
             const capturedToken = token;
-            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, userId);
+            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, fileId, userId);
             if (!url) return null;
             if (
                 credentialsRef.current.apiHost !== capturedApiHost ||
@@ -115,7 +157,7 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
             avatarCacheRef.current.set(userId, url);
             return url;
         },
-        [apiHost, token],
+        [apiHost, fileId, token],
     );
 
     React.useEffect(() => {
@@ -150,7 +192,7 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
         if (!annotation) return undefined;
 
         const userIds = Array.from(
-            new Set(annotationToMessages(annotation).map(msg => String(msg.author.id))),
+            new Set(annotationToMessages(annotation, isRichTextEnabled).map(msg => String(msg.author.id))),
         );
         let cancelled = false;
 
@@ -168,18 +210,18 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
         return () => {
             cancelled = true;
         };
-    }, [annotation, getOrFetchAvatarBlob]);
+    }, [annotation, getOrFetchAvatarBlob, isRichTextEnabled]);
 
     const threadMessages: TextMessageTypeV2[] = React.useMemo(() => {
         if (!annotation) return [];
-        return annotationToMessages(annotation).map(msg => ({
+        return annotationToMessages(annotation, isRichTextEnabled).map(msg => ({
             ...msg,
             author: {
                 ...msg.author,
                 avatarUrl: avatarBlobs[String(msg.author.id)],
             },
         }));
-    }, [annotation, avatarBlobs]);
+    }, [annotation, avatarBlobs, isRichTextEnabled]);
 
     const isResolved = annotation?.status === 'resolved';
     const resolvedBy = isResolved
@@ -222,14 +264,28 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
     const handlePost = React.useCallback(
         async (content: JSONContent | null): Promise<void> => {
             const doc = createDocumentNode(content);
-            const { text } = serializeMentionMarkup(doc);
+            const text = serializePopupMessage(doc, isRichTextEnabled);
             if (annotationId) {
                 await dispatch(createReplyAction({ annotationId, message: text }));
             } else {
                 onSubmit(text);
             }
         },
-        [annotationId, dispatch, onSubmit],
+        [annotationId, dispatch, isRichTextEnabled, onSubmit],
+    );
+
+    const handleEdit = React.useCallback(
+        async (id: string, content: JSONContent | null): Promise<void> => {
+            if (!annotationId) return;
+            const doc = createDocumentNode(content);
+            const text = serializePopupMessage(doc, isRichTextEnabled);
+            if (id === annotationId) {
+                await dispatch(updateAnnotationAction({ annotationId, payload: { message: text } }));
+                return;
+            }
+            await dispatch(updateReplyAction({ annotationId, replyId: id, payload: { message: text } }));
+        },
+        [annotationId, dispatch, isRichTextEnabled],
     );
 
     const handleThreadDelete = React.useCallback(
@@ -241,6 +297,14 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
         [annotationId, dispatch],
     );
 
+    const handleDelete = React.useCallback(
+        async (id: string): Promise<void> => {
+            if (!annotationId || id === annotationId) return;
+            await dispatch(deleteReplyAction({ annotationId, replyId: id }));
+        },
+        [annotationId, dispatch],
+    );
+
     const handleResolve = React.useCallback(
         async (): Promise<void> => {
             if (!annotationId) return;
@@ -260,7 +324,9 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
         [annotationId, dispatch],
     );
 
-    return (
+    if (!popupPortalEl) return null;
+
+    return ReactDOM.createPortal(
         <FocusTrap>
             <div
                 ref={popupRef}
@@ -276,38 +342,47 @@ const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
                 role="presentation"
             >
                 <BlueprintModernizationProvider enableModernizedComponents>
-                    <MentionContextProvider value={{
-                        collaborationPopoverProps: {
-                            onSubmit: () => Promise.resolve(),
-                        },
-                    }}>
-                        {annotationId ? (
-                            <ThreadedAnnotationsV2
-                                isAnnotations
-                                isResolved={isResolved}
-                                messages={threadMessages}
-                                onAvatarClick={noop}
-                                onDelete={noop}
-                                onPost={handlePost}
-                                onResolve={handleResolve}
-                                onThreadDelete={handleThreadDelete}
-                                onUnresolve={handleUnresolve}
-                                resolvedAt={resolvedAt}
-                                resolvedBy={resolvedBy}
-                                userSelectorProps={userSelectorProps}
-                            />
-                        ) : (
-                            <MessageEditorV2
-                                isFirstAnnotation
-                                onPost={handlePost}
-                                userSelectorProps={userSelectorProps}
-                            />
-                        )}
-                    </MentionContextProvider>
+                    <TooltipProvider>
+                        <MentionContextProvider value={{
+                            collaborationPopoverProps: {
+                                onSubmit: () => Promise.resolve(),
+                            },
+                            // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
+                            fetchCollaboratorState: async () => true,
+                        }}>
+                            {annotationId ? (
+                                <ThreadedAnnotationsV2
+                                    isAnnotations
+                                    isResolved={isResolved}
+                                    isRichTextEnabled={isRichTextEnabled}
+                                    messages={threadMessages}
+                                    onAvatarClick={noop}
+                                    onCopyLink={onCopyLink}
+                                    onDelete={handleDelete}
+                                    onEdit={handleEdit}
+                                    onPost={handlePost}
+                                    onResolve={handleResolve}
+                                    onThreadDelete={handleThreadDelete}
+                                    onUnresolve={handleUnresolve}
+                                    resolvedAt={resolvedAt}
+                                    resolvedBy={resolvedBy}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            ) : (
+                                <MessageEditorV2
+                                    isFirstAnnotation
+                                    isRichTextEnabled={isRichTextEnabled}
+                                    onPost={handlePost}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            )}
+                        </MentionContextProvider>
+                    </TooltipProvider>
                 </BlueprintModernizationProvider>
                 <div data-threaded-annotations-portal />
             </div>
-        </FocusTrap>
+        </FocusTrap>,
+        popupPortalEl,
     );
 };
 

package/src/document/DocumentAnnotator.ts

@@ -24,6 +24,9 @@ import type { ViewMode } from '../store/options/types';
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
+// Vertical padding on each page element as provided by Preview SDK (see DocumentAnnotator.scss)
+const PAGE_PADDING = 15;
+
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
@@ -99,8 +102,8 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             // Annotations mode
-            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
@@ -115,7 +118,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
                 );
             }
 
-            managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new HighlightManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
@@ -200,7 +203,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
         // Calculate original (unrotated) page dimensions for annotation layer sizing
         const pageWidth = pageEl.clientWidth;
-        const pageHeight = pageEl.clientHeight;
+        const pageHeight = pageEl.clientHeight - PAGE_PADDING * 2;
         const isOrthogonal = rotation % 180 !== 0;
         const origWidth = isOrthogonal ? pageHeight : pageWidth;
         const origHeight = isOrthogonal ? pageWidth : pageHeight;
@@ -221,6 +224,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });

package/src/document/docUtil.ts

@@ -1,4 +1,5 @@
 type Selection = {
+    containerEl: HTMLElement;
     containerRect: DOMRect;
     hasError?: boolean;
     location: number;
@@ -61,5 +62,5 @@ export function getSelection(): Selection | null {
         location = getPageNumber(selection.focusNode as Element) ?? endPage;
     }
 
-    return { containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
+    return { containerEl: containerEl as HTMLElement, containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
 }

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,8 +23,10 @@ export type Props = {
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
     redoDrawingPathGroup: () => void;
     resetDrawing: () => void;
+    rotation: number;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemDrawing | null) => void;
@@ -45,8 +48,10 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         drawnPathGroups,
         isCreating,
         location,
+        popupPortalEl,
         redoDrawingPathGroup,
         resetDrawing,
+        rotation,
         setActiveAnnotationId,
         setReferenceId,
         setStaged,
@@ -170,23 +175,27 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                     color={color}
                     onStart={handleStart}
                     onStop={handleStop}
+                    rotation={rotation}
                 />
             )}
 
-            {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 && (() => {
+                const toolbar = (
+                    <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}
+                    />
+                );
+                return popupPortalEl ? ReactDOM.createPortal(toolbar, popupPortalEl) : toolbar;
+            })()}
         </>
     );
 };

package/src/drawing/DrawingAnnotationsContainer.tsx

@@ -18,6 +18,7 @@ import {
     getAnnotationsForLocation,
     getColor,
     getCreatorStatus,
+    getRotation,
     Mode,
     setActiveAnnotationIdAction,
     setReferenceIdAction,
@@ -34,6 +35,7 @@ export type Props = {
     canShowPopupToolbar: boolean;
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
+    rotation: number;
     stashedPathGroups: Array<PathGroup>;
 };
 
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         canShowPopupToolbar: creatorStatus === CreatorStatus.started,
         drawnPathGroups: getDrawingDrawnPathGroupsForLocation(state, location),
         isCreating: getAnnotationMode(state) === Mode.DRAWING && creatorStatus !== CreatorStatus.pending,
+        rotation: getRotation(state),
         stashedPathGroups: getStashedDrawnPathGroupsForLocation(state, location),
     };
 };

package/src/drawing/DrawingCreator.tsx

@@ -7,6 +7,7 @@ import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
 import PointerCapture, { PointerCaptureRef, Status as DrawingStatus } from '../components/PointerCapture';
 import { getDrawingCursor } from './DrawingCursor';
 import { getPathCommands } from './drawingUtil';
+import { getElementLocalPosition } from '../utils/rotate';
 import { PathGroup, Position } from '../@types';
 import './DrawingCreator.scss';
 
@@ -15,6 +16,7 @@ export type Props = {
     color?: string;
     onStart: () => void;
     onStop: (pathGroup: PathGroup) => void;
+    rotation?: number;
     size?: number;
 };
 
@@ -26,6 +28,7 @@ export default function DrawingCreator({
     color = defaultStrokeColor,
     onStart,
     onStop,
+    rotation = 0,
     size = defaultStrokeSize,
 }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
@@ -45,7 +48,9 @@ export default function DrawingCreator({
             return [];
         }
 
-        const { height, width } = creatorEl.getBoundingClientRect();
+        // Get the element's dimensions (before any rotation is applied)
+        const width = creatorEl.offsetWidth;
+        const height = creatorEl.offsetHeight;
         const { size: minSize } = stroke;
         const MAX_X = width - minSize;
         const MAX_Y = height - minSize;
@@ -56,21 +61,9 @@ export default function DrawingCreator({
         }));
     }, [stroke]);
 
-    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];
-    };
-
     // 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);
 
@@ -100,7 +93,7 @@ export default function DrawingCreator({
 
     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: points } = capturedPointsRef;
 
             points.push({ x: x2, y: y2 });
@@ -111,7 +104,7 @@ export default function DrawingCreator({
                 onStart();
             }
         },
-        [drawingStatus, onStart, setDrawingStatus],
+        [drawingStatus, onStart, rotation, setDrawingStatus],
     );
 
     // Event Handlers

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/highlight/HighlightAnnotations.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import HighlightCanvas from './HighlightCanvas';
 import HighlightList from './HighlightList';
 import HighlightSvg from './HighlightSvg';
@@ -20,6 +21,8 @@ type Props = {
     isPromoting: boolean;
     isSelecting: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
+    rotation: number;
     selection: SelectionItem | null;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setIsPromoting: (isPromoting: boolean) => void;
@@ -38,6 +41,8 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         isPending = false,
         isPromoting = false,
         isSelecting = false,
+        popupPortalEl,
+        rotation,
         selection,
         setActiveAnnotationId,
         setIsPromoting,
@@ -121,22 +126,30 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             )}
 
             {/* Layer 3a: Annotations promoter to promote selection to staged */}
-            {!isCreating && selection && !selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlight
-                        onCancel={handleCancel}
-                        onSubmit={handlePromote}
-                        shape={getBoundingRect(selection.rects)}
-                    />
-                </div>
-            )}
+            {!isCreating && selection && !selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlight
+                            onCancel={handleCancel}
+                            onSubmit={handlePromote}
+                            shape={popupShape}
+                        />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
 
             {/* Layer 3b: Highlight error popup */}
-            {selection && selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlightError onCancel={handleCancel} shape={getBoundingRect(selection.rects)} />
-                </div>
-            )}
+            {selection && selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
         </>
     );
 };