diff --git a/.changeset/chilly-suits-flash.md b/.changeset/chilly-suits-flash.md new file mode 100644 index 0000000000..2a0e7e679a --- /dev/null +++ b/.changeset/chilly-suits-flash.md @@ -0,0 +1,5 @@ +--- +"@tiptap/suggestion": patch +--- + +Exposes an `isLoading` prop to the Suggestion popup, returning a boolean that indicates if the items callback is a promise awaiting resolution diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts index 68b483600a..9b3d565df4 100644 --- a/packages/suggestion/src/suggestion.ts +++ b/packages/suggestion/src/suggestion.ts @@ -129,6 +129,11 @@ export interface SuggestionProps { */ items: I[] + /** + * The state of loading items. + */ + isLoading: boolean + /** * A function that is called when a suggestion is selected. * @param props The props object. @@ -215,6 +220,7 @@ export function Suggestion({ query: state.query, text: state.text, items: [], + isLoading: false, command: commandProps => { return command({ editor, @@ -247,9 +253,14 @@ export function Suggestion({ } if (handleChange || handleStart) { - props.items = await items({ - editor, - query: state.query, + props.isLoading = true + Promise.resolve(items({ editor, query: state.query })).then(result => { + if (props == null) { + return + } + props.isLoading = false + props.items = result + renderer?.onUpdate?.(props) }) }