feat!: Add editor to items prop in suggestion plugin (#2082)

* add editor to items prop * docs: update content
ueberdosis · Oct 25, 2021 · a6f731a · a6f731a
1 parent c01afc6
commit a6f731a
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -17,7 +17,10 @@ export interface SuggestionOptions {
     range: Range,
     props: any,
   }) => void,
-  items?: (query: string) => any[] | Promise<any[]>,
+  items?: (props: {
+    query: string,
+    editor: Editor,
+  }) => any[] | Promise<any[]>,
   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({