Editor

Setup

import { Editor } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`children`	`node`	Not set	—
`value`	`string`	Not set	Controlled editor value
`defaultValue`	`string`		Default value for uncontrolled usage
`onValueChange`	`function`	Not set	Called when content changes
`placeholder`	`string`	`Start typing...`	Placeholder text shown when empty
`disabled`	`boolean`	`false`	Disable the editor
`readOnly`	`boolean`	`false`	Make the editor read-only
`formats`	`array`	`["bold", "italic", "strikethrough", "link", "code", "bulletList"]`	Which format buttons to show in the toolbar
`toolbar`	`boolean`	`true`	Show default toolbar
`statusBar`	`boolean`	`true`	Show default status bar with word/character counts
`onAutoSave`	`function`	Not set	Auto-save callback, called at autoSaveInterval (may be async)
`autoSaveInterval`	`number`	`30000`	Auto-save interval in milliseconds
`size`	`enumsmmdlg`	`md`	Editor size preset: "sm" (120px), "md" (200px), or "lg" (400px)
`maxLength`	`number`	Not set	Maximum character count. Shows counter in status bar with warning (90%) and error (over limit) states
`toolbarIcons`	`object`	Not set	Optional toolbar icon overrides keyed by format/action (e.g. bold, italic, undo). Values can be React nodes or render functions.

Usage Guidelines

When to use

Building blog post or article editors
Need rich text editing with formatting controls
Content management with auto-save and word count
Markdown or WYSIWYG editing interfaces

When not to use

Simple single-line text input (use Input)
Plain multi-line without formatting (use Textarea)
Chat/AI prompt input (use Prompt)
Code editing (use CodeBlock)

Best practices

Use compound pattern for custom toolbar layouts
Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode
Falls back to a markdown-aware textarea when TipTap is not installed
Use onAutoSave for periodic content persistence
onAutoSave may return a Promise; save status updates after the async save resolves/rejects
Use size prop (sm/md/lg) to control editor height
Use maxLength to show character limit with visual warning states
New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop
Use toolbarIcons to swap in icons from any icon package without changing toolbar button labels or accessibility behavior

Accessibility

Toolbar has role="toolbar" with aria-label
Format buttons use aria-pressed to indicate active state
Action buttons (undo/redo) omit aria-pressed since they are not toggles
Status indicator uses aria-live="polite" for save status announcements
Keyboard shortcuts match standard text editor conventions (Ctrl+B, Ctrl+I, etc.)
Global shortcuts (e.g., Sidebar Ctrl+B) automatically yield when focus is inside the Editor
Focus ring appears on the editor container when any child element is focused

Promptsibling

Prompt is for AI/chat input; Editor is for long-form content editing

Textareaalternative

Use Textarea for simple multi-line input without formatting toolbar

Inputalternative

Use Input for single-line text input

Setup

Examples

Default

With Auto-Save and Publish

Minimal

Disabled

Read Only

Custom Toolbar

Full Formatting

With Character Limit

Small Size

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Default

With Auto-Save and Publish

Minimal

Disabled

Read Only

Custom Toolbar

Full Formatting

With Character Limit

Small Size

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components