From 364231a1bd872e4008cbe8c7f164f256a894ef1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Le=20Ma=C3=AEtre?=
 <eric.erwan.le.maitre@gmail.com>
Date: Mon, 14 Oct 2024 10:26:12 +0200
Subject: [PATCH] Fix editor destruction at the end of Vue transition  (#5648)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip: destruction éditeur

* fix: replacing DOM nodes at unmount

* fix: event for useEditor destroy

* chore: Generating changeset

* chore: generating changeset

* chore: delete duplicate changeset

* revert: note tutorial

* feat: add Vue transition example

* fix: test for Vue transition

* fix: components within editor

* chore: remove useless ref
---
 .changeset/five-melons-compete.md             |  5 ++
 .../src/Examples/Transition/Vue/Component.vue | 21 ++++++
 .../src/Examples/Transition/Vue/Extension.js  | 36 ++++++++++
 demos/src/Examples/Transition/Vue/index.html  |  0
 .../src/Examples/Transition/Vue/index.spec.js | 29 ++++++++
 demos/src/Examples/Transition/Vue/index.vue   | 66 +++++++++++++++++++
 packages/vue-3/src/EditorContent.ts           | 20 +-----
 7 files changed, 158 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/five-melons-compete.md
 create mode 100644 demos/src/Examples/Transition/Vue/Component.vue
 create mode 100644 demos/src/Examples/Transition/Vue/Extension.js
 create mode 100644 demos/src/Examples/Transition/Vue/index.html
 create mode 100644 demos/src/Examples/Transition/Vue/index.spec.js
 create mode 100644 demos/src/Examples/Transition/Vue/index.vue

diff --git a/.changeset/five-melons-compete.md b/.changeset/five-melons-compete.md
new file mode 100644
index 000000000..0d4b8d206
--- /dev/null
+++ b/.changeset/five-melons-compete.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/vue-3": patch
+---
+
+Fix editor content being destroyed before transition end
diff --git a/demos/src/Examples/Transition/Vue/Component.vue b/demos/src/Examples/Transition/Vue/Component.vue
new file mode 100644
index 000000000..6ca00754f
--- /dev/null
+++ b/demos/src/Examples/Transition/Vue/Component.vue
@@ -0,0 +1,21 @@
+<template>
+  <NodeViewWrapper>
+    <label>Vue Component</label>
+
+    <div class="content">
+      <button @click="increase">This button has been clicked {{ node.attrs.count }} times.</button>
+    </div>
+  </NodeViewWrapper>
+</template>
+
+<script setup lang="ts">
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+
+function increase() {
+  props.updateAttributes({
+    count: props.node.attrs.count + 1,
+  })
+}
+</script>
diff --git a/demos/src/Examples/Transition/Vue/Extension.js b/demos/src/Examples/Transition/Vue/Extension.js
new file mode 100644
index 000000000..9dede7bb0
--- /dev/null
+++ b/demos/src/Examples/Transition/Vue/Extension.js
@@ -0,0 +1,36 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'vueComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/Examples/Transition/Vue/index.html b/demos/src/Examples/Transition/Vue/index.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/demos/src/Examples/Transition/Vue/index.spec.js b/demos/src/Examples/Transition/Vue/index.spec.js
new file mode 100644
index 000000000..4185db85a
--- /dev/null
+++ b/demos/src/Examples/Transition/Vue/index.spec.js
@@ -0,0 +1,29 @@
+context('/src/Examples/Transition/Vue/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/Transition/Vue/')
+  })
+
+  it('should not have an active tiptap instance but a button', () => {
+    cy.get('.tiptap').should('not.exist')
+
+    cy.get('button').should('exist')
+  })
+
+  it('clicking the button should show the editor', () => {
+    cy.get('button').click()
+
+    cy.get('.tiptap').should('exist')
+    cy.get('.tiptap').should('be.visible')
+  })
+
+  it('clicking the button again should hide the editor', () => {
+    cy.get('button').click()
+
+    cy.get('.tiptap').should('exist')
+    cy.get('.tiptap').should('be.visible')
+
+    cy.get('button').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
new file mode 100644
index 000000000..96cfd2f63
--- /dev/null
+++ b/demos/src/Examples/Transition/Vue/index.vue
@@ -0,0 +1,66 @@
+<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,
+  ],
+})
+
+const showEditor = ref(false)
+
+</script>
+
+<template>
+  <div>
+    <button type="button" @click="showEditor = !showEditor" style="margin-bottom: 1rem;">
+      {{ showEditor ? 'Hide editor' : 'Show editor' }}
+    </button>
+
+    <transition name="fade">
+      <div v-if="showEditor" class="tiptap-wrapper">
+        <editor-content :editor="editor" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.tiptap-wrapper {
+  background-color: var(--purple-light);
+  border: 2px solid var(--purple);
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+</style>
diff --git a/packages/vue-3/src/EditorContent.ts b/packages/vue-3/src/EditorContent.ts
index da533ab58..e4cbaa308 100644
--- a/packages/vue-3/src/EditorContent.ts
+++ b/packages/vue-3/src/EditorContent.ts
@@ -59,6 +59,7 @@ export const EditorContent = defineComponent({
 
           editor.createNodeViews()
         })
+
       }
     })
 
@@ -69,27 +70,8 @@ export const EditorContent = defineComponent({
         return
       }
 
-      // destroy nodeviews before vue removes dom element
-      if (!editor.isDestroyed) {
-        editor.view.setProps({
-          nodeViews: {},
-        })
-      }
-
       editor.contentComponent = null
       editor.appContext = null
-
-      if (!editor.options.element.firstChild) {
-        return
-      }
-
-      const newElement = document.createElement('div')
-
-      newElement.append(...editor.options.element.childNodes)
-
-      editor.setOptions({
-        element: newElement,
-      })
     })
 
     return { rootEl }