Other

Editor

Minimal dependency-free rich text editor built on contentEditable, with a formatting toolbar (bold, italic, headings, lists, blockquote, code) and controlled or uncontrolled HTML value.

Import

import { Editor } from "@zephora/react";

Examples

Uncontrolled

Hello Zephora!

<Editor
  defaultValue="<p>Hello <b>Zephora</b>!</p>"
  placeholder="Write something…"
/>

Controlled

`onValueChange` receives the current HTML after every edit.

Type here…

<p>Type here…</p>

const [html, setHtml] = React.useState("<p>Type here…</p>");

<Editor value={html} onValueChange={setHtml} minHeight={120} />
<pre>{html}</pre>

Read only

`readOnly` disables editing and the toolbar.

Release notes

This content cannot be edited.

<Editor
  defaultValue="<h2>Release notes</h2><p>This content cannot be edited.</p>"
  readOnly
/>

API

Editor props

Prop	Type	Default	Description
`value`	`string`	—	Controlled HTML value.
`defaultValue`	`string`	—	Initial HTML for uncontrolled usage.
`onValueChange`	`(html: string) => void`	—	Called with the current HTML after every edit.
`placeholder`	`string`	—	Hint shown while the editor is empty.
`readOnly`	`boolean`	`false`	Disables editing and the toolbar.
`minHeight`	`number`	`160`	Minimum block size of the editing area in px.
`aria-label`	`string`	`"Rich text editor"`	Accessible name of the editing area.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`ArrowRight / ArrowLeft`	Moves focus between toolbar buttons (wraps around).
`Enter / Space`	Applies the focused toolbar command.
`Tab`	Moves between the toolbar and the editing area.