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

package/src/components/Popups/PopupV2.tsx

@@ -4,12 +4,13 @@ import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { BlueprintModernizationProvider } from '@box/blueprint-web';
+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';
@@ -17,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';
@@ -62,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();
@@ -80,12 +108,23 @@ 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 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,
     );
@@ -101,12 +140,9 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             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 ||
-                credentialsRef.current.token !== capturedToken
-            ) {
+            if (credentialsRef.current.apiHost !== capturedApiHost || credentialsRef.current.token !== capturedToken) {
                 URL.revokeObjectURL(url);
                 return null;
             }
@@ -118,7 +154,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             avatarCacheRef.current.set(userId, url);
             return url;
         },
-        [apiHost, token],
+        [apiHost, fileId, token],
     );
 
     React.useEffect(() => {
@@ -153,7 +189,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         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;
 
@@ -171,26 +207,24 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         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
-        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
-        : undefined;
-    const resolvedAtSource = isResolved
-        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        ? (annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name)
         : undefined;
+    const resolvedAtSource = isResolved ? (annotation?.resolution?.resolved_at ?? annotation?.modified_at) : undefined;
     const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
 
     const userSelectorProps = React.useMemo(
@@ -225,44 +259,57 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
     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 handleThreadDelete = React.useCallback(
-        async (): Promise<void> => {
-            if (annotationId) {
-                await dispatch(deleteAnnotationAction(annotationId));
-            }
-        },
-        [annotationId, dispatch],
-    );
-
-    const handleResolve = React.useCallback(
-        async (): Promise<void> => {
+    const handleEdit = React.useCallback(
+        async (id: string, content: JSONContent | null): Promise<void> => {
             if (!annotationId) return;
-            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
-            if (updateAnnotationAction.fulfilled.match(result)) {
-                dispatch(setActiveAnnotationIdAction(null));
+            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],
+        [annotationId, dispatch, isRichTextEnabled],
     );
 
-    const handleUnresolve = React.useCallback(
-        async (): Promise<void> => {
-            if (!annotationId) return;
-            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+    const handleThreadDelete = React.useCallback(async (): Promise<void> => {
+        if (annotationId) {
+            await dispatch(deleteAnnotationAction(annotationId));
+        }
+    }, [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;
+        const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+        if (updateAnnotationAction.fulfilled.match(result)) {
+            dispatch(setActiveAnnotationIdAction(null));
+        }
+    }, [annotationId, dispatch]);
+
+    const handleUnresolve = React.useCallback(async (): Promise<void> => {
+        if (!annotationId) return;
+        await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+    }, [annotationId, dispatch]);
+
     if (!popupPortalEl) return null;
 
     return ReactDOM.createPortal(
@@ -270,45 +317,54 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             <div
                 ref={popupRef}
                 aria-label={intl.formatMessage(messages.ariaLabelComment)}
-                className="ba-PopupV2"
+                className="ba-PopupAnnotation"
                 data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
-                onClick={handleEvent}
+                data-resin-feature="annotations"
                 onMouseDown={handleEvent}
                 onMouseMove={handleEvent}
-                onMouseUp={handleEvent}
                 onTouchMove={handleEvent}
                 onTouchStart={handleEvent}
                 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>

package/src/components/ReplyForm/ReplyForm.tsx

@@ -70,14 +70,7 @@ const ReplyForm = (props: Props): JSX.Element => {
     }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <Form
-            ref={formRef}
-            className="ba-ReplyForm"
-            data-testid="ba-ReplyForm"
-            onPointerEnterCapture={undefined}
-            onPointerLeaveCapture={undefined}
-            placeholder={undefined}
-        >
+        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"

package/src/constants.ts

@@ -9,14 +9,13 @@ export const MOUSE_PRIMARY = 1;
 
 /**
  * This is the default location index for video annotations.
- * Documents have locations that represent a page but that doesn't apply to 
+ * Documents have locations that represent a page but that doesn't apply to
  * videos as they have no pages. The annnotations managers take  locations as
- * parameters so we need to provide a default value that indicates that this is a 
+ * parameters so we need to provide a default value that indicates that this is a
  * video annotation.
  */
 export const MEDIA_LOCATION_INDEX = -1;
 
-
 export enum TARGET_TYPE {
     FRAME = 'frame',
     PAGE = 'page',

package/src/document/DocumentAnnotator.ts

@@ -97,13 +97,29 @@ export default class DocumentAnnotator extends BaseAnnotator {
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {
             if (viewMode === 'boundingBoxes') {
-                managers.add(new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+                managers.add(
+                    new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }),
+                );
                 return managers;
             }
 
             // 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 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;
 
@@ -118,7 +134,14 @@ 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');
@@ -220,10 +243,11 @@ export default class DocumentAnnotator extends BaseAnnotator {
                     width: `${origWidth}px`,
                 });
             } else {
-                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+                manager.style({ height: '', left: '', top: '', transform: '', width: '' });
             }
 
             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,11 @@ 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,
@@ -86,7 +91,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         redoDrawingPathGroup();
     };
 
-    const getCurrentLocation = (): number => { 
+    const getCurrentLocation = (): number => {
         if (targetType === TARGET_TYPE.FRAME) {
             return getCurrentVideoLocation();
         }
@@ -116,12 +121,11 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         }
     }, [drawnPathGroups]);
 
-  
     let annotationsToShow: AnnotationDrawing[] = [];
-    // For video annotations, we only show the active annotation and we wait for the video 
+    // For video annotations, we only show the active annotation and we wait for the video
     // to seek to the annotation location before showing it. This prevents annoations from being
     // shown on the incorrect frame while the video is seeking.
-    if (targetType === TARGET_TYPE.FRAME ) {
+    if (targetType === TARGET_TYPE.FRAME) {
         if (!isVideoSeeking && activeAnnotationId) {
             annotationsToShow = annotations.filter(annotation => annotation.id === activeAnnotationId);
         }
@@ -129,9 +133,6 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         annotationsToShow = annotations;
     }
 
-    
-
-
     return (
         <>
             <DrawingList
@@ -170,23 +171,31 @@ 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/DrawingCursor.ts

@@ -1,5 +1,6 @@
 const getDrawingCursor = (color: string): string => {
-    const encodedSvg = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'>
+    const encodedSvg =
+        encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'>
     <defs>
       <path id='ba-DrawingCursor-b' d='M23.0868949,12.6610542 L21.7362465,14.0116939 C21.5985448,14.1493947 21.3758783,14.1493947 21.2381766,14.0116939 L17.9860729,10.7596114 C17.8483713,10.6219106 17.8483713,10.3992455 17.9860729,10.2615447 L19.3367214,8.91090502 C19.8845983,8.36303166 20.7752645,8.36303166 21.3260713,8.91090502 L23.0868949,10.6717173 C23.6377017,11.2195906 23.6377017,12.1102511 23.0868949,12.6610542 Z M16.825863,11.4217471 L9.13214756,19.1154126 L8.51102507,22.6751246 C8.4260602,23.1556124 8.8450249,23.5716446 9.32551588,23.4896101 L12.8852509,22.8655618 L20.5789664,15.1718963 C20.7166681,15.0341955 20.7166681,14.8115304 20.5789664,14.6738296 L17.3268627,11.4217471 C17.1862312,11.2840463 16.9635647,11.2840463 16.825863,11.4217471 Z M12.1352162,18.4562067 C11.974076,18.2950675 11.974076,18.0372447 12.1352162,17.8761055 L16.6471438,13.3642072 C16.8082841,13.203068 17.0661085,13.203068 17.2272488,13.3642072 C17.388389,13.5253464 17.388389,13.7831692 17.2272488,13.9443084 L12.7153212,18.4562067 C12.5541809,18.6173459 12.2963565,18.6173459 12.1352162,18.4562067 L12.1352162,18.4562067 Z M11.0775501,20.9201719 L12.4838652,20.9201719 L12.4838652,21.9836908 L10.5941293,22.3147587 L9.6829543,21.4035896 L10.0140243,19.513866 L11.0775501,19.513866 L11.0775501,20.9201719 Z'/>
       <filter id='ba-DrawingCursor-a' width='196.7%' height='196.7%' x='-48.3%' y='-41.7%' filterUnits='objectBoundingBox'>