Rich text editor
A compact formatted-text field for written prose — a requirement's background, a technical plan, risk notes — where plain text is too flat but a full document editor is too much. It is a contentEditable surface with a small formatting toolbar (bold, italic, underline, bulleted and numbered lists), built with no editor engine so it stays a single dependency-free component that renders its initial HTML on the server. It is uncontrolled by design: defaultValue seeds the content once and edits report through onChange, so React never rewrites the DOM under the caret. The live version is on the Project detail showcase.
Consolidate the three forecast pipelines into one service, so planning reads a single source.
- Cut nightly reconciliation drift
- Give finance a self-serve scenario view
<RichTextEditor aria-label="Background" defaultValue={initialHtml} onChange={(html) => save(html)} placeholder="Write the background…"/>Read the value from onChange; do not drive it from a changing defaultValue, which would move the caret on every keystroke.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
defaultValue | string | '' | Initial HTML. Seeded once; later changes are not pushed into the editor. |
onChange | (html) => void | — | Fires with the editor's HTML on every edit. |
placeholder | string | 'Write…' | Shown while empty. |
disabled | boolean | false | Makes the field read-only and dims it. |
minHeight | string | '7rem' | Minimum height of the editable area. |
aria-label | string | — | Names the editable region for assistive tech. |