DraftJS is not actually stateless

When I tried to render DraftJS into an iframe window, for example:

ReactDOM.render(<DraftEditor .../>,
  document
    .getElementById('some_iframe')
    .contentWindow
    .document
    .getElementById('some_inner_element'))

inside the DraftJS functions, there were window, global, document variables, which were global variables, still referenced to the parent window (the window that run the above snippet). So, global.getSelection, node !== document.documentElement didn’t work.

Render components inside iframe is important for isolating CSS especially rem unit. Looking forward to having a discussion around this. Thank you all!

[acusti]

I have a PR in React that fixes SelectEventPlugin, ReactInputSelection, and ReactDOMSelection for cross-iframe compatibility: https://github.com/facebook/react/pull/7936

It depends on a PR in fbjs to make some of those utilities iframe compatible: https://github.com/facebook/fbjs/pull/188

Next up is a PR specifically for this issue, but it, of course, will depend on those other two PRs. I’m hopeful that the final result will be a version of draft that can be rendered into an iframe (like what react-frame-component does) and still have all events and functionality fully preserved. This will also make it easy to have multiple selections, which makes linking a section of text, for example, much nicer. I made a demo of a textarea where you can link portions of it to demonstrate that use case.

Without the changes in the React + fbjs PRs: http://codepen.io/acusti/pen/EgQxJG?editors=0011 With the changes in the React + fbjs PRs: http://codepen.io/acusti/pen/qaxBby?editors=0011

[gjulivan]

@acusti Thanks! It works on my side now. I was using react-dom 16.4, upgraded to 16.5 and managed to alter the instanceOf validations. you are really helpful.