Iframe is broken when the component is removed from DOM by React

[moroine]

What is the current behavior?
React uses add/remove to manipulate DOM. But when iframe is removed from DOM it looses its context (see whatwg/dom#891).

TinyMce doesn't detect iframe reload

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.
https://codesandbox.io/embed/eloquent-heisenberg-du24mx?fontsize=14&hidenavigation=1&theme=dark

What is the expected behavior?

TinyMce detect iframe reload, and reinitialize (similarly to unmount/remount). Not sure if the fix should be part of main tinymce 🤔

But here is a workaround https://codesandbox.io/s/cool-meadow-zrr0t1?file=/src/index.js

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

• TinyMCE: 4.2.0

[exalate-issue-sync]

Ref: INT-3049

[msageryd]

We have the same issue.
Instead of one editor and one button, as in your example, we render multiple editors from a list. When we reorder the editors the reordered editor breaks, i.e. it show no content.

We have tested our setup with multiple editors (CKEditor, Froala, Draft.js). None of the other editors suffer from this problem.

Related issues:
#295
#242

@tiny-james said in one of the above therads that this might be fixed in Tiny 6, but this doesn't seem to have happened. James, do you have any updates on this?

I tried to implement one of the suggested workarounds, but I failed. It would be awesome if anyone could build upon the codesandbox from @moroine and show how and when to call editor.remove() and editor.add() to recreate an editor.

Edit: Sorry, I missed that @moroine also presented a workaround. I'll try that and see where we go from this. This issue is quite concerning, so we might end up not using Tiny.

[moroine]

@msageryd yeah, we also render a list, but here I tried to reproduce a minimal case.

[yacodes]

@moroine @msageryd I've reproduced this issue and can confirm that it's a problem. We will look into it and will let you know when it will be fixed.

Thanks for the suggested workaround. Consider using it, until we'll fix the problem.

[tiny-james]

As msageryd mentioned it is a long-running known issue. It's primarily to do with Iframes losing state when they are removed from the DOM. TinyMCE needs to be changed to detect when it has been readded to the DOM and recreate the content.

There was a proof of concept implementation created internally but it never made it into TinyMCE 6 and has since stalled - I will try to get people working on it again. Sorry for getting people's hopes up.