# RichTextEditor

> Rich text editor on a plain `contenteditable`, with no dependencies.

Source: https://ui.jcsoftdev.com/docs/components/rich-text-editor

Rich text editor on a plain `contenteditable`, with no dependencies. Supports bold, italic,
underline, a title, bullet and numbered lists and links (Ctrl/Cmd+B, I, U, K). Everything that
leaves the editor, including pasted content, goes through `sanitizeHtml`.

It uses `document.execCommand`: deprecated on paper but still the only dependency-free way to
edit rich text natively, and implemented by every engine.

## Import

```ts
import { RichTextEditor } from "@jcsoftdev/ui/rich-text";
```

## Usage

```tsx
<RichTextEditor
  placeholder="Describe el servicio…"
  minHeightRem={8}
  aria-label="Descripción del servicio"
  defaultValue={SAMPLE}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` |  | Controlled HTML. It is sanitized before it reaches the editor. |
| `defaultValue` | `string` | `""` |  |
| `onChange` | `((html: string) => void)` |  | Receives sanitized HTML, or "" when the editor is empty. |
| `placeholder` | `string` | `"Escribe aquí…"` |  |
| `disabled` | `boolean` |  |  |
| `minHeightRem` | `number` | `8` | Minimum height of the editing area, in rem. |
| `aria-label` | `string` |  |  |
| `aria-labelledby` | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-richtexteditor--default)
- [Empty](/storybook/?path=/story/forms-richtexteditor--empty)
- [Disabled](/storybook/?path=/story/forms-richtexteditor--disabled)
- [With Preview](/storybook/?path=/story/forms-richtexteditor--with-preview)
- [Hostile Input](/storybook/?path=/story/forms-richtexteditor--hostile-input)
- [Narrow](/storybook/?path=/story/forms-richtexteditor--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-richtexteditor--brutal-preset)

## Source

`packages/ui/src/rich-text/rich-text-editor.tsx`