# richclay

> Rich text editing for the editable attribute: the floating toolbar and its tokens.

Source: https://clayjs.com/docs/plugins/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

```html
<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.
