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.
mdmjg
commented
4 years ago
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
windowanddocument, but makes no attempt to determine if thewindowanddocumentglobals 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
ownerWIndowvariable to ref.current.ownerDocument.defaultView. 2) Add an optionalownerWindowprop 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.