Algebrakit-ShadowDom support

packages/quill/src/blots/cursor.ts

@@ -3,6 +3,7 @@ import type { Parent, ScrollBlot } from 'parchment';
 import type Selection from '../core/selection.js';
 import TextBlot from './text.js';
 import type { EmbedContextRange } from './embed.js';
+import type { DOMRootType } from '../core/dom-root.js';
 
 class Cursor extends EmbedBlot {
   static blotName = 'cursor';
@@ -21,7 +22,9 @@ class Cursor extends EmbedBlot {
   constructor(scroll: ScrollBlot, domNode: HTMLElement, selection: Selection) {
     super(scroll, domNode);
     this.selection = selection;
-    this.textNode = document.createTextNode(Cursor.CONTENTS);
+    // Access DOMRoot through scroll (enhanced with domRoot property)
+    const domRoot = (scroll as any).domRoot as DOMRootType;
+    this.textNode = domRoot.createTextNode(Cursor.CONTENTS);
     this.domNode.appendChild(this.textNode);
     this.savedLength = 0;
   }
@@ -115,7 +118,8 @@ class Cursor extends EmbedBlot {
       mergedTextBlot = nextTextBlot;
       nextTextBlot.insertAt(0, newText);
     } else {
-      const newTextNode = document.createTextNode(newText);
+      const domRoot = (this.scroll as any).domRoot as DOMRootType;
+      const newTextNode = domRoot.createTextNode(newText);
       mergedTextBlot = this.scroll.create(newTextNode);
       this.parent.insertBefore(mergedTextBlot, this);
     }

packages/quill/src/blots/embed.ts

@@ -1,6 +1,7 @@
 import type { ScrollBlot } from 'parchment';
 import { EmbedBlot } from 'parchment';
 import TextBlot from './text.js';
+import type { DOMRootType } from '../core/dom-root.js';
 
 const GUARD_TEXT = '\uFEFF';
 
@@ -18,13 +19,15 @@ class Embed extends EmbedBlot {
 
   constructor(scroll: ScrollBlot, node: Node) {
     super(scroll, node);
-    this.contentNode = document.createElement('span');
+    // Access DOMRoot through scroll (enhanced with domRoot property)
+    const domRoot = (scroll as any).domRoot as DOMRootType;
+    this.contentNode = domRoot.createElement('span') as HTMLSpanElement;
     this.contentNode.setAttribute('contenteditable', 'false');
     Array.from(this.domNode.childNodes).forEach((childNode) => {
       this.contentNode.appendChild(childNode);
     });
-    this.leftGuard = document.createTextNode(GUARD_TEXT);
-    this.rightGuard = document.createTextNode(GUARD_TEXT);
+    this.leftGuard = domRoot.createTextNode(GUARD_TEXT);
+    this.rightGuard = domRoot.createTextNode(GUARD_TEXT);
     this.domNode.appendChild(this.leftGuard);
     this.domNode.appendChild(this.contentNode);
     this.domNode.appendChild(this.rightGuard);
@@ -40,6 +43,8 @@ class Embed extends EmbedBlot {
     let range: EmbedContextRange | null = null;
     let textNode: Text;
     const text = node.data.split(GUARD_TEXT).join('');
+    const domRoot = (this.scroll as any).domRoot as DOMRootType;
+
     if (node === this.leftGuard) {
       if (this.prev instanceof TextBlot) {
         const prevLength = this.prev.length();
@@ -49,7 +54,7 @@ class Embed extends EmbedBlot {
           startOffset: prevLength + text.length,
         };
       } else {
-        textNode = document.createTextNode(text);
+        textNode = domRoot.createTextNode(text);
         this.parent.insertBefore(this.scroll.create(textNode), this);
         range = {
           startNode: textNode,
@@ -64,7 +69,7 @@ class Embed extends EmbedBlot {
           startOffset: text.length,
         };
       } else {
-        textNode = document.createTextNode(text);
+        textNode = domRoot.createTextNode(text);
         this.parent.insertBefore(this.scroll.create(textNode), this.next);
         range = {
           startNode: textNode,

packages/quill/src/blots/scroll.ts

@@ -3,6 +3,7 @@ import type { Blot, Parent, EmbedBlot, ParentBlot, Registry } from 'parchment';
 import Delta, { AttributeMap, Op } from 'quill-delta';
 import Emitter from '../core/emitter.js';
 import type { EmitterSource } from '../core/emitter.js';
+import type { DOMRootType } from '../core/dom-root.js';
 import Block, { BlockEmbed, bubbleFormats } from './block.js';
 import Break from './break.js';
 import Container from './container.js';
@@ -36,15 +37,17 @@ class Scroll extends ScrollBlot {
   static allowedChildren = [Block, BlockEmbed, Container];
 
   emitter: Emitter;
+  domRoot: DOMRootType;
   batch: false | MutationRecord[];
 
   constructor(
     registry: Registry,
     domNode: HTMLDivElement,
-    { emitter }: { emitter: Emitter },
+    { emitter, domRoot }: { emitter: Emitter; domRoot: DOMRootType },
   ) {
     super(registry, domNode);
     this.emitter = emitter;
+    this.domRoot = domRoot;
     this.batch = false;
     this.optimize();
     this.enable();

packages/quill/src/core.ts

@@ -25,6 +25,7 @@ import Input from './modules/input.js';
 import UINode from './modules/uiNode.js';
 
 export { default as Module } from './core/module.js';
+export { default as DOMRoot } from './core/dom-root.js';
 export { Delta, Op, OpIterator, AttributeMap, Parchment, Range };
 export type {
   Bounds,