Toolbars and dialogs
Build design-system controls with command availability, selection and asynchronous forms.
Toolbars belong to the host
MSFE does not mandate a toolbar. QuireKit Vue applications use public QuireButton, QuireIconButton, QuireSelect and QuirePopover components. Other hosts can use their own library while sharing MSFE's editing contracts.
| UI | Read | Execute |
|---|---|---|
| Bold | isActive('bold'), can().toggleBold() | commands.toggleBold() |
| Heading level | getAttributes('heading') | commands.setHeading(level) |
| Code language | NodeView attrs.language | nodeView.updateAttributes({ language }) |
| Insert image | Dialog-local form state | commands.insertImage({ url, alt, title }) |
| Business status | Installed semantic query | Named command or precise attribute patch |
getAttributes() returns null for absent, mixed or unconfirmed syntax. Do not display a fabricated default that overwrites mixed selections.
Availability and subscriptions
Use state subscriptions to refresh values related to the current selection. can() must remain pure. Active state must come from semantics rather than inspecting bold DOM styles. Unsubscribe when controls unmount.
Use finite-value selectors for language names. Give icon buttons accessible names, expose toggle state and support keyboard use without hover.
Preserve the intended selection
Simple controls may preserve focus according to host event policy, execute a command and refocus the editor. Dialogs and menus require captured intent. Do not blanket-prevent pointerdown on every control, which can break keyboard, touch and input behavior.
Use captureTarget() for a short menu and captureAnchor() plus a document scope for asynchronous dialogs. Do not replace the user's original selection with whatever selection happens to exist after the dialog opens. See Selection and captured intent.
Permission and feedback
Writing controls account for readonly, locked mode, composition, installation and applicability. The final command result remains authoritative. Give suitable feedback for readonly, stale and inapplicable actions without exposing raw internal errors.
Reading, copying and folding need not all be disabled. Container controls and code-block toolbars demonstrate distinct contracts.
Complex application boundaries
Menus issue commands, extensions define behavior, codecs own exact source edits, and the component library owns presentation. Share a named command across keyboard, context-menu and toolbar entries instead of duplicating implementation. Use a chain for one compound operation.