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

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

* feat(region): Move test to actions-test

Author: Mingze

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__/actions-test.ts

@@ -0,0 +1,47 @@
+import state from '../__mocks__/highlightState';
+import { mockContainerRect, mockDOMRect, mockRange } from '../__mocks__/data';
+import { setSelectionAction } from '../actions';
+
+describe('store/highlight/actions', () => {
+    describe('setSelectionAction', () => {
+        const arg = {
+            containerRect: mockContainerRect,
+            location: 1,
+            range: mockRange,
+        };
+
+        test('should prepare correct argument', () => {
+            expect(setSelectionAction(arg)).toEqual({
+                payload: state.selection,
+                type: 'SET_SELECTION',
+            });
+        });
+
+        test('should prepare correct argument 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 newArg = {
+                ...arg,
+                range,
+            };
+
+            expect(setSelectionAction(newArg)).toEqual({
+                payload: state.selection,
+                type: 'SET_SELECTION',
+            });
+        });
+    });
+});

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)),
             },
         };
     },