From 604f5194d2b2b938aa6f4ffd472fcb8c4c5ae914 Mon Sep 17 00:00:00 2001
From: ocavue <ocavue@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:09:53 +0800
Subject: [PATCH] docs: fix vue example (#99)

---
 e2e/src/vue/components/Editor.vue  | 25 ++++++++++++-------------
 examples/vue/components/Editor.vue | 24 ++++++++++++++++--------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/e2e/src/vue/components/Editor.vue b/e2e/src/vue/components/Editor.vue
index af80226..005fdda 100644
--- a/e2e/src/vue/components/Editor.vue
+++ b/e2e/src/vue/components/Editor.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useNodeViewFactory, usePluginViewFactory, useWidgetViewFactory } from '@prosemirror-adapter/vue'
+import { ref, watchEffect } from 'vue'
 import { Plugin } from 'prosemirror-state'
-import type { VNodeRef } from 'vue'
-import { onMounted, onUnmounted, ref } from 'vue'
-import type { EditorView } from 'prosemirror-view'
 import { DecorationSet } from 'prosemirror-view'
 import { createEditorView } from '../../createEditorView'
 import Paragraph from './Paragraph.vue'
@@ -20,15 +18,15 @@ const getHashWidget = widgetViewFactory({
   component: Hashes,
 })
 
-const viewRef = ref<EditorView>()
-const editorRef = ref<VNodeRef>()
+const editorRef = ref<HTMLDivElement | null>(null)
 
-onMounted(() => {
-  const el = editorRef.value as unknown as HTMLElement
-  if (!el || el.firstChild)
-    return
+watchEffect((onCleanup) => {
+  const el = editorRef.value
+  if (!el) {
+    return 
+  }
 
-  viewRef.value = createEditorView(el, {
+  const view = createEditorView(el, {
     paragraph: nodeViewFactory({
       component: Paragraph,
       as: 'div',
@@ -61,9 +59,10 @@ onMounted(() => {
       },
     }),
   ])
-})
-onUnmounted(() => {
-  viewRef.value?.destroy()
+
+  onCleanup(() => {
+    view.destroy()
+  })
 })
 </script>
 
diff --git a/examples/vue/components/Editor.vue b/examples/vue/components/Editor.vue
index fb090ba..8a1e858 100644
--- a/examples/vue/components/Editor.vue
+++ b/examples/vue/components/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useNodeViewFactory, usePluginViewFactory, useWidgetViewFactory } from '@prosemirror-adapter/vue'
-import type { VNodeRef } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { Plugin } from 'prosemirror-state'
 import { DecorationSet } from 'prosemirror-view'
 import { createEditorView } from '../createEditorView'
@@ -18,12 +18,15 @@ const getHashWidget = widgetViewFactory({
   component: Hashes,
 })
 
-const editorRef: VNodeRef = (element) => {
-  const el = element as HTMLElement
-  if (!el || el.firstChild)
-    return
+const editorRef = ref<HTMLDivElement | null>(null)
 
-  createEditorView(el, {
+watchEffect((onCleanup) => {
+  const el = editorRef.value
+  if (!el) {
+    return 
+  }
+
+  const view = createEditorView(el, {
     paragraph: nodeViewFactory({
       component: Paragraph,
       as: 'div',
@@ -56,11 +59,15 @@ const editorRef: VNodeRef = (element) => {
       },
     }),
   ])
-}
+
+  onCleanup(() => {
+    view.destroy()
+  })
+})
 </script>
 
 <template>
-  <div :ref="editorRef" class="editor" />
+  <div ref="editorRef" class="editor" />
 </template>
 
 <style>
@@ -72,6 +79,7 @@ const editorRef: VNodeRef = (element) => {
     border: 2px solid rgba(0, 0, 0, 0.2);
     padding: 5px 0;
     margin-bottom: 23px;
+    position: relative;
 }
 
 .ProseMirror p:first-child,