Skip to content

Commit

Permalink
feat: Add a generic type for suggestion items
Browse files Browse the repository at this point in the history
  • Loading branch information
@rfgamaral @bdbch
rfgamaral authored and bdbch committed Apr 28, 2022
1 parent 70cb809 commit 7cae967
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions packages/suggestion/src/suggestion.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
import { findSuggestionMatch } from './findSuggestionMatch'

export interface SuggestionOptions {
export interface SuggestionOptions<I = any> {
pluginKey?: PluginKey,
editor: Editor,
char?: string,
Expand All @@ -15,18 +15,18 @@ export interface SuggestionOptions {
command?: (props: {
editor: Editor,
range: Range,
props: any,
props: I,
}) => void,
items?: (props: {
query: string,
editor: Editor,
}) => any[] | Promise<any[]>,
}) => I[] | Promise<I[]>,
render?: () => {
onBeforeStart?: (props: SuggestionProps) => void
onStart?: (props: SuggestionProps) => void,
onBeforeUpdate?: (props: SuggestionProps) => void
onUpdate?: (props: SuggestionProps) => void,
onExit?: (props: SuggestionProps) => void,
onBeforeStart?: (props: SuggestionProps<I>) => void
onStart?: (props: SuggestionProps<I>) => void,
onBeforeUpdate?: (props: SuggestionProps<I>) => void
onUpdate?: (props: SuggestionProps<I>) => void,
onExit?: (props: SuggestionProps<I>) => void,
onKeyDown?: (props: SuggestionKeyDownProps) => boolean,
},
allow?: (props: {
Expand All @@ -36,13 +36,13 @@ export interface SuggestionOptions {
}) => boolean,
}

export interface SuggestionProps {
export interface SuggestionProps<I = any> {
editor: Editor,
range: Range,
query: string,
text: string,
items: any[],
command: (props: any) => void,
items: I[],
command: (props: I) => void,

This comment has been minimized.

Sign in to view

Copy link
@sjdemartini

sjdemartini Jun 16, 2023

Contributor

@rfgamaral Thanks for adding the generic types here. I'm trying to upgrade from an older Tiptap version, but ran into an issue where this specific generic type doesn't seem correct, since the object selected with command need not have the same types as the items in the suggestion options. For instance, in Tiptap's official demo https://tiptap.dev/api/nodes/mention, the suggestion items are all strings, but the selected Mention is of type {id: string} (which are the attributes of the Mention node):

  const selectItem = index => {
    const item = props.items[index]

    if (item) {
      props.command({ id: item })
    }
  }

i.e., there's no real restriction that your suggestion needs to return items that have the identical structure to the attributes of a Mention node. In my app's case, the suggestion items have a lot more data in order to render some rich options, beyond just what's stored in a Mention node.

I've opened a PR to fix this #4136
decorationNode: Element | null,
clientRect: (() => DOMRect) | null,
}
Expand All @@ -55,7 +55,7 @@ export interface SuggestionKeyDownProps {

export const SuggestionPluginKey = new PluginKey('suggestion')

export function Suggestion({
export function Suggestion<I = any>({
pluginKey = SuggestionPluginKey,
editor,
char = '@',
Expand All @@ -68,9 +68,9 @@ export function Suggestion({
items = () => [],
render = () => ({}),
allow = () => true,
}: SuggestionOptions) {
}: SuggestionOptions<I>) {

let props: SuggestionProps | undefined
let props: SuggestionProps<I> | undefined
const renderer = render?.()

return new Plugin({
Expand Down

0 comments on commit 7cae967

Please sign in to comment.