diff --git a/packages/quill/src/core/quill.ts b/packages/quill/src/core/quill.ts index dae5267bc..dabb541b6 100644 --- a/packages/quill/src/core/quill.ts +++ b/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; diff --git a/packages/quill/src/core/selection.ts b/packages/quill/src/core/selection.ts index 9fcd16475..e8f241c0f 100644 --- a/packages/quill/src/core/selection.ts +++ b/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 }); diff --git a/packages/quill/src/modules/syntax.ts b/packages/quill/src/modules/syntax.ts index da99fdc41..a3df45c50 100644 --- a/packages/quill/src/modules/syntax.ts +++ b/packages/quill/src/modules/syntax.ts @@ -235,10 +235,11 @@ class Syntax extends Module { 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 { 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( diff --git a/packages/quill/src/modules/toolbar.ts b/packages/quill/src/modules/toolbar.ts index 7028a9ccb..44d9007cc 100644 --- a/packages/quill/src/modules/toolbar.ts +++ b/packages/quill/src/modules/toolbar.ts @@ -37,7 +37,7 @@ class Toolbar extends Module { 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; } diff --git a/packages/quill/src/modules/uiNode.ts b/packages/quill/src/modules/uiNode.ts index fe947eff6..32bf299ce 100644 --- a/packages/quill/src/modules/uiNode.ts +++ b/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; diff --git a/packages/quill/src/modules/uploader.ts b/packages/quill/src/modules/uploader.ts index 5b4c6e880..65de23df3 100644 --- a/packages/quill/src/modules/uploader.ts +++ b/packages/quill/src/modules/uploader.ts @@ -17,7 +17,7 @@ class Uploader extends Module { quill.root.addEventListener('drop', (e) => { e.preventDefault(); let native: ReturnType | null = null; - const doc = quill.root.ownerDocument; + const doc = quill.rootDocument; if (doc.caretRangeFromPoint) { native = doc.caretRangeFromPoint(e.clientX, e.clientY); // @ts-expect-error diff --git a/packages/quill/src/themes/base.ts b/packages/quill/src/themes/base.ts index a679cc4a3..82fba666a 100644 --- a/packages/quill/src/themes/base.ts +++ b/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); diff --git a/packages/quill/src/themes/bubble.ts b/packages/quill/src/themes/bubble.ts index 4c2d2de52..0dc43c0da 100644 --- a/packages/quill/src/themes/bubble.ts +++ b/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 && diff --git a/packages/quill/src/ui/tooltip.ts b/packages/quill/src/ui/tooltip.ts index 5b8d2a21a..6d59d9c50 100644 --- a/packages/quill/src/ui/tooltip.ts +++ b/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;