Rich Text Editor

Ready

Formatted text entry with a toolbar.

Installation

$ npx @oratiq-js/ui add rich-text-editor

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

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

Built on TipTap (ProseMirror) — the same engine choice as Calendar on react-day-picker: wrap the best, own the surface.
HTML in, HTML out via value/onValueChange — sanitise server-side before persisting, as with any rich text.
Toolbar buttons keep focus in the editor (mousedown is prevented), announce pressed state, and undo/redo glyphs mirror under RTL.
contenteditable inherits the page direction; mixed-direction paragraphs behave natively.

Prop	Type	Default	Description
`value / defaultValue`	`string (HTML)`	—	Controlled / uncontrolled content.
`onValueChange`	`(html: string) => void`	—	Fires on every edit.
`placeholder`	`string`	—	Shown while empty.
`disabled`	`boolean`	`false`	Read-only, dimmed.

View source on GitHub → components/ui/rich-text-editor.tsx