Rich text editor

An own rich text editor with no dependencies at all: it is imported from @amset/ui/rich-text and only loaded where it is used. Write with the toolbar or with the keyboard (Markdown shortcuts work: # , - , 1. , > , **bold**), paste from Word or Google Docs without dragging their junk along, and store JSON (the exact thing) or HTML, as chosen with format.

When to use it

• The long text of a management panel: a product description, a news item, an email template.
• Content that is later shown with RichTextView, on the server too and without dangerouslySetInnerHTML.

When not to

• Text without formatting: TextArea. Code: CodeField.

Insert and configure: the Insert button in the toolbar opens everything that can go into the document (text, structure, custom blocks and the AMSET UI components by family), with a search box; the same list appears when you type "/". A freshly inserted component comes with its properties open, and they open again with a double click on it, with the right button or with the toolbar button.

Right button: what is underneath (a component: properties, duplicate, move up, move down, delete; an image; a link: edit, open, remove it; a table: rows, columns and cells) and the usual editing (cut, copy, paste, formatting). From the keyboard, the menu key or Shift+F10.

Images: the image panel lets you choose one from this device or paste its address; pasting or dropping a screenshot works too. With onImageUpload it is uploaded wherever the application says; without it, it is embedded in the document. The alternative text is always asked for (or mark it as decorative).

Links: the panel asks for the link text (what is read out), the address and an optional tooltip, and warns when the text does not say where it goes ("here", an address).

Full screen: the browser one; if it is not allowed (an iframe without permission), the top layer, which fills the window even when the editor lives inside something with transform.

Value: format="json" (the default) returns and receives the document; format="html" returns and receives already sanitised HTML text. Controlled with value or free with defaultValue. maxLength is optional: without a value, there is no limit.

Keyboard: Alt+F10 moves to the toolbar and Escape goes back to the text. Tab goes down a level in a list or jumps cell in a table; Mod+Z and Mod+Shift+Z undo and redo; Mod+F finds and replaces.

Accessibility: label is required. The editable area is a multi-line textbox with its name, hint and error linked; the counter announces how many characters are left only when they are few. What is pasted and what is exported goes through a schema that discards everything it does not know: no <script>, no handlers, no javascript:.

Fine styling: --amset-richtext-min-height and --amset-richtext-max-height (also with rows and maxHeight); the typography of the written text is .amset-richtext__content.