box-annotations 5.3.0 → 5.3.1-beta.0

package/src/region/RegionRect.scss

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

package/src/store/annotations/actions.ts

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

package/src/store/annotations/reducer.ts

@@ -37,7 +37,9 @@ const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder
         .addCase(createAnnotationAction.fulfilled, (state, { payload: { id } }) => {
             state.push(id);
         })
-        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) =>
+            state.filter(annotationId => annotationId !== id),
+        )
         .addCase(removeAnnotationAction, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(({ id }) => state.indexOf(id) === -1 && state.push(id));
@@ -67,9 +69,7 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .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,
-                );
+                annotation.replies = annotation.replies.map(existing => (existing.id === reply.id ? reply : existing));
             }
         })
         .addCase(deleteReplyAction.fulfilled, (state, { payload: { annotationId, replyId } }) => {

package/src/store/creator/selectors.ts

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

package/src/store/eventing/create.ts

@@ -15,8 +15,10 @@ const emitCreateEvent = (action: AsyncAction<NewAnnotation, Annotation>, status:
     });
 };
 
-const createHandler = (status: Status) => (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
-    emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
+const createHandler =
+    (status: Status) =>
+    (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
+        emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
 
 const handleCreateErrorEvents = createHandler(Status.ERROR);
 const handleCreatePendingEvents = createHandler(Status.PENDING);

package/src/store/eventing/delete.ts

@@ -14,11 +14,10 @@ const emitDeleteEvent = (action: AsyncAction<string, string>, status: Status): v
     });
 };
 
-const deleteHandler = (status: Status) => (
-    _prev: AppState,
-    _next: AppState,
-    action: AsyncAction,
-): void => emitDeleteEvent(action as AsyncAction<string, string>, status);
+const deleteHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitDeleteEvent(action as AsyncAction<string, string>, status);
 
 const handleDeleteErrorEvents = deleteHandler(Status.ERROR);
 const handleDeletePendingEvents = deleteHandler(Status.PENDING);

package/src/store/eventing/middleware.ts

@@ -71,19 +71,21 @@ export const eventHandlers: EventHandlerMap = {
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {
-    return (store: MiddlewareAPI) => (next: Dispatch) => (action: Action): Action => {
-        const { type } = action;
-        // Retrieve the prevState as well as the nextState after the action has modified the state in order
-        // to pass all that information to the event handler
-        const prevState = store.getState();
-        const result = next(action);
-        const nextState = store.getState();
+    return (store: MiddlewareAPI) =>
+        (next: Dispatch) =>
+        (action: Action): Action => {
+            const { type } = action;
+            // Retrieve the prevState as well as the nextState after the action has modified the state in order
+            // to pass all that information to the event handler
+            const prevState = store.getState();
+            const result = next(action);
+            const nextState = store.getState();
 
-        const handler = handlers[type] || noop;
-        handler(prevState, nextState, action);
+            const handler = handlers[type] || noop;
+            handler(prevState, nextState, action);
 
-        return result;
-    };
+            return result;
+        };
 }
 
 export default getEventingMiddleware;

package/src/store/eventing/replyCreate.ts

@@ -1,15 +1,12 @@
 import eventManager from '../../common/EventManager';
-import { Reply , Event } from '../../@types';
+import { Reply, Event } from '../../@types';
 import { AppState } from '../types';
 import { AsyncAction, Status } from './types';
 
 type ReplyCreateArg = { annotationId: string; message: string };
 type ReplyCreatePayload = { annotationId: string; reply: Reply };
 
-const emitReplyCreateEvent = (
-    action: AsyncAction<ReplyCreateArg, ReplyCreatePayload>,
-    status: Status,
-): void => {
+const emitReplyCreateEvent = (action: AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     if (status === Status.SUCCESS && !payload?.reply) return;
     const annotationId = payload?.annotationId ?? arg?.annotationId;
@@ -21,11 +18,10 @@ const emitReplyCreateEvent = (
     });
 };
 
-const replyCreateHandler = (status: Status) => (
-    _prev: AppState,
-    _next: AppState,
-    action: AsyncAction,
-): void => emitReplyCreateEvent(action as AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status);
+const replyCreateHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitReplyCreateEvent(action as AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status);
 
 const handleReplyCreateErrorEvents = replyCreateHandler(Status.ERROR);
 const handleReplyCreatePendingEvents = replyCreateHandler(Status.PENDING);

package/src/store/eventing/replyDelete.ts

@@ -6,10 +6,7 @@ import { Event } from '../../@types';
 type ReplyDeleteArg = { annotationId: string; replyId: string };
 type ReplyDeletePayload = { annotationId: string; replyId: string };
 
-const emitReplyDeleteEvent = (
-    action: AsyncAction<ReplyDeleteArg, ReplyDeletePayload>,
-    status: Status,
-): void => {
+const emitReplyDeleteEvent = (action: AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     if (status === Status.SUCCESS && !payload) return;
     const annotationId = payload?.annotationId ?? arg?.annotationId;
@@ -22,11 +19,10 @@ const emitReplyDeleteEvent = (
     });
 };
 
-const replyDeleteHandler = (status: Status) => (
-    _prev: AppState,
-    _next: AppState,
-    action: AsyncAction,
-): void => emitReplyDeleteEvent(action as AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status);
+const replyDeleteHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitReplyDeleteEvent(action as AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status);
 
 const handleReplyDeleteErrorEvents = replyDeleteHandler(Status.ERROR);
 const handleReplyDeletePendingEvents = replyDeleteHandler(Status.PENDING);

package/src/store/eventing/replyUpdate.ts

@@ -1,5 +1,5 @@
 import eventManager from '../../common/EventManager';
-import { Reply , Event } from '../../@types';
+import { Reply, Event } from '../../@types';
 import { AppState } from '../types';
 import { AsyncAction, Status } from './types';
 
@@ -10,10 +10,7 @@ type ReplyUpdateArg = {
 };
 type ReplyUpdatePayload = { annotationId: string; reply: Reply };
 
-const emitReplyUpdateEvent = (
-    action: AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>,
-    status: Status,
-): void => {
+const emitReplyUpdateEvent = (action: AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     if (status === Status.SUCCESS && !payload?.reply) return;
     const annotationId = payload?.annotationId ?? arg?.annotationId;
@@ -26,11 +23,10 @@ const emitReplyUpdateEvent = (
     });
 };
 
-const replyUpdateHandler = (status: Status) => (
-    _prev: AppState,
-    _next: AppState,
-    action: AsyncAction,
-): void => emitReplyUpdateEvent(action as AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>, status);
+const replyUpdateHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitReplyUpdateEvent(action as AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>, status);
 
 const handleReplyUpdateErrorEvents = replyUpdateHandler(Status.ERROR);
 const handleReplyUpdatePendingEvents = replyUpdateHandler(Status.PENDING);

package/src/store/eventing/update.ts

@@ -1,5 +1,5 @@
 import eventManager from '../../common/EventManager';
-import { Annotation , Event } from '../../@types';
+import { Annotation, Event } from '../../@types';
 import { AppState } from '../types';
 import { AsyncAction, Status } from './types';
 
@@ -16,11 +16,10 @@ const emitUpdateEvent = (action: AsyncAction<UpdateArg, Annotation>, status: Sta
     });
 };
 
-const updateHandler = (status: Status) => (
-    _prev: AppState,
-    _next: AppState,
-    action: AsyncAction,
-): void => emitUpdateEvent(action as AsyncAction<UpdateArg, Annotation>, status);
+const updateHandler =
+    (status: Status) =>
+    (_prev: AppState, _next: AppState, action: AsyncAction): void =>
+        emitUpdateEvent(action as AsyncAction<UpdateArg, Annotation>, status);
 
 const handleUpdateErrorEvents = updateHandler(Status.ERROR);
 const handleUpdatePendingEvents = updateHandler(Status.PENDING);

package/src/store/highlight/actions.ts

@@ -77,59 +77,61 @@ export const getShape = ({ height, left, top, width }: DOMRect): Shape => ({
     y: top,
 });
 
-export const setSelectionAction = createAction(
-    'SET_SELECTION',
-    (arg: SelectionArg | null): Payload => {
-        if (!arg) {
-            return {
-                payload: null,
-            };
-        }
-
-        const { containerEl, containerRect, hasError, location, range, rotation } = arg;
+export const setSelectionAction = createAction('SET_SELECTION', (arg: SelectionArg | null): Payload => {
+    if (!arg) {
+        return {
+            payload: null,
+        };
+    }
 
-        let rects = Array.from(range.getClientRects());
-        // getClientRects on IE/Edge might return 0 rects
-        if (!rects.length) {
-            rects = getClientRects(range);
-        }
+    const { containerEl, containerRect, hasError, location, range, rotation } = arg;
 
-        const screenShapes = rects.map(getShape);
-
-        if (rotation && containerEl) {
-            // Convert screen rects to element-local coordinates
-            const localRects = screenShapes.map(shape => {
-                const [lx1, ly1] = getElementLocalPosition(shape.x, shape.y, containerEl, rotation);
-                const [lx2, ly2] = getElementLocalPosition(shape.x + shape.width, shape.y + shape.height, containerEl, rotation);
-                return {
-                    x: Math.min(lx1, lx2),
-                    y: Math.min(ly1, ly2),
-                    width: Math.abs(lx2 - lx1),
-                    height: Math.abs(ly2 - ly1),
-                };
-            });
+    let rects = Array.from(range.getClientRects());
+    // getClientRects on IE/Edge might return 0 rects
+    if (!rects.length) {
+        rects = getClientRects(range);
+    }
 
+    const screenShapes = rects.map(getShape);
+
+    if (rotation && containerEl) {
+        // Convert screen rects to element-local coordinates
+        const localRects = screenShapes.map(shape => {
+            const [lx1, ly1] = getElementLocalPosition(shape.x, shape.y, containerEl, rotation);
+            const [lx2, ly2] = getElementLocalPosition(
+                shape.x + shape.width,
+                shape.y + shape.height,
+                containerEl,
+                rotation,
+            );
             return {
-                payload: {
-                    containerRect: { x: 0, y: 0, width: containerEl.offsetWidth, height: containerEl.offsetHeight },
-                    hasError,
-                    location,
-                    popupRect: getBoundingRect(screenShapes),
-                    rects: combineRects(localRects),
-                },
+                x: Math.min(lx1, lx2),
+                y: Math.min(ly1, ly2),
+                width: Math.abs(lx2 - lx1),
+                height: Math.abs(ly2 - ly1),
             };
-        }
+        });
 
         return {
             payload: {
-                containerRect: getShape(containerRect),
+                containerRect: { x: 0, y: 0, width: containerEl.offsetWidth, height: containerEl.offsetHeight },
                 hasError,
                 location,
-                rects: combineRects(screenShapes),
+                popupRect: getBoundingRect(screenShapes),
+                rects: combineRects(localRects),
             },
         };
-    },
-);
+    }
+
+    return {
+        payload: {
+            containerRect: getShape(containerRect),
+            hasError,
+            location,
+            rects: combineRects(screenShapes),
+        },
+    };
+});
 
 export const setIsPromotingAction = createAction<boolean>('SET_IS_PROMOTING');
 export const setIsSelectingAction = createAction<boolean>('SET_IS_SELECTING');