Rich text editor

A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.

$npx shadcn@latest add @silicon-ui/rich-text-editor

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/rich-text-editor

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/rich-text-editor/rich-text-editor.tsx
- components/silicon-ui/rich-text-editor/rich-text-editor.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`value` Controlled HTML. The editor only rewrites its content when this differs from what it last emitted.	`string`	—
`defaultValue`	`string`	—
`defaultMarkdown` Initial content as Markdown, used when no HTML value is given.	`string`	—
`onChange`	`(value: RichTextValue) => void`	—
`onHistoryChange` Reports whether undo and redo are available, for your own toolbar.	`(state: { canUndo: boolean; canRedo: boolean }) => void`	—
`placeholder`	`string`	`"Start writing"`
`blockHint` The hint on an empty line while typing.	`string`	`"Type / for blocks"`
`readOnly`	`boolean`	`false`
`autoFocus`	`boolean`	`false`
`aria-label`	`string`	—
`className`	`string`	—
`style`	`CSSProperties`	—

Also accepts the props of HTMLAttributes.