Rich Text Editor

A full-featured text editor with formatting toolbar. Supports Default, Input, and Text Selected modes, expandable layout, and mobile.

Loading demo: rich-text-editor-real-world

Installation

npx sdaia-ui@latest add rich-text-editor

import { RichTextEditor } from "@/components/ui/rich-text-editor"

<RichTextEditor type="default" />

Rich text editor with the full formatting toolbar.

Loading demo: rich-text-editor-default

Rich text editor in input mode for inline editing.

Loading demo: rich-text-editor-input

Editor with text selected, revealing the inline formatting options.

Loading demo: rich-text-editor-text-selected

Rich text editor adapted for mobile screens.

Loading demo: rich-text-editor-mobile

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