Rich Text Editor
Material Design 3 rich-text editor web component (lit-material-rich-text-editor): a formatting toolbar over a sanitized, schema-bound contenteditable, form-associated, with its own undo history.
- 19.2 KB gzipped
- @lit-material/rich-text 0.0.0
- Renders on the server
Example
Rich Text Editor
A formatting toolbar over an editable surface held to a small schema: paragraphs, two heading levels, lists, quotes, code blocks, bold, italic, underline, strikethrough, inline code and links. Pasted HTML is sanitized to that schema; the value is HTML and submits with a form.
Editor
Try Ctrl/⌘+B, Ctrl/⌘+K for a link, Tab in a list, or type ## or - at the start of a line.
Release 2.4
Fixes login on Safari and adds a changelog.
- Faster search
- Indexes are cached
- Dark mode for charts
Upgrade before 1 March.
Value
<h2>Release 2.4</h2><p>Fixes <strong>login</strong> on Safari and adds <a href="https://example.com/changelog">a changelog</a>.</p><ul><li>Faster search<ul><li>Indexes are cached</li></ul></li><li>Dark mode for charts</li></ul><blockquote><p>Upgrade before 1 March.</p></blockquote>
Filled, required, empty
Install
npm install @lit-material/rich-text @lit-material/tokensimport "@lit-material/rich-text";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-rich-text-editor>
Material Design 3 rich-text editor: a formatting toolbar over a contenteditable surface whose content
is held to a small schema — paragraphs, two heading levels, bulleted and numbered lists (nested),
quotes, code blocks, bold, italic, underline, strikethrough, inline code and links. Every edit goes
through the editor's own document model (not document.execCommand): commands, Enter, Backspace across
blocks, paste and undo/redo are model operations, and anything the browser changes natively (typing,
spellcheck) is read back and normalized. Pasted HTML and the value are parsed with a built-in
tokenizer and sanitized to the schema — no HTML string is ever assigned to the DOM, so the editor needs
no Trusted Types policy.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | RichTextVariant | "outlined" | |
label | label | string | "" | |
placeholder | placeholder | string | "" | |
supportingText | supporting-text | string | "" | |
errorText | error-text | string | "" | |
error | error | boolean | false | |
disabled | disabled | boolean | false | |
readonly | readonly | boolean | false | |
required | required | boolean | false | |
maxlength | maxlength | number | undefined | none | Shows a character counter and makes the field invalid (tooLong) past this many characters of text. |
name | name | string | "" | |
value | value | string | none | The content as HTML. Whatever is set is sanitized to the schema; reading it back always gives the
normalized form ("" when empty). Setting it resets the undo history. |
canUndo | property only | boolean | none | Whether undo would do anything. |
canRedo | property only | boolean | none | Whether redo would do anything. |
validity | property only | ValidityState | none | |
validationMessage | property only | string | none | |
form | property only | HTMLFormElement | null | none |
Events
| Event | Description |
|---|---|
input | Bubbles (composed) after every change to the content. |
change | Bubbles when focus leaves the editor after the content changed. |
CSS parts
| Part | Description |
|---|---|
container | The outlined/filled box around toolbar and content. |
toolbar | The formatting toolbar (role="toolbar"). |
content | The editable surface (role="textbox"). |
label | The label above the box. |
supporting | The supporting-text / character-counter row. |
link-panel | The link editing panel. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-rich-text-min-height | Smallest height of the editable surface (default 8rem). |
--lit-material-rich-text-max-height | Height after which the surface scrolls (default none). |