tiptap/docs/api/utilities/suggestion.md
2024-02-29 13:39:55 +01:00

71 lines
1.8 KiB
Markdown

# Suggestion
[![Version](https://img.shields.io/npm/v/@tiptap/suggestion.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestion)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestion.svg)](https://npmcharts.com/compare/@tiptap/suggestion?minimal=true)
This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention) or [`Emoji`](/api/nodes/emoji) node to see it in action.
## Settings
### char
The character that triggers the autocomplete popup.
Default: `'@'`
### pluginKey
A ProseMirror PluginKey.
Default: `SuggestionPluginKey`
### allowSpaces
Allows or disallows spaces in suggested items.
Default: `false`
### allowedPrefixes
The prefix characters that are allowed to trigger a suggestion. Set to `null` to allow any prefix character.
Default: `[' ']`
### startOfLine
Trigger the autocomplete popup at the start of a line only.
Default: `false`
### decorationTag
The HTML tag that should be rendered for the suggestion.
Default: `'span'`
### decorationClass
A CSS class that should be added to the suggestion.
Default: `'suggestion'`
### command
Executed when a suggestion is selected.
Default: `() => {}'`
### items
Pass an array of filtered suggestions, can be async.
Default: `({ editor, query }) => []`
### render
A render function for the autocomplete popup.
Default: `() => ({})`
### findSuggestionMatch
Optional param to replace the built-in regex matching of editor content that triggers a suggestion.
See [the
source](https://github.com/ueberdosis/tiptap/blob/main/packages/suggestion/src/findSuggestionMatch.ts#L18)
for more detail.
Default: `findSuggestionMatch(config: Trigger): SuggestionMatch`
## Source code
[packages/suggestion/](https://github.com/ueberdosis/tiptap/blob/main/packages/suggestion/)