prosekit/extensions/autocomplete

An autocomplete rule that can be used to create an autocomplete extension.

new AutocompleteRule(options: AutocompleteRuleOptions): AutocompleteRule

Options for the MatchHandler callback.

state: EditorState

The editor state.

match: RegExpExecArray

The result of RegExp.exec.

from: number

The start position of the matched text.

to: number

The end position of the matched text.

ignoreMatch: () => void

Call this function to ignore the match. You probably want to call this function when the user presses the Escape key.

deleteMatch: () => void

Call this function to delete the matched text. For example, in a slash menu, you might want to delete the matched text first then do something else when the user presses the Enter key.

---

Options for the CanMatchPredicate callback.

state: EditorState

The editor state.

---

Options for creating an AutocompleteRule

regex: RegExp

The regular expression to match against the text before the cursor. The last match before the cursor is used.

For a slash menu, you might use /(?<!\S)/(\S.*)?$/u. For a mention, you might use /@\w*$/

onEnter: MatchHandler

A callback that is called when the rule starts to match, and also on subsequent updates while the rule continues to match.

onLeave?: VoidFunction

A callback that is called when the rule stops matching.

canMatch?: CanMatchPredicate

A predicate to determine if the rule can be applied in the current editor state. If not provided, it defaults to only allowing matches that are not inside a code block or code mark.

followCursor?: boolean

Whether the match should follow the text cursor when it moves without editing. When enabled and a match is active, moving the cursor inside the same text block (for example with arrow keys) re-runs the regex against the text between the match start and the cursor: the query grows when the cursor moves right over existing text and shrinks when it moves left. If the text no longer matches, the match is closed, and typing can open it again. Mouse clicks keep the default behavior.

Default

Section titled “Default”

false

type MatchHandler = (options: MatchHandlerOptions) => void

A callback that is called when the rule starts to match, and also on subsequent updates while the rule continues to match.

---

type CanMatchPredicate = (options: CanMatchOptions) => boolean

A predicate to determine if the rule can be applied in the current editor state.

function defineAutocomplete(rule: AutocompleteRule): Extension

Defines an autocomplete extension that executes logic when the text before the cursor matches the given regular expression.

When a match is found, an inline decoration is applied to the matched text with the class prosekit-autocomplete-match and a data-autocomplete-match-text attribute containing the full matched string.

---

function triggerAutocomplete(tr: Transaction): Transaction

Tags a transaction so that, when it is applied, autocomplete re-scans the text before the cursor and opens the menu if a rule matches. Returns the same transaction, so it can be chained.

Autocomplete normally only opens while the user is typing. Use this to open a slash, mention, or tag menu imperatively, for example after inserting the trigger text in your own command, without dispatching a second transaction. It is intended for an empty (cursor) selection.