diff --git a/examples/Components/Routes/Mentions/index.vue b/examples/Components/Routes/Mentions/index.vue index 755bbd60..e6441ea2 100644 --- a/examples/Components/Routes/Mentions/index.vue +++ b/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({ diff --git a/packages/tiptap-extensions/src/nodes/Mention.js b/packages/tiptap-extensions/src/nodes/Mention.js index ee53bc4a..77344bdf 100644 --- a/packages/tiptap-extensions/src/nodes/Mention.js +++ b/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, }), ] } diff --git a/packages/tiptap-extensions/src/plugins/suggestions.js b/packages/tiptap-extensions/src/plugins/suggestions.js index b3d2b644..d3ed75ec 100644 --- a/packages/tiptap-extensions/src/plugins/suggestions.js +++ b/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), }) } },