refactoring

examples/Components/Routes/Suggestions/index.vue

@@ -16,20 +16,21 @@
 
 		</editor>
 
-		<div class="suggestion-list" v-show="query || filteredUsers.length" ref="suggestions">
-			<div class="suggestion-list__item" v-if="query && !filteredUsers.length">
+		<div class="suggestion-list" v-show="showSuggestions" ref="suggestions">
+			<template v-if="hasResults">
+				<div
+					v-for="(user, index) in filteredUsers"
+					:key="user.id"
+					class="suggestion-list__item"
+					:class="{ 'is-selected': navigatedUserIndex === index }"
+					@click="selectUser(user)"
+				>
+					{{ user.name }}
+				</div>
+			</template>
+			<div v-else class="suggestion-list__item">
 				No users found.
 			</div>
-			<div
-				v-else
-				v-for="(user, index) in filteredUsers"
-				:key="user.id"
-				@click="selectUser(user)"
-				class="suggestion-list__item"
-				:class="{ 'is-selected': navigatedUserIndex === index }"
-			>
-				{{ user.name }}
-			</div>
 		</div>
 	</div>
 </template>
@@ -60,40 +61,30 @@ export default {
 				new HeadingNode({ maxLevel: 3 }),
 				new MentionNode({
 					items: [
-						{
-							name: 'Philipp Kühn',
-							id: 1,
-						},
-						{
-							name: 'Hans Pagel',
-							id: 2,
-						},
-						{
-							name: 'Kris Siepert',
-							id: 3,
-						},
-						{
-							name: 'Justin Schüler',
-							id: 4,
-						},
+						{ id: 1, name: 'Philipp Kühn' },
+						{ id: 2, name: 'Hans Pagel' },
+						{ id: 3, name: 'Kris Siepert' },
+						{ id: 4, name: 'Justin Schueler' },
 					],
 					onEnter: ({ items, query, range, command, virtualNode }) => {
 						this.query = query
 						this.filteredUsers = items
-						this.pos = range
+						this.mentionPosition = range
 						this.insertMention = command
 						this.renderPopup(virtualNode)
 					},
 					onChange: ({ items, query, range, virtualNode }) => {
 						this.query = query
 						this.filteredUsers = items
-						this.pos = range
+						this.mentionPosition = range
+						this.navigatedUserIndex = 0
 						this.renderPopup(virtualNode)
 					},
 					onExit: () => {
 						this.query = null
 						this.filteredUsers = []
-						this.pos = null
+						this.mentionPosition = null
+						this.navigatedUserIndex = 0
 						this.destroyPopup()
 					},
 					onKeyDown: ({ event }) => {
@@ -135,12 +126,20 @@ export default {
 				new ItalicMark(),
 			],
 			query: null,
-			pos: null,
+			mentionPosition: null,
 			filteredUsers: [],
 			navigatedUserIndex: 0,
 			insertMention: () => {},
 		}
 	},
+	computed: {
+		hasResults() {
+			return this.filteredUsers.length
+		},
+		showSuggestions() {
+			return this.query || this.hasResults
+		},
+	},
 	methods: {
 		upHandler() {
 			this.navigatedUserIndex = ((this.navigatedUserIndex + this.filteredUsers.length) - 1) % this.filteredUsers.length
@@ -157,7 +156,7 @@ export default {
 		},
 		selectUser(user) {
 			this.insertMention({
-				pos: this.pos,
+				position: this.mentionPosition,
 				attrs: {
 					id: user.id,
 					label: user.name,

packages/tiptap-extensions/src/nodes/Mention.js

@@ -47,8 +47,8 @@ export default class MentionNode extends Node {
 					allowSpaces: false,
 					startOfLine: false,
 				}),
-				command: ({ pos, attrs, schema }) => {
-					return replaceText(pos, schema.nodes.mention, attrs)
+				command: ({ position, attrs, schema }) => {
+					return replaceText(position, schema.nodes.mention, attrs)
 				},
 				items: this.options.items,
 				onEnter: this.options.onEnter,

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

@@ -139,9 +139,9 @@ export function suggestionsPlugin({
               decorationNode,
               virtualNode,
               items: onFilter(items, next.text),
-              command: ({ pos, attrs }) => {
+              command: ({ position, attrs }) => {
                 command({
-                  pos,
+                  position,
                   attrs,
                   schema: view.state.schema,
                 })(view.state, view.dispatch, view)