quill icon indicating copy to clipboard operation
quill copied to clipboard
verified publisher icon slab

Algebrakit-ShadowDom support

Open algebrakit opened this issue 5 months ago • 14 comments

Make Quill work inside a container with shadow DOM enabled.

  • Created a wrapper class DOMRoot that represents a document root or shadow DOM. See packages/quill/src/core/dom-root.ts
  • Added many unit tests

Tested in Chrome and Safari on a Mac.

algebrakit avatar Jul 03 '25 20:07 algebrakit

Hi! Thank you for this big work! Could you please explain the advantage of this approach? Doesn't using Shadow DOM create customization issues for external styling?

021-projects avatar Jul 05 '25 18:07 021-projects

Shadow DOM is a web standard to isolate web components. Anyone who develops web components for reuse in 3rd party websites (should) use Shadow DOM to prevent cross-over of CSS styling (for example). However, we couldn't find a good text editor that works within a container with shadow DOM, so we decided to implement the feature ourselves. There are more people interested.

To be clear: This update does not introduce a Shadow DOM. It just ensures Quill functions correctly when used within a container with Shadow DOM.

algebrakit avatar Jul 05 '25 20:07 algebrakit

Got it! Thank you for your explanations and your work)

021-projects avatar Jul 05 '25 20:07 021-projects

algebrakit

We need this as well. I tried to use your fork in an angular application and got hit with a bunch of typescript errors. Can you provide a bit more info on how you installed and got your fork working?

jessehouchins avatar Jul 25 '25 17:07 jessehouchins

Hi @jessehouchins, In packages/quill folder: npm i npm run build

I am using typescript 4.9.3

What are the errors you are getting?

algebrakit avatar Jul 25 '25 18:07 algebrakit

I had something messed up with my node modules. At one point I got it to build by adding "skipLibCheck": true to the compiler options, but that no longer seems necessary.

jessehouchins avatar Jul 28 '25 13:07 jessehouchins

@algebrakit I noticed the toolbar buttons are not highlighting for me when used in shadow dom...

Light DOM Screenshot 2025-07-28 at 11 00 40 AM

Shadow DOM Screenshot 2025-07-28 at 10 57 51 AM

jessehouchins avatar Jul 28 '25 16:07 jessehouchins

Ignore me... turns out this was a bug in our custom CSS and not related to this PR

jessehouchins avatar Jul 28 '25 16:07 jessehouchins

I have tested this in the following browsers and all seem to be working well:

  1. Mac Chrome (138.0.7204.169)
  2. Mac Safari (18.3.1)
  3. Mac Firefox (142.0b4)
  4. Mac Edge (138.0.3351.109)
  5. Windows 11 Chrome
  6. Windows 11 Edge
  7. iOS Safari

jessehouchins avatar Jul 28 '25 19:07 jessehouchins

Noticed that I can no longer drag images into the editor with this (in shadow dom). Copy/paste still works.

jessehouchins avatar Jul 29 '25 21:07 jessehouchins

Hi @jessehouchins, the relevant changes for shadow dom support are in packages/quill/src/core/dom-root.ts. I expect drag & drop can be added there as well.

algebrakit avatar Jul 30 '25 05:07 algebrakit

Thanks for the big effort! For our project we also need Quill to work in the shadow dom. Can someone give me an idea of when/if I can expect this PR to be merged into main?

eg-jebenja avatar Aug 14 '25 07:08 eg-jebenja

Thanks for the big effort! For our project we also need Quill to work in the shadow dom. Can someone give me an idea of when/if I can expect this PR to be merged into main?

Unfortunately the main authors don't care about the project, so fork it yourself and work on Quill. They'll come back someday and you can contribute.

021-projects avatar Aug 23 '25 01:08 021-projects

sorely needing this, too...

petri avatar Sep 16 '25 12:09 petri