Does not work in Shadow DOM in Safari 10.

[bradleyayers]

When ProseMirror adopts an element inside a Shadow DOM in Safari 10, an exception is thrown.

The reason appears to be that in Safari 10 the extensions to DocumentOrShadowRoot don't appear to have all been applied to the shadow root.

This means that in rangeToDOM, getSelection is undefined, which when invoked throws an exception.

var sel = this.pm.root.getSelection(),

We've raised https://bugs.webkit.org/show_bug.cgi?id=163921 to track this against Safari.

[marijnh]

Safari isn't really known for responding to bugs quickly. Is there a kludge you know of that lets us access the shadow dom's selection in another way in the meantime?

[bradleyayers]

I haven't had time to look into this yet unfortunately.

In any case if it turns out that one does not exist, there are other kludges that might be tolerable on my side like using a polyfill implementation of Shadow DOM rather than native. I'll make sure to update this issue with any discoveries.

[marijnh]

Has anyone checked whether the Safari shipped with 10.12.4 fixes this?

[bedeoverend]

Checked, still broken. That's Safari 10.1. Also still broken in Safari 10.2 (Tech Preview 26)

[madeleineostoja]

Looks like this might be an answer: https://github.com/GoogleChromeLabs/shadow-selection-polyfill

Could just flag in docs and encourage users to bundle the polyfill for safari. Note haven't tested it myself yet, was just released. Will spin up a fresh env to see if it resolves the issue when I get a mo.

[jsturgill]

I'm just working my way through the very first introductory steps in your documentation in an attempt to get ProseMirror working in a web component using Shadow DOM and ran into this.

There may be things it doesn't address, but adding a ShadowRoot.getSelection method that simply calls document.getSelection appears to make things go so far.

I made an NPM package shadow-root-get-selection-polyfill for it.

[marijnh]

Last time I looked, document.getSelection wouldn't accurately reflect selections inside a shadow DOM (by just treating the shadow root as being the selected node). Did that change?

[jsturgill]

I didn't have Safari to test with, but looking into it more, I doubt it does anything helpful in Safari. The fix only works in Firefox because of a quirk in its implementation of ShadowRoot.

[alex-ketch]

Just encountered this issue with CodeMirror 6 prototype while trying to pass in a Shadow DOM to the editor root configuration.
Wanted to report that, at first glance, the jsturgill/shadow-root-get-selection-polyfill seems to have gotten the editor working in Safari 13.0.3 and Firefox 71.

[marijnh]

Thanks, that's useful to know.

[marijnh]

ProseMirror/prosemirror-view@bf61fc34b74baf2fb7884fa might help with this. (And if not, I don't believe there anything ProseMirror can do about this, so I'm closing this issue.)