add tippy tooltips for mentions

examples/Components/Routes/Mentions/index.vue

@@ -13,8 +13,8 @@
 
 		</editor>
 
-		<div class="suggestion-list" v-if="query || filteredUsers.length">
+		<div class="suggestion-list" v-show="query || filteredUsers.length" ref="suggestions">
-			<div class="suggestion-list__no-results" v-if="query && !filteredUsers.length">
+			<div class="suggestion-list__item" v-if="query && !filteredUsers.length">
 				No users found.
 			</div>
 			<div
@@ -33,6 +33,7 @@
 
 <script>
 import Fuse from 'fuse.js'
+import tippy from 'tippy.js'
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 import {
@@ -62,21 +63,24 @@ export default {
 							id: 2,
 						},
 					],
-					onEnter: ({ items, query, range, command }) => {
+					onEnter: ({ items, query, range, command, virtualNode }) => {
 						this.query = query
 						this.filteredUsers = items
 						this.pos = range
 						this.insertMention = command
+						this.renderDropdown(virtualNode)
 					},
-					onChange: ({ items, query, range }) => {
+					onChange: ({ items, query, range, virtualNode }) => {
 						this.query = query
 						this.filteredUsers = items
 						this.pos = range
+						this.renderDropdown(virtualNode)
 					},
 					onExit: () => {
 						this.query = null
 						this.filteredUsers = []
 						this.pos = null
+						this.destroyDropdown()
 					},
 					onKeyDown: ({ event }) => {
 						// pressing up arrow
@@ -143,12 +147,38 @@ export default {
 				},
 			})
 		},
+		renderDropdown(node) {
+			if (this.dropdown) {
+				return
+			}
+
+			this.dropdown = tippy(node, {
+				content: this.$refs.suggestions,
+				trigger: 'mouseenter',
+				interactive: true,
+				theme: 'dark',
+				placement: 'top-start',
+				performance: true,
+				inertia: true,
+				duration: [400, 200],
+				showOnInit: true,
+				arrow: true,
+				arrowType: 'round',
+			})
+		},
+		destroyDropdown() {
+			if (this.dropdown) {
+				this.dropdown.destroyAll()
+				this.dropdown = null
+			}
+		},
 	},
 }
 </script>
 
 <style lang="scss">
 @import "~variables";
+@import '~modules/tippy.js/dist/tippy.css';
 
 .mention {
   background: rgba($color-black, 0.1);
@@ -165,12 +195,8 @@ export default {
 }
 
 .suggestion-list {
-	max-width: 30rem;
-	margin: 0 auto 2rem auto;
 	padding: 0.2rem;
-	border-radius: 5px;
 	border: 2px solid rgba($color-black, 0.1);
-	color: rgba($color-black, 0.6);
 	font-size: 0.8rem;
 	font-weight: bold;
 
@@ -179,15 +205,47 @@ export default {
 	}
 
 	&__item {
-		color: rgba($color-black, 0.6);
-		font-size: 0.8rem;
-		font-weight: bold;
 		border-radius: 5px;
 		padding: 0.2rem 0.5rem;
 
 		&.is-selected {
-			background-color: rgba($color-black, 0.1);
+			background-color: rgba($color-white, 0.2);
 		}
 	}
 }
+
+.tippy-tooltip.dark-theme {
+
+	background-color: $color-black;
+	padding: 0;
+	font-size: 1rem;
+	text-align: inherit;
+	color: $color-white;
+	border-radius: 5px;
+
+	.tippy-backdrop {
+		display: none;
+	}
+
+	.tippy-roundarrow {
+		fill: $color-black;
+	}
+
+	.tippy-popper[x-placement^=top] & .tippy-arrow {
+		border-top-color: $color-black;
+	}
+
+	.tippy-popper[x-placement^=bottom] & .tippy-arrow {
+		border-bottom-color: $color-black;
+	}
+
+	.tippy-popper[x-placement^=left] & .tippy-arrow {
+		border-left-color: $color-black;
+	}
+
+	.tippy-popper[x-placement^=right] & .tippy-arrow {
+		border-right-color: $color-black;
+	}
+
+}
 </style>

package.json

@@ -74,6 +74,7 @@
     "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.23.0",
+    "tippy.js": "^3.0.3",
     "uglify-js": "^3.4.9",
     "vue": "^2.5.17",
     "vue-loader": "^15.4.1",

packages/tiptap-extensions/src/plugins/suggestions.js

@@ -97,6 +97,13 @@ export function suggestionsPlugin({
           const stopped = prev.active && !next.active
           const changed = !started && !stopped && prev.text !== next.text
           const decorationNode = document.querySelector(`[data-decoration-id="${next.decorationId}"]`)
+          const virtualNode = decorationNode ? {
+            getBoundingClientRect() {
+              return decorationNode.getBoundingClientRect()
+            },
+            clientWidth: decorationNode.clientWidth,
+            clientHeight: decorationNode.clientHeight,
+          } : null
 
           // Trigger the hooks when necessary
           if (stopped || moved) {
@@ -106,6 +113,7 @@ export function suggestionsPlugin({
               query: prev.text,
               text: prev.fullText,
               decorationNode,
+              virtualNode,
               items: onFilter(items, prev.text),
             })
           }
@@ -117,6 +125,7 @@ export function suggestionsPlugin({
               query: next.text,
               text: next.fullText,
               decorationNode,
+              virtualNode,
               items: onFilter(items, next.text),
             })
           }
@@ -128,6 +137,7 @@ export function suggestionsPlugin({
               query: next.text,
               text: next.fullText,
               decorationNode,
+              virtualNode,
               items: onFilter(items, next.text),
               command: ({ pos, attrs }) => {
                 command({

yarn.lock

@@ -7311,6 +7311,10 @@ pngquant-bin@^5.0.0:
     execa "^0.10.0"
     logalot "^2.0.0"
 
+popper.js@^1.14.4:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+
 portfinder@^1.0.13:
   version "1.0.17"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.17.tgz#a8a1691143e46c4735edefcf4fbcccedad26456a"
@@ -9425,6 +9429,12 @@ timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
 
+tippy.js@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-3.0.3.tgz#ee543943808201e75d3a9369464576585d9d5305"
+  dependencies:
+    popper.js "^1.14.4"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"