Store rootDocument

For shadowDom compat, may later also be a ShadowRoot

packages/quill/src/core/quill.ts

@@ -24,6 +24,7 @@ import type { ThemeConstructor } from './theme.js';
 import scrollRectIntoView from './utils/scrollRectIntoView.js';
 import type { Rect } from './utils/scrollRectIntoView.js';
 import createRegistryWithFormats from './utils/createRegistryWithFormats.js';
+import { getRoot } from './utils/documents.js';
 
 const debug = logger('quill');
 
@@ -177,6 +178,7 @@ class Quill {
 
   container: HTMLElement;
   root: HTMLDivElement;
+  rootDocument: Document;
   scroll: Scroll;
   emitter: Emitter;
   protected allowReadOnlyEdits: boolean;
@@ -195,6 +197,7 @@ class Quill {
   constructor(container: HTMLElement | string, options: QuillOptions = {}) {
     this.options = expandConfig(container, options);
     this.container = this.options.container;
+    this.rootDocument = this.container.ownerDocument;
     if (this.container == null) {
       debug.error('Invalid Quill container', container);
       return;

packages/quill/src/core/selection.ts

@@ -43,6 +43,7 @@ class Selection {
   mouseDown: boolean;
 
   root: HTMLElement;
+  rootDocument: Document;
   cursor: Cursor;
   savedRange: Range;
   lastRange: Range | null;
@@ -54,6 +55,7 @@ class Selection {
     this.composing = false;
     this.mouseDown = false;
     this.root = this.scroll.domNode;
+    this.rootDocument = this.root.ownerDocument;
     // @ts-expect-error
     this.cursor = this.scroll.create('cursor', this);
     // savedRange is last non-null range
@@ -133,10 +135,10 @@ class Selection {
   }
 
   handleDragging() {
-    this.emitter.listenDOM('mousedown', this.root.ownerDocument.body, () => {
+    this.emitter.listenDOM('mousedown', this.rootDocument.body, () => {
       this.mouseDown = true;
     });
-    this.emitter.listenDOM('mouseup', this.root.ownerDocument.body, () => {
+    this.emitter.listenDOM('mouseup', this.rootDocument.body, () => {
       this.mouseDown = false;
       this.update(Emitter.sources.USER);
     });
@@ -240,7 +242,7 @@ class Selection {
   }
 
   getNativeRange(): NormalizedRange | null {
-    const selection = this.root.ownerDocument.getSelection();
+    const selection = this.rootDocument.getSelection();
     if (selection == null || selection.rangeCount <= 0) return null;
     const nativeRange = selection.getRangeAt(0);
     if (nativeRange == null) return null;
@@ -263,7 +265,7 @@ class Selection {
   }
 
   hasFocus(): boolean {
-    const doc = this.root.ownerDocument ?? document;
+    const doc = this.rootDocument;
     return (
       doc.activeElement === this.root ||
       (doc.activeElement != null && contains(this.root, doc.activeElement))
@@ -373,7 +375,7 @@ class Selection {
     ) {
       return;
     }
-    const selection = this.root.ownerDocument.getSelection();
+    const selection = this.rootDocument.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus({ preventScroll: true });

packages/quill/src/modules/syntax.ts

@@ -235,10 +235,11 @@ class Syntax extends Module<SyntaxOptions> {
   initListener() {
     this.quill.on(Quill.events.SCROLL_BLOT_MOUNT, (blot: Blot) => {
       if (!(blot instanceof SyntaxCodeBlockContainer)) return;
-      const select = this.quill.root.ownerDocument.createElement('select');
+      const doc = this.quill.rootDocument;
+      const select = doc.createElement('select');
       // @ts-expect-error Fix me later
       this.options.languages.forEach(({ key, label }) => {
-        const option = select.ownerDocument.createElement('option');
+        const option = doc.createElement('option');
         option.textContent = label;
         option.setAttribute('value', key);
         select.appendChild(option);
@@ -299,7 +300,7 @@ class Syntax extends Module<SyntaxOptions> {
           return delta.insert(line);
         }, new Delta());
     }
-    const container = this.quill.root.ownerDocument.createElement('div');
+    const container = this.quill.rootDocument.createElement('div');
     container.classList.add(CodeBlock.className);
     container.innerHTML = highlight(this.options.hljs, language, text);
     return traverse(

packages/quill/src/modules/toolbar.ts

@@ -37,7 +37,7 @@ class Toolbar extends Module<ToolbarProps> {
       quill.container?.parentNode?.insertBefore(container, quill.container);
       this.container = container;
     } else if (typeof this.options.container === 'string') {
-      this.container = document.querySelector(this.options.container);
+      this.container = quill.rootDocument.querySelector(this.options.container);
     } else {
       this.container = this.options.container;
     }

packages/quill/src/modules/uiNode.ts

@@ -94,17 +94,13 @@ class UINode extends Module {
       }
     };
 
-    this.quill.root.ownerDocument.addEventListener(
-      'selectionchange',
-      listener,
-      {
-        once: true,
-      },
-    );
+    this.quill.rootDocument.addEventListener('selectionchange', listener, {
+      once: true,
+    });
   }
 
   private handleSelectionChange() {
-    const selection = this.quill.container.ownerDocument.getSelection();
+    const selection = this.quill.rootDocument.getSelection();
     if (!selection) return;
     const range = selection.getRangeAt(0);
     if (range.collapsed !== true || range.startOffset !== 0) return;

packages/quill/src/modules/uploader.ts

@@ -17,7 +17,7 @@ class Uploader extends Module<UploaderOptions> {
     quill.root.addEventListener('drop', (e) => {
       e.preventDefault();
       let native: ReturnType<typeof document.createRange> | null = null;
-      const doc = quill.root.ownerDocument;
+      const doc = quill.rootDocument;
       if (doc.caretRangeFromPoint) {
         native = doc.caretRangeFromPoint(e.clientX, e.clientY);
         // @ts-expect-error

packages/quill/src/themes/base.ts

@@ -66,7 +66,7 @@ class BaseTheme extends Theme {
 
   constructor(quill: Quill, options: ThemeOptions) {
     super(quill, options);
-    const doc = quill.root.ownerDocument ?? document;
+    const doc = quill.rootDocument ?? document;
     const listener = (e: MouseEvent) => {
       if (!doc.body.contains(quill.root)) {
         doc.body.removeEventListener('click', listener);

packages/quill/src/themes/bubble.ts

@@ -28,7 +28,7 @@ class BubbleTooltip extends BaseTooltip {
     this.quill.on(
       Emitter.events.EDITOR_CHANGE,
       (type, range, oldRange, source) => {
-        const doc = quill.root.ownerDocument ?? document;
+        const doc = quill.rootDocument;
         if (type !== Emitter.events.SELECTION_CHANGE) return;
         if (
           range != null &&

packages/quill/src/ui/tooltip.ts

@@ -13,8 +13,7 @@ class Tooltip {
 
   constructor(quill: Quill, boundsContainer?: HTMLElement) {
     this.quill = quill;
-    this.boundsContainer =
-      boundsContainer || quill.root.ownerDocument.body || document.body;
+    this.boundsContainer = boundsContainer || quill.rootDocument.body;
     this.root = quill.addContainer('ql-tooltip');
     // @ts-expect-error
     this.root.innerHTML = this.constructor.TEMPLATE;