From 94a8d258f8cd4549de24d11e2d591ba4363250e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Le=20Ma=C3=AEtre?=
 <eric.erwan.le.maitre@gmail.com>
Date: Thu, 7 Nov 2024 09:19:46 +0100
Subject: [PATCH] fix(vue-3): on editor destruction, transition smoothly
 (#5772)

---
 .changeset/five-flowers-eat.md                |  5 ++
 CONTRIBUTING.md                               |  2 +-
 .../src/Examples/Transition/Vue/Extension.js  |  2 +-
 .../Transition/Vue/ParentComponent.vue        | 36 +++++++++++++++
 .../Vue/{Component.vue => VueComponent.vue}   |  0
 .../src/Examples/Transition/Vue/index.spec.js | 18 +++++---
 demos/src/Examples/Transition/Vue/index.vue   | 46 +++++++++++++++----
 packages/vue-3/src/EditorContent.ts           |  1 -
 packages/vue-3/src/useEditor.ts               |  6 +++
 9 files changed, 98 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/five-flowers-eat.md
 create mode 100644 demos/src/Examples/Transition/Vue/ParentComponent.vue
 rename demos/src/Examples/Transition/Vue/{Component.vue => VueComponent.vue} (100%)

diff --git a/.changeset/five-flowers-eat.md b/.changeset/five-flowers-eat.md
new file mode 100644
index 000000000..a44e7c58d
--- /dev/null
+++ b/.changeset/five-flowers-eat.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/vue-3": patch
+---
+
+Fix editor destruction before transition end if editor is nested
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5a7ab416a..e59b86f40 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -36,7 +36,7 @@ Before submitting a pull request:
 - Check the codebase to ensure that your feature doesn't already exist.
 - Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
 
-Before commiting:
+Before committing:
 
 - Make sure to run the tests and linter before committing your changes.
 - If you are making changes to one of the packages, make sure to **always** include a [changeset](https://github.com/changesets/changesets) in your PR describing **what changed** with a **description** of the change. Those are responsible for changelog creation
diff --git a/demos/src/Examples/Transition/Vue/Extension.js b/demos/src/Examples/Transition/Vue/Extension.js
index 9dede7bb0..b83694ad7 100644
--- a/demos/src/Examples/Transition/Vue/Extension.js
+++ b/demos/src/Examples/Transition/Vue/Extension.js
@@ -1,7 +1,7 @@
 import { mergeAttributes, Node } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 
-import Component from './Component.vue'
+import Component from './VueComponent.vue'
 
 export default Node.create({
   name: 'vueComponent',
diff --git a/demos/src/Examples/Transition/Vue/ParentComponent.vue b/demos/src/Examples/Transition/Vue/ParentComponent.vue
new file mode 100644
index 000000000..7cebbc9a9
--- /dev/null
+++ b/demos/src/Examples/Transition/Vue/ParentComponent.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <EditorContent :editor="editor" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import StarterKit from '@tiptap/starter-kit'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import { ref } from 'vue'
+
+import VueComponent from './Extension.js'
+import type { TNote } from './types.js'
+
+const note = ref<TNote>({
+  id: 'note-1',
+  content: `
+  <p>Some random note text</p>
+  <vue-component count="0"></vue-component>
+  `,
+})
+
+const editor = useEditor({
+  content: note.value.content,
+  editorProps: {
+    attributes: {
+      class: 'textarea',
+    },
+  },
+  extensions: [
+    StarterKit,
+    VueComponent,
+  ],
+})
+
+</script>
diff --git a/demos/src/Examples/Transition/Vue/Component.vue b/demos/src/Examples/Transition/Vue/VueComponent.vue
similarity index 100%
rename from demos/src/Examples/Transition/Vue/Component.vue
rename to demos/src/Examples/Transition/Vue/VueComponent.vue
diff --git a/demos/src/Examples/Transition/Vue/index.spec.js b/demos/src/Examples/Transition/Vue/index.spec.js
index 5bceb87e1..39100317d 100644
--- a/demos/src/Examples/Transition/Vue/index.spec.js
+++ b/demos/src/Examples/Transition/Vue/index.spec.js
@@ -3,26 +3,30 @@ context('/src/Examples/Transition/Vue/', () => {
     cy.visit('/src/Examples/Transition/Vue/')
   })
 
-  it('should not have an active tiptap instance but a button', () => {
+  it('should have two buttons and no active tiptap instance', () => {
     cy.get('.tiptap').should('not.exist')
 
-    cy.get('#toggle-editor').should('exist')
+    cy.get('#toggle-direct-editor').should('exist')
+    cy.get('#toggle-nested-editor').should('exist')
   })
 
-  it('clicking the button should show the editor', () => {
-    cy.get('#toggle-editor').click()
+  it('clicking the buttons should show two editors', () => {
+    cy.get('#toggle-direct-editor').click()
+    cy.get('#toggle-nested-editor').click()
 
     cy.get('.tiptap').should('exist')
     cy.get('.tiptap').should('be.visible')
   })
 
-  it('clicking the button again should hide the editor', () => {
-    cy.get('#toggle-editor').click()
+  it('clicking the buttons again should hide the editors', () => {
+    cy.get('#toggle-direct-editor').click()
+    cy.get('#toggle-nested-editor').click()
 
     cy.get('.tiptap').should('exist')
     cy.get('.tiptap').should('be.visible')
 
-    cy.get('#toggle-editor').click()
+    cy.get('#toggle-direct-editor').click()
+    cy.get('#toggle-nested-editor').click()
 
     cy.get('.tiptap').should('not.exist')
   })
diff --git a/demos/src/Examples/Transition/Vue/index.vue b/demos/src/Examples/Transition/Vue/index.vue
index 46e65dc0c..6bd914949 100644
--- a/demos/src/Examples/Transition/Vue/index.vue
+++ b/demos/src/Examples/Transition/Vue/index.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
-
 import StarterKit from '@tiptap/starter-kit'
 import { EditorContent, useEditor } from '@tiptap/vue-3'
 import { ref } from 'vue'
 
 import VueComponent from './Extension.js'
+import ParentComponent from './ParentComponent.vue'
 import type { TNote } from './types.js'
 
+/** Display editor in the same component */
+const showDirectEditor = ref(false)
+
+/** Display editor in a child component */
+const showNestedEditor = ref(false)
+
 const note = ref<TNote>({
   id: 'note-1',
   content: `
@@ -28,24 +34,43 @@ const editor = useEditor({
   ],
 })
 
-const showEditor = ref(false)
-
 </script>
 
 <template>
+  <!-- Transition with editor in the same component -->
   <div>
     <button
+      id="toggle-direct-editor"
       type="button"
-      @click="showEditor = !showEditor"
       style="margin-bottom: 1rem;"
-      id="toggle-editor"
+      @click="showDirectEditor = !showDirectEditor"
     >
-      {{ showEditor ? 'Hide editor' : 'Show editor' }}
+      {{ showDirectEditor ? 'Hide direct editor' : 'Show direct editor' }}
     </button>
 
     <transition name="fade">
-      <div v-if="showEditor" class="tiptap-wrapper">
-        <editor-content :editor="editor" />
+      <div v-if="showDirectEditor" class="tiptap-wrapper">
+        <EditorContent :editor="editor" />
+      </div>
+    </transition>
+  </div>
+
+  <hr>
+
+  <!-- Transition with editor in a child component -->
+  <div>
+    <button
+      id="toggle-nested-editor"
+      type="button"
+      style="margin-bottom: 1rem;"
+      @click="showNestedEditor = !showNestedEditor"
+    >
+      {{ showNestedEditor ? 'Hide nested editor' : 'Show nested editor' }}
+    </button>
+
+    <transition name="fade">
+      <div v-if="showNestedEditor" class="tiptap-wrapper">
+        <ParentComponent />
       </div>
     </transition>
   </div>
@@ -62,6 +87,11 @@ const showEditor = ref(false)
   opacity: 0;
 }
 
+hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .tiptap-wrapper {
   background-color: var(--purple-light);
   border: 2px solid var(--purple);
diff --git a/packages/vue-3/src/EditorContent.ts b/packages/vue-3/src/EditorContent.ts
index e4cbaa308..46cfad81e 100644
--- a/packages/vue-3/src/EditorContent.ts
+++ b/packages/vue-3/src/EditorContent.ts
@@ -59,7 +59,6 @@ export const EditorContent = defineComponent({
 
           editor.createNodeViews()
         })
-
       }
     })
 
diff --git a/packages/vue-3/src/useEditor.ts b/packages/vue-3/src/useEditor.ts
index e75d7f41c..907215327 100644
--- a/packages/vue-3/src/useEditor.ts
+++ b/packages/vue-3/src/useEditor.ts
@@ -11,6 +11,12 @@ export const useEditor = (options: Partial<EditorOptions> = {}) => {
   })
 
   onBeforeUnmount(() => {
+    // Cloning root node (and its children) to avoid content being lost by destroy
+    const nodes = editor.value?.options.element
+    const newEl = nodes?.cloneNode(true) as HTMLElement
+
+    nodes?.parentNode?.replaceChild(newEl, nodes)
+
     editor.value?.destroy()
   })