Rich text editor

@summonware/ui · rich-text-editor · P2 · Forms

Usage

A WYSIWYG editor over Quill (BSD-3-Clause) — the reference offered a choice of several editors; Quill is the one with a stable, framework-agnostic core that mounts cleanly via a ref rather than needing a React-specific wrapper with its own dependency-version constraints. Retinted to brand tokens (toolbar, borders, text) rather than left in Quill's default blue theme.
import { RichTextEditor } from '@summonware/ui';

Best practices

DoSet `placeholder` — an empty rich text editor with no placeholder reads as broken, not empty.
Don'tUse this for a single line of formatted text (a title, a tag). A toolbar and multi-line canvas is the wrong weight for anything shorter than a paragraph.

Examples

Common configurations, variations and states.

Basic editor

Bold/italic/underline, lists, and a link tool — a deliberately small toolbar rather than Quill's full kitchen sink.

Reference variants

2 of 9 labels from the reference are demonstrated above.
Basic EditorBasic snow themeBalloon EditorClassic EditorDocument EditorInline Editorsbubble ThemeEditor with Full ToolbarEditor with Color and Alignment

Where it appears

Used on 3 catalogued screens, including admins-course-site, admins-helpdesk-create-ticket, application-ec-add-product.