refactoring

docs/src/demos/Nodes/Mention/MentionList.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-for="(item, index) in items" :key="index">
+      {{ item }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

docs/src/demos/Nodes/Mention/index.vue

@@ -5,14 +5,13 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import tippy, { sticky } from 'tippy.js'
-import { Editor } from '@tiptap/core'
+import { Editor, EditorContent, VueRenderer } from '@tiptap/vue'
-import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Mention from '@tiptap/extension-mention'
+import MentionList from './MentionList'
 
 export default {
   components: {
@@ -33,47 +32,37 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            console.log('items', query)
+            return ['foo', 'bar']
-
-            return [query]
           },
           renderer: () => {
+            let component
             let popup
-            const Component = new (Vue.extend({
-              template: '<div>YAAAAY</div>',
-            }))().$mount()
 
             return {
               onStart(props) {
-                console.log('start')
+                component = new VueRenderer(MentionList, props)
 
                 popup = tippy('.app', {
                   getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
                   appendTo: () => document.body,
                   interactive: true,
-                  sticky: true, // make sure position of tippy is updated when content changes
+                  sticky: true,
                   plugins: [sticky],
-                  content: Component.$el,
+                  content: component.element,
-                  trigger: 'mouseenter', // manual
+                  trigger: 'mouseenter',
                   showOnCreate: true,
                   theme: 'dark',
                   placement: 'top-start',
                   inertia: true,
                   duration: [400, 200],
                 })
-
               },
               onUpdate(props) {
-                console.log('update', props)
+                component.update(props)
               },
-              onExit(props) {
+              onExit() {
-                console.log('exit', props)
+                popup[0].destroy()
-
+                component.destroy()
-                if (popup) {
-                  popup[0].destroy()
-                }
-
-                Component.$destroy()
               },
             }
           },

packages/vue/src/VueRenderer.ts

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import { VueConstructor } from 'vue/types/umd'
+
+export default class VueRenderer {
+  vm!: Vue
+
+  constructor(component: Vue | VueConstructor, props: any) {
+    const Component = Vue.extend(component)
+
+    this.vm = new Component({
+      // parent,
+      propsData: props,
+    }).$mount()
+  }
+
+  get element() {
+    return this.vm.$el
+  }
+
+  update(data: { [key: string]: any } = {}) {
+    if (!this.vm.$props) {
+      return
+    }
+
+    // prevents `Avoid mutating a prop directly` error message
+    const originalSilent = Vue.config.silent
+    Vue.config.silent = true
+
+    Object
+      .entries(data)
+      .forEach(([key, value]) => {
+        this.vm.$props[key] = value
+      })
+
+    Vue.config.silent = originalSilent
+  }
+
+  destroy() {
+    this.vm.$destroy()
+  }
+}

packages/vue/src/index.ts

@@ -1,3 +1,4 @@
 export * from '@tiptap/core'
+export { default as VueRenderer } from './VueRenderer'
 export { default as VueNodeViewRenderer } from './VueNodeViewRenderer'
 export { default as EditorContent } from './components/EditorContent'