mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-12-15 19:29:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

use async items and filter in suggestion example

Browse Source
This commit is contained in:
Chrissi2812 2020-07-08 17:54:30 +02:00
parent 40cefaddd0
commit 594fd95f7c
No known key found for this signature in database
GPG Key ID: B4B82C7E618271DA
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/Components/Routes/Suggestions/index.vue
View File

@ -63,12 +63,17 @@ export default {
new Heading({ levels: [1, 2, 3] }), new Heading({ levels: [1, 2, 3] }),
new Mention({ new Mention({
// a list of all suggested items // a list of all suggested items
items: () => [ items: async () => {
await new Promise(resolve => {
setTimeout(resolve, 500)
})
return [
{ id: 1, name: 'Philipp Kühn' }, { id: 1, name: 'Philipp Kühn' },
{ id: 2, name: 'Hans Pagel' }, { id: 2, name: 'Hans Pagel' },
{ id: 3, name: 'Kris Siepert' }, { id: 3, name: 'Kris Siepert' },
{ id: 4, name: 'Justin Schueler' }, { id: 4, name: 'Justin Schueler' },
], ]
},
// is called when a suggestion starts // is called when a suggestion starts
onEnter: ({ onEnter: ({
items, query, range, command, virtualNode, items, query, range, command, virtualNode,
@ -124,11 +129,15 @@ export default {
// this function is optional because there is basic filtering built-in // this function is optional because there is basic filtering built-in
// you can overwrite it if you prefer your own filtering // you can overwrite it if you prefer your own filtering
// in this example we use fuse.js with support for fuzzy search // in this example we use fuse.js with support for fuzzy search
onFilter: (items, query) => { onFilter: async (items, query) => {
if (!query) { if (!query) {
return items return items
} }
await new Promise(resolve => {
setTimeout(resolve, 500)
})
const fuse = new Fuse(items, { const fuse = new Fuse(items, {
threshold: 0.2, threshold: 0.2,
keys: ['name'], keys: ['name'],