Rich Text

A textarea for formatted text: headings, emphasis, links, lists. Its value is clean HTML. Specification: docs/components/rich-text.md

Basics

data-rich on a Textarea's box: canon.js draws a Toolbar on top and an area to write in. The <textarea> keeps the value, clean HTML, which is what the form sends; it stays the label's target and what the browser checks. Without JavaScript the textarea shows the HTML as text.

Shown to everyone on the changelog.

Tools

data-tools picks the toolbar's groups, in this order whatever order they are written in: history (undo, redo), block (paragraph, headings, quote, code), align, marks (bold, italic, underline, strikethrough), link, color, clear, script (sub, super), lists, indent, insert (a line, an image); or all. Without it: history block marks link lists.

Height

As a Textarea: rows is the height (and the least), data-max-lines lets it grow up to that many lines (none: without limit), then it scrolls.

States

The textarea's: required (an empty editor has no value, so the browser's check shows in the field's message), disabled and readonly (the toolbar is unavailable too).

Required.

Edge cases

Right to left: the toolbar starts from the right, "Align right" comes first, and the text runs from the right. Pasted content keeps only the HTML listed in the specification.