add command to suggestions

examples/Components/Routes/Mentions/index.vue

@@ -62,17 +62,21 @@ export default {
 							id: 2,
 						},
 					],
-					onEnter: ({ items, query }) => {
+					onEnter: ({ items, query, range, command }) => {
 						this.query = query
 						this.filteredUsers = items
+						this.pos = range
+						this.insertMention = command
 					},
-					onChange: ({ items, query }) => {
+					onChange: ({ items, query, range }) => {
 						this.query = query
 						this.filteredUsers = items
+						this.pos = range
 					},
 					onExit: () => {
 						this.query = null
 						this.filteredUsers = []
+						this.pos = null
 					},
 					onKeyDown: ({ event }) => {
 						// pressing up arrow
@@ -110,8 +114,10 @@ export default {
 				}),
 			],
 			query: null,
+			pos: null,
 			filteredUsers: [],
 			navigatedUserIndex: 0,
+			insertMention: () => {},
 		}
 	},
 	methods: {
@@ -126,10 +132,13 @@ export default {
 			this.selectUser(user)
 		},
 		selectUser(user) {
-			this.$refs.editor.menuActions.nodes.mention.command({
-				type: 'user',
-				id: user.id,
-				label: user.name,
+			this.insertMention({
+				pos: this.pos,
+				attrs: {
+					type: 'user',
+					id: user.id,
+					label: user.name,
+				},
 			})
 		},
 	},

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

@@ -1,5 +1,5 @@
 import { Node } from 'tiptap'
-import { setInlineBlockType } from 'tiptap-commands'
+import { replaceText } from 'tiptap-commands'
 import { triggerCharacter, suggestionsPlugin } from '../plugins/suggestions'
 
 export default class MentionNode extends Node {
@@ -42,10 +42,6 @@ export default class MentionNode extends Node {
 		}
 	}
 
-	command({ type, attrs }) {
-		return setInlineBlockType(type, attrs)
-	}
-
 	get plugins() {
 		return [
 			suggestionsPlugin({
@@ -54,6 +50,9 @@ export default class MentionNode extends Node {
 					allowSpaces: true,
 					startOfLine: false,
 				}),
+				command: ({ pos, attrs, schema }) => {
+					return replaceText(pos, schema.nodes.mention, attrs)
+				},
 				items: this.options.items,
 				onEnter: this.options.onEnter,
 				onChange: this.options.onChange,

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

@@ -67,6 +67,7 @@ export function triggerCharacter(char, { allowSpaces = false, startOfLine = fals
 export function suggestionsPlugin({
   matcher = triggerCharacter('#'),
   suggestionClass = 'ProseMirror-suggestion',
+  command = () => false,
   items = [],
   onEnter = () => false,
   onChange = () => false,
@@ -129,6 +130,13 @@ export function suggestionsPlugin({
               text: next.fullText,
               decorationNode,
               items: onFilter(items, next.text),
+              command: ({ pos, attrs }) => {
+                command({
+                  pos,
+                  attrs,
+                  schema: view.state.schema,
+                })(view.state, view.dispatch, view)
+              },
             })
           }
         },
@@ -209,11 +217,11 @@ export function suggestionsPlugin({
        * @returns {boolean}
        */
       handleKeyDown(view, event) {
-        const { active } = this.getState(view.state)
+        const { active, range } = this.getState(view.state)
 
         if (!active) return false
 
-        return onKeyDown({ view, event })
+        return onKeyDown({ view, event, range })
       },
 
       /**