Algebrakit-ShadowDom support

[algebrakit]

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.

[021-projects]

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?

[algebrakit]

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.

[021-projects]

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

[jessehouchins]

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?

[algebrakit]

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?

[jessehouchins]

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]

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

Light DOM

Shadow DOM

[jessehouchins]

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

[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]

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

[algebrakit]

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.

[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?

[021-projects]

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.

[petri]

sorely needing this, too...