richclay

Rich text editing for the editable attribute, on by default: a floating toolbar appears while editing, and the output stays clean HTML. It is part of the default clay.js because editing text is the heart of a malleable file; uncheck it in the configurator if you are building something else.

Editable text#

<article editable>Multi-line rich text…</article>
<h1 editable="single-line">Page title</h1>
<p editable="single-line no-toolbar">Caption</p>

Tokens combine like classes: single-line, no-toolbar, toolbar-on-select. In the saved file the attribute is an inert marker; no editor chrome is ever written to disk.

Links#

Press the Link control or Ctrl/Cmd+K to open a popover beside the selection and add, change, or remove a link. Press Escape to close the form and return focus to the editor.

The Link control is pressed whenever the caret is inside an a[href] or any part of the selection covers linked content. A caret outside a link, or a selection that only touches a link’s text boundary, leaves the control unpressed.

For an existing link, the form opens with the URL filled in and shows Remove link before Cancel and Apply; a form for a new link has none. When a selection overlaps more than one link, the form opens the first one in document order. Apply updates that link’s URL and preserves the surrounding selection’s other text and links. Remove link deletes the anchor, keeps its text and inline formatting, closes the form, returns focus to the editor, and announces “Link removed”.

Link dialog URLs pass through normalizeUrl() before the link is made, so javascript:, data:, vbscript:, and control-character obfuscation are rejected.