@wizeworks/silicaui-editor

Silica UI's <RichTextEditor> — TipTap wrapped with a Silica-styled formatting toolbar and content surface. Controlled or uncontrolled, HTML in and out.

Install

pnpm add @wizeworks/silicaui-editor @wizeworks/silicaui-react
pnpm add -D @wizeworks/silicaui tailwindcss

Usage

import { RichTextEditor } from "@wizeworks/silicaui-editor";

const [html, setHtml] = React.useState("<p>Hello world</p>");

<RichTextEditor value={html} onValueChange={setHtml} placeholder="Write something…" />

Ships with StarterKit, link, and placeholder extensions preconfigured.

<RichTextEditor> props

| Prop | Type | Default | | --- | --- | --- | | value | string — controlled HTML value | — | | defaultValue | string — uncontrolled initial HTML | — | | onValueChange | (html: string) => void — fires with the editor's HTML on every change | — | | placeholder | string — empty-state placeholder text | — | | editable | boolean | true | | toolbar | boolean — show the formatting toolbar | true | | contentClassName | string — class for the editable content surface | — |

Also re-exports TipTap's useEditor, EditorContent, and Editor (plus EditorOptions), so you can extend the editor — add extensions, drive commands imperatively — without a separate TipTap install.

Links

• silicaui.com — website & docs

• GitHub repo

• Issues

• @wizeworks/silicaui-react — the component layer this package extends