Slate: Slate Editor onChange doesn't fire if rendered into another tab/window/document/frame

[spudly]

Do you want to request a _feature_ or report a _bug_?

Report a bug

What's the current behavior?

When the slate editor is rendered normally (into the same document) and the user makes changes in the editor, the onChange event is fired as expected.

However, when the slate editor is rendered into a different document (such as an iframe, different browser tab/window) the onChange event does not fire.

I believe this is because in slate-react uses globals like window and document, but makes no attempt to determine if the window and document globals are in fact the correct instances to attach event listeners to.

There are a few ways to get the "right" window object
1) Render a container element with a ref. Then set a ownerWIndow variable to ref.current.ownerDocument.defaultView.
2) Add an optional ownerWindow prop to <Editor />. In this scenario, it will be the users' responsibility to provide the ownerWindow prop if they need to render inside different documents.

Once you have the right window object, you can derive the "right" document object from it and use those new variables whenever you're adding/removing event listeners.

Sandbox: https://codesandbox.io/s/slate-frame-portal-issue-jeebd?file=/index.js
Gif: Nope. Couldn't get recordit to work. The sandbox should be sufficient though.
Slate: 0.58.0
Browser: Chrome
OS: Mac

What's the expected behavior?

The onChange event should fire regardless of what document the slate editor is rendered into.

[mdmjg]

I'll work on this!