add fuse search

examples/Components/Routes/Mentions/index.vue

@@ -14,7 +14,10 @@
 		</editor>
 
 		<div class="suggestions">
-			<div v-for="user in users" :key="user.id" @click="selectUser(user)">
+			<div v-if="query && !filteredUsers.length">
+				No users found.
+			</div>
+			<div v-for="user in filteredUsers" :key="user.id" @click="selectUser(user)">
 				{{ user.name }}
 			</div>
 		</div>
@@ -22,6 +25,7 @@
 </template>
 
 <script>
+import Fuse from 'fuse.js'
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 import {
@@ -59,12 +63,15 @@ export default {
 				new MentionNode({
 					onEnter: args => {
 						console.log('start', args)
+						this.query = args.text
 					},
 					onChange: args => {
 						console.log('change', args)
+						this.query = args.text
 					},
 					onExit: args => {
 						console.log('stop', args)
+						this.query = null
 					},
 				}),
 				new OrderedListNode(),
@@ -76,6 +83,7 @@ export default {
 				new LinkMark(),
 				new HistoryExtension(),
 			],
+			query: null,
 			users: [
 				{
 					name: 'Philipp Kühn',
@@ -88,6 +96,22 @@ export default {
 			],
 		}
 	},
+	computed: {
+		filteredUsers() {
+			if (!this.query) {
+				return this.users
+			}
+
+			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({

package.json

@@ -50,6 +50,7 @@
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-vue": "4.7.1",
     "file-loader": "^2.0.0",
+    "fuse.js": "^3.2.1",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.19.0",
@@ -85,5 +86,6 @@
     "webpack-manifest-plugin": "^2.0.3",
     "webpack-svgstore-plugin": "^4.0.3",
     "zlib": "^1.0.5"
-  }
+  },
+  "dependencies": {}
 }

yarn.lock

@@ -4316,6 +4316,10 @@ functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
+fuse.js@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.2.1.tgz#6320cb94ce56ec9755c89ade775bcdbb0358d425"
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"