reordering with cloneElement breaks editor

[jacobbrown0192]

I have a list of components (form elements) one of which is a tinymce editor. They change order based on a state variable using a map of ids and using cloneElement to create the components. If the tiny mce editor moves or the items above it change order it can't be interacted with. The iframe just has an empty html element in it.

change the number in the top field
https://codesandbox.io/s/tinymcereact-forked-lgbev?file=/src/index.js

I am using the current bersion of tinymce and tinymce-react version is 3.6.0

Any help would be appreciated. I can have it to rerender the whole component but I would prefer not to have to do that.

[tiny-james]

You've hit on something that's very difficult to do with TinyMCE...

The core problem is that you can not move iframes without them losing their state:
https://stackoverflow.com/questions/8318264/how-to-move-an-iframe-in-the-dom-without-losing-its-state

TinyMCE uses an iframe to display the internal content and keep it separate from the page styling. It does this by writing to the iframe with Javascript. As soon as that iframe is removed from the DOM the content is gone. We hope in future we might be able to use shadow-dom to do this but for now the requirement for IE support has our hands tied.

Note you can sort of sidestep the iframe problem by using inline mode however that does behave very differently from standard iframe TinyMCE and you still have to keep the same elements (you can't clone them!) because TinyMCE keeps references to them.

Therefore the only way to make this happen is to move components around TinyMCE without removing TinyMCE itself.

[jacobbrown0192]

@tiny-james Thanks for this, I wasn't aware of this interaction between react and iframes but it does makes sense.

I don't think it is worth the effort to try and get the components to move around tinyMCE.

Our options at this point seem to be:

1. Reload tinyMCE after every order change (slow and makes the animation jitter)
2. Don't do the reordering or change how reordering works to reload the whole list
3. Don't use tinyMCE

I'll update with what we end up going with incase someone else runs into this problem.
Thanks again @tiny-james

[tiny-james]

I'm going to convert this to a discussion since we are unable to make any action for the moment both due to a dependence on IE and due to Shadow Dom having a lacking selection API so we can't really treat it like a movable iframe. It is useful to have this information available to people who run into the same problem though.

[exalate-issue-sync]

Ref: INT-2467