Greyepoxy/issue 2633

core/quill.js

@@ -457,7 +457,8 @@ Quill.imports = {
   'core/theme': Theme,
 };
 
-function expandConfig(container, userConfig) {
+function expandConfig(container, userConfig, containerDocument) {
+  containerDocument = containerDocument || document;
   userConfig = extend(
     true,
     {
@@ -524,7 +525,7 @@ function expandConfig(container, userConfig) {
   );
   ['bounds', 'container', 'scrollingContainer'].forEach(key => {
     if (typeof userConfig[key] === 'string') {
-      userConfig[key] = document.querySelector(userConfig[key]);
+      userConfig[key] = containerDocument.querySelector(userConfig[key]);
     }
   });
   userConfig.modules = Object.keys(userConfig.modules).reduce(

core/selection.js

@@ -26,7 +26,7 @@ class Selection {
     this.lastRange = this.savedRange;
     this.handleComposition();
     this.handleDragging();
-    this.emitter.listenDOM('selectionchange', document, () => {
+    this.emitter.listenDOM('selectionchange', this.root.ownerDocument, () => {
       if (!this.mouseDown && !this.composing) {
         setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
       }
@@ -89,10 +89,10 @@ class Selection {
   }
 
   handleDragging() {
-    this.emitter.listenDOM('mousedown', document.body, () => {
+    this.emitter.listenDOM('mousedown', this.root.ownerDocument.body, () => {
       this.mouseDown = true;
     });
-    this.emitter.listenDOM('mouseup', document.body, () => {
+    this.emitter.listenDOM('mouseup', this.root.ownerDocument.body, () => {
       this.mouseDown = false;
       this.update(Emitter.sources.USER);
     });
@@ -150,7 +150,7 @@ class Selection {
     }
     let side = 'left';
     let rect;
-    if (node instanceof Text) {
+    if (node instanceof Text || node.nodeType === Node.TEXT_NODE) {
       if (offset < node.data.length) {
         range.setStart(node, offset);
         range.setEnd(node, offset + 1);
@@ -175,7 +175,7 @@ class Selection {
   }
 
   getNativeRange() {
-    const selection = document.getSelection();
+    const selection = this.root.ownerDocument.getSelection();
     if (selection == null || selection.rangeCount <= 0) return null;
     const nativeRange = selection.getRangeAt(0);
     if (nativeRange == null) return null;
@@ -193,8 +193,8 @@ class Selection {
 
   hasFocus() {
     return (
-      document.activeElement === this.root ||
-      contains(this.root, document.activeElement)
+      this.root.ownerDocument.activeElement === this.root ||
+      contains(this.root, this.root.ownerDocument.activeElement)
     );
   }
 
@@ -316,7 +316,7 @@ class Selection {
     ) {
       return;
     }
-    const selection = document.getSelection();
+    const selection = this.root.ownerDocument.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus();

modules/toolbar.js

@@ -19,7 +19,7 @@ class Toolbar extends Module {
     } else {
       this.container = this.options.container;
     }
-    if (!(this.container instanceof HTMLElement)) {
+    if (this.container.ownerDocument === 'undefined') {
       return debug.error('Container required for toolbar', this.options);
     }
     this.container.classList.add('ql-toolbar');

test/helpers/unit.js

@@ -5,9 +5,7 @@ import Selection from '../../core/selection';
 import Scroll from '../../blots/scroll';
 import Quill, { globalRegistry } from '../../core/quill';
 
-const div = document.createElement('div');
-div.id = 'test-container';
-document.body.appendChild(div);
+const div = setupTestContainer();
 
 window.onerror = function(msg) {
   return msg === 'Script error.';
@@ -28,6 +26,37 @@ beforeEach(function() {
   this.initialize = initialize.bind(this);
 });
 
+function setupTestContainer() {
+  const testFrame = document.createElement('iframe');
+  testFrame.setAttribute('width', 2000);
+  testFrame.setAttribute('height', 2000);
+  testFrame.setAttribute('frameborder', 0);
+  document.body.appendChild(testFrame);
+  const headerCssNodesHtml = getCssLinkNodesText(document.head);
+  const bodyCssNodesHtml = getCssLinkNodesText(document.body);
+  testFrame.contentWindow.document.open();
+  testFrame.contentWindow.document.write(
+    `<!DOCTYPE html>\n<html><head>${headerCssNodesHtml}</head><body>${bodyCssNodesHtml}</body></html>`,
+  );
+  testFrame.contentWindow.document.close();
+  const divTestContainer = document.createElement('div');
+  divTestContainer.id = 'test-container';
+  testFrame.contentWindow.document.body.appendChild(divTestContainer);
+  return divTestContainer;
+}
+
+function getCssLinkNodesText(elementToSearchFrom) {
+  const cssLinkNodes = elementToSearchFrom.querySelectorAll(
+    'link[type="text/css"]',
+  );
+
+  return Array.from(cssLinkNodes.values())
+    .map(function(element) {
+      return element.outerHTML;
+    })
+    .join('');
+}
+
 function compareApproximately(actual, expected, tolerance) {
   const pass = Math.abs(actual - expected) <= tolerance;
   return {
@@ -38,7 +67,7 @@ function compareApproximately(actual, expected, tolerance) {
 
 function compareHTML(actual, expected, ignoreClassId, ignoreUI = true) {
   const [div1, div2] = [actual, expected].map(function(html) {
-    if (html instanceof HTMLElement) {
+    if (typeof html !== 'string') {
       html = html.innerHTML;
     }
     const container = document.createElement('div');

test/unit/core/quill.js

@@ -480,12 +480,19 @@ describe('Quill', function() {
     });
 
     it('convert css selectors', function() {
-      const config = expandConfig('#test-container', {
-        bounds: '#test-container',
-      });
-      expect(config.bounds).toEqual(document.querySelector('#test-container'));
+      const containerDocument = this.container.ownerDocument;
+      const config = expandConfig(
+        '#test-container',
+        {
+          bounds: '#test-container',
+        },
+        containerDocument,
+      );
+      expect(config.bounds).toEqual(
+        containerDocument.querySelector('#test-container'),
+      );
       expect(config.container).toEqual(
-        document.querySelector('#test-container'),
+        containerDocument.querySelector('#test-container'),
       );
     });
 
@@ -610,13 +617,14 @@ describe('Quill', function() {
     });
 
     it('toolbar container shorthand', function() {
+      const containerDocument = this.container.ownerDocument;
       const config = expandConfig('#test-container', {
         modules: {
-          toolbar: document.querySelector('#test-container'),
+          toolbar: containerDocument.querySelector('#test-container'),
         },
       });
       expect(config.modules.toolbar).toEqual({
-        container: document.querySelector('#test-container'),
+        container: containerDocument.querySelector('#test-container'),
         handlers: Toolbar.DEFAULTS.handlers,
       });
     });