edytor 1.0.0-rc.3 → 1.0.0

package/dist/plugins/richtext/controls.svelte.d.ts

@@ -0,0 +1,110 @@
+/**
+ * The controls inside the rich text kinds (a to-do's checkbox, a callout's
+ * icon, an empty body's hint): the package's markup by default, the app's
+ * snippet when `createRichTextPlugin` names one. Each snippet receives a
+ * payload: the state, the action (written through the document) and the
+ * words the markup reads, and the control's attachment (its marker, its
+ * ARIA, its press and click), so custom markup keeps the keys, the
+ * accessibility and what the editor reads of it.
+ */
+import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { Block } from '../../block/block.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+import type { BlockView } from '../../plugins.js';
+/** What a to-do's `checkbox` snippet receives. */
+export type TodoCheckboxPayload = {
+    /** The to-do; `undefined` in a suggestion's preview (its box writes nothing). */
+    readonly block: Block | undefined;
+    /** It is checked: its `data.checked` (reactive). */
+    readonly checked: boolean;
+    /** The checkbox's accessible name (the view's `richText.checkbox`). */
+    readonly label: string;
+    /** Check or uncheck it: one data write, refused in a readonly view. */
+    toggle: () => void;
+    /**
+     * The control's attachment (`{@attach box.control}`), on an `input
+     * type="checkbox"` (give it `checked={box.checked}`) or a `button` (it
+     * gets `role="checkbox"` and `aria-checked`): its marker
+     * (`data-edytor-todo-checkbox`), `contenteditable="false"`, its
+     * `aria-label`, a press that keeps the editor's selection and a click
+     * that toggles the to-do.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** What a callout's `calloutIcon` snippet receives. */
+export type CalloutIconPayload = {
+    /** The callout; `undefined` in a suggestion's preview. */
+    readonly block: Block | undefined;
+    /** Its icon: its `data.icon`, the view's default without one, `''` for none (reactive). */
+    readonly icon: string;
+    /**
+     * The icon opens the view's picker: an editable view listing a picker,
+     * not a suggestion's preview. Draw a `button` then, else the icon alone.
+     */
+    readonly editable: boolean;
+    /** The picker is open on this callout (reactive). */
+    readonly expanded: boolean;
+    /** The button's accessible name: Change icon, or Add icon over an empty slot. */
+    readonly label: string;
+    /** Open the view's picker on this callout, or close it. */
+    toggle: () => void;
+    /**
+     * The icon's attachment (`{@attach icon.control}`): its marker
+     * (`data-edytor-callout-icon`, which the picker opens under), `data-empty`
+     * without an icon, `contenteditable="false"`; editable, its
+     * `aria-label`, `aria-haspopup`, `aria-expanded`, `aria-controls`, a
+     * press that keeps the editor's selection and a click that toggles the
+     * picker; else `aria-hidden`.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** What the `emptyBody` snippet of an open toggle's or a callout's empty body receives. */
+export type EmptyBodyPayload = {
+    /** The toggle or callout. */
+    readonly block: Block;
+    /** Which kind's body. */
+    readonly kind: 'toggle' | 'callout';
+    /** The hint (the view's `richText.emptyBody`). */
+    readonly label: string;
+    /** Start the body: a first child, the caret in it (one command, one undo step). */
+    open: () => void;
+    /**
+     * The hint's attachment (`{@attach hint.control}`): its marker
+     * (`data-edytor-empty-body`, where a dragged block drops inside),
+     * `contenteditable="false"`, `aria-hidden` (Enter at the end of the
+     * header is the keyboard's way in) and a click that starts the body.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** `createRichTextPlugin`'s control snippets. */
+export type RichTextControls = {
+    checkbox?: Snippet<[TodoCheckboxPayload]>;
+    calloutIcon?: Snippet<[CalloutIconPayload]>;
+    emptyBody?: Snippet<[EmptyBodyPayload]>;
+};
+/** Each view's control snippets (the first rich text plugin listed sets them). */
+export declare const richTextControls: WeakMap<object, RichTextControls>;
+/** Check or uncheck a to-do: one key patched, so a peer's concurrent edit of another key is kept. */
+export declare const toggleTodo: (block: Block) => import("../../index.js").OpResult;
+/**
+ * A to-do's checkbox in `view` (a suggestion's preview included: no
+ * handle, no write), named in its labels.
+ */
+export declare const todoCheckbox: (view: Edytor, block: () => BlockView<{
+    checked?: boolean;
+}>) => TodoCheckboxPayload;
+/**
+ * A callout's icon in `view` (`callout.icon`): its `data.icon`, the view's
+ * default without one, none when it is `''`; a button opening the view's
+ * picker where it may be picked (an editable view listing a picker, not a
+ * suggestion's preview), else the icon alone.
+ */
+export declare const calloutIcon: (view: Edytor, block: () => BlockView<{
+    icon?: string;
+}>) => CalloutIconPayload;
+/**
+ * The hint of `block`'s empty body in `view` (`body.hint`), or `null` where
+ * none shows: a readonly view, a suggestion's preview (no handle).
+ */
+export declare const emptyBody: (view: Edytor, block: BlockView, kind: "toggle" | "callout") => EmptyBodyPayload | null;

package/dist/plugins/richtext/controls.svelte.js

@@ -0,0 +1,126 @@
+import { labelsOf, richTextEnglish } from '../../labels.js';
+import { attach, keepSelection } from '../chrome.js';
+import { calloutPickers, iconOf } from './callouts.js';
+import { openBody } from './body.js';
+/** Each view's control snippets (the first rich text plugin listed sets them). */
+export const richTextControls = new WeakMap();
+/** Check or uncheck a to-do: one key patched, so a peer's concurrent edit of another key is kept. */
+export const toggleTodo = (block) => block.edytor.patchData(block.id, [{ path: ['checked'], value: !block.data.checked }]);
+/**
+ * A to-do's checkbox in `view` (a suggestion's preview included: no
+ * handle, no write), named in its labels.
+ */
+export const todoCheckbox = (view, block) => {
+    const label = labelsOf(view, 'richText', richTextEnglish).checkbox;
+    const checked = () => Boolean(block().data.checked);
+    const toggle = () => {
+        const handle = block().handle;
+        if (handle)
+            toggleTodo(handle);
+    };
+    return {
+        get block() {
+            return block().handle;
+        },
+        get checked() {
+            return checked();
+        },
+        label,
+        toggle,
+        get control() {
+            const on = checked();
+            return (node) => {
+                const native = node instanceof HTMLInputElement && node.type === 'checkbox';
+                // Another element than a native checkbox is one to assistive technology,
+                // unless the markup gave it its own role.
+                const role = native ? {} : { role: node.getAttribute('role') ?? 'checkbox' };
+                return attach({
+                    contenteditable: 'false',
+                    'aria-label': label,
+                    'data-edytor-todo-checkbox': '',
+                    ...role,
+                    'aria-checked': native ? undefined : on
+                }, {
+                    mousedown: keepSelection,
+                    click: () => {
+                        // Never cancel the click: the browser reverts a canceled checkbox click
+                        // after its handlers, over the re-render this write makes, so the box
+                        // would show the old state here while peers show the new one. Toggle the
+                        // document, then show what it holds (a refused write, readonly or vetoed,
+                        // shows unchanged).
+                        toggle();
+                        if (native)
+                            node.checked = checked();
+                    }
+                })(node);
+            };
+        }
+    };
+};
+/**
+ * A callout's icon in `view` (`callout.icon`): its `data.icon`, the view's
+ * default without one, none when it is `''`; a button opening the view's
+ * picker where it may be picked (an editable view listing a picker, not a
+ * suggestion's preview), else the icon alone.
+ */
+export const calloutIcon = (view, block) => {
+    const labels = labelsOf(view, 'richText', richTextEnglish).calloutIcon;
+    const picker = calloutPickers.get(view);
+    const editable = () => Boolean(block().handle && picker && !view.readonly);
+    const icon = () => iconOf(block().data, view);
+    const expanded = () => picker?.target === block().id;
+    const toggle = () => {
+        const handle = block().handle;
+        if (handle && editable())
+            picker?.toggle(handle);
+    };
+    const label = () => (icon() ? labels.change : labels.add);
+    return {
+        get block() {
+            return block().handle;
+        },
+        get icon() {
+            return icon();
+        },
+        get editable() {
+            return editable();
+        },
+        get expanded() {
+            return expanded();
+        },
+        get label() {
+            return label();
+        },
+        toggle,
+        get control() {
+            const can = editable();
+            return attach({
+                contenteditable: 'false',
+                'data-edytor-callout-icon': '',
+                'data-empty': !icon(),
+                'aria-label': can ? label() : undefined,
+                'aria-haspopup': can ? 'menu' : undefined,
+                'aria-expanded': can ? expanded() : undefined,
+                'aria-controls': can && expanded() ? picker?.listId : undefined,
+                'aria-hidden': can ? undefined : 'true'
+            }, can ? { mousedown: keepSelection, click: toggle } : {});
+        }
+    };
+};
+/**
+ * The hint of `block`'s empty body in `view` (`body.hint`), or `null` where
+ * none shows: a readonly view, a suggestion's preview (no handle).
+ */
+export const emptyBody = (view, block, kind) => {
+    const handle = block.handle;
+    if (!handle || view.readonly)
+        return null;
+    const open = () => void openBody(handle);
+    return {
+        block: handle,
+        kind,
+        label: labelsOf(view, 'richText', richTextEnglish).emptyBody[kind],
+        open,
+        control: attach({ contenteditable: 'false', 'data-edytor-empty-body': kind, 'aria-hidden': 'true' }, { click: open })
+    };
+};

package/dist/plugins/richtext/richTextOperations.js

@@ -1,6 +1,5 @@
 import { isRecord } from '../../utils/json.js';
-import { dispatchPlan } from '../../block/block.utils.js';
-import { holdsNothing, lineage, placing } from '../../kinds.js';
+import { holdsNothing, placing } from '../../kinds.js';
 import { id } from '../../utils.js';
 import { marksForInsertion } from '../../session/editing/text.js';
 import { selectedTextSpans, viewOf } from '../../selection/visibility.js';
@@ -121,20 +120,25 @@ export const openLink = (href, view = globalThis.window ?? null) => {
     if (safe)
         view?.open(safe, '_blank', 'noopener,noreferrer');
 };
+/** Set `mark` to `value` (`null`: remove it) over `start`–`end` of `text`: the view's `formatRange`. */
+const markText = (edytor, text, start, end, mark, value) => edytor.formatRange(text.parent.id, text.segStart + start, end - start, {
+    [mark]: value === undefined ? true : value
+});
 const formatSelectedTextRange = (edytor, mark, value, toggle) => {
-    const { yStart, yEnd, startText, endText, isCollapsed, isReversed } = edytor.selection.state;
+    const { yStart, yEnd, startText, endText } = edytor.selection.textRange();
+    const { isCollapsed, isReversed } = edytor.selection.projection;
     if (isCollapsed || !startText || !endText)
         return;
     const spans = selectedTextSpans(edytor).filter(({ start, end }) => end > start);
     // One decision for the whole range (Notion): a toggle removes the mark only
     // when every selected character has it, else it marks all of them.
     const on = spans.every(({ text, start, end }) => text.getMarksAtRange(start, end).every(({ marks }) => marks && mark in marks));
-    const next = toggle && on ? null : value;
+    const next = toggle && on ? null : value === undefined ? true : value;
     // One command per span: a vetoed one keeps its marks (`dispatcher.each`).
-    edytor.dispatcher.each('format', spans, ({ text, start, end }) => text.markText({ mark, value: next, start, end }));
+    edytor.dispatcher.each('format', spans, ({ text, start, end }) => edytor.formatRange(text.parent.id, text.segStart + start, end - start, { [mark]: next }));
     // Selected blocks stay selected (Notion; a divider's phantom text is no range).
     if (!selectsBlocks(edytor))
-        edytor.selection.setAtRange(startText, yStart, endText, yEnd, { isReversed });
+        edytor.selection.selectText(startText, yStart, endText, yEnd, isReversed);
 };
 /**
  * A block selection: formatting keeps it, and it has no caret to stage a
@@ -154,11 +158,13 @@ export const richTextOperations = (edytor) => ({
      * whole.
      */
     insertDividerAtSelection: () => {
-        const { startBlock: block, startText, yStart, isCollapsed } = edytor.selection.state;
-        if (!block?.convertible || !block.parent || !block.model || !isCollapsed)
+        const { startText, yStart } = edytor.selection.textRange();
+        const { isCollapsed } = edytor.selection.projection;
+        const block = startText?.parent;
+        if (!block?.convertible || !block.parent || !isCollapsed)
             return null;
         const { facade, dispatcher } = edytor;
-        const [self, parent] = [block.model.id, block.parent.isRoot ? null : block.parent.id];
+        const [self, parent] = [block.id, block.parent.isRoot ? null : block.parent.id];
         const divider = { id: id('b'), type: 'divider', data: {}, content: [], children: [] };
         const paragraph = { id: id('b'), type: edytor.defaultChild(block.parent) };
         const slot = (after, specs) => facade.prepare.insertBlocks({ parent, index: block.index + after }, specs);
@@ -185,24 +191,25 @@ export const richTextOperations = (edytor) => ({
             caret = next?.id ?? paragraph.id;
             prepare = () => slot(1, next ? [divider] : [divider, paragraph]);
         }
-        if (!dispatchPlan(block, 'insertDivider', {}, prepare, lineage(block)))
+        if (dispatcher.plan('insertDivider', {}, prepare, block).status !== 'applied')
             return null;
         const text = caret ? edytor.idToBlock.get(caret)?.firstText : startText;
         dispatcher.caret(text, caret ? 0 : yStart);
         return block;
     },
     removeAllMarksAtRange: () => {
-        const { yStart, startText, isCollapsed } = edytor.selection.state;
+        const { yStart, startText } = edytor.selection.textRange();
+        const { isCollapsed } = edytor.selection.projection;
         if (isCollapsed) {
             if (startText && !selectsBlocks(edytor)) {
                 edytor.selection.stage({});
-                edytor.selection.setAtTextOffset(startText, yStart);
+                edytor.selection.selectText(startText, yStart);
             }
             return;
         }
         edytor.dispatcher.each('format', selectedTextSpans(edytor), ({ text, start, end }) => {
             if (end > start)
-                text.removeMarksFromText({ start, end });
+                edytor.clearMarks(text.parent.id, text.segStart + start, end - start);
         });
     },
     setLinkAtRange: (link) => {
@@ -225,15 +232,15 @@ export const richTextOperations = (edytor) => ({
         const safe = sanitizeLinkHref(href);
         if (safe === null || end <= start)
             return;
-        edytor.dispatcher.run('autolink', () => text.markText({ mark: 'link', value: { href: safe }, start, end }));
+        edytor.dispatcher.run('autolink', () => markText(edytor, text, start, end, 'link', { href: safe }));
     },
     /** Unlink `start`–`end` of `text` (the link card's Remove), one undo step; the selection stays. */
     unlinkText: (text, start, end) => {
-        edytor.dispatcher.run('format', () => text.markText({ mark: 'link', value: null, start, end }));
+        edytor.dispatcher.run('format', () => markText(edytor, text, start, end, 'link', null));
     },
     /** Remove one mark (a color, a highlight…) from the selected range. */
     removeMarkAtRange: (mark) => {
-        if (!edytor.selection.state.isCollapsed)
+        if (!edytor.selection.projection.isCollapsed)
             formatSelectedTextRange(edytor, mark, null, false);
     },
     /**
@@ -249,7 +256,8 @@ export const richTextOperations = (edytor) => ({
         const safeValue = mark === 'color' || mark === 'highlight' ? sanitizeCssColorValue(value) : value;
         if (safeValue === null)
             return;
-        const { isCollapsed, startText, yStart } = edytor.selection.state;
+        const { startText, yStart } = edytor.selection.textRange();
+        const { isCollapsed } = edytor.selection.projection;
         if (isCollapsed) {
             if (startText && !selectsBlocks(edytor)) {
                 // Stage the full set the next insertion carries, values kept.
@@ -257,7 +265,7 @@ export const richTextOperations = (edytor) => ({
                     ...marksForInsertion(startText, yStart, { pending: edytor.selection.pending }),
                     [mark]: safeValue
                 }));
-                edytor.selection.setAtTextOffset(startText, yStart);
+                edytor.selection.selectText(startText, yStart);
             }
             return;
         }
@@ -269,17 +277,18 @@ export const richTextOperations = (edytor) => ({
      * stage it for the next character typed.
      */
     setMarkAtRange: (mark, value) => {
-        const { yStart, yEnd, startText, endText, isCollapsed } = edytor.selection.state;
-        if (isCollapsed) {
+        const { yStart, yEnd, startText, endText } = edytor.selection.textRange();
+        const { selection } = edytor;
+        if (selection.projection.isCollapsed) {
             if (startText && !selectsBlocks(edytor)) {
-                edytor.dispatcher.run('format', () => startText.markText({
-                    mark,
-                    value,
-                    toggle: true,
-                    start: yStart,
-                    end: yEnd
-                }));
-                edytor.selection.setAtRange(startText, yStart, endText, yEnd);
+                // A caret stages the full set the next insertion carries (values kept).
+                edytor.dispatcher.run('format', () => {
+                    const { [mark]: current = null, ...rest } = marksForInsertion(startText, yStart, {
+                        pending: selection.pending
+                    });
+                    selection.stage(current !== null ? rest : { ...rest, [mark]: value === undefined ? true : value });
+                });
+                selection.selectText(startText, yStart, endText, yEnd);
             }
             return;
         }

package/dist/plugins/slashMenu/SlashMenuController.svelte.d.ts

@@ -2,19 +2,15 @@ import type { Attachment } from 'svelte/attachments';
 import type { Block } from '../../block/block.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { EditorCommand } from '../../plugins.js';
-import { type SlashMenuLabels } from '../../labels.js';
 import type { BlockAddition } from '../blockHandles/BlockHandleController.svelte.js';
 import { TextTriggerController } from '../triggers/TriggerController.svelte.js';
 import type { Popup } from '../../surface/popups.svelte.js';
-export type { TextInsertionPayload } from '../triggers/TriggerController.svelte.js';
 /**
  * The slash menu: the `/` trigger (`TextTriggerController`: the range, the
  * query, the keys, the pick), whose rows are the editor's commands, and the
  * menu a handle's `+` opens with a search field of its own (`addition`).
  */
 export declare class SlashMenuController extends TextTriggerController {
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu` or `item`. */
-    readonly labels: SlashMenuLabels;
     /**
      * Opened by a handle's `+` (`BLOCK_ADD_EVENT`): no `/` in the text, the
      * query is the menu's own field, and a picked row adds the block first.
@@ -22,20 +18,12 @@ export declare class SlashMenuController extends TextTriggerController {
     addition: BlockAddition | null;
     /** The selection when a `+` opened the menu, given back when it closes unpicked. */
     private held;
-    /** A group's heading: its key in the labels' `groups`, else the key itself. */
-    groupName: (group: string) => string;
-    constructor(edytor: Edytor, 
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu` or `item`. */
-    labels?: SlashMenuLabels);
-    /** A row's element id (page-unique), for `aria-activedescendant`: set it on a custom `item`. */
-    optionId: (command: EditorCommand) => string;
-    protected get listName(): string;
-    protected rowIdAt(index: number): string;
+    constructor(edytor: Edytor);
     /** A `+`'s menu names its highlighted row from its own field, and tells the `+` it opened it. */
     protected popupOf(active: string | undefined): Popup;
     /**
      * The element that holds a `+` menu's keyboard (`{@attach controller.keys}`:
-     * its field, or the element a custom `menu` is wrapped in). Focused when
+     * its field, or the menu element itself). Focused when
      * it mounts, it takes the menu's keys (↑/↓ walk the rows, Enter runs the
      * highlighted one, Escape closes the menu and gives the selection back);
      * on an element that is not a field, typing and Backspace edit the query.

package/dist/plugins/slashMenu/SlashMenuController.svelte.js

@@ -1,9 +1,11 @@
 import { untrack } from 'svelte';
-import { project } from '../../session/selection.js';
+import { noSelection, project } from '../../session/selection.js';
 import { BASIC_BLOCKS, matchesQuery } from '../../kinds.js';
-import { englishLabels } from '../../labels.js';
 import { TextTriggerController } from '../triggers/TriggerController.svelte.js';
-import { attribute, inPage, isField, keepFocus, namesRows } from '../chrome.js';
+import { attribute, isField, keepFocus } from '../chrome.js';
+import { holdKeys } from '../list.svelte.js';
+import { all, listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
 /**
  * The view a `+`'s menu asks `isEnabled` of: the editor, its selection a
  * caret at the start of the block the `+` adds, below `block` (a stand-in
@@ -40,24 +42,15 @@ const additionView = (edytor, { block }) => {
         }
     });
     const added = reused ? block : through(block, stand);
-    const text = added.firstText ?? null;
-    const state = {
-        yStart: 0,
-        yEnd: 0,
-        isCollapsed: true,
-        isReversed: false,
-        isBlockSpanning: false,
-        isVoidEditableElement: false,
-        startText: text,
-        endText: text,
-        startBlock: added,
-        endBlock: added,
-        texts: text ? [text] : [],
-        blocks: [added]
-    };
+    // A caret at the added block's start (a stand-in text when it is not made yet).
+    const text = added.firstText ?? { parent: added };
+    const range = { startText: text, endText: text, yStart: 0, yEnd: 0, texts: [text] };
     const selection = through(edytor.selection, {
-        state,
-        value: { kind: 'none' },
+        textRange: () => range,
+        caret: { block: added, offset: 0 },
+        voidField: false,
+        value: noSelection,
+        projection: project(noSelection, edytor.facade),
         selectedBlocks: new Set(),
         selectedInlineBlock: new Set()
     });
@@ -69,7 +62,6 @@ const additionView = (edytor, { block }) => {
  * menu a handle's `+` opens with a search field of its own (`addition`).
  */
 export class SlashMenuController extends TextTriggerController {
-    labels;
     /**
      * Opened by a handle's `+` (`BLOCK_ADD_EVENT`): no `/` in the text, the
      * query is the menu's own field, and a picked row adds the block first.
@@ -77,22 +69,8 @@ export class SlashMenuController extends TextTriggerController {
     addition = $state(null);
     /** The selection when a `+` opened the menu, given back when it closes unpicked. */
     held = { kind: 'none' };
-    /** A group's heading: its key in the labels' `groups`, else the key itself. */
-    groupName = (group) => this.labels.groups[group] ?? group;
-    constructor(edytor, 
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu` or `item`. */
-    labels = englishLabels.slashMenu) {
+    constructor(edytor) {
         super(edytor, '/', 'slash-menu');
-        this.labels = labels;
-    }
-    /** A row's element id (page-unique), for `aria-activedescendant`: set it on a custom `item`. */
-    optionId = (command) => this.edytor.popups.idOf(`slash-menu-${command.id}`);
-    get listName() {
-        return this.labels.list;
-    }
-    rowIdAt(index) {
-        const command = this.commands[index];
-        return command && this.optionId(command);
     }
     /** A `+`'s menu names its highlighted row from its own field, and tells the `+` it opened it. */
     popupOf(active) {
@@ -107,7 +85,7 @@ export class SlashMenuController extends TextTriggerController {
     }
     /**
      * The element that holds a `+` menu's keyboard (`{@attach controller.keys}`:
-     * its field, or the element a custom `menu` is wrapped in). Focused when
+     * its field, or the menu element itself). Focused when
      * it mounts, it takes the menu's keys (↑/↓ walk the rows, Enter runs the
      * highlighted one, Escape closes the menu and gives the selection back);
      * on an element that is not a field, typing and Backspace edit the query.
@@ -122,22 +100,19 @@ export class SlashMenuController extends TextTriggerController {
             return;
         const menu = node.closest('[data-edytor-slash-menu-host]') ?? node;
         const field = isField(node);
-        untrack(() => {
-            if (!node.contains(node.ownerDocument.activeElement))
-                node.focus({ preventScroll: true });
-        });
         const keydown = (event) => {
             // A key that ends an IME composition (Enter commits it, Escape cancels it) is the IME's.
             if (event.defaultPrevented || event.isComposing || event.keyCode === 229)
                 return;
             const { key, ctrlKey, metaKey } = event;
             const move = { ArrowDown: 1, ArrowUp: -1 }[key];
-            if (!field && event.target === node && key === 'Backspace')
+            const typed = !field && event.target === node;
+            if (typed && key === 'Backspace')
                 this.search(this.query.slice(0, -1));
-            else if (!field && event.target === node && key.length === 1 && !ctrlKey && !metaKey)
+            else if (typed && key.length === 1 && !ctrlKey && !metaKey)
                 this.search(this.query + key);
             else if (move)
-                this.moveSelection(move);
+                this.move(move);
             else if (key === 'Enter')
                 void this.runSelected();
             else if (key === 'Escape')
@@ -150,9 +125,9 @@ export class SlashMenuController extends TextTriggerController {
             const target = event.target;
             if (!field || target === node)
                 return;
-            const index = this.commands.findIndex((command) => target.closest?.(`[id="${this.optionId(command)}"]`) !== null);
+            const index = this.commands.findIndex((_, index) => target.closest?.(`[id="${this.rowId(index)}"]`) !== null);
             if (index !== -1)
-                this.selectedIndex = index;
+                this.index = index;
             node.focus({ preventScroll: true });
         };
         const focusout = (event) => {
@@ -160,28 +135,17 @@ export class SlashMenuController extends TextTriggerController {
             if (this.addition && to instanceof Node && !menu.contains(to))
                 this.dismiss(false);
         };
-        // A field takes the keys of the whole menu (a row a screen reader focused); a wrapper, its own.
-        const keyed = field ? menu : node;
-        keyed.addEventListener('keydown', keydown);
-        menu.addEventListener('focusin', focusin);
-        menu.addEventListener('focusout', focusout);
-        menu.addEventListener('mousedown', keepFocus);
-        $effect(() => {
-            if (!field)
-                return;
+        const off2 = listen(menu, 'focusin', focusin);
+        const off3 = listen(menu, 'focusout', focusout);
+        const off4 = listen(menu, 'mousedown', keepFocus);
+        if (field)
             attribute(node, 'aria-controls', this.listId);
-            if (namesRows(node))
-                attribute(node, 'aria-activedescendant', inPage(node, this.rowIdAt(this.selectedIndex)));
-        });
-        return () => {
-            keyed.removeEventListener('keydown', keydown);
-            menu.removeEventListener('focusin', focusin);
-            menu.removeEventListener('focusout', focusout);
-            menu.removeEventListener('mousedown', keepFocus);
-        };
+        // A field takes the keys of the whole menu (a row a screen reader focused); a wrapper, its own.
+        const off = holdKeys(node, keydown, () => (field && this.count ? this.rowId(this.index) : undefined), field ? menu : node);
+        return all(off, off2, off3, off4);
     };
     get count() {
-        return this.commands.length;
+        return this.isOpen ? this.commands.length : 0;
     }
     /** A `/` opens the menu in a block a kind can replace (`convertible`). */
     admits(block) {
@@ -197,7 +161,7 @@ export class SlashMenuController extends TextTriggerController {
         if (query && (commandCount === 0 || /^\s/.test(query) || !/[^-\s]/.test(query)))
             this.close();
         else
-            this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, commandCount - 1));
+            this.index = Math.max(0, Math.min(this.index, commandCount - 1));
     }
     /** Matching commands, grouped (groups in first-seen order): the menu's rows and keyboard order. */
     get commands() {
@@ -236,7 +200,7 @@ export class SlashMenuController extends TextTriggerController {
     }
     /** The `+`'s menu typed in its own field (a query that matches nothing shows "No results"). */
     search(query) {
-        [this.query, this.selectedIndex] = [query, 0];
+        [this.query, this.index] = [query, 0];
     }
     /**
      * Close without picking. A `+`'s menu gives the selection back as it was
@@ -253,11 +217,10 @@ export class SlashMenuController extends TextTriggerController {
             this.edytor.selection.select(held);
         if (!focus || this.edytor.readonly)
             return;
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+        takeKeys(this.edytor);
     }
     runSelected() {
-        return this.run(this.commands[this.selectedIndex]);
+        return this.run(this.commands[this.index]);
     }
     async run(command) {
         const { addition } = this;
@@ -277,7 +240,7 @@ export class SlashMenuController extends TextTriggerController {
         // nothing synchronously runs after it. The caret goes back to where the
         // `/` was while it is still in its text: commands that replace the
         // block (Code, a divider) keep their own.
-        const ran = await this.replaceTrigger(() => this.edytor.runCommand(command.id), (text) => this.edytor.selection.state.startText === text);
+        const ran = await this.replaceTrigger(() => this.edytor.runCommand(command.id), (text) => this.edytor.selection.textRange().startText === text);
         return ran ?? false;
     }
 }