Feature: Ability to render the editor in an iframe

I’m trying to render the editor inside an iframe (via a react portal), but it’s not working and I suspect this is due to the fact that it’s referencing the global window object for selection state, etc. I’d like to be able to pass a custom window object (the iframe window)

One solution is to provide the window object in a react context. It can be passed in via an optional prop to the RichTextPlugin or PlainTextPlugin (or maybe even LexicalComposer) and would default to window.

Alternatively, Slate reads the window from the contentEditable DOM node. So if you have a ref to that DOM node, you can look up it’s parent window with something like…

contentEditableNode.current.ownerDocument.defaultView

We can expose this as a helper and replace all references to the global window with the helper like Slate…

https://github.com/ianstormtaylor/slate/blob/main/packages/slate-react/src/plugin/react-editor.ts#L54-L64

[trueadm]

How about https://github.com/facebook/lexical/pull/3578?

[darabun]

I’m trying to get this working but can’t seem to get it to work when it’s in the iframe.

I have it reproduced here: https://codesandbox.io/s/aged-frog-iu8ff7

It works when outside of the iframe but not when inside it. Is there something obvious that I’m doing wrong?