Emitter: support event handling when quill is inside of shadowDOM (#125)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

core/emitter.js

@@ -8,7 +8,12 @@ const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];
 if (hasWindow()) {
   EVENTS.forEach((eventName) => {
     document.addEventListener(eventName, (...args) => {
-      Array.from(document.querySelectorAll('.ql-container')).forEach((node) => {
+      const event = args[0];
+      const shadowRoot = event?.target?.shadowRoot;
+      const root = shadowRoot ?? document;
+      const quillContainers = root.querySelectorAll('.ql-container');
+
+      Array.from(quillContainers).forEach((node) => {
         const quill = instances.get(node);
         if (quill && quill.emitter) {
           quill.emitter.handleDOM(...args);

test/unit.js

@@ -11,6 +11,7 @@ import './unit/blots/block-embed';
 import './unit/blots/inline';
 
 import './unit/core/editor';
+import './unit/core/emitter';
 import './unit/core/selection';
 import './unit/core/quill';
 import './unit/core/input';

test/unit/core/emitter.js

@@ -0,0 +1,32 @@
+import Quill from '../../../core/quill';
+
+describe('Emitter', function () {
+  it('handleDOM is called on event handling', function () {
+    this.quill = this.initialize(Quill, '');
+    spyOn(this.quill.emitter, 'handleDOM');
+
+    const event = new Event('click');
+    document.dispatchEvent(event);
+
+    expect(this.quill.emitter.handleDOM).toHaveBeenCalledWith(event);
+  });
+
+  it('handleDOM is called on event handling if quill container is in shadowDOM', function () {
+    const shadowContainer = document.body.appendChild(document.createElement('div'));
+    try {
+      shadowContainer.attachShadow({ mode: 'open' });
+      shadowContainer.shadowRoot.innerHTML = '<div></div>';
+      const quillContainer = shadowContainer.shadowRoot.querySelector('div');
+
+      this.quill = this.initialize(Quill, '', quillContainer);
+      spyOn(this.quill.emitter, 'handleDOM');
+
+      const event = new Event('click', { bubbles: true });
+      shadowContainer.dispatchEvent(event);
+
+      expect(this.quill.emitter.handleDOM).toHaveBeenCalledWith(event);
+    } finally {
+      shadowContainer.remove();
+    }
+  });
+});