Provides the Markdown textarea behind every text a user writes. Forms reach
it through RichTextField, while the comment and chat composers and the
inline editors of the profile and playlist pages use it directly.
Exposed through the ref of TextEditor, so that the component that opens an editor (a reply, an edit, the chat composer) can focus it.
-
focus(options?: { atEnd?: boolean; preventScroll?: boolean; }): void
Focuses the textarea.
atEndputs the caret after the last character and scrolls the text there.preventScrollleaves the page and its scrollers where they are.
Passed to TextEditor by the component that owns the text, which keeps it in its state (the editor is controlled).
-
aria-describedby: string
Joined with the id of the editor's own upload notice when it shows one.
- aria-invalid: boolean
-
autoResize: boolean
Grows the textarea with its text instead of scrolling it.
- className: string
-
countFrom: number
The length from which the counter shows, 80% of
maxLengthby default: a standing "0 / 5000" is noise, but the counter should turn up well before the warning colour does. - disabled: boolean
- id: string
-
maxLength: number
Shows a counter and marks the textarea invalid past it. It doesn't stop the typing, so the caller must still refuse a longer text.
-
mentionEveryone: boolean
Offers
@everyoneamong the mention suggestions. The chat's composer sets it for a role withchat:everyone, the one place it notifies. -
onCancel: () => void
Called on Escape when no popup of the editor is left to close. Inline editors (an edit, a reply) pass it to mean "never mind".
-
onChange: (value: string) => void
Called on typing, and with the Markdown of the images once uploaded.
-
onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
Runs after the editor's own keys (autocompletes, Ctrl+Enter), and never while an IME is composing, so an Enter that confirms a candidate isn't taken for "send".
-
onSubmit: () => void
Called on Ctrl/Cmd+Enter, but not while an image is still uploading.
- placeholder: string
- rows: number
- value: string
Renders a textarea that completes @mentions and :emoji, opens an emoji
picker from its button, and counts characters near maxLength. A pasted or
dropped image is uploaded to POST /api/attachments with the session's
token and inserted as Markdown, so the editor must sit under AuthProvider.
The textarea is read-only while an upload runs.
Usage
import * as mod from "src/components/editor/TextEditor.tsx";