Added Web Component shadowDOM support

core/emitter.js

@@ -1,17 +1,16 @@
 import EventEmitter from 'eventemitter3';
-import instances from './instances';
 import logger from './logger';
+import { SHADOW_SELECTIONCHANGE } from './shadow-selection-polyfill';
 
 const debug = logger('quill:events');
-const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];
+const EVENTS = [SHADOW_SELECTIONCHANGE, 'mousedown', 'mouseup', 'click'];
+const EMITTERS = [];
+const supportsRootNode = 'getRootNode' in document;
 
 EVENTS.forEach(eventName => {
   document.addEventListener(eventName, (...args) => {
-    Array.from(document.querySelectorAll('.ql-container')).forEach(node => {
-      const quill = instances.get(node);
-      if (quill && quill.emitter) {
-        quill.emitter.handleDOM(...args);
-      }
+    EMITTERS.forEach(em => {
+      em.handleDOM(...args);
     });
   });
 });
@@ -20,6 +19,7 @@ class Emitter extends EventEmitter {
   constructor() {
     super();
     this.listeners = {};
+    EMITTERS.push(this);
     this.on('error', debug.error);
   }
 
@@ -29,8 +29,24 @@ class Emitter extends EventEmitter {
   }
 
   handleDOM(event, ...args) {
+    const target = event.composedPath ? event.composedPath()[0] : event.target;
+    const containsNode = (node, srcTarget) => {
+      if (!supportsRootNode || srcTarget.getRootNode() === document) {
+        return node.contains(srcTarget);
+      }
+
+      while (!node.contains(srcTarget)) {
+        const root = srcTarget.getRootNode();
+        if (!root || !root.host) {
+          return false;
+        }
+        srcTarget = root.host;
+      }
+      return true;
+    };
+
     (this.listeners[event.type] || []).forEach(({ node, handler }) => {
-      if (event.target === node || node.contains(event.target)) {
+      if (target === node || containsNode(node, target)) {
         handler(event, ...args);
       }
     });

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 { SHADOW_SELECTIONCHANGE, getRange } from './shadow-selection-polyfill';
 
 const debug = logger('quill:selection');
 
@@ -20,13 +21,16 @@ class Selection {
     this.composing = false;
     this.mouseDown = false;
     this.root = this.scroll.domNode;
+    this.rootDocument = this.root.getRootNode
+      ? this.root.getRootNode()
+      : document;
     this.cursor = this.scroll.create('cursor', this);
     // savedRange is last non-null range
     this.savedRange = new Range(0, 0);
     this.lastRange = this.savedRange;
     this.handleComposition();
     this.handleDragging();
-    this.emitter.listenDOM('selectionchange', document, () => {
+    this.emitter.listenDOM(SHADOW_SELECTIONCHANGE, document, () => {
       if (!this.mouseDown && !this.composing) {
         setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
       }
@@ -175,9 +179,7 @@ class Selection {
   }
 
   getNativeRange() {
-    const selection = document.getSelection();
-    if (selection == null || selection.rangeCount <= 0) return null;
-    const nativeRange = selection.getRangeAt(0);
+    const nativeRange = getRange(this.rootDocument);
     if (nativeRange == null) return null;
     const range = this.normalizeNative(nativeRange);
     debug.info('getNativeRange', range);
@@ -192,10 +194,7 @@ class Selection {
   }
 
   hasFocus() {
-    return (
-      document.activeElement === this.root ||
-      contains(this.root, document.activeElement)
-    );
+    return this.rootDocument.activeElement === this.root;
   }
 
   normalizedToRange(range) {
@@ -316,7 +315,10 @@ class Selection {
     ) {
       return;
     }
-    const selection = document.getSelection();
+    const selection =
+      typeof this.rootDocument.getSelection === 'function'
+        ? this.rootDocument.getSelection()
+        : document.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus();