add tippy

docs/package.json

@@ -25,6 +25,7 @@
     "remark-toc": "^7.0.0",
     "remixicon": "^2.5.0",
     "simplify-js": "^1.2.4",
+    "tippy.js": "^6.2.7",
     "vue-github-button": "^1.1.2",
     "vue-live": "^1.16.0",
     "y-indexeddb": "^9.0.6",

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

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