@lapismd/mira 0.0.1

package/dist/internal/codemirror/base/search.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.test.d.ts","sourceRoot":"","sources":["../../../../src/internal/codemirror/base/search.test.ts"],"names":[],"mappings":""}

package/dist/internal/codemirror/base/search.test.js

@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { getSearchQuery, openSearchPanel, searchPanelOpen, } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import { createBaseCodeMirrorExtensions } from ".";
+import { createMiraSearchExtension, createSearchPanelHost, focusSearchPanelInput, } from "./search";
+function createSearchEditor(doc = "Alpha beta Alpha", selection = { anchor: 0, head: 5 }) {
+    const parent = document.createElement("div");
+    document.body.append(parent);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc,
+            selection,
+            extensions: [createBaseCodeMirrorExtensions()],
+        }),
+        parent,
+    });
+    return {
+        parent,
+        view,
+        destroy() {
+            view.destroy();
+            parent.remove();
+        },
+    };
+}
+function inputValue(input, value) {
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+describe("Mira search extension", () => {
+    it("opens the Lapis-compatible search interface with the selection", () => {
+        const editor = createSearchEditor();
+        openSearchPanel(editor.view);
+        const panel = editor.parent.querySelector(".mira-search-panel");
+        const searchInput = editor.parent.querySelector(".mira-search-panel__search-input");
+        expect(panel).not.toBeNull();
+        expect(editor.parent.querySelector(".cm-panels-top .mira-search-panel-host")).not.toBeNull();
+        expect(searchInput?.value).toBe("Alpha");
+        expect(document.activeElement).toBe(searchInput);
+        expect(editor.parent.querySelector('[aria-label="Case sensitive"]')).not.toBeNull();
+        expect(editor.parent.querySelector('[aria-label="Match whole word"]')).not.toBeNull();
+        expect(editor.parent.querySelector('[aria-label="Use regular expression"]')).not.toBeNull();
+        const searchField = editor.parent.querySelector(".mira-search-panel__search-field");
+        const searchOptions = editor.parent.querySelector('[role="group"][aria-label="Search options"]');
+        expect(searchField?.contains(searchInput)).toBe(true);
+        expect(searchField?.contains(searchOptions)).toBe(true);
+        expect(searchOptions?.parentElement).toBe(searchField);
+        expect(searchField?.querySelector(".mira-search-panel__find-icon svg")).not.toBeNull();
+        expect(editor.parent.querySelector('[aria-label="Select all matches"]')).not.toBeNull();
+        editor.destroy();
+    });
+    it("updates search flags and reports missing matches", async () => {
+        const editor = createSearchEditor();
+        openSearchPanel(editor.view);
+        editor.parent
+            .querySelector('[aria-label="Case sensitive"]')
+            ?.click();
+        editor.parent
+            .querySelector('[aria-label="Match whole word"]')
+            ?.click();
+        editor.parent
+            .querySelector('[aria-label="Use regular expression"]')
+            ?.click();
+        expect(getSearchQuery(editor.view.state)).toMatchObject({
+            caseSensitive: true,
+            wholeWord: true,
+            regexp: true,
+        });
+        const searchInput = editor.parent.querySelector(".mira-search-panel__search-input");
+        if (!searchInput) {
+            throw new Error("Expected the search input.");
+        }
+        inputValue(searchInput, "Missing");
+        await tick();
+        expect(getSearchQuery(editor.view.state).search).toBe("Missing");
+        expect(searchInput.getAttribute("aria-invalid")).toBe("true");
+        expect(editor.parent.querySelector('[role="status"]')?.textContent).toContain("No matches found");
+        editor.destroy();
+    });
+    it("expands replace controls and replaces all matches", async () => {
+        const editor = createSearchEditor("one two one", { anchor: 0, head: 3 });
+        openSearchPanel(editor.view);
+        editor.parent
+            .querySelector('[aria-label="Toggle replace"]')
+            ?.click();
+        await tick();
+        const replaceInput = editor.parent.querySelector('input[aria-label="Replace"]');
+        if (!replaceInput) {
+            throw new Error("Expected the replace input.");
+        }
+        inputValue(replaceInput, "three");
+        editor.parent
+            .querySelector('[aria-label="Replace all matches"]')
+            ?.click();
+        expect(editor.view.state.doc.toString()).toBe("three two three");
+        editor.destroy();
+    });
+    it("respects initial search configuration and panel placement", () => {
+        const parent = document.createElement("div");
+        document.body.append(parent);
+        const view = new EditorView({
+            state: EditorState.create({
+                doc: "Alpha alpha",
+                extensions: [
+                    createMiraSearchExtension({
+                        top: false,
+                        caseSensitive: true,
+                        wholeWord: true,
+                    }),
+                ],
+            }),
+            parent,
+        });
+        openSearchPanel(view);
+        expect(getSearchQuery(view.state)).toMatchObject({
+            caseSensitive: true,
+            wholeWord: true,
+        });
+        expect(parent.querySelector(".cm-panels-bottom .mira-search-panel-host")).not.toBeNull();
+        view.destroy();
+        parent.remove();
+    });
+    it("closes with Escape from the search panel", () => {
+        const editor = createSearchEditor();
+        openSearchPanel(editor.view);
+        const searchInput = editor.parent.querySelector(".mira-search-panel__search-input");
+        searchInput?.dispatchEvent(new KeyboardEvent("keydown", {
+            bubbles: true,
+            cancelable: true,
+            key: "Escape",
+        }));
+        expect(searchPanelOpen(editor.view.state)).toBe(false);
+        editor.destroy();
+    });
+    it("creates and focuses the panel host in the editor document", () => {
+        const iframe = document.createElement("iframe");
+        document.body.append(iframe);
+        const popupDocument = iframe.contentDocument;
+        if (!popupDocument) {
+            throw new Error("Expected an iframe document.");
+        }
+        const host = createSearchPanelHost(popupDocument);
+        const input = popupDocument.createElement("input");
+        input.className = "mira-search-panel__search-input";
+        host.append(input);
+        popupDocument.body.append(host);
+        focusSearchPanelInput(host);
+        expect(host.ownerDocument).toBe(popupDocument);
+        expect(popupDocument.activeElement).toBe(input);
+        iframe.remove();
+    });
+});

package/dist/internal/codemirror/base/selection-toolbar.d.ts

@@ -0,0 +1,21 @@
+import { type Extension } from "@codemirror/state";
+export declare const miraSelectionToolbarActionIds: readonly ["link", "bold", "italic", "strikethrough", "inlineCode"];
+export type MiraSelectionToolbarActionId = (typeof miraSelectionToolbarActionIds)[number];
+export type MiraSelectionToolbarPlacement = "above" | "below";
+export type MiraSelectionToolbarConfig = {
+    /** Inline Markdown actions shown from left to right. */
+    actions?: readonly MiraSelectionToolbarActionId[];
+    /** Accessible name for the toolbar. */
+    ariaLabel?: string;
+    /** Per-action accessible labels and hover titles. */
+    labels?: Partial<Record<MiraSelectionToolbarActionId, string>>;
+    /** Preferred side of the selected text. Defaults to `below`. */
+    placement?: MiraSelectionToolbarPlacement;
+};
+export declare const defaultMiraSelectionToolbarActions: readonly ["link", "bold", "italic", "strikethrough"];
+/**
+ * Show a compact formatting toolbar for a non-empty CodeMirror selection.
+ * Prefer the higher-level `selectionToolbarExtension` when composing Mira.
+ */
+export declare function createSelectionToolbarExtension(config?: MiraSelectionToolbarConfig): Extension;
+//# sourceMappingURL=selection-toolbar.d.ts.map

package/dist/internal/codemirror/base/selection-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/internal/codemirror/base/selection-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAC;AAe3B,eAAO,MAAM,6BAA6B,oEAMU,CAAC;AAErD,MAAM,MAAM,4BAA4B,GACtC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,6BAA6B,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,0BAA0B,GAAG;IACvC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,4BAA4B,EAAE,CAAC;IAClD,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/D,gEAAgE;IAChE,SAAS,CAAC,EAAE,6BAA6B,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,kCAAkC,sDAKa,CAAC;AAsG7D;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,GAAE,0BAA+B,GACtC,SAAS,CAsCX"}

package/dist/internal/codemirror/base/selection-toolbar.js

@@ -0,0 +1,306 @@
+import { EditorState, Prec, StateField, } from "@codemirror/state";
+import { EditorView, keymap, showTooltip, } from "@codemirror/view";
+import { applyMiraMarkdownAction, isMiraMarkdownActionActive, } from "../../../core/markdown-actions";
+export const miraSelectionToolbarActionIds = [
+    "link",
+    "bold",
+    "italic",
+    "strikethrough",
+    "inlineCode",
+];
+export const defaultMiraSelectionToolbarActions = [
+    "link",
+    "bold",
+    "italic",
+    "strikethrough",
+];
+const defaultActionLabels = {
+    link: "Link",
+    bold: "Bold",
+    italic: "Italic",
+    strikethrough: "Strikethrough",
+    inlineCode: "Inline code",
+};
+const iconPaths = {
+    link: [
+        "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+        "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+    ],
+    bold: ["M6 12h9a4 4 0 0 1 0 8H6V4h8a4 4 0 0 1 0 8"],
+    italic: ["M19 4h-9", "M14 20H5", "M15 4 9 20"],
+    strikethrough: [
+        "M16 4H9a3 3 0 0 0-2.83 4",
+        "M14 12a4 4 0 0 1 0 8H6",
+        "M4 12h16",
+    ],
+    inlineCode: ["m18 16 4-4-4-4", "m6 8-4 4 4 4", "m14.5 4-5 16"],
+};
+const selectionToolbarTheme = EditorView.baseTheme({
+    ".cm-tooltip.mira-selection-toolbar": {
+        alignItems: "center",
+        backgroundColor: "var(--popover, var(--mira-popover, var(--mira-widget-background)))",
+        border: "1px solid var(--border, var(--mira-border))",
+        borderRadius: "999px",
+        boxSizing: "border-box",
+        color: "var(--popover-foreground, var(--mira-popover-foreground, var(--mira-foreground)))",
+        display: "flex",
+        gap: "0.125rem",
+        minHeight: "2.5rem",
+        padding: "0.25rem 0.375rem",
+        /* Keep the lower edge distinct from the drop shadow in light themes. */
+        boxShadow: "inset 0 -1px 0 var(--border, var(--mira-border)), var(--mira-widget-shadow)",
+        transform: "translateX(-50%)",
+    },
+    ".mira-selection-toolbar__button": {
+        alignItems: "center",
+        appearance: "none",
+        background: "transparent",
+        border: "1px solid transparent",
+        borderRadius: "999px",
+        color: "var(--muted-foreground, var(--mira-muted-foreground))",
+        cursor: "pointer",
+        display: "inline-flex",
+        height: "1.875rem",
+        justifyContent: "center",
+        margin: "0",
+        padding: "0",
+        width: "1.875rem",
+    },
+    ".mira-selection-toolbar__button:hover": {
+        backgroundColor: "var(--accent, var(--background-modifier-hover, var(--mira-accent-soft)))",
+        borderColor: "var(--border, var(--mira-border))",
+        color: "var(--accent-foreground, var(--mira-foreground))",
+    },
+    '.mira-selection-toolbar__button[aria-pressed="true"]': {
+        backgroundColor: "var(--mira-accent-soft, var(--background-modifier-hover, var(--accent)))",
+        borderColor: "var(--mira-accent, var(--interactive-accent))",
+        color: "var(--mira-accent, var(--interactive-accent))",
+    },
+    ".mira-selection-toolbar__button:focus-visible": {
+        backgroundColor: "var(--accent, var(--background-modifier-hover, var(--mira-accent-soft)))",
+        borderColor: "var(--mira-focus-ring, var(--mira-accent))",
+        color: "var(--accent-foreground, var(--mira-foreground))",
+        outline: "2px solid var(--mira-focus-ring, var(--mira-accent))",
+        outlineOffset: "1px",
+    },
+    ".mira-selection-toolbar__icon": {
+        fill: "none",
+        height: "1.125rem",
+        pointerEvents: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        width: "1.125rem",
+    },
+    '.mira-selection-toolbar[data-editor-active="false"]': {
+        pointerEvents: "none",
+        visibility: "hidden",
+    },
+});
+/**
+ * Show a compact formatting toolbar for a non-empty CodeMirror selection.
+ * Prefer the higher-level `selectionToolbarExtension` when composing Mira.
+ */
+export function createSelectionToolbarExtension(config = {}) {
+    const resolved = resolveSelectionToolbarConfig(config);
+    if (resolved.actions.length === 0) {
+        return [];
+    }
+    const toolbarField = StateField.define({
+        create(state) {
+            return selectionTooltip(state, resolved);
+        },
+        update(_value, transaction) {
+            return selectionTooltip(transaction.state, resolved);
+        },
+        provide: (field) => showTooltip.from(field),
+    });
+    const keyboardAccess = Prec.high(keymap.of([
+        {
+            key: "Tab",
+            run(view) {
+                if (view.state.selection.main.empty) {
+                    return false;
+                }
+                const firstButton = view.dom.querySelector(".mira-selection-toolbar__button");
+                if (!firstButton) {
+                    return false;
+                }
+                firstButton.focus();
+                return true;
+            },
+        },
+    ]));
+    return [toolbarField, keyboardAccess, selectionToolbarTheme];
+}
+function resolveSelectionToolbarConfig(config) {
+    const actions = Array.from(new Set(config.actions ?? defaultMiraSelectionToolbarActions));
+    return {
+        actions,
+        ariaLabel: config.ariaLabel ?? "Text formatting",
+        labels: { ...defaultActionLabels, ...config.labels },
+        placement: config.placement ?? "below",
+    };
+}
+function selectionTooltip(state, config) {
+    const selection = state.selection.main;
+    if (selection.empty || state.facet(EditorState.readOnly)) {
+        return null;
+    }
+    return {
+        pos: selection.from,
+        end: selection.to,
+        above: config.placement === "above",
+        create(view) {
+            return new SelectionToolbarTooltipView(view, config);
+        },
+    };
+}
+class SelectionToolbarTooltipView {
+    view;
+    dom;
+    offset = { x: 0, y: 8 };
+    mounted = false;
+    constructor(view, config) {
+        this.view = view;
+        const ownerDocument = view.dom.ownerDocument;
+        this.dom = ownerDocument.createElement("div");
+        this.dom.className = "mira-selection-toolbar";
+        this.dom.dataset.placement = config.placement;
+        this.dom.setAttribute("role", "toolbar");
+        this.dom.setAttribute("aria-label", config.ariaLabel);
+        this.dom.addEventListener("keydown", (event) => {
+            this.handleKeydown(event);
+        });
+        for (const action of config.actions) {
+            this.dom.append(this.createButton(ownerDocument, action, config));
+        }
+        this.syncActionStates();
+        this.syncActiveState();
+    }
+    update(_update) {
+        this.syncActionStates();
+        this.syncActiveState();
+    }
+    mount() {
+        this.mounted = true;
+        const ownerDocument = this.dom.ownerDocument;
+        ownerDocument.addEventListener("focusin", this.handleFocusChange);
+        ownerDocument.addEventListener("focusout", this.handleFocusChange);
+        ownerDocument.defaultView?.addEventListener("blur", this.handleWindowBlur);
+        this.syncActiveState();
+    }
+    destroy() {
+        this.mounted = false;
+        const ownerDocument = this.dom.ownerDocument;
+        ownerDocument.removeEventListener("focusin", this.handleFocusChange);
+        ownerDocument.removeEventListener("focusout", this.handleFocusChange);
+        ownerDocument.defaultView?.removeEventListener("blur", this.handleWindowBlur);
+    }
+    getCoords = (position) => {
+        const selection = this.view.state.selection.main;
+        const start = this.view.coordsAtPos(selection.from, 1);
+        const end = this.view.coordsAtPos(selection.to, -1);
+        if (!start || !end) {
+            return (this.view.coordsAtPos(position) ?? {
+                left: 0,
+                right: 0,
+                top: -10_000,
+                bottom: -10_000,
+            });
+        }
+        const center = start.left + Math.max(0, end.left - start.left) / 2;
+        return {
+            left: center,
+            right: center,
+            top: Math.min(start.top, end.top),
+            bottom: Math.max(start.bottom, end.bottom),
+        };
+    };
+    handleFocusChange = () => {
+        queueMicrotask(() => {
+            if (this.mounted) {
+                this.syncActiveState();
+            }
+        });
+    };
+    handleWindowBlur = () => {
+        this.dom.dataset.editorActive = "false";
+    };
+    syncActiveState() {
+        const activeElement = this.dom.ownerDocument.activeElement;
+        const active = Boolean(activeElement &&
+            (this.view.contentDOM.contains(activeElement) ||
+                this.dom.contains(activeElement)));
+        this.dom.dataset.editorActive = active ? "true" : "false";
+    }
+    syncActionStates() {
+        for (const button of this.dom.querySelectorAll(".mira-selection-toolbar__button")) {
+            const action = button.dataset
+                .miraSelectionAction;
+            button.setAttribute("aria-pressed", String(isMiraMarkdownActionActive(this.view.state, action)));
+        }
+    }
+    handleKeydown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            this.view.focus();
+            return;
+        }
+        const buttons = Array.from(this.dom.querySelectorAll(".mira-selection-toolbar__button"));
+        const activeIndex = buttons.indexOf(this.dom.ownerDocument.activeElement);
+        if (activeIndex < 0 || buttons.length === 0) {
+            return;
+        }
+        const nextIndex = event.key === "ArrowRight"
+            ? (activeIndex + 1) % buttons.length
+            : event.key === "ArrowLeft"
+                ? (activeIndex - 1 + buttons.length) % buttons.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? buttons.length - 1
+                        : null;
+        if (nextIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        buttons[nextIndex]?.focus();
+    }
+    createButton(ownerDocument, action, config) {
+        const label = config.labels[action];
+        const button = ownerDocument.createElement("button");
+        button.type = "button";
+        button.className = "mira-selection-toolbar__button";
+        button.dataset.miraSelectionAction = action;
+        button.setAttribute("aria-label", label);
+        button.title = label;
+        button.append(createActionIcon(ownerDocument, action));
+        button.addEventListener("pointerdown", preserveEditorSelection);
+        button.addEventListener("mousedown", preserveEditorSelection);
+        button.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            applyMiraMarkdownAction(this.view, action);
+        });
+        return button;
+    }
+}
+function preserveEditorSelection(event) {
+    event.preventDefault();
+}
+function createActionIcon(ownerDocument, action) {
+    const namespace = "http://www.w3.org/2000/svg";
+    const svg = ownerDocument.createElementNS(namespace, "svg");
+    svg.classList.add("mira-selection-toolbar__icon");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    for (const data of iconPaths[action]) {
+        const path = ownerDocument.createElementNS(namespace, "path");
+        path.setAttribute("d", data);
+        svg.append(path);
+    }
+    return svg;
+}

package/dist/internal/codemirror/base/selection-toolbar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selection-toolbar.test.d.ts.map

package/dist/internal/codemirror/base/selection-toolbar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-toolbar.test.d.ts","sourceRoot":"","sources":["../../../../src/internal/codemirror/base/selection-toolbar.test.ts"],"names":[],"mappings":""}

package/dist/internal/codemirror/base/selection-toolbar.test.js

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it } from "vitest";
+import { createMarkdownCodeMirrorExtensions } from "../markdown";
+import { createSelectionToolbarExtension, defaultMiraSelectionToolbarActions, } from "./selection-toolbar";
+function createEditor({ actions, ariaLabel, labels, placement, readonly = false, doc = "Format this text", selection = EditorSelection.single(7, 11), } = {}) {
+    const parent = document.createElement("div");
+    document.body.append(parent);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc,
+            selection,
+            extensions: [
+                createMarkdownCodeMirrorExtensions({ sourceMode: true }),
+                EditorState.readOnly.of(readonly),
+                createSelectionToolbarExtension({
+                    actions,
+                    ariaLabel,
+                    labels,
+                    placement,
+                }),
+            ],
+        }),
+        parent,
+    });
+    return {
+        parent,
+        view,
+        destroy() {
+            view.destroy();
+            parent.remove();
+        },
+    };
+}
+function toolbar(parent) {
+    return parent.querySelector('[role="toolbar"]');
+}
+describe("createSelectionToolbarExtension", () => {
+    it("shows the default accessible actions in screenshot order", () => {
+        const editor = createEditor();
+        const selectionToolbar = toolbar(editor.parent);
+        expect(defaultMiraSelectionToolbarActions).toEqual([
+            "link",
+            "bold",
+            "italic",
+            "strikethrough",
+        ]);
+        expect(selectionToolbar?.getAttribute("aria-label")).toBe("Text formatting");
+        expect(selectionToolbar?.dataset.placement).toBe("below");
+        expect(Array.from(selectionToolbar?.querySelectorAll("button") ?? [], (button) => ({
+            action: button.dataset.miraSelectionAction,
+            label: button.getAttribute("aria-label"),
+            title: button.title,
+            icon: button.querySelector("svg")?.getAttribute("aria-hidden"),
+        }))).toEqual([
+            { action: "link", label: "Link", title: "Link", icon: "true" },
+            { action: "bold", label: "Bold", title: "Bold", icon: "true" },
+            { action: "italic", label: "Italic", title: "Italic", icon: "true" },
+            {
+                action: "strikethrough",
+                label: "Strikethrough",
+                title: "Strikethrough",
+                icon: "true",
+            },
+        ]);
+        expect(Array.from(selectionToolbar?.querySelectorAll("button") ?? [], (button) => button.getAttribute("aria-pressed"))).toEqual(["false", "false", "false", "false"]);
+        expect(editor.view.state.doc.toString()).toBe("Format this text");
+        editor.destroy();
+    });
+    it("delegates button activation to the shared Markdown action engine", () => {
+        const editor = createEditor();
+        const bold = editor.parent.querySelector('[data-mira-selection-action="bold"]');
+        bold?.click();
+        expect(editor.view.state.doc.toString()).toBe("Format **this** text");
+        expect(editor.view.state.selection.main.from).toBe(9);
+        expect(editor.view.state.selection.main.to).toBe(13);
+        expect(toolbar(editor.parent)).not.toBeNull();
+        expect(editor.parent
+            .querySelector('[data-mira-selection-action="bold"]')
+            ?.getAttribute("aria-pressed")).toBe("true");
+        editor.parent
+            .querySelector('[data-mira-selection-action="bold"]')
+            ?.click();
+        expect(editor.view.state.doc.toString()).toBe("Format this text");
+        expect(editor.parent
+            .querySelector('[data-mira-selection-action="bold"]')
+            ?.getAttribute("aria-pressed")).toBe("false");
+        editor.destroy();
+    });
+    it("marks an existing exact formatting span as selected", () => {
+        const editor = createEditor({
+            doc: "Format __this__ text",
+            selection: EditorSelection.single(9, 13),
+        });
+        expect(editor.parent
+            .querySelector('[data-mira-selection-action="bold"]')
+            ?.getAttribute("aria-pressed")).toBe("true");
+        expect(editor.parent
+            .querySelector('[data-mira-selection-action="italic"]')
+            ?.getAttribute("aria-pressed")).toBe("false");
+        editor.destroy();
+    });
+    it("supports configured action order, labels, placement, and toolbar name", () => {
+        const editor = createEditor({
+            actions: ["inlineCode", "italic", "inlineCode"],
+            ariaLabel: "Quick formatting",
+            labels: { inlineCode: "Code selection" },
+            placement: "above",
+        });
+        const selectionToolbar = toolbar(editor.parent);
+        expect(selectionToolbar?.getAttribute("aria-label")).toBe("Quick formatting");
+        expect(selectionToolbar?.dataset.placement).toBe("above");
+        expect(Array.from(selectionToolbar?.querySelectorAll("button") ?? [], (button) => button.getAttribute("aria-label"))).toEqual(["Code selection", "Italic"]);
+        editor.destroy();
+    });
+    it("moves keyboard focus into and through the toolbar", () => {
+        const editor = createEditor();
+        editor.view.focus();
+        editor.view.contentDOM.dispatchEvent(new KeyboardEvent("keydown", {
+            bubbles: true,
+            cancelable: true,
+            key: "Tab",
+        }));
+        expect(document.activeElement?.getAttribute("aria-label")).toBe("Link");
+        document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", {
+            bubbles: true,
+            cancelable: true,
+            key: "ArrowRight",
+        }));
+        expect(document.activeElement?.getAttribute("aria-label")).toBe("Bold");
+        document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", {
+            bubbles: true,
+            cancelable: true,
+            key: "Escape",
+        }));
+        expect(document.activeElement).toBe(editor.view.contentDOM);
+        editor.destroy();
+    });
+    it("hides for collapsed selections and readonly editors", () => {
+        const editor = createEditor();
+        editor.view.dispatch({ selection: EditorSelection.cursor(7) });
+        expect(toolbar(editor.parent)).toBeNull();
+        editor.destroy();
+        const readonlyEditor = createEditor({ readonly: true });
+        expect(toolbar(readonlyEditor.parent)).toBeNull();
+        readonlyEditor.destroy();
+    });
+});