[Bug]: Vue - Editor view destruction before Transition end

[Ericlm]

Affected Packages

vue

Version(s)

2.9.0

Bug Description

The issue is very close to the one described in #5646, concerning the fact that the content of the DOM is destroyed before Vue finished a Transition, so the editor content disappears during the leaving transition.

But unlike the issue above, it is linked to the hierarchy of component. Basically, this is something like:

• Parent has <Transition> and a child with a v-if
• Child component has the EditorContent component

When parent turns off the condition, the useEditor in child calls the onBeforeUnmount hook that calls the editor.destroy, finally removing all DOM nodes. But this call to PM leads to the editor content being removed while the editor stills visible.

It seems more complicated than #5646 as it may needs to go to the core of tiptap. The linked fork of tiptap shows the explained issue by restructuring the Transition example with Vue.

I'd be willing to make a PR to fix this, but I don't really know what's the best way to solve this.

Browser Used

Firefox

Code Example URL

https://github.com/Ericlm/tiptap

Expected Behavior

Transition on a parent should not cause a child component to lose it's tiptap content, and let Vue destroying all children nodes at the end.

Additional Context (Optional)

This issue is directly linked to:

• [Bug]: Vue 3 - editor destroyed before transitioning out is done  #5646
• Fix editor destruction at the end of Vue transition  #5648

Dependency Updates

• Yes, I've updated all my dependencies.

[Ericlm]

Maybe the destroy method needs a way to avoid destroying DOM nodes (to let Vue or other framework do that).

[nperez0111]

Not sure what the solution here would be, but I'd accept a PR to fix it.

Prosemirror does need to be the one to do the destroy though since it also needs to clean up nodeviews.

This maybe have been the purpose of trying to copy that element before destruction that we saw here: https://github.com/ueberdosis/tiptap/pull/5648/files#diff-6b499b16726df128fdb6e3206be8b2f4cfc407ebf838ee23d98dd514a93efab4

[Ericlm]

Yes, copying the DOM just before destroy seems to be the right thing to do. I'm working on it to make sure it'll work in all cases. Maybe after that Vue Transitions will be good in every case 😄

[nperez0111]

Released with 2.10.0