move mention filtering to plugin

examples/Components/Routes/Mentions/index.vue

@@ -61,17 +61,44 @@ export default {
 				new HeadingNode({ maxLevel: 3 }),
 				new ListItemNode(),
 				new MentionNode({
+					items: [
+						{
+							name: 'Philipp Kühn',
+							id: 1,
+						},
+						{
+							name: 'Hans Pagel',
+							id: 2,
+						},
+					],
 					onEnter: args => {
 						console.log('start', args)
-						this.query = args.text
+						this.query = args.query
+						this.filteredUsers = args.items
 					},
 					onChange: args => {
 						console.log('change', args)
-						this.query = args.text
+						this.query = args.query
+						this.filteredUsers = args.items
 					},
 					onExit: args => {
 						console.log('stop', args)
 						this.query = null
+						this.filteredUsers = args.items
+					},
+					onFilter: (items, query) => {
+						if (!query) {
+							return items
+						}
+
+						const fuse = new Fuse(items, {
+							threshold: 0.2,
+							keys: [
+								'name',
+							],
+						})
+
+						return fuse.search(query)
 					},
 				}),
 				new OrderedListNode(),
@@ -84,34 +111,9 @@ export default {
 				new HistoryExtension(),
 			],
 			query: null,
-			users: [
-				{
-					name: 'Philipp Kühn',
-					id: 1,
-				},
-				{
-					name: 'Hans Pagel',
-					id: 2,
-				},
-			],
+			filteredUsers: [],
 		}
 	},
-	computed: {
-		filteredUsers() {
-			if (!this.query) {
-				return []
-			}
-
-			const fuse = new Fuse(this.users, {
-				threshold: 0.2,
-				keys: [
-					'name',
-				],
-			})
-
-			return fuse.search(this.query)
-		},
-	},
 	methods: {
 		selectUser(user) {
 			this.$refs.editor.menuActions.nodes.mention.command({

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

@@ -54,10 +54,12 @@ export default class MentionNode extends Node {
 					allowSpaces: true,
 					startOfLine: false,
 				}),
+				items: this.options.items,
 				onEnter: this.options.onEnter,
 				onChange: this.options.onChange,
 				onExit: this.options.onExit,
 				onKeyDown: this.options.onKeyDown,
+				onFilter: this.options.onFilter,
 			}),
 		]
 	}

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

@@ -67,10 +67,19 @@ export function triggerCharacter(char, { allowSpaces = false, startOfLine = fals
 export function suggestionsPlugin({
   matcher = triggerCharacter('#'),
   suggestionClass = 'ProseMirror-suggestion',
+  items = [],
   onEnter = () => false,
   onChange = () => false,
   onExit = () => false,
   onKeyDown = () => false,
+  onFilter = (searchItems, query) => {
+    if (!query) {
+      return searchItems
+    }
+
+    return searchItems
+      .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
+  },
   debug = false,
 }) {
   return new Plugin({
@@ -94,9 +103,10 @@ export function suggestionsPlugin({
             onExit({
               view,
               range: prev.range,
-              text: prev.text,
-              fullText: prev.fullText,
+              query: prev.text,
+              text: prev.fullText,
               decorationNode,
+              items: onFilter(items, prev.text),
             })
           }
 
@@ -104,9 +114,10 @@ export function suggestionsPlugin({
             onChange({
               view,
               range: next.range,
-              text: next.text,
-              fullText: next.fullText,
+              query: next.text,
+              text: next.fullText,
               decorationNode,
+              items: onFilter(items, next.text),
             })
           }
 
@@ -114,9 +125,10 @@ export function suggestionsPlugin({
             onEnter({
               view,
               range: next.range,
-              text: next.text,
-              fullText: next.fullText,
+              query: next.text,
+              text: next.fullText,
               decorationNode,
+              items: onFilter(items, next.text),
             })
           }
         },