`<dj-rich-text>`

A form-associated WYSIWYG editor built on Lexical.

The value is HTML by default. Formatting, headings, lists, links, and other content types come from plugins, through the same plugin API that third-party plugins use.

Try it in the playground

@dojo-ng/rich-text · v0.1.3

npm install @dojo-ng/rich-text

import "@dojo-ng/rich-text";

Plugins

Bold, italic, underline, undo, and redo are the default plugin set, defaultPlugins.
Setting plugins replaces the defaults, so spread ...defaultPlugins to keep them.
Lexical needs its node types when the editor is created, so changing plugins later rebuilds the editor, keeping its content. Set plugins before value.
format selects another serializer that a plugin contributes, such as Markdown.

rich-text-autolinkAuto-link (URL/email) plugin
rich-text-colorText/background color plugin
rich-text-criticmarkupCriticMarkup tracked-changes plugin
rich-text-embedMedia embed plugin
rich-text-emojiEmoji picker + shortcode plugin
rich-text-headingsHeadings/quote plugin
rich-text-imageImage insert plugin
rich-text-linksLink insert/edit/remove plugin
rich-text-listsBulleted/numbered/checklist plugin
rich-text-markdownMarkdown input/output plugin
rich-text-mentionsMentions (@name) plugin
rich-text-slashSlash-command menu plugin
rich-text-tableTable plugin

The value

value can be read and written at any time. Writing it replaces the whole document, clears the selection and the undo history, and does not emit dj-change, like a native input's value.
dj-change fires when the user edits the content.

Pasting

Pasted HTML is cleaned against an allowlist by default. Scripts, styles, event handlers, inline styles, and unsafe javascript: and data: URLs are removed. Unknown tags are removed but their text is kept.
Set sanitizePaste = false from JavaScript to turn this off, or set pasteSanitizer to your own (html) => html function. The default is exported as sanitizeHtml.
Plain-text pastes are not cleaned, since they contain no markup.

Light DOM

The editable area renders in the light DOM, because Lexical's selection handling is not reliable inside a shadow root. --dj-* theme tokens still apply.

Properties

Property	Attribute	Type	Default
`value`The document, serialized through the active `format` (HTML by default). Readable and writable at any time, not just at construction: assigning after the editor is built replaces the whole document, discarding the selection and undo history, and emits no `dj-change` — the same as setting a native input's `value`.	`value`	`string`	`""`
`name`	`name` reflected	`string`	None
`label`	`label`	`string`	None
`placeholder`	`placeholder`	`string`	`""`
`disabled`	`disabled` reflected	`boolean`	`false`
`plugins`Plugin set. Set in JavaScript (rich data). The default set is used when this is empty.	Property only	`RichTextPlugin[]` Plugins	`[]`
`format`Output format; selects which serializer the value getter/setter uses. `"html"` is built in.	`format` reflected	`string`	`"html"`
`sanitizePaste`Sanitize pasted HTML against an allowlist (on by default). Set in JS to disable.	Property only	`boolean`	`true`
`pasteSanitizer`Custom paste sanitizer `(html) => html`; defaults to the built-in allowlist `sanitizeHtml`.	Property only	`(html: string) => string`	None

Events

dj-change

Methods

Method	Description
`checkValidity(): boolean`
`focus(o: FocusOptions)`
`setHtml(htmlString: string)`	Replace the document with the given HTML (regardless of the active `format`).