# Rich Text Editor

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

Group: Forms

## Import

```tsx
import { RichTextEditor } from "@indoku/ui"
```

## Examples

### Basic usage

```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 | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  |  |
| `active` | `boolean` |  |  |
| `onRun` * | `() => void` |  |  |

### Content

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` |  |  |

`*` = required. Style props and HTML attributes are accepted too.