Rich Text Editor

A rich text editor with no Tiptap dependency: contentEditable, toolbar and HTML sanitizing.

Import

tsx

import { RichTextEditor } from "@indoku/ui"

Examples

Basic usage

(HTML keluaran muncul di sini)

tsx

function RichTextEditorDemo() {  const [html, setHtml] = useState("")  return (    <Stack gap="3">      <RichTextEditor.Basic defaultValue="<h2>Halo</h2><p>Coba <b>tebalkan</b> teks ini.</p>" onChange={setHtml} placeholder="Tulis sesuatu…" />      <Text fontSize="xs" color="fg.muted" fontFamily="mono" truncate>        {html || "(HTML keluaran muncul di sini)"}      </Text>    </Stack>  )}

Props

Root

Prop	Type	Default	Description
`value`	`string`	–
`defaultValue`	`string`	–
`onChange`	`(html: string) => void`	–
`placeholder`	`string`	–
`editable`	`boolean`	–
`sanitize`	`boolean`	`true`	Sanitize incoming HTML (`value` and paste).

Control

Prop	Type	Default
`label*`	`string`	–
`active`	`boolean`	–
`onRun*`	`() => void`	–

Content

Prop	Type	Default	Description
`placeholder`	`string`	–

* required. Style props and HTML attributes are accepted as well.

← Questionnaire Alert →

Created by @indokudev