Text Editor

A rich text editor with formatting toolbar. Supports bold, italic, underline, strikethrough, lists, quotes, links, undo/redo, character limits, and multiple layout variants.

Default Small

A compact editor with the toolbar docked at the top.

Default Small

0/1812

Default Medium

A standard-sized editor with the toolbar docked at the top.

Default Medium

0/1812

Floating Toolbar Small

A compact editor with a sticky floating toolbar that stays visible while scrolling.

Floating Toolbar Small

0/1812

Floating Toolbar Medium

A standard-sized editor with a sticky floating toolbar.

Floating Toolbar Medium

0/1812

Toolbar on Bottom

The toolbar placed below the content area, above the character count.

Toolbar Bottom

0/1812

Usage

Import the TextEditor compound component and compose with sub-components.

tsx
import { useState } from "react";
import { TextEditor } from "@/components/ui/TextEditor";

function MyEditor() {
    const [content, setContent] = useState("<p>Hello world</p>");

    return (
        <TextEditor.Root
            content={content}
            onUpdate={({ editor }) => setContent(editor.getHTML())}
            size="md"
            limit={500}
        >
            <TextEditor.Toolbar type="advanced" />
            <TextEditor.Content />
            <TextEditor.HintText />
        </TextEditor.Root>
    );
}

// Floating toolbar
<TextEditor.Root content={content} onUpdate={...} size="md">
    <TextEditor.Toolbar floating type="advanced" />
    <TextEditor.Content />
    <TextEditor.HintText />
</TextEditor.Root>

// Toolbar on bottom
<TextEditor.Root content={content} onUpdate={...} size="md">
    <TextEditor.Content />
    <TextEditor.Toolbar type="advanced" />
    <TextEditor.HintText />
</TextEditor.Root>

Props

PropTypeDefaultDescription
contentstring—Initial HTML content for the editor.
onUpdate({ editor }) => void—Called on content change. editor.getHTML() returns current HTML.
limitnumber—Character limit. Shown in HintText counter.
size"sm" | "md""md"Editor size variant.
TextEditor.Toolbarcomponent—Formatting toolbar. Props: type ('basic' | 'advanced'), floating (boolean).
TextEditor.Contentcomponent—Editable content area (contentEditable).
TextEditor.HintTextcomponent—Character count and optional hint text.