@openleaf-editor/ui 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/overflow.js

@@ -0,0 +1,323 @@
+/**
+ * Collapse overflowing toolbar groups into a "More" panel.
+ *
+ * Wrapping is the default for a reason: a control that moved behind a click is
+ * a control the author does not have. Overflow is therefore opt-in. When it is
+ * on, groups that do not fit the current width are moved out of the bar and
+ * offered in a panel at the end, so a narrow CMS sidebar still has every item
+ * without a two-row bar.
+ *
+ * ## Why the real controls move rather than being cloned
+ *
+ * The first implementation cloned each control into a `role="menu"`. Cloning a
+ * live control produces a listener-free copy that has to forward every
+ * interaction back to an original it can only find by id, duplicates that id
+ * and the accessible name, and goes stale the moment the caret moves -- three
+ * bugs that only exist because there were two of everything. Moving the group
+ * node itself has none of them: the control in the panel IS the control, so it
+ * carries its own listeners, its own state and its own accessible name, and
+ * nothing can drift.
+ *
+ * ## The keyboard pattern
+ *
+ * The panel is a vertical `role="toolbar"`, not a `role="menu"`: a menu owns a
+ * content model of `menuitem` children, and a `<select>` is not one -- the
+ * default bar has four. So the panel is the same widget as the bar it came
+ * from, turned ninety degrees, and it keeps the same contract: one tab stop,
+ * arrow keys to move, Home/End to the ends, Escape back to the trigger. Tab
+ * closes, because a panel a keyboard user can walk out of and leave open is the
+ * failure mode of every hand-rolled popup.
+ *
+ * Up/Down are taken from a `<select>` inside the panel the same way Left/Right
+ * are taken from one in the bar; Alt+Down still opens its list, and typeahead
+ * still selects. Home/End are left to the select, which uses them for its own
+ * first and last option.
+ */
+import { t } from './i18n.js';
+import { iconElement } from './icons.js';
+/** Focusable controls, matching what the toolbar's own roving walks. */
+const FOCUSABLE = 'button.ol-btn, select.ol-select';
+let panelCounter = 0;
+export class ToolbarOverflow {
+    #toolbar;
+    #host;
+    #doc;
+    #more;
+    #panel;
+    #observer = null;
+    #onLayout;
+    /**
+     * A pending coalesced layout.
+     *
+     * A ResizeObserver fires once per observed element, so a ten-group bar paid
+     * for ten layouts in one frame. One rAF collapses them, and the frame is
+     * cancelled on destroy so a queued layout cannot run against a torn-down bar.
+     */
+    #frame = null;
+    constructor(toolbar, host, doc, onLayout) {
+        this.#toolbar = toolbar;
+        this.#host = host;
+        this.#doc = doc;
+        this.#onLayout = onLayout;
+        toolbar.classList.add('ol-toolbar--overflow');
+        this.#panel = doc.createElement('div');
+        this.#panel.className = 'ol-menu ol-overflow-menu';
+        this.#panel.id = `ol-overflow-${(panelCounter += 1)}`;
+        this.#panel.setAttribute('role', 'toolbar');
+        this.#panel.setAttribute('aria-orientation', 'vertical');
+        this.#panel.setAttribute('aria-label', t('More formatting'));
+        this.#panel.hidden = true;
+        this.#panel.addEventListener('keydown', this.#onKeydown);
+        this.#more = doc.createElement('button');
+        this.#more.type = 'button';
+        this.#more.className = 'ol-btn ol-overflow-more';
+        this.#more.setAttribute('aria-label', t('More'));
+        // Not `aria-haspopup`: none of its values describes a toolbar, and "true"
+        // means menu, which is what this deliberately is not. Expanded plus a
+        // pointer at the panel is the honest relationship.
+        this.#more.setAttribute('aria-expanded', 'false');
+        this.#more.setAttribute('aria-controls', this.#panel.id);
+        this.#more.hidden = true;
+        this.#more.appendChild(iconElement('more', doc));
+        this.#more.addEventListener('mousedown', (event) => event.preventDefault());
+        this.#more.addEventListener('click', () => {
+            if (this.#panel.hidden)
+                this.#open();
+            else
+                this.#close(true);
+        });
+        // Immediately after the bar, never at the end of the editor: appended to the
+        // host it landed after the editable region, so Tab from More walked into the
+        // content and the panel could only be reached by going backwards.
+        if (toolbar.parentNode)
+            toolbar.after(this.#panel);
+        else
+            host.appendChild(this.#panel);
+        toolbar.appendChild(this.#more);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.#observer = new ResizeObserver(() => this.#schedule());
+            this.#observer.observe(toolbar);
+        }
+        this.layout();
+    }
+    /** Re-home the trigger after the toolbar rebuilt its children. */
+    reattach() {
+        // The groups in the panel belong to the render that was just thrown away.
+        // Restoring them would put two of every control in the bar.
+        this.#panel.replaceChildren();
+        if (!this.#more.isConnected)
+            this.#toolbar.appendChild(this.#more);
+        this.layout();
+    }
+    /**
+     * Coalesce resize notifications into one layout per frame.
+     *
+     * The observer watches the very element `layout` resizes, so an unthrottled
+     * callback fed itself: hiding a group changes the bar's size, which notifies
+     * the observer, which lays out again. A frame is the right budget for work
+     * whose only purpose is deciding what the next paint shows.
+     */
+    #schedule() {
+        if (this.#frame !== null)
+            return;
+        const win = this.#toolbar.ownerDocument.defaultView;
+        if (!win?.requestAnimationFrame) {
+            this.layout();
+            return;
+        }
+        this.#frame = win.requestAnimationFrame(() => {
+            this.#frame = null;
+            this.layout();
+        });
+    }
+    destroy() {
+        // A queued frame outlives destroy() and would lay out a torn-down bar.
+        if (this.#frame !== null) {
+            this.#toolbar.ownerDocument.defaultView?.cancelAnimationFrame(this.#frame);
+            this.#frame = null;
+        }
+        this.#observer?.disconnect();
+        this.#close();
+        this.#restore();
+        this.#more.remove();
+        this.#panel.remove();
+        this.#toolbar.classList.remove('ol-toolbar--overflow');
+    }
+    layout() {
+        this.#restore();
+        // Revealed BEFORE the reads, not after the compute. The trigger takes a
+        // width and a gap in the row the moment it is shown, and it cannot be
+        // measured while hidden -- `display: none` reports 0. Showing it here means
+        // its footprint is inside the same `scrollWidth` as everything else, so the
+        // arithmetic needs no second measurement and no second layout pass.
+        //
+        // Measured every time rather than cached: the width follows
+        // `--openleaf-button-size`, which a skin or an integrator token changes at
+        // runtime (compact is 28px, the default 32px, coarse-pointer 40px), so a
+        // value pinned at first layout goes quietly wrong on the next density
+        // change.
+        this.#more.hidden = false;
+        this.#close();
+        // READ. Every measurement is taken here, while the bar is fully expanded,
+        // because a width read after a style write forces the browser to lay the
+        // whole bar out again. The old loop alternated the two once per group, so a
+        // ten-group bar paid for ten layouts -- from a ResizeObserver watching the
+        // element it was resizing.
+        const budget = this.#toolbar.clientWidth;
+        const groups = this.#groups();
+        const total = this.#toolbar.scrollWidth;
+        const widths = groups.map((group) => group.offsetWidth);
+        const moreWidth = this.#more.offsetWidth;
+        const gap = Number.parseFloat(this.#toolbar.ownerDocument.defaultView?.getComputedStyle(this.#toolbar).columnGap ?? '') || 0;
+        if (budget === 0) {
+            this.#more.hidden = true;
+            return;
+        }
+        // COMPUTE. In overflow mode the bar is a nowrap flex row with one uniform
+        // gap, so moving the last k groups out takes exactly their widths and k
+        // gaps off the scroll width. Nothing has to be re-measured between them.
+        //
+        // The trigger's footprint has to come back OUT to answer "does this bar
+        // overflow at all", because a bar that fits never shows one -- and charging
+        // it for a button it will not show would collapse a group for nothing.
+        const trigger = moreWidth > 0 ? moreWidth + gap : 0;
+        if (total - trigger <= budget + 1) {
+            this.#more.hidden = true;
+            return;
+        }
+        // Past here the trigger stays, so `total` -- which already includes it -- is
+        // the right starting point. Leaving it out is what let a bar stay
+        // overflowing by roughly the width of the More button: the groups fit, then
+        // revealing the trigger pushed the row back over its budget, and it
+        // converged only on the next ResizeObserver pass, with a visible flash in
+        // between.
+        let used = total;
+        let count = 0;
+        while (used > budget + 1 && count < groups.length) {
+            used -= (widths[groups.length - 1 - count] ?? 0) + gap;
+            count += 1;
+        }
+        if (count === 0) {
+            this.#more.hidden = true;
+            return;
+        }
+        // WRITE. Backwards, inserted at the front, so the panel keeps the bar's
+        // order. The controls themselves move -- they are not cloned -- which is
+        // what makes the panel operable rather than a picture of the bar.
+        for (let i = groups.length - 1; i >= groups.length - count; i -= 1) {
+            const group = groups[i];
+            if (group)
+                this.#panel.insertBefore(group, this.#panel.firstChild);
+        }
+        // The trigger is already visible -- revealed before the reads, above. And
+        // there are no separator elements to hide: the divider is a border on the
+        // group, so a group that moved into the panel takes its own rule with it
+        // and cannot leave one stranded at the end of the bar.
+        this.#onLayout?.();
+        void this.#host;
+    }
+    /* -------------------------------------------------------------- *
+     * Open, close, and the keyboard
+     * -------------------------------------------------------------- */
+    #open() {
+        this.#panel.hidden = false;
+        this.#more.setAttribute('aria-expanded', 'true');
+        this.#position();
+        this.#doc.addEventListener('pointerdown', this.#onPointerDown, true);
+        this.#doc.defaultView?.addEventListener('scroll', this.#onViewportChange, true);
+        this.#doc.defaultView?.addEventListener('resize', this.#onViewportChange);
+        this.#focus(0);
+    }
+    #close(returnFocus = false) {
+        if (this.#panel.hidden)
+            return;
+        this.#panel.hidden = true;
+        this.#more.setAttribute('aria-expanded', 'false');
+        this.#doc.removeEventListener('pointerdown', this.#onPointerDown, true);
+        this.#doc.defaultView?.removeEventListener('scroll', this.#onViewportChange, true);
+        this.#doc.defaultView?.removeEventListener('resize', this.#onViewportChange);
+        if (returnFocus)
+            this.#more.focus();
+    }
+    /**
+     * Under the trigger, in viewport coordinates and clamped to it.
+     *
+     * Fixed rather than absolute because the bar may sit inside a host with
+     * `overflow: hidden`, which is the case the whole feature exists for.
+     */
+    #position() {
+        const rect = this.#more.getBoundingClientRect();
+        const box = this.#panel.getBoundingClientRect();
+        const view = this.#doc.defaultView;
+        const width = view?.innerWidth ?? 0;
+        const height = view?.innerHeight ?? 0;
+        const below = rect.bottom + 4;
+        const top = below + box.height > height ? Math.max(4, rect.top - box.height - 4) : below;
+        this.#panel.style.position = 'fixed';
+        this.#panel.style.left = `${Math.round(Math.max(4, Math.min(rect.left, width - box.width - 4)))}px`;
+        this.#panel.style.top = `${Math.round(top)}px`;
+    }
+    #focusables() {
+        return [...this.#panel.querySelectorAll(FOCUSABLE)];
+    }
+    #focus(index) {
+        const items = this.#focusables();
+        if (items.length === 0)
+            return;
+        const next = items[(index + items.length) % items.length];
+        for (const item of items)
+            item.tabIndex = item === next ? 0 : -1;
+        next?.focus();
+    }
+    #onKeydown = (event) => {
+        const target = event.target;
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            event.preventDefault();
+            this.#close(true);
+            return;
+        }
+        const items = this.#focusables();
+        const index = items.indexOf(target);
+        if (index < 0)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            // Alt+Down is how a keyboard user opens a native select's list.
+            if (event.altKey)
+                return;
+            event.preventDefault();
+            this.#focus(index + (event.key === 'ArrowDown' ? 1 : -1));
+            return;
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            // Left to the select, which uses them for its own first and last option.
+            if (target?.tagName === 'SELECT')
+                return;
+            event.preventDefault();
+            this.#focus(event.key === 'Home' ? 0 : items.length - 1);
+        }
+    };
+    #onPointerDown = (event) => {
+        const target = event.target;
+        if (!(target instanceof Node))
+            return;
+        if (this.#panel.contains(target) || this.#more.contains(target))
+            return;
+        this.#close();
+    };
+    #onViewportChange = () => this.#close();
+    /* -------------------------------------------------------------- *
+     * Moving groups back and forth
+     * -------------------------------------------------------------- */
+    #restore() {
+        for (const group of [...this.#panel.children])
+            this.#toolbar.appendChild(group);
+        // Overflow always takes a suffix of the groups, so appending in panel order
+        // puts them back where they were. The trigger stays last.
+        if (this.#more.isConnected)
+            this.#toolbar.appendChild(this.#more);
+    }
+    #groups() {
+        return [...this.#toolbar.querySelectorAll(':scope > .ol-group')];
+    }
+}
+//# sourceMappingURL=overflow.js.map

package/dist/overflow.js.map

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

package/dist/pickers.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shared pickers: file, image and media, plus optional link and image lists.
+ *
+ * OpenLeaf has no media library. What it can own is the seam a CMS already has
+ * -- "open our file browser and give me a URL" -- so the link dialog, the
+ * image dialog and the media dialog all call the same function. Registering
+ * three uploaders that each talk to the same endpoint is how this used to go
+ * wrong in every other editor.
+ *
+ * Lists are separate: they are the short, known set of destinations a site
+ * wants to offer (the privacy policy, a hero image), not a replacement for
+ * the library.
+ */
+export type FilePickerKind = 'file' | 'image' | 'media';
+export interface PickedResource {
+    url: string;
+    title?: string;
+    text?: string;
+    alt?: string;
+}
+export type FilePicker = (meta: {
+    kind: FilePickerKind;
+    host: HTMLElement;
+}) => Promise<PickedResource | null>;
+export interface ListedResource {
+    /** Shown in the list. */
+    title: string;
+    /** The URL inserted. */
+    value: string;
+}
+type ListSource = readonly ListedResource[] | (() => readonly ListedResource[]);
+/** Register the shared file picker for every editor on the page. `null` removes it. */
+export declare function registerFilePicker(picker: FilePicker | null): void;
+export declare function filePickerFor(host: HTMLElement | null | undefined): FilePicker | null;
+export declare function registerLinkList(list: ListSource | null): void;
+export declare function registerImageList(list: ListSource | null): void;
+/** Class names offered in the image dialog. Authors can still type others. */
+export declare function registerImageClasses(list: readonly string[] | (() => readonly string[]) | null): void;
+export declare function listedLinks(): ListedResource[];
+export declare function listedImages(): ListedResource[];
+export declare function listedImageClasses(): string[];
+export {};
+//# sourceMappingURL=pickers.d.ts.map

package/dist/pickers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickers.d.ts","sourceRoot":"","sources":["../src/pickers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAEvD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE;IAC9B,IAAI,EAAE,cAAc,CAAA;IACpB,IAAI,EAAE,WAAW,CAAA;CAClB,KAAK,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;AAEpC,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,KAAK,UAAU,GAAG,SAAS,cAAc,EAAE,GAAG,CAAC,MAAM,SAAS,cAAc,EAAE,CAAC,CAAA;AAW/E,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAElE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,CAGrF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAE9D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAE/D;AAED,8EAA8E;AAC9E,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,CAAC,MAAM,SAAS,MAAM,EAAE,CAAC,GAAG,IAAI,GACzD,IAAI,CAEN;AAOD,wBAAgB,WAAW,IAAI,cAAc,EAAE,CAE9C;AAED,wBAAgB,YAAY,IAAI,cAAc,EAAE,CAE/C;AAED,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAG7C"}

package/dist/pickers.js

@@ -0,0 +1,52 @@
+/**
+ * Shared pickers: file, image and media, plus optional link and image lists.
+ *
+ * OpenLeaf has no media library. What it can own is the seam a CMS already has
+ * -- "open our file browser and give me a URL" -- so the link dialog, the
+ * image dialog and the media dialog all call the same function. Registering
+ * three uploaders that each talk to the same endpoint is how this used to go
+ * wrong in every other editor.
+ *
+ * Lists are separate: they are the short, known set of destinations a site
+ * wants to offer (the privacy policy, a hero image), not a replacement for
+ * the library.
+ */
+let globalPicker = null;
+let linkList = null;
+let imageList = null;
+let imageClasses = null;
+/** Register the shared file picker for every editor on the page. `null` removes it. */
+export function registerFilePicker(picker) {
+    globalPicker = picker;
+}
+export function filePickerFor(host) {
+    const own = host?.filePicker;
+    return own ?? globalPicker;
+}
+export function registerLinkList(list) {
+    linkList = list;
+}
+export function registerImageList(list) {
+    imageList = list;
+}
+/** Class names offered in the image dialog. Authors can still type others. */
+export function registerImageClasses(list) {
+    imageClasses = list;
+}
+function resolveList(source) {
+    if (!source)
+        return [];
+    return [...(typeof source === 'function' ? source() : source)];
+}
+export function listedLinks() {
+    return resolveList(linkList);
+}
+export function listedImages() {
+    return resolveList(imageList);
+}
+export function listedImageClasses() {
+    if (!imageClasses)
+        return [];
+    return [...(typeof imageClasses === 'function' ? imageClasses() : imageClasses)];
+}
+//# sourceMappingURL=pickers.js.map

package/dist/pickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickers.js","sourceRoot":"","sources":["../src/pickers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAyBH,IAAI,YAAY,GAAsB,IAAI,CAAA;AAC1C,IAAI,QAAQ,GAAsB,IAAI,CAAA;AACtC,IAAI,SAAS,GAAsB,IAAI,CAAA;AACvC,IAAI,YAAY,GAAyD,IAAI,CAAA;AAM7E,uFAAuF;AACvF,MAAM,UAAU,kBAAkB,CAAC,MAAyB;IAC1D,YAAY,GAAG,MAAM,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAoC;IAChE,MAAM,GAAG,GAAI,IAA0C,EAAE,UAAU,CAAA;IACnE,OAAO,GAAG,IAAI,YAAY,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAuB;IACtD,QAAQ,GAAG,IAAI,CAAA;AACjB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAuB;IACvD,SAAS,GAAG,IAAI,CAAA;AAClB,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,oBAAoB,CAClC,IAA0D;IAE1D,YAAY,GAAG,IAAI,CAAA;AACrB,CAAC;AAED,SAAS,WAAW,CAAC,MAAyB;IAC5C,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,CAAC,GAAG,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAChE,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAC,QAAQ,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,WAAW,CAAC,SAAS,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC,YAAY;QAAE,OAAO,EAAE,CAAA;IAC5B,OAAO,CAAC,GAAG,CAAC,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;AAClF,CAAC"}

package/dist/registry.d.ts

@@ -19,27 +19,42 @@
 import type { Command, EditorState } from 'prosemirror-state';
 import type { EditorView } from 'prosemirror-view';
 import type { IconName } from './icons.js';
+import type { FormatSpec } from '@openleaf-editor/core';
 /** What a custom `run` handler receives. */
 export interface ToolbarContext {
     view: EditorView;
+    /**
+     * The id this item was registered under.
+     *
+     * A custom control must put it in `data-ol-id`, which is what the toolbar
+     * reads back to restore focus across a re-render. Every custom control in the
+     * tree wrote its human LABEL there instead, so focus restoration silently
+     * failed for all of them -- passing the id here is what makes getting it right
+     * the default rather than something each plugin has to remember.
+     */
+    id?: string;
     /** The `<openleaf-editor>` element, for dispatching events or hosting dialogs. */
     host: HTMLElement;
+    /** Extra host-defined block formats available to select controls. */
+    formats?: readonly FormatSpec[];
 }
 /**
  * A control a `custom` item builds for itself.
  *
  * The contract is narrow on purpose. A custom item owns its own markup, so it
  * can be a colour grid or a table-size picker, but it does not get to own the
- * toolbar's keyboard model: the element it returns must contain exactly one
- * focusable `button.ol-btn`, because that is what the roving tabindex walks. A
- * control with two focusable buttons in the bar would make the toolbar two tab
- * stops where the author expects one; a control with none would be unreachable
- * by keyboard. Anything else the control needs -- a popover, a grid of swatches
- * -- belongs outside the toolbar element, in the top layer or on the host.
+ * toolbar's keyboard model. Button-like custom controls participate in the
+ * roving tabindex through one `button.ol-btn`; select controls identify their
+ * native focus target with `focusable`. A control with two focusable elements
+ * in the bar would make the toolbar two tab stops where the author expects one.
+ * Anything else the control needs -- a popover, a grid of swatches -- belongs
+ * outside the toolbar element, in the top layer or on the host.
  */
 export interface ToolbarControl {
     /** The element placed in the toolbar. */
     el: HTMLElement;
+    /** Focus target when the control is not a standard toolbar button. */
+    focusable?: HTMLElement;
     /**
      * Reflect the editor state. Called on every transaction, so it must be cheap
      * and must not throw; a throw is caught and logged once, like a predicate.
@@ -48,6 +63,11 @@ export interface ToolbarControl {
     /** Release listeners, and remove anything the control put in the document. */
     destroy?: () => void;
 }
+/** One choice in a `type: 'select'` toolbar item. */
+export interface ToolbarSelectOption {
+    value: string;
+    label: string;
+}
 export interface ToolbarItemSpec {
     /** Stable id used in the `toolbar` layout attribute. */
     id: string;
@@ -55,17 +75,22 @@ export interface ToolbarItemSpec {
      * What kind of control this is.
      *
      * `button` is the common case. `custom` hands the item a chance to build its
+     * own DOM through `render`, which is how the colour picker and block-type
+     * select exist without id-specific branches in the toolbar.
+     *
+     * `select` and `custom` both build through `render`; the distinct name keeps
+     * the public declaration honest about the control users will receive.
      * own DOM through `render`, which is how the colour picker exists at all: a
      * swatch grid is not a button, and modelling it as one would have meant
-     * special-casing it in the toolbar by id, the way the block-type `select`
-     * still is.
+     * special-casing it in the toolbar by id.
      *
-     * `select` remains unimplemented, and the block-type control is special-cased
-     * by id rather than being one. Declaring it logs a warning rather than
-     * rendering a plausible-looking button that is not the control asked for.
+     * `select` builds a native `<select>` from `options` / `getValue` /
+     * `applyValue`. The block-type control stays special-cased by id because it
+     * owns formats the host injects at mount time; everything else that is a
+     * preset list (font family, size, line height) uses this type.
      */
     type?: 'button' | 'select' | 'custom';
-    /** Accessible name. Kept constant across states -- the platform announces pressed. */
+    /** Accessible name. Use `labelFor` when the same control does insert versus edit. */
     label: string;
     icon?: IconName;
     /**
@@ -78,10 +103,38 @@ export interface ToolbarItemSpec {
     /** For items needing more than the editor state -- dialogs, mode switches. */
     run?: (ctx: ToolbarContext) => void;
     /**
-     * For `type: 'custom'`: build the control. Required for that type, ignored
-     * otherwise.
+     * For `type: 'custom'` or `type: 'select'`: build the control.
      */
     render?: (ctx: ToolbarContext) => ToolbarControl;
+    /**
+     * For `type: 'select'`: the choices shown. Required for that type. An empty
+     * `value` is the "Default" / clear option.
+     */
+    options?: readonly ToolbarSelectOption[];
+    /**
+     * For `type: 'select'`: the value that matches the selection. Empty string
+     * means no explicit formatting (the Default option).
+     */
+    getValue?: (state: EditorState) => string;
+    /**
+     * For `type: 'select'`: turn a chosen value into a command. Empty string
+     * clears.
+     */
+    applyValue?: (value: string) => Command;
+    /**
+     * Optional CSS modifier for a select (e.g. `wide` for long font names).
+     * Becomes `ol-select--{mod}` on the element.
+     */
+    selectMod?: string;
+    /**
+     * Accessible name that depends on the selection.
+     *
+     * `label` stays the default. Use this when the same control does two
+     * different things -- insert versus edit -- so the name can say which.
+     * Do not use it to bake "pressed" into a toggle; the platform already
+     * announces that.
+     */
+    labelFor?: (state: EditorState) => string;
     isActive?: (state: EditorState) => boolean;
     /** Defaults to asking `command` whether it would apply. */
     isEnabled?: (state: EditorState) => boolean;
@@ -104,10 +157,11 @@ export declare function clearToolbarItems(): void;
  * Order reasoning: history sits leftmost because it is the control an author
  * reaches for under stress and muscle memory puts it at the start of the bar in
  * every office application. Block type comes next because choosing what a
- * paragraph *is* precedes decorating it. Then character marks, then block
- * structure, then insertions, and finally source view -- the one control that
- * changes the editor's mode rather than the document, kept away from the rest
- * so it is not hit by accident.
+ * paragraph *is* precedes decorating it. Font family, size and line height sit
+ * beside it as the next layer of look. Then character marks, alignment, indent,
+ * lists, insertions, and finally source view -- the one control that changes
+ * the editor's mode rather than the document, kept away from the rest so it is
+ * not hit by accident.
  */
 export declare const DEFAULT_LAYOUT: string;
 /**

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,4CAA4C;AAC5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAA;IAChB,kFAAkF;IAClF,IAAI,EAAE,WAAW,CAAA;CAClB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,WAAW,CAAA;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACrC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACrC,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,cAAc,CAAA;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;IAC1C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;IAC3C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAcD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAGjE;AAcD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAG/D;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAEtE;AAED,wBAAgB,eAAe,IAAI,eAAe,EAAE,CAEnD;AAED,gDAAgD;AAChD,wBAAgB,iBAAiB,IAAI,IAAI,CAGxC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAGgE,CAAA;AAE3F;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,QAG9B,CAAA"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,4CAA4C;AAC5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAA;IAChB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,kFAAkF;IAClF,IAAI,EAAE,WAAW,CAAA;IACjB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;CAChC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,WAAW,CAAA;IACf,sEAAsE;IACtE,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACrC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACrC,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,cAAc,CAAA;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAA;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAA;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;IAC1C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;IAC3C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAcD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAGjE;AAcD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAG/D;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAEtE;AAED,wBAAgB,eAAe,IAAI,eAAe,EAAE,CAEnD;AAED,gDAAgD;AAChD,wBAAgB,iBAAiB,IAAI,IAAI,CAGxC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,QAGiF,CAAA;AAE5G;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,QAG9B,CAAA"}

package/dist/registry.js

@@ -67,14 +67,15 @@ export function clearToolbarItems() {
  * Order reasoning: history sits leftmost because it is the control an author
  * reaches for under stress and muscle memory puts it at the start of the bar in
  * every office application. Block type comes next because choosing what a
- * paragraph *is* precedes decorating it. Then character marks, then block
- * structure, then insertions, and finally source view -- the one control that
- * changes the editor's mode rather than the document, kept away from the rest
- * so it is not hit by accident.
+ * paragraph *is* precedes decorating it. Font family, size and line height sit
+ * beside it as the next layer of look. Then character marks, alignment, indent,
+ * lists, insertions, and finally source view -- the one control that changes
+ * the editor's mode rather than the document, kept away from the rest so it is
+ * not hit by accident.
  */
-export const DEFAULT_LAYOUT = 'undo redo | blockType | bold italic underline strikethrough code | ' +
+export const DEFAULT_LAYOUT = 'undo redo | blockType | fontFamily fontSize lineHeight | bold italic underline strikethrough code | ' +
     'alignLeft alignCenter alignRight alignJustify | ' +
-    'bulletList orderedList blockquote codeBlock | link unlink image horizontalRule | source';
+    'indent outdent | bulletList orderedList blockquote codeBlock | link unlink image horizontalRule | source';
 /**
  * The default layout with the colour controls in it.
  *

package/dist/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AA8EH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA2B,CAAA;AAEnD;;;;;;;GAOG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAA;AAEvC,MAAM,UAAU,gBAAgB,CAAC,QAAoB;IACnD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IACvB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;AACzC,CAAC;AAED,SAAS,MAAM;IACb,4EAA4E;IAC5E,2EAA2E;IAC3E,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,IAAI,CAAC;YACH,QAAQ,EAAE,CAAA;QACZ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,oDAAoD,EAAE,KAAK,CAAC,CAAA;QAC5E,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAqB;IACvD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IAC3B,MAAM,EAAE,CAAA;AACV,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAU;IACvC,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;AAC/B,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,iBAAiB;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAA;IAChB,MAAM,EAAE,CAAA;AACV,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,qEAAqE;IACrE,kDAAkD;IAClD,yFAAyF,CAAA;AAE3F;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CACtD,WAAW,EACX,wCAAwC,CACzC,CAAA"}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAoIH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA2B,CAAA;AAEnD;;;;;;;GAOG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAA;AAEvC,MAAM,UAAU,gBAAgB,CAAC,QAAoB;IACnD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IACvB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;AACzC,CAAC;AAED,SAAS,MAAM;IACb,4EAA4E;IAC5E,2EAA2E;IAC3E,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,IAAI,CAAC;YACH,QAAQ,EAAE,CAAA;QACZ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,oDAAoD,EAAE,KAAK,CAAC,CAAA;QAC5E,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAqB;IACvD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IAC3B,MAAM,EAAE,CAAA;AACV,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAU;IACvC,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;AAC/B,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,iBAAiB;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAA;IAChB,MAAM,EAAE,CAAA;AACV,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,sGAAsG;IACtG,kDAAkD;IAClD,0GAA0G,CAAA;AAE5G;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CACtD,WAAW,EACX,wCAAwC,CACzC,CAAA"}

package/dist/skins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skins.d.ts","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,MAAM,WAAW,IAAI;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,IAAI,EAyEzC,CAAA;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAI7D;AAuBD,wBAAgB,cAAc,IAAI,SAAS,IAAI,EAAE,CAEhD;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAuBtE;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAQ/E"}
+{"version":3,"file":"skins.d.ts","sourceRoot":"","sources":["../src/skins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,MAAM,WAAW,IAAI;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,IAAI,EAiFzC,CAAA;AA6CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAI7D;AAwBD,wBAAgB,cAAc,IAAI,SAAS,IAAI,EAAE,CAEhD;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAuBtE;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAQ/E"}