@openleaf-editor/ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/styles.js

@@ -87,6 +87,7 @@ export const CSS = `
   --ol-focus-offset: var(--openleaf-focus-offset, 1px);
 
   display: block;
+  position: relative;
   color: var(--ol-text);
 }
 
@@ -335,6 +336,15 @@ export const CSS = `
   position: relative;
 }
 
+/* Presentational valign is otherwise beaten by the rule above, which would
+   make the cell-properties dialog a no-op on screen. */
+.ol-editor .ol-content .ProseMirror td[valign="middle"],
+.ol-editor .ol-content .ProseMirror th[valign="middle"] { vertical-align: middle; }
+.ol-editor .ol-content .ProseMirror td[valign="bottom"],
+.ol-editor .ol-content .ProseMirror th[valign="bottom"] { vertical-align: bottom; }
+.ol-editor .ol-content .ProseMirror td[valign="baseline"],
+.ol-editor .ol-content .ProseMirror th[valign="baseline"] { vertical-align: baseline; }
+
 .ol-editor .ol-content .ProseMirror th {
   background: var(--ol-surface-hover);
   font-weight: 600;
@@ -369,6 +379,47 @@ export const CSS = `
   cursor: col-resize;
 }
 
+.ol-editor .ol-content .ProseMirror img.ol-float-left {
+  float: left;
+  margin: 0 1em 0.5em 0;
+}
+.ol-editor .ol-content .ProseMirror img.ol-float-right {
+  float: right;
+  margin: 0 0 0.5em 1em;
+}
+.ol-editor .ol-content .ProseMirror img.ol-align-center {
+  display: block;
+  margin: 0 auto 0.5em;
+}
+.ol-editor .ol-content .ProseMirror figure {
+  margin: 0 0 1em;
+}
+.ol-editor .ol-content .ProseMirror figcaption {
+  font-size: .9em;
+  opacity: .8;
+  margin-top: .35em;
+}
+.ol-editor .ol-content .ProseMirror details {
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  padding: .5em .75em;
+  margin: 0 0 1em;
+}
+.ol-editor .ol-content .ProseMirror summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.ol-editor .ol-content .ProseMirror hr.ol-pagebreak {
+  border: 0;
+  border-top: 2px dashed var(--ol-border);
+  margin: 1.5em 0;
+}
+.ol-editor .ol-content .ProseMirror iframe,
+.ol-editor .ol-content .ProseMirror video,
+.ol-editor .ol-content .ProseMirror audio {
+  max-width: 100%;
+}
+
 /* Preserved-but-unrecognised markup, surfaced rather than hidden. */
 .ol-editor .ol-content .ProseMirror-selectednode {
   outline: 2px solid var(--ol-focus);
@@ -417,6 +468,171 @@ export const CSS = `
   border: 0;
 }
 
+/* Menubar, menus, floating chrome, visual aids, fullscreen, inline. */
+.ol-editor .ol-menubar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ol-gap);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 2px 4px;
+  border: 1px solid var(--ol-border);
+  border-bottom: 0;
+  border-radius: var(--ol-radius) var(--ol-radius) 0 0;
+  background: var(--ol-surface);
+  position: relative;
+  z-index: var(--ol-z);
+}
+.ol-editor .ol-menubar + .ol-toolbar {
+  border-radius: 0;
+}
+.ol-editor .ol-menu-trigger {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--ol-radius);
+  background: transparent;
+  color: var(--ol-text);
+  font: inherit;
+  font-family: var(--ol-font);
+  font-size: var(--ol-font-size);
+  cursor: pointer;
+  appearance: none;
+}
+.ol-editor .ol-menu-trigger:hover,
+.ol-editor .ol-menu-trigger[aria-expanded="true"] {
+  background: var(--ol-surface-hover);
+}
+.ol-editor .ol-menu-trigger:focus-visible {
+  outline: var(--ol-focus-width) solid var(--ol-focus);
+  outline-offset: var(--ol-focus-offset);
+}
+.ol-editor .ol-menu {
+  position: absolute;
+  z-index: calc(var(--ol-z) + 20);
+  min-width: 12rem;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  background: var(--ol-surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+.ol-editor .ol-menu-item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: var(--ol-radius);
+  background: transparent;
+  color: var(--ol-text);
+  font: inherit;
+  font-family: var(--ol-font);
+  font-size: var(--ol-font-size);
+  text-align: start;
+  cursor: pointer;
+  appearance: none;
+}
+.ol-editor .ol-menu-item:hover,
+.ol-editor .ol-menu-item:focus-visible {
+  background: var(--ol-surface-hover);
+  outline: none;
+}
+.ol-editor .ol-menu-item[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+.ol-editor .ol-menu-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--ol-border);
+}
+.ol-editor .ol-toolbar.ol-floating {
+  position: absolute;
+  flex-wrap: nowrap;
+  border: 1px solid var(--ol-border);
+  border-radius: var(--ol-radius);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+  z-index: calc(var(--ol-z) + 10);
+}
+.ol-editor .ol-toolbar.ol-toolbar--overflow {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.ol-editor.ol-visual-aids .ol-empty-block {
+  outline: 1px dashed var(--ol-border);
+  outline-offset: 2px;
+  min-height: 1.2em;
+}
+.ol-editor.ol-visual-aids .ol-nbsp {
+  background: color-mix(in srgb, var(--ol-accent) 25%, transparent);
+  box-shadow: inset 0 -1px 0 var(--ol-accent);
+}
+.ol-editor.ol-visual-aids .ol-hidden-structure {
+  outline: 1px dotted var(--ol-accent);
+  outline-offset: 2px;
+}
+.ol-editor .ol-noneditable {
+  cursor: default;
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 6px,
+    color-mix(in srgb, var(--ol-border) 35%, transparent) 6px,
+    color-mix(in srgb, var(--ol-border) 35%, transparent) 7px
+  );
+}
+.ol-editor.ol-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  margin: 0;
+  border-radius: 0;
+  background: var(--ol-surface);
+  display: flex;
+  flex-direction: column;
+}
+.ol-editor.ol-fullscreen .ol-content,
+.ol-editor.ol-fullscreen .ol-source {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+.ol-editor.ol-autoresize .ol-content .ProseMirror {
+  overflow: hidden;
+}
+.ol-editor.ol-inline:not(.ol-inline-active) .ol-toolbar,
+.ol-editor.ol-inline:not(.ol-inline-active) .ol-menubar {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}
+.ol-editor.ol-inline .ol-content {
+  border-radius: var(--ol-radius);
+}
+.ol-help-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: inherit;
+}
+.ol-help-table th,
+.ol-help-table td {
+  padding: 4px 8px;
+  text-align: start;
+  vertical-align: top;
+  border-bottom: 1px solid var(--openleaf-color-border, #d1d9e0);
+}
+.ol-help-table th {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 /* Coarse pointers get a larger target. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px
    minimum; 32 clears that on a mouse and 40 is comfortable on a thumb. */
 @media (pointer: coarse) {

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}

package/dist/toolbar.d.ts

@@ -28,6 +28,7 @@
  *    is blind-Tabbing through the rest of the host's form. `Alt+F10` enters,
  *    Escape leaves, matching TinyMCE and CKEditor 5 so muscle memory transfers.
  */
+import { type FormatSpec } from '@openleaf-editor/core';
 import type { EditorState, Transaction } from 'prosemirror-state';
 import type { EditorView } from 'prosemirror-view';
 export interface ToolbarOptions {
@@ -35,11 +36,30 @@ export interface ToolbarOptions {
     label?: string;
     /** Space-separated item ids, `|` for a separator. */
     layout?: string;
+    /**
+     * Collapse groups that do not fit into a More menu. Off by default: wrapping
+     * keeps every control visible, which is the safer accessibility default.
+     */
+    overflow?: boolean;
+    /** Extra block formats, typically classes from the host's content CSS. */
+    formats?: readonly FormatSpec[];
+    /**
+     * Language for this toolbar's labels, independent of every other editor's.
+     * Absent means the document-wide locale.
+     */
+    locale?: string | null;
 }
 export declare class Toolbar {
     #private;
     readonly el: HTMLDivElement;
     constructor(host: HTMLElement, doc: Document, options?: ToolbarOptions);
+    /**
+     * Change this toolbar's language and rebuild its labels.
+     *
+     * Per toolbar rather than per document, so one editor switching language does
+     * not relabel every other editor on the page.
+     */
+    setLocale(next: string | null): void;
     /** Attach to a view and build the controls. */
     mount(view: EditorView): void;
     destroy(): void;

package/dist/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../src/toolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAUlD,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAiDD,qBAAa,OAAO;;IAClB,QAAQ,CAAC,EAAE,EAAE,cAAc,CAAA;gBAef,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAE,cAAmB;IA8B1E,+CAA+C;IAC/C,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAM7B,OAAO,IAAI,IAAI;IAQf,2DAA2D;IAC3D,IAAI,UAAU,IAAI,cAAc,CAE/B;IAwPD;;;;;;;;;OASG;IACH,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI;IAmDlD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IA8F9E,iEAAiE;IACjE,YAAY,IAAI,IAAI;IAYpB,mEAAmE;IACnE,oBAAoB,IAAI,IAAI;CAG7B"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../src/toolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EASL,KAAK,UAAU,EAChB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAalD,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAuDD,qBAAa,OAAO;;IAClB,QAAQ,CAAC,EAAE,EAAE,cAAc,CAAA;gBAsBf,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAE,cAAmB;IAqC1E;;;;;OAKG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOpC,+CAA+C;IAC/C,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAS7B,OAAO,IAAI,IAAI;IA+Bf,2DAA2D;IAC3D,IAAI,UAAU,IAAI,cAAc,CAE/B;IAkUD;;;;;;;;;OASG;IACH,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI;IAkFlD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IA8F9E,iEAAiE;IACjE,YAAY,IAAI,IAAI;IAYpB,mEAAmE;IACnE,oBAAoB,IAAI,IAAI;CAG7B"}

package/dist/toolbar.js

@@ -28,8 +28,10 @@
  *    is blind-Tabbing through the rest of the host's form. `Alt+F10` enters,
  *    Escape leaves, matching TinyMCE and CKEditor 5 so muscle memory transfers.
  */
-import { activeHeadingLevel, shortcutFor, toggleHeading, setParagraph } from '@openleaf-editor/core';
+import { activeBlockClass, activeHeadingLevel, formatParts, setBlockClass, setHeading, setParagraph, shortcutFor, toggleHeading, } from '@openleaf-editor/core';
 import { ensureSprite, iconElement } from './icons.js';
+import { t, onLocaleChange, withLocale } from './i18n.js';
+import { ToolbarOverflow } from './overflow.js';
 import { DEFAULT_LAYOUT, getToolbarItem, onRegistryChange, } from './registry.js';
 import { ensureStyles } from './styles.js';
 const BLOCK_TYPE_ID = 'blockType';
@@ -69,11 +71,18 @@ export class Toolbar {
     #host;
     #view = null;
     #controls = new Map();
+    #customs = [];
     #select = null;
     #live;
     #liveTimer;
     #layout;
+    #label;
+    #formats;
+    #locale;
+    #wantsOverflow;
+    #overflow = null;
     #unsubscribe;
+    #unlocale;
     /** Focusable buttons in DOM order; the roving tabindex walks this. */
     #focusables = [];
     #rovingIndex = 0;
@@ -81,12 +90,16 @@ export class Toolbar {
         this.#host = host;
         this.#doc = doc;
         this.#layout = options.layout ?? DEFAULT_LAYOUT;
+        this.#label = options.label ?? 'Formatting';
+        this.#formats = options.formats ?? [];
+        this.#locale = options.locale ?? null;
+        this.#wantsOverflow = options.overflow === true;
         ensureStyles(doc);
         ensureSprite(doc);
         this.el = doc.createElement('div');
         this.el.className = 'ol-toolbar';
         this.el.setAttribute('role', 'toolbar');
-        this.el.setAttribute('aria-label', options.label ?? 'Formatting');
+        this.el.setAttribute('aria-label', t(this.#label));
         this.#live = doc.createElement('div');
         this.#live.className = 'ol-live';
         // Polite and atomic: an assertive region would interrupt the author
@@ -101,20 +114,63 @@ export class Toolbar {
         this.#unsubscribe = onRegistryChange(() => {
             this.#rerenderPreservingState();
         });
+        this.#unlocale = onLocaleChange(() => {
+            this.#rerenderPreservingState();
+        });
+    }
+    /**
+     * Change this toolbar's language and rebuild its labels.
+     *
+     * Per toolbar rather than per document, so one editor switching language does
+     * not relabel every other editor on the page.
+     */
+    setLocale(next) {
+        const value = next ?? null;
+        if (value === this.#locale)
+            return;
+        this.#locale = value;
+        if (this.#view)
+            this.#rerenderPreservingState();
     }
     /** Attach to a view and build the controls. */
     mount(view) {
         this.#view = view;
         this.#render();
+        if (this.#wantsOverflow && !this.#overflow) {
+            this.#overflow = new ToolbarOverflow(this.el, this.#host, this.#doc);
+        }
         this.update(view.state);
     }
     destroy() {
         this.#unsubscribe?.();
+        this.#unlocale?.();
+        this.#overflow?.destroy();
         clearTimeout(this.#liveTimer);
         this.el.removeEventListener('keydown', this.#onKeydown);
+        this.#destroyCustoms();
         this.#controls.clear();
         this.#view = null;
     }
+    /**
+     * Tear down `custom` controls.
+     *
+     * Called on destroy AND before every re-render. A custom control may have put
+     * a popover in the top layer, which is outside this element and therefore
+     * survives `replaceChildren` -- so without this, a registry change while a
+     * colour picker is open leaves an orphaned popover on the page with no trigger
+     * attached to it.
+     */
+    #destroyCustoms() {
+        for (const { id, control } of this.#customs) {
+            try {
+                control.destroy?.();
+            }
+            catch (error) {
+                console.error(`@openleaf-editor/ui: toolbar item "${id}" threw while being destroyed`, error);
+            }
+        }
+        this.#customs = [];
+    }
     /** The live region element, which the host mounts once. */
     get liveRegion() {
         return this.#live;
@@ -122,7 +178,15 @@ export class Toolbar {
     /* -------------------------------------------------------------- *
      * Rendering
      * -------------------------------------------------------------- */
+    /**
+     * Labels are produced inside this toolbar's own locale scope, so two editors
+     * with different `lang` values on one page do not overwrite each other.
+     */
     #render() {
+        withLocale(this.#locale, () => this.#renderScoped());
+    }
+    #renderScoped() {
+        this.#destroyCustoms();
         this.el.replaceChildren();
         this.#controls.clear();
         this.#select = null;
@@ -146,10 +210,15 @@ export class Toolbar {
                 console.warn(`@openleaf-editor/ui: no toolbar item registered for "${token}"`);
                 continue;
             }
-            // Only `button` is implemented. The `type` discriminant exists so that
-            // adding variants later is not a breaking change to a published config
-            // shape -- but a declared-and-inert variant is worse than an absent one,
-            // because the author sees a plausible button and no signal that the
+            if (spec.type === 'custom') {
+                const el = this.#buildCustom(spec);
+                if (el)
+                    group.appendChild(el);
+                continue;
+            }
+            // `select` is still unimplemented -- the block-type control is special-cased
+            // by id, not by type. A declared-and-inert variant is worse than an absent
+            // one, because the author sees a plausible button and no signal that the
             // control they asked for was not built.
             if (spec.type && spec.type !== 'button') {
                 console.warn(`@openleaf-editor/ui: toolbar item "${spec.id}" declares type "${spec.type}", ` +
@@ -159,7 +228,9 @@ export class Toolbar {
         }
         if (group.childElementCount > 0)
             this.el.appendChild(group);
+        this.el.setAttribute('aria-label', t(this.#label));
         this.#refreshFocusables();
+        this.#overflow?.reattach();
     }
     /**
      * Rebuild after a registry change without dropping host-pushed state.
@@ -223,9 +294,10 @@ export class Toolbar {
         button.dataset['olId'] = spec.id;
         // The accessible name stays constant across states. Baking "pressed" into
         // it would double up with what the platform already announces.
-        button.setAttribute('aria-label', spec.label);
+        button.setAttribute('aria-label', t(spec.label));
         const shortcut = spec.shortcut ? shortcutFor(spec.shortcut) : null;
-        button.title = shortcut ? `${spec.label} (${shortcut})` : spec.label;
+        const label = t(spec.label);
+        button.title = shortcut ? `${label} (${shortcut})` : label;
         if ((spec.kind ?? 'action') === 'toggle') {
             button.setAttribute('aria-pressed', 'false');
         }
@@ -239,6 +311,37 @@ export class Toolbar {
         this.#controls.set(spec.id, { spec, el: button, active: null, enabled: null });
         return button;
     }
+    /**
+     * Build a `custom` control.
+     *
+     * Everything the item does is third-party code running inside the editor's
+     * render path, so a throw here must cost that one control and nothing else: a
+     * colour picker that fails to build must not take the rest of the toolbar --
+     * and with it Bold, Undo and Save -- down with it.
+     */
+    #buildCustom(spec) {
+        const view = this.#view;
+        if (!spec.render) {
+            console.warn(`@openleaf-editor/ui: toolbar item "${spec.id}" declares type "custom" but has no ` +
+                'render function, so there is nothing to build.');
+            return null;
+        }
+        // No view yet means this is a pre-mount re-render triggered by a late
+        // registration. mount() renders again with a view, so the control appears
+        // then rather than being built against nothing.
+        if (!view)
+            return null;
+        try {
+            const control = spec.render({ view, host: this.#host });
+            this.#customs.push({ id: spec.id, control });
+            return control.el;
+        }
+        catch (error) {
+            console.error(`@openleaf-editor/ui: toolbar item "${spec.id}" threw while rendering. ` +
+                'It has been left out; the rest of the toolbar is unaffected.', error);
+            return null;
+        }
+    }
     /**
      * The block-type control.
      *
@@ -250,16 +353,16 @@ export class Toolbar {
     #buildBlockTypeSelect() {
         const select = this.#doc.createElement('select');
         select.className = 'ol-select';
-        select.setAttribute('aria-label', 'Paragraph style');
+        select.setAttribute('aria-label', t('Paragraph style'));
         select.dataset['olId'] = BLOCK_TYPE_ID;
         const options = [
-            ['p', 'Paragraph'],
-            ['1', 'Heading 1'],
-            ['2', 'Heading 2'],
-            ['3', 'Heading 3'],
-            ['4', 'Heading 4'],
-            ['5', 'Heading 5'],
-            ['6', 'Heading 6'],
+            ['p', t('Paragraph')],
+            ['1', t('Heading 1')],
+            ['2', t('Heading 2')],
+            ['3', t('Heading 3')],
+            ['4', t('Heading 4')],
+            ['5', t('Heading 5')],
+            ['6', t('Heading 6')],
         ];
         for (const [value, label] of options) {
             const option = this.#doc.createElement('option');
@@ -267,6 +370,12 @@ export class Toolbar {
             option.textContent = label;
             select.appendChild(option);
         }
+        for (const format of this.#formats) {
+            const option = this.#doc.createElement('option');
+            option.value = `format:${format.token}`;
+            option.textContent = t(format.label);
+            select.appendChild(option);
+        }
         select.addEventListener('mousedown', (event) => event.stopPropagation());
         /**
          * Whether the pending change came from a pointer rather than the keyboard.
@@ -298,8 +407,26 @@ export class Toolbar {
             if (!view)
                 return;
             const value = select.value;
-            const command = value === 'p' ? setParagraph : toggleHeading(Number(value));
-            command(view.state, view.dispatch, view);
+            if (value.startsWith('format:')) {
+                const { element, className } = formatParts(value.slice('format:'.length));
+                // Element first: changing the block type replaces the node, so a class
+                // written before that would go with the node it was written on.
+                // `setHeading` rather than `toggleHeading` -- picking "Section" twice
+                // must not turn the heading back into a paragraph.
+                if (element === 'p')
+                    setParagraph(view.state, view.dispatch, view);
+                else if (element !== null && /^h[1-6]$/.test(element)) {
+                    setHeading(Number(element.slice(1)))(view.state, view.dispatch, view);
+                }
+                // Null clears, which is what a token naming only an element means: the
+                // author picked "Section", not "Section, keeping whatever class was on
+                // the paragraph before".
+                setBlockClass(className)(view.state, view.dispatch, view);
+            }
+            else {
+                const command = value === 'p' ? setParagraph : toggleHeading(Number(value));
+                command(view.state, view.dispatch, view);
+            }
             // Return the caret to the content only when the author committed the
             // choice by pointer. Keyboard users keep focus and leave with Tab or
             // Escape.
@@ -352,6 +479,9 @@ export class Toolbar {
      * `tr` is passed so announcements can be gated on a real formatting change.
      */
     update(state, tr) {
+        withLocale(this.#locale, () => this.#updateScoped(state, tr));
+    }
+    #updateScoped(state, tr) {
         // Announce only on a discrete formatting transition, never on cursor
         // movement through already-formatted text. That gate is the whole
         // difference between a useful announcement and a chatty one.
@@ -384,11 +514,41 @@ export class Toolbar {
                 }
             }
         }
+        for (const { id, control } of this.#customs) {
+            // Readonly is the toolbar's business, not each control's: reflecting it
+            // here means a custom control gets the same disabled treatment as a button
+            // without every plugin author having to remember the attribute exists.
+            const trigger = control.el.querySelector('button.ol-btn');
+            trigger?.setAttribute('aria-disabled', this.#host.hasAttribute('readonly') ? 'true' : 'false');
+            if (!control.update)
+                continue;
+            guarded(id, 'update', () => {
+                control.update?.(state);
+                return true;
+            });
+        }
         if (this.#select) {
+            const formatClass = activeBlockClass(state);
             const level = activeHeadingLevel(state);
-            const value = level === null ? 'p' : String(level);
-            if (this.#select.value !== value)
-                this.#select.value = value;
+            const activeElement = level === null ? 'p' : `h${level}`;
+            // Both halves have to agree, or `p.lead` would look active on an
+            // `<h2 class="lead">` and picking it again would appear to do nothing.
+            const matching = this.#formats.find((format) => {
+                const { element, className } = formatParts(format.token);
+                if (className !== formatClass)
+                    return false;
+                return element === null || element === activeElement;
+            });
+            if (matching) {
+                const next = `format:${matching.token}`;
+                if (this.#select.value !== next)
+                    this.#select.value = next;
+            }
+            else {
+                const value = level === null ? 'p' : String(level);
+                if (this.#select.value !== value)
+                    this.#select.value = value;
+            }
         }
         if (transitions.length > 0)
             this.#announce(transitions.join(', '));