Rich Text Editor

Редактор текста: Markdown-шорткаты, «/»-команды, упоминания, ссылки и картинки. Pro · Работа и команды › Команда и документы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add rich-text-editor

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { RichTextEditor } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`value`	`RichTextDocument`		The document (controlled). Pass back what `onValueChange` gives you.
`defaultValue`	`RichTextDocument`		Initial `value` when uncontrolled.
`onValueChange`	`(value: RichTextDocument) => void`		Called with the new `value` when it changes.
`placeholder`	`string`		Hint shown in the first line while the document is empty.
`readOnly`	`boolean`	`false`	Renders the document without editing: no toolbars, menus or footer, and not a textbox for assistive tech.
`autoFocus`	`boolean`	`false`	Focus the text on mount (ignored when `readOnly`).
`toolbar`	`boolean`	`true`	Fixed formatting toolbar above the text (never in read-only mode). Default true.
`bubbleToolbar`	`boolean`	`true`	Floating toolbar over selected text. Default true.
`slashCommands`	`boolean`	`true`	"/" at the start of a word opens a filterable menu of block types. Default true.
`onMentionSearch`	`(query: string) => RichTextMentionSuggestion[] \| Promise<RichTextMentionSuggestion[]>`		Turns on @mentions: return the people matching the query (may be async).
`onImageUpload`	`(file: File) => Promise<string>`		Turns on image paste, drop and upload: store the file and resolve with its URL.
`onSubmit`	`(value: RichTextDocument) => void`		⌘↵ / Ctrl+Enter — e.g. to send a comment. Without it the shortcut ticks a to-do item.
`maxLength`	`number`		Character limit (mentions count by their label). Typing and pasting stop there.
`showCount`	`boolean`		Word and character count in the footer. Default: on when `maxLength` is set.
`variant`	`'outline' \| 'plain'`	`'outline'`	`outline` — a framed field; `plain` — no frame or padding, for read-only rendering or your own card.
`minHeight`	`number \| string`		Minimum height of the text area; numbers are px, strings any CSS length.
`maxHeight`	`number \| string`		The text scrolls inside the editor beyond this height.
`footer`	`ReactNode`		Content at the start of the footer, e.g. a Send button.
`editorRef`	`Ref<HTMLDivElement>`		The contenteditable element.
`locale`	`string`		BCP 47 locale for the counter; defaults to the ThemeProvider's.
`labels`	`Partial<RichTextEditorLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Rich Text Editor

Установка

Пропсы

Похожие компоненты