RichTextEditor

Live preview

Loading example…

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

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

Usage

<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

Source

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