Component loses content after DOM change

[akrueger90]

I'am using the component embedded in a big layout. This has the ability to maximise a component, which changes the dom of the page. After the tinymce component is maximised its not working anymore and does not show the content.

It looks like the source of the error is the dom change and that the editor needs to be reinitialised. Is it possible to do this with the react component?

The expected behaviour would be that the component acts normal because the target field itself does not change, just the surrounding dom.

Versions:
"@tinymce/tinymce-react": "3.3.2",
"tinymce": "5.0.15",
"react": "16.7.0"

[SimonFc]

If you're using TinyMCE in iframe mode it could be because the iframe gets moved(detached/attached). Whenever this happens the iframe will rerender(native iframe behaviour for browser security) and break TinyMCE. Unfortunately, we can't do anything about that issue though.
Do you think this is the issue that you have encountered?

[akrueger90]

TinyMCE is used in a form and the content is in an iFrame (if thats what you mean).

I found some references for similar errors where the fix was to remove and then again init the editor. Is this possible with the ReactComponent?

[SimonFc]

Yeah that's the iframe mode I was thinking about.

There's no such api no but it's possible to do from the parent component. One work arround that I can think of:

// Toggle
this.setState({ showTiny: false }, () => {
  this.setState({ showTiny: true });
});

The best is of course if you can avoid modifying the dom in such a way that the iframe get's re-rendered(again if that's the issue). If you got a minimal reproduction I could take a look at it to see if it's an issue with tinymce-react or not (CodeSandbox or similar)

[akrueger90]

That's great advice, didn't think of this simple solution.
Thanks

[mhle]

Hi any other solutions for this? I'm using TinyMCE with react beautiful dnd and facing the same problem where tinymce content disappears after dragging to reorder it in a list. I have tried rerendering the Editor component but this doesn't seem to work.

Using react 17.0.2, react-beautiful-dnd 13.1.0, tinymce-react 3.13.0 self hosted version 5.10.2

[quangdng]

One thing that works for me is to pass a different key prop to your TinyMCE component. Please try to keep this key prop deterministic (ideally item id combined with array index for optimal performance).

Different key prop will help remount the component thus make TinyMCE iframe usable after drag and drop.

Hope the above helps!

[martin-linden]

Passing a different key prop might serve as a temporary fix, yet it's far from ideal due to the ensuing flickers and abrupt movements because of the remount. Such issues disrupt the fluidity essential for reorderable lists, where smooth and continuous user interactions are key.

[2betop]

Listening the iframe's unload event, and re-init tinymce. I tested this solution, It works.