diff --git a/examples/Components/Routes/Suggestions/index.vue b/examples/Components/Routes/Suggestions/index.vue
index e9d700df..641c28e0 100644
--- a/examples/Components/Routes/Suggestions/index.vue
+++ b/examples/Components/Routes/Suggestions/index.vue
@@ -16,20 +16,21 @@
-
-
+
+
+
+ {{ user.name }}
+
+
+
No users found.
-
- {{ user.name }}
-
@@ -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,
diff --git a/packages/tiptap-extensions/src/nodes/Mention.js b/packages/tiptap-extensions/src/nodes/Mention.js
index 7a2de3d8..ce4bdf3a 100644
--- a/packages/tiptap-extensions/src/nodes/Mention.js
+++ b/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,
diff --git a/packages/tiptap-extensions/src/plugins/suggestions.js b/packages/tiptap-extensions/src/plugins/suggestions.js
index 62466742..4dd410d2 100644
--- a/packages/tiptap-extensions/src/plugins/suggestions.js
+++ b/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)