Rich Text Editor

Demo & usage

More examples

When to use

• Authoring formatted content: comments, descriptions, articles, email bodies.
• You need bold/lists/links/tables without pulling in a heavy third-party editor.
• For plain short text, a multiline Text Field is lighter.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Set `height`, `placeholder`, `ariaLabel` and the `toolbarLine` overflow mode (wrap or scroll).
• Switch between rich and source (HTML) views, fullscreen, and toggle the word / character counters.
• Two-way bind with `[(value)]` or bind a reactive control (ControlValueAccessor); react to `contentChange`, `editorFocus` and `editorBlur`.
• Paste cleaning via `cleanPaste` (on by default), `pastePlainText` and `allowPastedDataImages`, with a `pasteCleaned` output naming what was removed. `svCleanPastedHtml`, `svPlainTextFromHtml` and `svIsSafeUrl` are exported for use outside the editor.
• Merged table cells via `mergeTableCells()`, `splitTableCell()`, `tableMergeRefusal()` and `caretInMergedCell()`. The slot map (`svTableGrid`, `svSelectionRect`, `svMergePlan`, `svSplitCell`) is exported for hosts doing their own table work.
• Markdown mode via `toggleMarkdownMode()`, `markdown()`, `setMarkdown()`, `markdownNotice()` and the `markdownChanged` output. `svHtmlToMarkdown` returns `{ markdown, lost }`; `svMarkdownToHtml`, `svEscapeMarkdown` and `svMarkdownLossLabel` are exported too.
• Mentions via `mentionTriggers` (any number of characters — `@` people, `#` topics, `/` commands), `mentionSuggestions`, `mentionQuery` and `mentionInserted`. `mentions()`, `mentionRepairs()` and `plainText()` read the document back. The scan is `svScanTrigger` from `@styloviz/core`, shared with `sv-mention`.

Best practices

• Do: Sanitize the emitted HTML on the server too. `cleanPaste` closes the clipboard path, and it is a client-side control: anything that can POST to your API can send markup that never went through it.
• Do: Allow `style-src 'unsafe-inline'` in your CSP, or turn the controls that write inline styles off — `[showColorTools]="false"` and `hiddenTools` with `'alignment'`, `'fontFamily'` and `'fontSize'`. `execCommand('foreColor')` writes inline `style` attributes rather than classes, and the paste allowlist deliberately keeps them — so under `style-src 'self'` the text survives and the colour, highlight and alignment silently do not, in the editor and everywhere the value is later rendered. Nothing throws. A hash or nonce does not help: those apply to `<style>` elements, not to `style` attributes.
• Do: Add `data:` to `img-src` if you set `allowPastedDataImages`, and decide what `img-src` should say about the third-party hosts your authors paste from. Pasted `http(s)` image sources are kept as-is — those are requests from your page to somebody else's server. Upload and rewrite them at the boundary if they need to be same-origin.
• Don't: Don't treat the client sanitiser as the security boundary. This component's value is a string and your API accepts that string over HTTP, so anything that can make a request can send one that never passed through `cleanPaste` — curl, a replayed request, an importer, a migration. Full guidance in `docs/html-value-security.md`.
• Do: Handle `pasteCleaned` and show the summary. A sanitiser that eats content silently is indistinguishable from a broken paste, and the author's next move is to paste through Notepad.
• Do: Read mentions with `mentions()` rather than tracking them as you insert them. A list kept beside the document drifts the moment somebody deletes a chip or undoes, and the drift is invisible until a notification goes to the wrong person.
• Do: Check `mentionRepairs()` before acting on mentions. A chip can be edited after insertion — it stays atomic to the caret but is not immutable — and an edited chip carries a real user id next to a name that is not theirs.
• Do: Disable your merge button on `tableMergeRefusal()` rather than letting the merge fail — the refusal names which of the three reasons applies, and a merge that went ahead on a region that is not exactly covered leaves rows of different widths.
• Do: Show `markdownNotice()` when Markdown mode is open, and leave it up. It is computed on the way IN, while the HTML that carried the colour and the merged cell still exists — after the switch there is nothing left to inspect, and `execCommand`'s undo history does not span a mode change.
• Don't: Don't treat a Markdown round trip as a save format for documents that use colour, alignment, underline or merged cells. It is a text view, not a lossless one, which is why the conversion returns a loss list rather than a string.
• Do: Set a `maxLength` and surface counters for user-generated content.
• Do: Pass `ariaLabel` so the editor has a clear accessible name beyond the placeholder.
• Don't: Don't set `cleanPaste="false"` unless you have decided you trust every author of every document. The editor reads its value back out of `innerHTML`, so whatever the clipboard carried is what gets persisted and rendered to the next reader.

Accessibility

• The editing surface is `role="textbox"` with `aria-multiline`; `ariaLabel` sets a meaningful accessible name (falling back to the placeholder).
• The `role="toolbar"` holds labelled buttons, and formatting toggles (bold, italic, underline, strikethrough, super/subscript, ordered/unordered list, source, fullscreen) expose `aria-pressed`.
• The word / character count is an `aria-live="polite"` status region; common shortcuts (Ctrl/Cmd+B/I/U, undo/redo) are supported.
• Merging keeps the content of every absorbed cell rather than only the top-left one — silently destroying three of four values is not something an author can see happen, and undo is the only way back.
• The mention panel is a `role="listbox"` that never takes focus: the editor keeps it and announces the active option through `aria-activedescendant`, because moving focus out of the contenteditable loses the caret the insertion needs. Arrows move, Enter and Tab insert, Escape closes — and those keys are only claimed while the panel is open, so Enter still makes a paragraph the rest of the time.
• The Markdown loss notice is `role="status"`, not an alert: it reports a consequence of the button the author just pressed, and an alert would interrupt a screen reader mid-sentence to announce something they asked for. The Markdown textarea carries its own label, and the rich surface goes `aria-readonly` while the mode is open so it is not announced as two editable regions.
• Pasting is cleaned rather than blocked: the content the author meant survives (an unknown wrapper is unwrapped, not deleted), and what was removed is reported instead of vanishing — a silent sanitiser is indistinguishable from a broken paste for somebody who cannot see the result.