Why provided code doesn't work

The reason why your code doesn't work is in Quill library's architecture. And I have several possible proposals for you how to overcome it.

Please, take a look at the Emitter package. It contains listeners to the document events:

EVENTS.forEach((eventName) => {
  document.addEventListener(eventName, (...args) => {
    Array.from(document.querySelectorAll('.ql-container')).forEach((node) => {
      const quill = instances.get(node);
      if (quill && quill.emitter) {
        quill.emitter.handleDOM(...args);
      }
    });
  });
});

There are even more listeners to the DOM's root if you use the search for the project

When you are initializing an instance of Quill library via React function createPortal, you are passing an element in the other window, created by the window.open function. The other window has the separate document tree attached. So when events trigger in window's DOM model, they bubble up to the child window's document, not original window's document.

React portal doesn't help here. It knows nothing about these handlers and doesn't bubble them up to the original window.

There are two options how to overcome this difficulty.

1. Use functions and callbacks to communicate with child window

Instead of initializing Quill for the child in main window's code, you should have separate page (window.open('/separate-page')) in the same domain for it. Initialize it there. You don't need react createPortal in this implementation.

These two pages can communicate with each other by using methods, declared in child window's code and callbacks declared in main window's code. Please take a look at this article for more details:

https://usefulangle.com/post/4/javascript-communication-parent-child-window

I prefer this option because it has much cleaner architecture than the next one.

2. Manually pass through events triggered in the child window to the main window

This is hard one and has a lot of disadvantages:

• It might need to reverse engineer the source code of the Quill library.
• It might need modifications when Quill library change. Because it's highly bound to it's current architecture and code.

You can manually add event listeners to all the events that Quill library listens in the document and manually trigger them in child's document via dispatchEvent method.

I would strongly advice you to step away off this route and use the first approach instead.