ShadowRoot.createRange is not a function

[boschDev]

The sync was printing errors in the console when pm was loaded within a web component. This line will not execute the create range function on the document instead of the pm root. The pm root is the document of the shadow root of a web component

[dmonad]

Hi @boschDev,

What were the error messages about? Since the original selection is created on the document of the shadow root (const selection = this.prosemirrorView._root.getSelection()) I would assume that we also need to create the selection on the shadow root. I'm honestly not absolutely sure about this because I don't use ProseMirror in a webcomponent. But I don't want to break another project with this change.

[boschDev]

Hi @dmonad,

The selection will still be fetched from the shadow root. The createRange function returns a new Range class. By default, the range select the whole document from start to end. The range class will select the text (and positions) between multiple nodes.

A shadow root is actually more like a wrapper. It stops inheriting some styles. JavaScript can not get all the elements from outside when the mode is closed in the attachShadow function. All the elements within this shadow root can still access the elements in the current and all the parent shadow roots. It is possible to get all the elements in the shadow root when the mode is open in the attachShadow function. For more info take a look to this.

I don't know this 100 percent, but this makes sense to me. Because the prose mirror is running within the shadow root we can access the shadow root instance with prosemirrorView._root. Here we fetch the selection within the shadow root and give this to the Range class to select a text range within a shadow root. Now the range class has access to the elements with this shadow root and all the parent shadow roots.

I currently fix this for me with the following line:

ShadowRoot.prototype.createRange = document.createRange.bind(document)

[dmonad]

Hi @boschDev , sorry I haven't fixed this. But I fear that I will break some systems when I do this.

I don't understand why the global document can make a selection in a scoped shadow-root. This seems weird to me. The shadow-root should be able to make selections in its own shadow-root as well. I think I need a test-case that confirms that your approach is always working as expected. Then I can confirm that this works in all browsers.