Editor

Lexical rich-text chrome: a Field-like frame with a formatting Toolbar, a content surface with typographic defaults and a status footer.

The specimen below is copied from editor.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Documents that are not plain rich text open in qf-office, the QEditor host wrapper, as a standalone dialog.qf-overlay[data-window] window rather than in this surface. The editor runs in an iframe (qf-office__embed) and draws its own ribbon, canvas and status bar (office mockups); the window header is its title bar, with the app glyph, the file name and the save state. See DocumentViewer for the full qf-office axis table and OverlaySystem for the window contract (data-window, data-snap, data-ds-open-window).

Guidance

When to use

• Use it for rich-text property values and notes, such as an assessment summary with headings, lists, links and mentions.
• Use it when users need a formatting toolbar, a save status and a word count around the text.
• Use it when users mention colleagues inline with @ tokens.
• Use qf-office in a window instead when the file is a document, spreadsheet, presentation or PDF rather than plain rich text.

When to consider something else

• Use a multi-line TextField when the value is plain text with no formatting. See TextField.
• Use DocumentViewer to open office files and PDFs in the QEditor host window. See DocumentViewer.
• Use a CommentThread for short threaded replies rather than a formatted body. See CommentThread.
• Use a Ribbon only inside office editors; the rich-text editor uses a single Toolbar. See Ribbon.

Usability

Accessibility

Keyboard

Roles and names

• The toolbar is role="toolbar"; the binding must give it an aria-label such as Formatting.
• Format buttons are icon-only with aria-label; toggles (Bold, Italic, Underline, Code) carry aria-pressed.
• The block-type select has aria-label="Block type".
• The surface is contenteditable; the binding must add role="textbox", aria-multiline="true" and a name via aria-labelledby to the field label.
• Office files run in an <iframe class="qf-office__embed"> whose title names the editor and file; the iframe content owns its own semantics.

Focus

• After a toolbar command, return focus to the surface at the caret.
• The link and image commands must return focus to the surface when their dialogs close.
• Closing an office window returns focus to the file row that opened it; key presses inside the iframe stay with the editor, so the window's Close button must remain reachable.

Other requirements

• Save state in the footer and in .qf-office__save must be announced politely when it changes to saved, offline or error (4.1.3).
• Mention tokens must not rely on color alone; the @ and name are text (1.4.1).
• Toolbar buttons are small ghost buttons; confirm 24 by 24 CSS pixels (2.5.8).
• Content typed in the surface must reflow at 320 CSS pixels; tables inside may scroll (1.4.10).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- editor --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Latest updates

No recorded changes yet.

All release notes