React-draft-wysiwyg: Using editor inside an iframe

[rogyvojevic]

Hello,

I tried to use editor inside an iframe that I have on the page, but it's not really working, it breaks on adding event listeners. I looked into it and I think the problem is in init function inside modals.js.

const wrapper = document.getElementById(wrapperId); // eslint-disable-line no-undef

Error:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at t.init (react-draft-wysiwyg.js:34)
    at e.value (react-draft-wysiwyg.js:32)
    at ReactCompositeComponent.js:265
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponent.js:264
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
    at ReactReconcileTransaction.closeAll (Transaction.js:206)
    at ReactReconcileTransaction.perform (Transaction.js:153)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:140)

I tried to build it myself but faced some problems...
Is this something you can look into?

Thanks

[jpuri]

Hey @rogyvoje: I will check this issue soon. Thanks a lot for bringing it up.

[jpuri]

Hey @rogyvoje, I am unable to replicate iframe issue check this: http://codepen.io/jpuri/pen/ggawed.

Can you plz share your code snippet and also the issue you are coming across in build.

[rogyvojevic]

Hey @jpuri, will do as soon as possible, thanks for letting me know 👍

[jpuri]

Closing the issue as there is no response, issue can be re-opened if required.

[MangoBird]

Passing react component as children of iframe does cause invariant exception for me as it should because the Element prototypes of root app and iframe are different. Solved this by initializing new react app inside iframe by using src attribute as @jpuri did in Codepen. I think this is original intension of iframe and one should avoid using iframe and root app as one application by making some hacky solution to avoid unexpected errors.