fix(ie): Fix IE compatibility issues

box · Sep 2, 2020 · eda38fb · eda38fb
1 parent 895461a
commit eda38fb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/src/BoxAnnotations.ts b/src/BoxAnnotations.ts
@@ -3,6 +3,7 @@ import BaseAnnotator from './common/BaseAnnotator';
 import ImageAnnotator from './image/ImageAnnotator';
 import DocumentAnnotator from './document/DocumentAnnotator';
 import { IntlOptions, Permissions, PERMISSIONS, Type } from './@types';
+import './utils/polyfill';
 
 type Annotator = {
     CONSTRUCTOR: typeof BaseAnnotator;

diff --git a/src/document/__tests__/docUtil-test.ts b/src/document/__tests__/docUtil-test.ts
@@ -38,18 +38,38 @@ describe('docUtil', () => {
     });
 
     describe('getRange()', () => {
+        const mockSelection = {
+            getRangeAt: () => 'range',
+            isCollapsed: false,
+            rangeCount: 1,
+            type: 'Range',
+        };
+
         test.each`
-            selection                                                      | result
-            ${null}                                                        | ${null}
-            ${{ type: 'Caret' }}                                           | ${null}
-            ${{ isCollapsed: true, type: 'Range' }}                        | ${null}
-            ${{ isCollapsed: true, rangeCount: 0, type: 'Range' }}         | ${null}
-            ${{ getRangeAt: () => 'range', rangeCount: 1, type: 'Range' }} | ${'range'}
+            selection                                  | result
+            ${null}                                    | ${null}
+            ${{ ...mockSelection, type: 'Caret' }}     | ${null}
+            ${{ ...mockSelection, isCollapsed: true }} | ${null}
+            ${{ ...mockSelection, rangeCount: 0 }}     | ${null}
+            ${mockSelection}                           | ${'range'}
         `('should return range as $result', ({ selection, result }) => {
             jest.spyOn(window, 'getSelection').mockImplementationOnce(() => selection);
 
             expect(getRange()).toBe(result);
         });
+
+        test('should ignore selection type on IE', () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            window.MSInputMethodContext = 'context';
+            document.documentMode = 11;
+            jest.spyOn(window, 'getSelection').mockReturnValueOnce(({
+                ...mockSelection,
+                type: undefined,
+            } as unknown) as Selection);
+
+            expect(getRange()).toBe('range');
+        });
     });
 
     describe('getSelection()', () => {

diff --git a/src/document/docUtil.ts b/src/document/docUtil.ts
@@ -4,6 +4,16 @@ type Selection = {
     range: Range;
 };
 
+declare global {
+    interface Document {
+        documentMode?: number;
+    }
+}
+
+export function isIE(): boolean {
+    return !!window.MSInputMethodContext && !!document.documentMode;
+}
+
 /**
  * Finds the closest ancestor DOM element with the specified class.
  */
@@ -29,7 +39,9 @@ export function getPageNumber(element: Element | null): number | undefined {
 
 export function getRange(): Range | null {
     const selection = window.getSelection();
-    if (!selection || selection.type !== 'Range' || selection.isCollapsed || !selection.rangeCount) {
+
+    // Selection in IE does not have type property
+    if (!selection || selection.isCollapsed || !selection.rangeCount || (!isIE() && selection.type !== 'Range')) {
         return null;
     }