Editor breaks when removed from template with animations

[Ploppy3]

trafficstars

What is the current behavior? Editor breaks when removed from template with animations. It turns into a textarea during the animation. I've tested several of my animations and all break the editor.

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

https://codesandbox.io/s/tinymceangular-6kzby

<div *ngIf="editorVisible" @fadeInOut>
  <editor required></editor>
</div>

export const fadeInOut = trigger('fadeInOut', [
  state('void', style({
    opacity: 0
  })),
  state('hidden', style({
    opacity: 0
  })),
  state('visible', style({
    opacity: 1
  })),
  transition(':enter, hidden => visible', [
    animate('.5s ease', style({
      opacity: 1,
    })),
  ]),
  transition(':leave, visible => hidden', [
    animate('.5s ease', style({
      opacity: 0,
    })),
  ]),
]);

What is the expected behavior? Editor should not break when animated

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular? Angular 9 with Ivy TinyMCE-Angular: 3.4.0

[Ploppy3]

Since it seems to be an angular limitation, one way to partially solve this would be to give an optional @Input parameter to delay the destruction of the TinyMce editor in the ngOnDestroy call.

[Ploppy3]

For reference, here is how a similar issue was fixed by another dev. https://github.com/telerik/kendo-angular/issues/1018#issuecomment-589167663

[SimonFc]

Might be something that tinymce-angular can handle but I do wonder how. I think we want to avoid delaying the removal of TinyMCE through other means than life cycle hooks (and similar) as I imagine that it easily could lead to bugs. Perhaps this doesn't work for your use case but as a workaround you could take care of conditionally removing tinymce-angular via an animation callback. https://codesandbox.io/s/tinymceangular-lg26p?fontsize=14&hidenavigation=1&theme=dark

To be investigated

[Ploppy3]

@SimonFc even though what you propose works, I don't think it is applicable to router animations.

Edit: as explained in the link above, Angular takes care of clearing the dom, only the javascript object has to be cleared from memory in the onDestroy life cycle hook. I don't know how TinyMCE was implemented so I'm not sure if it is possible.

[Ploppy3]

I implemented your solution and it indeed does not work for router animations.