[Shadow DOM] Allow selection from target encapsulated by a shadow root

[mdgbayly]

Extracting ideas from PR #561 that was never merged, to begin adding support for Shadow DOM:

Re-submit of #4720 with tweaks to support shadow DOM in browsers other than Chrome where the DocumentOrShadowRoot mixin is still implemented on the document interface.

We're trying to get tinymce working in web components that utilize shadow DOM. Our initial usage of tinymce is for an inline editor with a simple toolbar.

My intent is to create a number of small PRs that progressively fix more issues required in order to make our use cases work, rather than one big blanket PR that makes all tinymce use cases support shadow DOM.

This PR fixes the selection so that if an editor is encapsulated by a shadow root, the current selection is obtained from the shadow root's selection rather than the window selection.

Also attempted to add some tests, (there were previously no tests for the Selection function.
Tried to glean what I could from reading other tinymce tests, but not sure if what I have come up with is particularly clean or standard for writing tinymce tests.

[metricjs]

Hey @mdgbayly, thanks for this PR! Unfortunately we are not accepting PRs for support for ShadowDOM in TinyMCE's inline mode, as we can not currently support it due to browser limitations. In particular:

• Safari doesn't provide a way to get the selection for the shadow root (likely means we can't support Safari).
• Firefox doesn't implement the DocumentOrShadowRoot.getSelection() API, but it will return the shadow root selection for Window.getSelection().

We are keeping an eye on discussions regarding replacing this API with Selection.getComposedRange(), however no browsers implement this API at this time. If it is implemented, we will then investigate inline mode support for ShadowDOM again.

See WICG/webcomponents#79 and w3c/selection-api#98 for more about the Selection.getComposedRange() API.

[mfreed7]

(Hopefully you don't mind me commenting on a closed issue. If there's a better place to put this, let me know.)

Hello, I just wanted to check in on this issue, and point out a new proposal for a Shadow DOM compatible Selection API. This proposal has been being discussed on WICG/webcomponents#79. In particular, this comment gives a quick TL;DR summary of the proposal.

In particular, I'd be curious to hear the opinions of the TinyMCE maintainers as to whether this proposal will suit your needs:

1. Is the proposal understandable to you?

2. Does the proposed getComposedRange() API work for your use case?

3. In particular, do the two parameters, selectionRoot and shadowRoots make sense? And would they allow you to easily make use of cross-scope selection information?

4. Do the changes to the "setter" APIs like setBaseAndExtent() seem like they'll work for your use case?

5. Do you have any need to get selection information "anywhere on the page", i.e. within any shadow root? This would likely require another parameter to make this easy, if so.

6. Do you have any other concerns or feedback?

I'd love to hear your feedback either here in this issue, or (better) on the Selection API thread. These changes are still very much in development, so your feedback can have an impact. Thanks!

[spocke]

Thanks for reaching out we have struggled with getting tinymce working within a shadowRoot so it's nice to see some progress happening here.

1. Is the proposal understandable to you?

Yes, I think it pretty clear what it's trying to solve.

2. Does the proposed getComposedRange() API work for your use case?

Partially, it allows you to get the range out within a shadowRoot but not the selection direction unless I missed something. I asked about that in particular in the Selection API thread.

3. In particular, do the two parameters, selectionRoot and shadowRoots make sense? And would they allow you to easily make use of cross-scope selection information?

Yes, selectionRoot in particular seems useful for us dealing with a selection within a single shadowRoot. Having an editor with a web component.

4. Do the changes to the "setter" APIs like setBaseAndExtent() seem like they'll work for your use case?

Yes, from my understanding it will allow you to set focusNode/anchorNode in any shadowRoot. So it would make it possible for us to set the selection within an editor within a shadowRoot and also it's direction.

5. Do you have any need to get selection information "anywhere on the page", i.e. within any shadow root? This would likely require another parameter to make this easy, if so.

I think our current focus is to just get the editor to work in inline mode within a shadowRoot so mostly getting/setting a selection within a single shadowRoot.

6. Do you have any other concerns or feedback?

Not at this point.

[mfreed7]

@spocke thanks for the quick and detailed answers! I appreciate it. I also appreciate the comment you added about the direction - it's a good point I hadn't considered. I answered you over there. Please feel free to follow up with any further concerns. Hopefully if/when this proposal becomes a reality, you all are willing to prototype?