Use shadow dom if available #3749

davidruisinger · 2020-06-24T13:36:03Z

Is this adding or improving a feature or fixing a bug?

bug

What's the new behavior?

If <Editable /> is rendered within a shadowRoot, internal editor.selection is not updated correctly which (amongst other issues) leads to the cursor always jumping back to the beginning of the text while typing.

How does this change work?

window.getSelection (which is internally used in slate-react) refers to the shadow host selection. Instead of always relying on window.document I've added a getDocumentOrShadowRoot util which either returns the ShadowRoot (if active Element is rendered within a ShadowDom) or Document.
So instead of window.getSelection() we use getDocumentOrShadowRoot ().getSelection()

Have you checked that...?

The new code matches the existing patterns and styles.
The tests pass with yarn test.
The linter passes with yarn lint. (Fix errors with yarn fix.)
The relevant examples still work. (Run examples with yarn start.)

davidruisinger · 2020-07-14T06:09:33Z

@CameronAckermanSEL would be great if you could have a look. THX!

AndrewScull

I found myself facing the same problem so thanks for putting this PR together!

AndrewScull · 2020-08-02T13:14:57Z

packages/slate-react/src/utils/dom.ts

+ */
+
+export const getDocumentOrShadowRoot = (): Document | ShadowRoot => {
+  return window.document.activeElement?.shadowRoot ?? window.document


This seems work for one level of shadowRoot but not if they are nested. I think it needs to be done bottom up from the element in question to find the shadowRoot that contains that element.

I've only come across searches up the node tree to find the appropriate root with something like below (illustrative only). It's probably something that'd be cached on the editor for use when it's needed.

let n = editor; for (let n = n.parentNode; n; n = n.parentNode) { if (n instanceof Document || n instanceof ShadowRoot) break; } const documentOrShadowRoot = n || window.document;

Hmm, interesting. Could you provide a simple example codesandbox (or something similar)?
You can look at the example I created in this PR as a starting point.

I forked your branch of this pull request and updated the Shadow DOM example to also include a nested Shadow DOM.

I've updated that branch with a commit that gets the nested version working too. It's far from being PR-ready and there are some behaviours that I can't yet fully explain so if you're more familiar with these APIs it'd be great to hear what you think.

I had another go at this (branch) after coming across getRootNode() to avoid the tree traversal. However, I'm still running into an issue with key events that seems to be a React issue with shadow DOM. On Chrome, the undo key combo doesn't trigger the event handler and so the undo doesn't happen.

Nice work. I merged your changes into this PR. I've also updated a few smaller things (sorry for the mess with all those commits. I was trying out a few things...)

davidruisinger · 2020-08-17T11:08:13Z

@CameronAckermanSEL , @ianstormtaylor , @BrentFarese , @timbuckley could one of you guys please have a look at this PR?
I really need to get slate working within ShadowDom and it seems that I'm not the only one with this use-case. THX!

ellenblaine · 2020-11-03T17:52:55Z

Hey @flavordaaave thanks for putting this PR together! I also have this use case and am wondering what the status of this PR is. I've really enjoyed Slate in other projects and would like to use it again. Thank you!

davidruisinger · 2020-11-03T20:36:33Z

Hey @flavordaaave thanks for putting this PR together! I also have this use case and am wondering what the status of this PR is. I've really enjoyed Slate in other projects and would like to use it again. Thank you!

Hey @ellenblaine unfortunately none of the maintainers seems to be interested in reviewing/merging this PR which is why we have created our own (internal) fork for now. We still hope that at some point slate will be compatible with beeing rendered within a ShadowDom.

ellenblaine · 2020-11-05T16:00:53Z

packages/slate-react/src/plugin/react-editor.ts

+
+    if (!(root instanceof Document || root instanceof ShadowRoot))
+      throw new Error(
+        `Unable to find DocumentOrShadowRoot for editor element: ${el}`


Noticed an interesting issue experimenting with this branch myself: The selectionchange event fires as the editor unmounts (we have a drawer component that contains the editor -- closing the drawer causes selectionchange to fire). When this happens, the selectionchange event fires and findDocumentOrShadowRoot is called. This error is hit like so:

// ... selectionchange event calls this function ... const el = ReactEditor.toDOMNode(editor, editor) // el is the editor, which isn't currently in the DOM const root = el.getRootNode() // root is another element that is not in the DOM or the shadow root // error throws because root is not Document or ShadowRoot

Any ideas? No worries if not -- this could definitely be an issue that's unrelated to Slate.

I couldn't reproduce this myself, yet. We are also unmounting our slate editor when the user navigates to a different section/page but so far I didn't get this error.
Could you setup a minimal example illustrating this issue?
One idea how to get around this would be to call blur() before the drawer is closed but obviously this would just be a temporally workaround.

FWIW, I'm seeing this same behavior with an unmounting editor... I tried bluring it with a useEffect but that's probably too late.. still errors, but this time in the ReactEditor.blur(editor).

I'm trying to fix an issue related to this change, can you explain why we need to throw an exception here @davidruisinger? I believe I'm missing context. For reference here's my draft pr for fixing the iframe crash, would be good to get some 👀 on it before I add cypress tests

At the very least, these instanceof checks should use getWindow the way other similar checks do

slate/packages/slate-react/src/components/editable.tsx

Lines 383 to 384 in 6a13763

const window = ReactEditor.getWindow(editor)

if (data instanceof window.DataTransfer) {

slate/packages/slate-react/src/utils/dom.ts

Lines 67 to 68 in 8a2a60b

const window = getDefaultView(value)

return !!window && value instanceof window.Node

tomdng · 2020-12-08T18:53:47Z

Hey @flavordaaave thanks for putting this PR together! I also have this use case and am wondering what the status of this PR is. I've really enjoyed Slate in other projects and would like to use it again. Thank you!

Hey @ellenblaine unfortunately none of the maintainers seems to be interested in reviewing/merging this PR which is why we have created our own (internal) for for now. We still hope that at some point slate will be compatible with beeing rendered within a ShadowDom.

Hey @flavordaaave have you attempted to contact the maintainers through the Slate Slack channel by any chance? It looks like the maintainers have their hands full trying to establish a release system for Slate and dealing with issues with the default branch for this repo. Perhaps you might find better luck there raising an issue there since there's a lot of noise with the active issues/PRs here.

davidruisinger · 2020-12-09T07:21:34Z

Hey @flavordaaave thanks for putting this PR together! I also have this use case and am wondering what the status of this PR is. I've really enjoyed Slate in other projects and would like to use it again. Thank you!

Hey @ellenblaine unfortunately none of the maintainers seems to be interested in reviewing/merging this PR which is why we have created our own (internal) for for now. We still hope that at some point slate will be compatible with beeing rendered within a ShadowDom.

Hey @flavordaaave have you attempted to contact the maintainers through the Slate Slack channel by any chance? It looks like the maintainers have their hands full trying to establish a release system for Slate and dealing with issues with the default branch for this repo. Perhaps you might find better luck there raising an issue there since there's a lot of noise with the active issues/PRs here.

@tomdng Yes, I posted the PR there as well (#contributing channel) but I didn't help either.
There might be a small chance that this is working out of the box with React 17 (with the changes to the event delegation). Unfortunately I haven't had time to validate this but will do asap

cpmotion · 2021-01-13T16:08:26Z

Can we make this fix happen? Regularly utilize Slate inside a shadow DOM. PR looks good.

* Moved getDirtyPaths() into the editor object so it can be customized via plugin

Co-authored-by: liuchengshuai001 <liuchengshuai001@ke.com>

Shadow DOM brings different behaviours for selection and active elements. This adds an example where the editor is found within a shadow DOM, in fact, the editor is two levels deep in nested shadow DOMs. The handling of selections means that this editor doesn't work properly so Slate will need to be made aware of the shadow DOM in order to fix this.

If the editor is within a ShadowDom, the selections and active element APIs are implemented on the ShadowRoot for Chrome. Other browsers still use the Document's version of these APIs for the shadow DOM. Instead of defaulting to `window.document`, find the appropriate root to use for the editor in question.

Chrome will always return true for isCollapsed on a selection from the shadow DOM. Work around this by instead computing this property on Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=447523

davidruisinger · 2021-01-25T13:31:41Z

Hey @flavordaaave thanks for putting this PR together! I also have this use case and am wondering what the status of this PR is. I've really enjoyed Slate in other projects and would like to use it again. Thank you!

Hey @ellenblaine unfortunately none of the maintainers seems to be interested in reviewing/merging this PR which is why we have created our own (internal) for for now. We still hope that at some point slate will be compatible with beeing rendered within a ShadowDom.

Hey @flavordaaave have you attempted to contact the maintainers through the Slate Slack channel by any chance? It looks like the maintainers have their hands full trying to establish a release system for Slate and dealing with issues with the default branch for this repo. Perhaps you might find better luck there raising an issue there since there's a lot of noise with the active issues/PRs here.

@tomdng Yes, I posted the PR there as well (#contributing channel) but I didn't help either.
There might be a small chance that this is working out of the box with React 17 (with the changes to the event delegation). Unfortunately I haven't had time to validate this but will do asap

Unfortunately the issue still remains with React 17. So these changes are still needed to get slate working within a shadow DOM. I updated this PR to resolve all open conflicts with the master branch.

changeset-bot · 2021-03-31T19:32:14Z

🦋 Changeset detected

Latest commit: dcf48dd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slate-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Mangatt · 2021-04-05T15:46:24Z

Is it possible that this PR is causing crash in Chromium, @davidruisinger ? See #4170

juliankrispel · 2021-04-11T07:30:23Z

Is it possible that this PR is causing crash in Chromium, @davidruisinger ? See #4170

Indeed this brakes iframe support, here's is the code with the exception thrown:

if (!(root instanceof Document || root instanceof ShadowRoot))
  throw new Error(
    `Unable to find DocumentOrShadowRoot for editor element: ${el}`
  )

for context: gets thrown if root refers to a document element inside an iframe.

ottworks · 2021-05-25T16:03:09Z

I'm getting Unable to find DocumentOrShadowRoot for editor element: [object HTMLDivElement] when I unmount an editor (it's in a react-bootstrap modal). getRootNode returns the now-detached modal div.

- quick hack to test support for rendering inside of shadow dom - based on similar support added to Slate in ianstormtaylor/slate#3749

no issue - quick hack to test support for mobiledoc instances being rendered inside of shadow dom - based on similar support added to Slate in ianstormtaylor/slate#3749

AndrewScull suggested changes Aug 2, 2020

View reviewed changes

andrewfan mentioned this pull request Nov 4, 2020

Support for Rendering within a Shadow DOM facebookarchive/draft-js#1220

Open

ellenblaine reviewed Nov 5, 2020

View reviewed changes

tomdng and others added 19 commits January 25, 2021 14:17

getDirtyPaths can now be customized by Slate users (#4012)

b166a4f

* Moved getDirtyPaths() into the editor object so it can be customized via plugin

docs: Update document in Chinese (#4017)

3afbb5c

Co-authored-by: liuchengshuai001 <liuchengshuai001@ke.com>

Removed unused import

2e4e51e

Use shadowRoot if available

c1aeb58

Removed optional chaining

c441aeb

Added workaround for chrom bug in ShadowDOM

b2d450a

Added shadow DOM example

b94422d

Add compatibility for Chrome's isCollapsed bug

4496a0d

Chrome will always return true for isCollapsed on a selection from the shadow DOM. Work around this by instead computing this property on Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=447523

Removed duplicated example

58236c3

Fixed possible null value

c1b8a42

Use existing PlainTextExample

ffcf38b

Re-added local Editor to have clear initialValue

5ee4989

Optimize shadowRoot checkup

df43f47

Remove getDocumentOrShadowRoot util in favor of findDocumentOrShadowRoot

63b0bc0

Re-added getDocumentOrShadowRoot

4faf910

Put selectionchange listener on window.document

c4581b0

Resetted changes from main branch

cc4aa01

Merge branch 'master' into use_shadow_dom_if_available

c8fd068

ianstormtaylor added 3 commits March 31, 2021 15:35

Create tiny-walls-deliver.md

8ea341f

Update tiny-walls-deliver.md

c8776d7

Update tiny-walls-deliver.md

dcf48dd

ianstormtaylor merged commit 0473d0b into ianstormtaylor:master Mar 31, 2021

github-actions bot mentioned this pull request Mar 31, 2021

Version Packages #4156

Merged

davidruisinger deleted the use_shadow_dom_if_available branch March 31, 2021 20:44

github-actions bot mentioned this pull request Mar 31, 2021

Version Packages msc117/slate#1

Open

JackRobards mentioned this pull request May 18, 2021

slate-react 0.62.0+ - Crash if initial render's root node is not the document (reakit Portal) #4267

Closed

TheSpyder mentioned this pull request Aug 10, 2021

Update findDocumentOrShadowRoot to return the root node instead of throwing unnecessarily #4427

Merged

5 tasks

github-actions bot mentioned this pull request Aug 10, 2021

Version Packages #4368

Merged

kevinansfield added a commit to kevinansfield/mobiledoc-kit that referenced this pull request Jul 26, 2022

WIP: shadow dom support

7e1ae1c

- quick hack to test support for rendering inside of shadow dom - based on similar support added to Slate in ianstormtaylor/slate#3749

kevinansfield mentioned this pull request Jul 26, 2022

WIP: shadow dom support kevinansfield/mobiledoc-kit#1

Open

azvoncov-smartling mentioned this pull request Oct 3, 2022

Selection doesn't work in Safari 15 with Shadow Dom #5144

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use shadow dom if available #3749

Use shadow dom if available #3749

davidruisinger commented Jun 24, 2020

davidruisinger commented Jul 14, 2020

AndrewScull left a comment

AndrewScull Aug 2, 2020 •

edited

Loading

davidruisinger Aug 3, 2020

AndrewScull Aug 3, 2020

AndrewScull Aug 3, 2020

AndrewScull Aug 9, 2020

davidruisinger Aug 17, 2020

davidruisinger commented Aug 17, 2020

ellenblaine commented Nov 3, 2020

davidruisinger commented Nov 3, 2020 •

edited

Loading

ellenblaine Nov 5, 2020 •

edited

Loading

davidruisinger Jan 25, 2021

zwily Apr 12, 2021

juliankrispel Apr 23, 2021

TheSpyder Apr 27, 2021

tomdng commented Dec 8, 2020

davidruisinger commented Dec 9, 2020

cpmotion commented Jan 13, 2021

davidruisinger commented Jan 25, 2021

changeset-bot bot commented Mar 31, 2021 •

edited

Loading

Mangatt commented Apr 5, 2021 •

edited

Loading

juliankrispel commented Apr 11, 2021

ottworks commented May 25, 2021

	const window = ReactEditor.getWindow(editor)
	if (data instanceof window.DataTransfer) {

	const window = getDefaultView(value)
	return !!window && value instanceof window.Node

Use shadow dom if available #3749

Use shadow dom if available #3749

Conversation

davidruisinger commented Jun 24, 2020

Is this adding or improving a feature or fixing a bug?

What's the new behavior?

How does this change work?

Have you checked that...?

davidruisinger commented Jul 14, 2020

AndrewScull left a comment

Choose a reason for hiding this comment

AndrewScull Aug 2, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidruisinger commented Aug 17, 2020

ellenblaine commented Nov 3, 2020

davidruisinger commented Nov 3, 2020 • edited Loading

ellenblaine Nov 5, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomdng commented Dec 8, 2020

davidruisinger commented Dec 9, 2020

cpmotion commented Jan 13, 2021

davidruisinger commented Jan 25, 2021

changeset-bot bot commented Mar 31, 2021 • edited Loading

🦋 Changeset detected

Mangatt commented Apr 5, 2021 • edited Loading

juliankrispel commented Apr 11, 2021

ottworks commented May 25, 2021

AndrewScull Aug 2, 2020 •

edited

Loading

davidruisinger commented Nov 3, 2020 •

edited

Loading

ellenblaine Nov 5, 2020 •

edited

Loading

changeset-bot bot commented Mar 31, 2021 •

edited

Loading

Mangatt commented Apr 5, 2021 •

edited

Loading