Rich Text Editor
A full-featured text editor with formatting toolbar. Supports Default, Input, and Text Selected modes, expandable layout, and mobile.
'use client'; import { Button, RichTextEditor } from 'sdaia-ui'; export default function RichTextEditorRealWorld() {Installation
npx sdaia-ui@latest add rich-text-editor
Usage
import { RichTextEditor } from "@/components/ui/rich-text-editor"<RichTextEditor type="default" />Examples
Default
Rich text editor with the full formatting toolbar.
<RichTextEditor isBold={isBold} isItalic={isItalic} isUnderline={isUnderline} alignment={alignment}Input
Rich text editor in input mode for inline editing.
<RichTextEditor type="input" value={value} placeholder="You can write here…" onChange={setValue}Text Selected
Editor with text selected, revealing the inline formatting options.
<RichTextEditor type="text-selected" isBold={isBold} isItalic={isItalic} isUnderline={isUnderline}Mobile
Rich text editor adapted for mobile screens.
<RichTextEditor mobile isBold={isBold} alignment={alignment} onBold={() => setIsBold((b) => !b)}API Reference
RichTextEditorProps
Props for the RichTextEditor component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'default' | 'text-selected' | 'input' | 'default' | optional |
mobile | boolean | false | optional |
expand | boolean | false | optional |
isBold | boolean | false | optional |
isItalic | boolean | false | optional |
isUnderline | boolean | false | optional |
alignment | 'left' | 'center' | 'right' | - | optional |
textStyle | string | - | optional |
textStyleOptions | string[] | - | optional |
fontSize | string | - | optional |
fontSizeOptions | string[] | - | optional |
onTextStyleChange | (value: string) => void | - | optional |
onFontSizeChange | (value: string) => void | - | optional |
onUndo | () => void | - | optional |
onRedo | () => void | - | optional |
onBold | () => void | - | optional |
onItalic | () => void | - | optional |
onUnderline | () => void | - | optional |
onAlign | (alignment: TextAlignment) => void | - | optional |
onColor | () => void | - | optional |
onLink | () => void | - | optional |
onImage | () => void | - | optional |
onAI | () => void | - | optional |
value | string | - | optional |
placeholder | string | 'You can write here…' | optional |
onChange | (value: string) => void | - | optional |
onAddContent | () => void | - | optional |
onFormatText | () => void | - | optional |
onEmoji | () => void | - | optional |
onMention | () => void | - | optional |