diff --git a/demos/src/Examples/Community/React/suggestion.js b/demos/src/Examples/Community/React/suggestion.js index ba9ad3ae..5f803ac9 100644 --- a/demos/src/Examples/Community/React/suggestion.js +++ b/demos/src/Examples/Community/React/suggestion.js @@ -3,7 +3,7 @@ import tippy from 'tippy.js' import { MentionList } from './MentionList' export default { - items: query => { + items: ({ query }) => { return [ 'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet', ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5) diff --git a/demos/src/Examples/Community/Vue/suggestion.js b/demos/src/Examples/Community/Vue/suggestion.js index d1478598..3745660d 100644 --- a/demos/src/Examples/Community/Vue/suggestion.js +++ b/demos/src/Examples/Community/Vue/suggestion.js @@ -3,7 +3,7 @@ import tippy from 'tippy.js' import MentionList from './MentionList.vue' export default { - items: query => { + items: ({ query }) => { return [ 'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet', ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5) diff --git a/demos/src/Experiments/Commands/Vue/suggestion.js b/demos/src/Experiments/Commands/Vue/suggestion.js index 388256d7..9680693a 100644 --- a/demos/src/Experiments/Commands/Vue/suggestion.js +++ b/demos/src/Experiments/Commands/Vue/suggestion.js @@ -3,7 +3,7 @@ import { VueRenderer } from '@tiptap/vue-3' import CommandsList from './CommandsList.vue' export default { - items: query => { + items: ({ query }) => { return [ { title: 'H1', diff --git a/demos/src/Nodes/Mention/Vue/suggestion.js b/demos/src/Nodes/Mention/Vue/suggestion.js index d1478598..3745660d 100644 --- a/demos/src/Nodes/Mention/Vue/suggestion.js +++ b/demos/src/Nodes/Mention/Vue/suggestion.js @@ -3,7 +3,7 @@ import tippy from 'tippy.js' import MentionList from './MentionList.vue' export default { - items: query => { + items: ({ query }) => { return [ 'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet', ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5) diff --git a/docs/api/utilities/suggestion.md b/docs/api/utilities/suggestion.md index 92a16fa9..3e0cac1b 100644 --- a/docs/api/utilities/suggestion.md +++ b/docs/api/utilities/suggestion.md @@ -44,7 +44,7 @@ Default: `() => {}'` ### items Pass an array of filtered suggestions, can be async. -Default: `() => {}` +Default: `({ editor, query }) => []` ### render A render function for the autocomplete popup. diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts index a5d780b8..b174b5d8 100644 --- a/packages/suggestion/src/suggestion.ts +++ b/packages/suggestion/src/suggestion.ts @@ -17,7 +17,10 @@ export interface SuggestionOptions { range: Range, props: any, }) => void, - items?: (query: string) => any[] | Promise, + items?: (props: { + query: string, + editor: Editor, + }) => any[] | Promise, render?: () => { onStart?: (props: SuggestionProps) => void, onUpdate?: (props: SuggestionProps) => void, @@ -99,7 +102,10 @@ export function Suggestion({ query: state.query, text: state.text, items: (handleChange || handleStart) - ? await items(state.query) + ? await items({ + editor, + query: state.query, + }) : [], command: commandProps => { command({