fix(range): Fix Range.getClientRects on IE/Edge

src/store/highlight/__mocks__/data.ts

@@ -22,7 +22,11 @@ export const mockDOMRect: DOMRect = {
     y: 200,
 };
 
+const mockTextNode = document.createTextNode('test');
+
 export const mockRange: Range = ({
+    endContainer: mockTextNode,
     getBoundingClientRect: () => mockDOMRect,
     getClientRects: () => [mockDOMRect],
+    startContainer: mockTextNode,
 } as unknown) as Range;

src/store/highlight/__tests__/reducer-test.ts

@@ -2,7 +2,7 @@ import reducer from '../reducer';
 import state from '../__mocks__/highlightState';
 import { Annotation, NewAnnotation } from '../../../@types';
 import { createAnnotationAction } from '../../annotations';
-import { mockContainerRect, mockRange } from '../__mocks__/data';
+import { mockContainerRect, mockDOMRect, mockRange } from '../__mocks__/data';
 import { resetCreatorAction } from '../../creator';
 import { setIsPromotingAction, setSelectionAction } from '../actions';
 
@@ -27,6 +27,28 @@ describe('store/highlight/reducer', () => {
 
             expect(newState.selection).toEqual({ ...state.selection, location: 2 });
         });
+
+        test('should set selection in IE/Edge', () => {
+            jest.spyOn(document, 'createNodeIterator').mockReturnValueOnce(({
+                nextNode: jest.fn().mockReturnValueOnce(mockRange.startContainer),
+            } as unknown) as NodeIterator);
+            jest.spyOn(document, 'createRange').mockReturnValueOnce({
+                ...new Range(),
+                getBoundingClientRect: jest.fn().mockReturnValueOnce(mockDOMRect),
+                selectNodeContents: jest.fn(),
+                setEnd: jest.fn(),
+                setStart: jest.fn(),
+            });
+            const range = {
+                ...mockRange,
+                getClientRects: () => ({ length: 0 } as DOMRectList),
+            };
+
+            const payload = { containerRect: mockContainerRect, location: 1, range };
+            const newState = reducer(state, setSelectionAction(payload));
+
+            expect(newState.selection).toEqual(state.selection);
+        });
     });
 
     describe('createAnnotationAction', () => {

src/store/highlight/actions.ts

@@ -13,6 +13,59 @@ type Payload = {
     payload: SelectionItem | null;
 };
 
+declare global {
+    interface Document {
+        createNodeIterator(
+            root: Node,
+            whatToShow?: number,
+            filter?: NodeFilter | Function,
+            entityReferenceExpansion?: boolean,
+        ): NodeIterator;
+    }
+}
+
+export const getClientRects = (range: Range): DOMRect[] => {
+    const iterator = document.createNodeIterator(
+        range.commonAncestorContainer,
+        NodeFilter.SHOW_ALL,
+        function acceptNode() {
+            return NodeFilter.FILTER_ACCEPT;
+        },
+        false,
+    );
+
+    const newRange = document.createRange();
+    const rects = [];
+    let currentNode = iterator.nextNode();
+    while (currentNode) {
+        if (rects.length === 0 && currentNode !== range.startContainer) {
+            currentNode = iterator.nextNode();
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+
+        // Only highlight Text nodes
+        if (currentNode.nodeType === Node.TEXT_NODE) {
+            newRange.selectNodeContents(currentNode);
+            if (currentNode === range.startContainer) {
+                newRange.setStart(currentNode, range.startOffset);
+            }
+            if (currentNode === range.endContainer) {
+                newRange.setEnd(currentNode, range.endOffset);
+            }
+            rects.push(newRange.getBoundingClientRect());
+        }
+
+        if (currentNode === range.endContainer) {
+            break;
+        }
+
+        currentNode = iterator.nextNode();
+    }
+
+    return rects;
+};
+
 export const getShape = ({ height, left, top, width }: DOMRect): Shape => ({
     height,
     width,
@@ -31,11 +84,17 @@ export const setSelectionAction = createAction(
 
         const { containerRect, location, range } = arg;
 
+        let rects = Array.from(range.getClientRects());
+        // getClientRects on IE/Edge might return 0 rects
+        if (!rects.length) {
+            rects = getClientRects(range);
+        }
+
         return {
             payload: {
                 containerRect: getShape(containerRect),
                 location,
-                rects: combineRectsByRow(Array.from(range.getClientRects()).map(getShape)),
+                rects: combineRectsByRow(rects.map(getShape)),
             },
         };
     },