From 18d3cbdef8d2b602318a17a628637c104e72a8d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 12:40:13 +0100
Subject: [PATCH] add tippy

---
 docs/package.json                         |  1 +
 docs/src/demos/Nodes/Mention/index.vue    | 50 ++++++++++++++++++++++-
 packages/extension-mention/src/mention.ts | 12 +++---
 packages/suggestion/src/suggestion.ts     | 34 ++++++++-------
 yarn.lock                                 | 12 ++++++
 5 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index d456261ee..3c850ae17 100644
--- a/docs/package.json
+++ b/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",
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index a13fd6567..5ab67006f 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/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>
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 5fb7f5573..7ee51c1a4 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -1,15 +1,14 @@
 import { Node } from '@tiptap/core'
-import Suggestion from '@tiptap/suggestion'
+import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
-export interface MentionOptions {
-  renderer: any,
-}
+export type MentionOptions = Omit<SuggestionOptions, 'editor'>
 
 export const Mention = Node.create({
   name: 'mention',
 
   defaultOptions: <MentionOptions>{
-    renderer: null,
+    char: '@',
+    renderer: () => ({}),
   },
 
   group: 'inline',
@@ -47,8 +46,7 @@ export const Mention = Node.create({
     return [
       Suggestion({
         editor: this.editor,
-        char: '@',
-        renderer: this.options.renderer,
+        ...this.options,
       }),
     ]
   },
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 192131376..809547afb 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -12,11 +12,12 @@ export interface SuggestionOptions {
   suggestionClass?: string,
   command?: () => any,
   items?: (query: string) => any[],
-  onStart?: (props: any) => any,
-  onUpdate?: (props: any) => any,
-  onExit?: (props: any) => any,
-  onKeyDown?: (props: any) => any,
-  renderer?: any,
+  renderer?: () => {
+    onStart?: (props: any) => any,
+    onUpdate?: (props: any) => any,
+    onExit?: (props: any) => any,
+    onKeyDown?: (props: any) => any,
+  },
 }
 
 export function Suggestion({
@@ -27,13 +28,14 @@ export function Suggestion({
   suggestionClass = 'suggestion',
   command = () => null,
   items = () => [],
-  onStart = () => null,
-  onUpdate = () => null,
-  onExit = () => null,
-  onKeyDown = () => null,
+  // onStart = () => null,
+  // onUpdate = () => null,
+  // onExit = () => null,
+  // onKeyDown = () => null,
   renderer = () => ({}),
 }: SuggestionOptions) {
-  // const testRenderer = renderer()
+
+  const testRenderer = renderer?.()
 
   return new Plugin({
     key: new PluginKey('suggestions'),
@@ -92,15 +94,18 @@ export function Suggestion({
 
           // Trigger the hooks when necessary
           if (handleExit) {
-            onExit(props)
+            // onExit(props)
+            testRenderer?.onExit?.(props)
           }
 
           if (handleChange) {
-            onUpdate(props)
+            // onUpdate(props)
+            testRenderer?.onUpdate?.(props)
           }
 
           if (handleStart) {
-            onStart(props)
+            // onStart(props)
+            testRenderer?.onStart?.(props)
           }
         },
       }
@@ -173,7 +178,8 @@ export function Suggestion({
           return false
         }
 
-        return onKeyDown({ view, event, range })
+        // return onKeyDown({ view, event, range })
+        return testRenderer?.onKeyDown?.({ view, event, range })
       },
 
       // Setup decorator on the currently active suggestion.
diff --git a/yarn.lock b/yarn.lock
index 32538997d..b022a8417 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2231,6 +2231,11 @@
     "@octokit/openapi-types" "^1.2.0"
     "@types/node" ">= 8"
 
+"@popperjs/core@^2.4.4":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@rollup/plugin-babel@^5.2.1":
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
@@ -14120,6 +14125,13 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tippy.js@^6.2.7:
+  version "6.2.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.7.tgz#62fb34eda23f7d78151ddca922b62818c1ab9869"
+  integrity sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==
+  dependencies:
+    "@popperjs/core" "^2.4.4"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"