Components Rich text

Rich text

Lexical-powered editor used for notes and the terms-of-engagement editors. Toolbar + contenteditable div + hidden input. Renders inline on Razor pages, or stretched inside side trays.

<koala-rich-text-editor>

Canonical

Inline editor on a Razor page. input-id binds the hidden input that holds the serialised content.

Variants

3 variants

B I U

Add a note…

Page editor

Inline on a Razor page, fixed min/max height.

B I U

Side-tray editor, stretches.

Side tray

fill-height="true".

Stored note rendered read-only in a prose container.

Read-only

Same typography as the editor.

States

3 states

Toolbar

Empty editor placeholder.

Empty

Placeholder copy is muted italic.

Toolbar

Focused

Border + outline pick up the primary token.

Locked note content…

Disabled / read-only

Toolbar omitted, opacity 0.6.

Props

4 attributes

Attribute	Type	Notes
input-id	string (required)	Id of the hidden input holding the serialised content.
input-name	string	Form field name. Defaults to `Input.Content`.
value	string	Initial HTML.
fill-height	bool	Stretch in flex parents (side trays). Defaults to false.

Do & don't

B I U · H1 H2 · “

Inline formatting, headings, lists, links, blockquotes.

Do Keep the toolbar focused on text formatting. Lists, headings, blockquotes, links — that's it.

B I U S · H1 H2 H3 · Image Video Table Audio Embed Color Highlight Align Indent

Too many things.

Don't Don't surface image upload, embeds, colour pickers, or alignment. Notes are notes — not a CMS.