Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing DocumentOrShadowRoot interface implementation #66

Closed
bedeoverend opened this issue Mar 17, 2017 · 7 comments

Comments

@bedeoverend
Copy link

commented Mar 17, 2017

Doesn't appear implement the DocumentOrShadowRoot interface - or only activeElement property seems to be implemented. Particularly for dealing with selections and ranges this is needed. I'm trying to use Prosemirror inside a component but this causes it to break - any chance some, if not all this interface will get implemented?

@bedeoverend

This comment has been minimized.

Copy link
Author

commented Mar 17, 2017

Worth noting it seems only Chrome has implemented this - WebKit has an open bug

@sorvell

This comment has been minimized.

Copy link
Contributor

commented Apr 4, 2017

I think at least some subset of the range/selection api could be implemented. It will likely be significant code and therefore, I'd imagine making it opt-in. The focus currently is on getting the core functionality of the library production ready rather than adding more advanced features.

@dam0vm3nt

This comment has been minimized.

Copy link

commented Jun 26, 2017

Hi guys, meanwhile this get fixed, is there any realiable way of getting the caret position in a contenteditable inside a shadyRoot ? Can I use window.getSelection() ?

@olegomon

This comment has been minimized.

Copy link

commented May 4, 2018

@sorvell There is there any progress on implementing the full interface for the DocumentOrShadowRoot interface? I think the full support for it is required for any WYSIWYG editors which are based on the "contenteditable" elements.

Also note that there is an attempt to implement "shadowRoot.getSelection()" polyfill already.
See shadow-selection-polyfill

@web-padawan

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2018

I have recently done some investigation regarding getSelection API, sharing the results.

Short summary

Only Chrome supports getSelection() on the Shadow Root. Neither Firefox 63 beta, nor Safari have it enabled. In Firefox 63 global API still works, Safari 10+ needs a polyfill.

Long Story

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

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

Especially, it is not designed to emulate the whole getSelection() API , but only implements getSelection().getRangeAt(0) which appears to be working nice, still it needs to be properly tested, preferably covered by automated tests (as much as possible).

This issue is affects lots of WYSIWYG editors relying on window.getSelection() (or document.getSelection() which is the same), when those are placed inside of the shadow root:

Below goes the result of 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
https://bugs.webkit.org/show_bug.cgi?id=163921

  • 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

Expecting both Safari 10 and 12 versions to behave the same.

@azakus azakus self-assigned this Oct 5, 2018
@azakus azakus transferred this issue from webcomponents/shadydom Jun 7, 2019
@samthor

This comment has been minimized.

Copy link

commented Jun 7, 2019

FYI I wrote a disgusting polyfill for .getSelection inside a Shadow Root here: https://github.com/GoogleChromeLabs/shadow-selection-polyfill

azakus added a commit that referenced this issue Jun 11, 2019
Exclude more files from Bower package
@azakus azakus closed this in 01ea427 Jun 11, 2019
@web-padawan

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

@azakus @sorvell this issue appears to be closed by accident, most likely in progress of migrating to monorepo. The actual issue is still valid, so please reopen.

Also, the opt-in implementation for this would be highly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.