Suggests users to @mention as the user types in TextEditor. It keeps the
state of the suggestions, fetched from GET /api/users?q=, and
TextEditor renders them in a MentionDropdown.
Returns the suggestions' state and the functions that drive them. A pick
goes through replace, TextEditor's function that puts the text over
[start, end) of the textarea's value, followed by a space when word is
set. With everyone, which the chat's composer sets for a role with
chat:everyone, @everyone is offered too.
Returned by useMentionAutocomplete to TextEditor.
- closeMention: () => void
-
handleMentionKeyDown: (e: MentionKey) => boolean
Handles the arrows, Enter, Tab and Escape while the list is shown, and returns whether it took the key. The caller must then leave the key alone.
-
handleMentionSelect: (username: string) => void
Inserts
@usernamethroughreplaceand closes the list. -
mentionOpen: boolean
Set only once a search has found someone.
- mentionResults: UserSuggestion[]
- mentionSelectedIndex: number
-
syncMention: () => voidvalue: string,pos: number,lookup: boolean
Follows the
@queryunder the caret, searches for it 150 ms after the last keystroke, and closes the list once the caret leaves it. The caller calls it on every change withlookupset, and on every caret move without, since only typing may search.
| "ctrlKey"
| "metaKey"
| "shiftKey"
| "altKey"
| "preventDefault"
| "stopPropagation"
Passed to UseMentionAutocompleteResult.handleMentionKeyDown by
TextEditor. It is the part of a React keydown event that the list reads.
Usage
import * as mod from "src/hooks/editor/useMentionAutocomplete.ts";