edytor 1.0.0-rc.2 → 1.0.0

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

@@ -1,18 +1,16 @@
+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';
-export type { TextInsertionPayload } from '../triggers/TriggerController.svelte.js';
+import type { Popup } from '../../surface/popups.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.
@@ -20,13 +18,22 @@ 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;
+    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 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.
+     * A field takes the keys of the whole menu, names the list and its highlighted row (`aria-controls`,
+     * `aria-activedescendant`), and takes the focus back from any other part
+     * of the menu (a row a click or a screen reader focused, which becomes
+     * the highlighted one). Focus leaving the menu closes it. A `/` menu
+     * leaves the keys to the editor: there it does nothing.
+     */
+    keys: Attachment<HTMLElement>;
     protected get count(): number;
     /** A `/` opens the menu in a block a kind can replace (`convertible`). */
     protected admits(block: Block): boolean;

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

@@ -1,7 +1,11 @@
-import { project } from '../../session/selection.js';
+import { untrack } from 'svelte';
+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, 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
@@ -38,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()
     });
@@ -67,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.
@@ -75,18 +69,83 @@ 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}`);
+    /** A `+`'s menu names its highlighted row from its own field, and tells the `+` it opened it. */
+    popupOf(active) {
+        const { addition } = this;
+        return addition
+            ? {
+                id: this.listId,
+                haspopup: 'listbox',
+                opener: { block: addition.block.id, control: 'add' }
+            }
+            : { id: this.listId, haspopup: 'listbox', active };
+    }
+    /**
+     * The element that holds a `+` menu's keyboard (`{@attach controller.keys}`:
+     * 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.
+     * A field takes the keys of the whole menu, names the list and its highlighted row (`aria-controls`,
+     * `aria-activedescendant`), and takes the focus back from any other part
+     * of the menu (a row a click or a screen reader focused, which becomes
+     * the highlighted one). Focus leaving the menu closes it. A `/` menu
+     * leaves the keys to the editor: there it does nothing.
+     */
+    keys = (node) => {
+        if (!untrack(() => this.addition))
+            return;
+        const menu = node.closest('[data-edytor-slash-menu-host]') ?? node;
+        const field = isField(node);
+        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];
+            const typed = !field && event.target === node;
+            if (typed && key === 'Backspace')
+                this.search(this.query.slice(0, -1));
+            else if (typed && key.length === 1 && !ctrlKey && !metaKey)
+                this.search(this.query + key);
+            else if (move)
+                this.move(move);
+            else if (key === 'Enter')
+                void this.runSelected();
+            else if (key === 'Escape')
+                this.dismiss();
+            else
+                return;
+            event.preventDefault();
+        };
+        const focusin = (event) => {
+            const target = event.target;
+            if (!field || target === node)
+                return;
+            const index = this.commands.findIndex((_, index) => target.closest?.(`[id="${this.rowId(index)}"]`) !== null);
+            if (index !== -1)
+                this.index = index;
+            node.focus({ preventScroll: true });
+        };
+        const focusout = (event) => {
+            const to = event.relatedTarget;
+            if (this.addition && to instanceof Node && !menu.contains(to))
+                this.dismiss(false);
+        };
+        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);
+        // 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) {
@@ -102,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() {
@@ -141,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
@@ -158,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;
@@ -182,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;
     }
 }

package/dist/plugins/slashMenu/slashMenuPlugin.d.ts

@@ -1,30 +1,17 @@
 import type { Snippet } from 'svelte';
-import type { EditorCommand, Plugin } from '../../plugins.js';
+import type { Plugin } from '../../plugins.js';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
-import { type PartialLabels } from '../../labels.js';
-/** One row, for an `item` snippet. */
-export type SlashMenuItem = {
-    command: EditorCommand;
-    /** The row's element id: set it (`id={item.id}`) so the keyboard's owner names the highlighted row. */
-    id: string;
-    /** The keyboard's row. */
-    selected: boolean;
-    /** The built-in line icon as a CSS `mask-image` value, when the command has one. */
-    icon: string | undefined;
-    /** Run the command (removes the `/query` first). */
-    run: () => void;
-    /** Make this the keyboard's row (hover). */
-    select: () => void;
-};
 export type SlashMenuOptions = {
-    /** Replace the whole menu; it renders while `controller.isOpen`. Keys and placement stay the plugin's. */
+    /**
+     * The menu's markup and its words; it renders while `controller.isOpen`
+     * (without it, nothing shows). Keys and placement stay the plugin's. Keep
+     * its ARIA with `{@attach controller.popup}` on the list (name it) and
+     * `{...controller.option(index)}` on each row; in a `+`'s menu (while
+     * `controller.addition`), `{@attach controller.keys}` on the element that
+     * holds the keyboard (your field, or the menu itself: typing then edits
+     * the query).
+     */
     menu?: Snippet<[SlashMenuController]>;
-    /** Replace each row of the default menu. */
-    item?: Snippet<[SlashMenuItem]>;
-    /** The words the menu shows (its field, headings, empty state), over the English ones. */
-    labels?: PartialLabels<'slashMenu'>;
 };
-/** The slash menu, with your own markup through `menu` or `item` snippets. */
+/** The slash menu, drawn by your `menu` snippet. */
 export declare const createSlashMenuPlugin: (options?: SlashMenuOptions) => Plugin;
-/** The Notion-style slash menu. */
-export declare const slashMenuPlugin: Plugin;