Iframe and Quill-React, events are lost

Hey,

I have an issue where I want to use React Quill within an iframe. It does render and callback events are triggered accordingly whenever typing in the editor, but the tool bar is not working at all.

This is what I do I am building a small template editor that will have areas (normal divs) that my hope is to convert into editable areas using Quill.

I then include my template into the iframe, but through ReactHtmlParser. With ReactHtmlParser I loop through each node and I look for divs (at the moment only one) with the cms-text data attribute.

ReactHtmlParser provides us with a transformer method. I am using that to convert <div data-cms-text="true"></div> to a Quill component:

<Quill
	onChange={contentUpdated}
	placeholder="Type something... :-)"
	theme={"snow"}
	key="some-uniqiue-key" />

This works!

This is what’s going wrong The Quill tool bar doesn’t respond to anything I do. It’s as those events are never registered within the iframe. I have set up a repo here that illustrates the problem: https://github.com/entiendoNull/react-iframe-test

To begin with I figured that this may have been a problem related to the usage react-frame-component and I filed this issue there: https://github.com/ryanseddon/react-frame-component/issues/133

It was then suggested that this is more of a problem related to QuillJS pointing out these two similiar issues: https://github.com/quilljs/quill/issues/1042#issue-182512608, https://github.com/quilljs/quill/issues/1386#issue-218121065

I am using this

“react”: “^16.8.1”, “react-dom”: “^16.8.1”, “react-frame-component”: “^4.0.2”, “react-html-parser”: “^2.0.2”, “react-quill”: “^1.3.3”,

This may be a problem that is directly related to just QuillJS, but I thought I’d try my luck here first. Do anyone have an idea how this can be achieved? Or of an alternative solution?

[entiendoNull]

Hey, well… My solution was unfortunately to skip React-Quill and move on to Slate. I did get that to work without issues.

In my original post I recently received this suggestion however: https://github.com/ryanseddon/react-frame-component/issues/133#issuecomment-471925298

Have a look 😃

[Sawan1994]

@entiendoNull The github page on slate says that it’s in beta mode and there can be breaking changes. won’t that be a problem?