Rich Editor
A powerful, block-based rich text editor with tables, images, formatting, and mobile-optimized UX.
Installation
Step 1: Install the rich-editor component
npx shadcn@latest add https://ui-v4-livid.vercel.app/r/styles/new-york-v4/rich-editor.jsonThis automatically installs all required shadcn components, npm packages, and editor files.
Step 2: Configure the theme provider
The rich editor includes dark mode toggle functionality. Wrap your app with the ThemeProvider from next-themes.
Usage
import { EditorProvider } from "@/components/ui/rich-editor"
import { Editor } from "@/components/ui/rich-editor/editor"
export default function MyEditor() {
return (
<EditorProvider>
<Editor />
</EditorProvider>
)
}Features
Block-based architecture
Drag & drop blocks with intuitive organization
Rich text formatting
Bold, italic, underline, strikethrough, colors, and font sizes
Advanced tables
Drag columns/rows, resize, markdown import, and cell formatting
Image management
Multi-select with Ctrl+Click, drag & drop, custom upload handlers
Custom Tailwind classes
Built-in class picker with live preview
Smart links
Easy link insertion with automatic protocol handling
Keyboard shortcuts
Full keyboard navigation and formatting shortcuts
Mobile optimized
Sheet drawers, touch-friendly controls, automatic keyboard management
Dark mode
Full dark mode support out of the box
Undo/Redo
Complete history management with Ctrl+Z/Ctrl+Y
HTML export
Export your content to clean HTML
Keyboard Shortcuts
Ctrl/Cmd + BToggle boldCtrl/Cmd + IToggle italicCtrl/Cmd + UToggle underlineCtrl/Cmd + ZUndoCtrl/Cmd + Shift + ZRedoShift + EnterCreate nested blockCtrl/Cmd + KInsert linkCtrl + ClickMulti-select imagesDelete/BackspaceDelete selected blocksAPI Reference
EditorProvider
Wraps your editor and provides the context for all editor operations.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialContainer | ContainerNode | - | The initial content structure |
| debug | boolean | false | Show debug panel |
| children | ReactNode | - | Editor components to render |
Editor
The main editor component that renders the editing interface.
| Prop | Type | Default | Description |
|---|---|---|---|
| readOnly | boolean | false | Enable read-only mode |
| onUploadImage | (file: File) => Promise<string> | - | Custom image upload handler |
Customization
Custom Image Upload
Provide your own upload handler to integrate with your backend:
async function handleUpload(file: File): Promise<string> {
const formData = new FormData()
formData.append("image", file)
const response = await fetch("/api/upload", {
method: "POST",
body: formData,
})
const data = await response.json()
return data.url
}
<Editor onUploadImage={handleUpload} />Export to HTML
Export your content to HTML for storage or display:
import { serializeToHTML } from "@/components/ui/rich-editor/utils/serialize-to-html"
const html = serializeToHTML(state.container)Notes
- •The editor uses Framer Motion for animations. Make sure it's installed.
- •Images are stored as base64 by default. Provide a custom upload handler for production use.
- •The editor is mobile-responsive and uses Sheet components on smaller screens.
- •All colors and classes use Tailwind CSS and follow shadcn/ui design patterns.