Wrap Quill and add value property

[tomivirkki]

Plans here

• value should represent the Quill's Delta

[web-padawan]

There is a pending PR introducing shadow DOM support: slab/quill#1805

I'm in favour of creating our own fork for now, and re-using the work from there.

[web-padawan]

Submitted a PR rebased on top of 1.3.6 release: slab/quill#2337

Tests are failing in Safari because not implemented getSelection() API.
Potential fix would be using https://github.com/GoogleChromeLabs/shadow-selection-polyfill

[web-padawan]

Short summary

Only Chrome supports getSelection() on the Shadow Root. Neither Firefox 63 beta, nor Safari have it enabled. We need to invest some time in development of our own polyfill to make it work (especially relevant for Safari, as in Firefox 63 global API still works).

Long Story

Original issue is being discussed here: WICG/webcomponents#79
There is no final agreement around it yet, although we might hear some news in the end of October: WICG/webcomponents#763 (comment)

There is an unofficial polyfill by one guy from Google but in only covers part of functionality:
https://github.com/GoogleChromeLabs/shadow-selection-polyfill

Especially, it does not polyfill the whole getSelection() properly, but rather getSelection().getRangeAt(0) which is something we could start with, but it needs to be properly tested, preferably covered by automatic tests.

This issue is not only about the Quill itself, as it will also affect any editor relying on window.getSelection() (or document.getSelection() which is the same), when placed inside of the shadow root.

Solution options

1. it might be that Google has some kind of working polyfill internally, we should ask (at least from what I understand they are upgrading from Polymer 1 now and should face this issue, too)

2. implement our own polyfill, e.g. based on https://github.com/timdown/rangy/wiki/Rangy-Selection
   This would mean quite extra work and testing effort. Then we would have to somehow integrate it into the Quill editor, which is a separate task (we might need our own fork for that).

UPD: testing window.getSelection() API in the browsers lacking it on shadow root:

Firefox 63 beta

https://bugzilla.mozilla.org/show_bug.cgi?id=1430308

• getSelection() not implemented on shadow root
• window.getSelection() returns nodes from shadow trees (leaking as if they were not in shadow)
• window.getSelection().addRange() applies the selection when passing range with start and end nodes from the inside of shadow tree
• window.getSelection().removeAllRanges() works

Summary: Firefox 63 beta could be using global API for now but this might break in future

Safari 11

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/dom/DocumentOrShadowRoot.idl#L30

• getSelection() is not implemented on shadow root
• window.getSelection() does not leak nodes from shadow trees (reporting node as body)
• window.getSelection().addRange() works when passing range with start and end nodes from shadow tree (so using global API seems to work here)
• window.getSelection().removeAllRanges() works

Other Editors

Related issues in the other WYSIWYG editors:

• Trix: [Feature] Support Shadow DOM v1 basecamp/trix#403
• CKEditor: ckeditor/ckeditor5-engine#692
• Prosemirror: Does not work in Shadow DOM in Safari 10. ProseMirror/prosemirror#476
• Squire: Various dysfunctional behaviors when using with shadow DOM (potential fix) fastmail/Squire#327

[platosha]

Could “Make Quill work on light DOM” be an option?

[web-padawan]

@platosha the users would be still placing Quill inside of the some shadow root (either view or app-shell components), and in Safari the window.getSelection() will no longer report correct nodes.

[web-padawan]

Early prototype pushed as https://github.com/vaadin/vaadin-rich-text-editor/tree/proto/wrap-quill

Problems identified:

1. shadow selection polyfill only works partially in Safari. Example:

• type some text
• select it
• choose "Header" in the formatting select
• nothing happens

This line gets empty range although works in Chrome: https://github.com/web-padawan/quill/blob/303d73fdd4bdf50a678877caf24927311305d91a/modules/toolbar.js#L87

2. shadow selection polyfill produces lots of log output in Safari while cursor is inside of the editor, causing a performance bottleneck and even handing browser tab at some point (investigating)

3. ShadyCSS scoping is not fully applied to select (Firefox 62, Edge):

4. HierarchyRequestError happens in Edge when focusing and typing (also looks related to the shadow selection polyfill, needs checking without it):

5. Quill styles not applying at all in IE11. Keyboard shortcut still work, e.g. Ctrl + B makes the text bold. Some errors in the console, related to shadow DOM support patch:

[web-padawan]

Update:

1. Shadow selection polyfill must be only invoked in Safari, it will break in IE11, Edge and Firefox

2. Shadow selection polyfill does not work properly with Quill out of the box because of this line: https://github.com/quilljs/quill/blob/96e38e92637b75b907579d0cc1b201920aebe38c/core/selection.js#L32

See the listener in the polyfill where setTimeout is also used and the timeout is 0: https://github.com/GoogleChromeLabs/shadow-selection-polyfill/blob/9eff233c765a685bbf488b2f8eba0d3d75f44cbd/shadow.js#L74

[aadamsx]

Are there plans to wrap the ckeditor too? I've used both, and ckeditor has always been full featured.

[web-padawan]

@aadamsx we have decided to build initial version on top of Quill. In the future we might consider changing the internal implementation based e.g. on customer requests, but no such plans for now.