docs: fix vue example (#99)

prosekit · Nov 28, 2024 · 604f519 · 604f519
1 parent e8da042
commit 604f519
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git 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
@@ -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,