Add getSelection() polyfill for Safari shadow DOM

Author: web-padawan

core/emitter.js

@@ -3,7 +3,7 @@ import logger from './logger';
 
 let debug = logger('quill:events');
 
-const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];
+const EVENTS = ['-shadow-selectionchange', 'mousedown', 'mouseup', 'click'];
 const EMITTERS = [];
 const supportsRootNode = ('getRootNode' in document);
 

core/selection.js

@@ -3,6 +3,7 @@ import clone from 'clone';
 import equal from 'deep-equal';
 import Emitter from './emitter';
 import logger from './logger';
+import * as shadow from 'shadow-selection-polyfill';
 
 let debug = logger('quill:selection');
 
@@ -28,7 +29,7 @@ class Selection {
     this.lastRange = this.savedRange = new Range(0, 0);
     this.handleComposition();
     this.handleDragging();
-    this.emitter.listenDOM('selectionchange', this.rootDocument, () => {
+    this.emitter.listenDOM('-shadow-selectionchange', document, () => {
       if (!this.mouseDown) {
         setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
       }
@@ -158,9 +159,21 @@ class Selection {
   }
 
   getNativeRange() {
-    let selection = this.rootDocument.getSelection();
-    if (selection == null || selection.rangeCount <= 0) return null;
-    let nativeRange = selection.getRangeAt(0);
+    let nativeRange;
+
+    // in Safari and iOS we need to use shadow selection polyfill
+    const ua = navigator.userAgent;
+    const isSafari = /^((?!chrome|android).)*safari/i.test(ua) || /iPad|iPhone/.test(ua);
+    const hasShadowWithNoSelection = this.rootDocument instanceof ShadowRoot && !this.rootDocument.getSelection;
+
+    if (hasShadowWithNoSelection && isSafari) {
+      nativeRange = shadow.getRange();
+    } else {
+      let selection = this.rootDocument.getSelection();
+      if (selection == null || selection.rangeCount <= 0) return null;
+      nativeRange = selection.getRangeAt(0);
+    }
+
     if (nativeRange == null) return null;
     let range = this.normalizeNative(nativeRange);
     debug.info('getNativeRange', range);
@@ -269,7 +282,7 @@ class Selection {
     if (startNode != null && (this.root.parentNode == null || startNode.parentNode == null || endNode.parentNode == null)) {
       return;
     }
-    let selection = this.rootDocument.getSelection();
+    let selection = typeof this.rootDocument.getSelection === 'function' ? this.rootDocument.getSelection() : document.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus();

package.json

@@ -37,7 +37,8 @@
     "eventemitter3": "^2.0.3",
     "extend": "^3.0.1",
     "parchment": "^1.1.4",
-    "quill-delta": "^3.6.2"
+    "quill-delta": "^3.6.2",
+    "shadow-selection-polyfill": "^1.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",