edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/toolbar/ToolbarController.svelte.js

@@ -4,44 +4,29 @@ import { selectedTextSpans } from '../../selection/visibility.js';
 import { getYIndex, SUGGESTION, SYNTHETIC_TEXT_OVERLAY_SELECTOR } from '../../selection/selection.utils.js';
 import { convertBlocks, convertibleKinds, rowOf } from '../../kinds.js';
 import { getSelectionBlocks } from '../../selection/replaceSelection.js';
-import { englishLabels } from '../../labels.js';
-/** Notion's palette: text colors and their backgrounds, by name (shown through the labels' `colors`). */
-export const TOOLBAR_COLORS = [
-    { name: 'Default', text: null, background: null },
-    { name: 'Gray', text: '#7d7a75', background: '#f0efed' },
-    { name: 'Brown', text: '#9f765a', background: '#f5ede9' },
-    { name: 'Orange', text: '#d27b2d', background: '#fbebde' },
-    { name: 'Yellow', text: '#cb9434', background: '#f9f3dc' },
-    { name: 'Green', text: '#50946e', background: '#e8f1ec' },
-    { name: 'Blue', text: '#387dc9', background: '#e5f2fc' },
-    { name: 'Purple', text: '#9a6bb4', background: '#f3ebf9' },
-    { name: 'Pink', text: '#c14c8a', background: '#fae9f1' },
-    { name: 'Red', text: '#cf5148', background: '#fce9e7' }
-];
+import { identify } from '../chrome.js';
+import { all, listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
+/** The bar's controls the arrows walk (a disabled one is skipped). */
+const STOPS = 'button:not([disabled]), input:not([disabled]), select:not([disabled])';
 const getLinkHref = (value) => isRecord(value) && typeof value.href === 'string' ? value.href : null;
 export class ToolbarController {
     edytor;
-    labels;
     /** Shown for the current selection; hidden while the editor is readonly. */
     shown = $state(false);
     linkUrl = $state('');
     /** The open panel: the kind menu, the link field or the colors. */
     panel = $state(null);
     /** The selection the toolbar acts on: a value (anchors), so peers' edits move it. */
-    selectionSnapshot = null;
-    isRestoringSelection = false;
+    #selectionSnapshot = null;
+    #isRestoringSelection = false;
     /** The link panel's field takes the focus when it next mounts (it was opened, not re-rendered). */
-    focusField = false;
+    #focusField = false;
     /** The link under the pointer, for the link card (`link.card`). */
     hovered = $state.raw(null);
-    constructor(edytor, 
-    /** The words the toolbar shows (the plugin's `labels`): read them in a custom `toolbar`. */
-    labels = englishLabels.toolbar) {
+    constructor(edytor) {
         this.edytor = edytor;
-        this.labels = labels;
     }
-    /** A palette color's name as shown (`labels.colors`). */
-    colorName = (name) => this.labels.colors[name] ?? name;
     get isVisible() {
         return this.shown && !this.edytor.readonly;
     }
@@ -49,29 +34,120 @@ export class ToolbarController {
     get barId() {
         return this.edytor.popups.idOf('toolbar');
     }
-    /** Publish the shown bar to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish = (popup) => this.edytor.popups.set('toolbar', popup);
+    /** The link panel's field id (page-unique): a `label`'s `for`. */
+    get linkFieldId() {
+        return this.edytor.popups.idOf('toolbar-link');
+    }
+    /** The control the bar's one tab stop is on (its `data-stop`, else its place), kept while it shows. */
+    #stop = 0;
+    /**
+     * The bar (`{@attach controller.popup}`, named by your markup): it takes
+     * the bar's id, its `toolbar` role unless it has its own, the placement's mark
+     * (`data-edytor-toolbar-bar`, which the toolbar's shortcut also reads),
+     * and is published to the view's root (`edytor.popups`, with that
+     * shortcut as its `aria-keyshortcuts`) while it is in the page.
+     */
+    popup = (node) => {
+        identify(node, this.barId, 'toolbar');
+        node.setAttribute('data-edytor-toolbar-bar', '');
+        this.edytor.popups.set('toolbar', { id: this.barId, keys: 'Alt+F10' });
+        return () => this.edytor.popups.set('toolbar', null);
+    };
+    /**
+     * The bar's keys (`{@attach controller.keys}`, WAI-ARIA toolbar): one tab
+     * stop, the control it last held (`tabindex="0"`, every other `-1`); the
+     * arrows, Home and End walk its controls, Escape gives the focus back to
+     * the editor over the held selection (`release`). Every key in it is its
+     * own, never the editor's (Enter presses the button).
+     */
+    keys = (node) => {
+        const stops = () => [...node.querySelectorAll(STOPS)];
+        const keyOf = (stop, at) => stop.dataset.stop ?? at;
+        /** One tab stop: the remembered control, else the first. */
+        const rove = () => {
+            const all = stops();
+            const at = all.findIndex((stop, index) => keyOf(stop, index) === this.#stop);
+            all.forEach((stop, index) => (stop.tabIndex = index === Math.max(0, at) ? 0 : -1));
+        };
+        const focusin = (event) => {
+            const all = stops();
+            const at = all.indexOf(event.target);
+            if (at === -1)
+                return;
+            this.#stop = keyOf(all[at], at);
+            rove();
+        };
+        const keydown = (event) => {
+            event.stopPropagation();
+            if (event.defaultPrevented)
+                return;
+            const all = stops();
+            const at = all.indexOf(event.target);
+            const next = {
+                ArrowRight: (at + 1) % all.length,
+                ArrowLeft: (at - 1 + all.length) % all.length,
+                Home: 0,
+                End: all.length - 1
+            }[event.key];
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.release();
+            }
+            else if (next !== undefined && at !== -1) {
+                event.preventDefault();
+                all[next]?.focus();
+            }
+        };
+        rove();
+        const off = listen(node, 'focusin', focusin);
+        const off2 = listen(node, 'keydown', keydown);
+        return all(off, off2);
+    };
+    /**
+     * The link panel's field (`{@attach controller.linkField}`): its id
+     * (`linkFieldId`), the focus when the panel was just opened (Mod+K, Edit,
+     * the Link button), Enter applies the link and Escape closes the panel,
+     * both giving the editor its focus and the selection back.
+     */
+    linkField = (node) => {
+        node.id = this.linkFieldId;
+        if (this.takeFieldFocus())
+            node.focus({ preventScroll: true });
+        const keydown = (event) => {
+            if (event.defaultPrevented || event.isComposing)
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.applyLink();
+                this.closePanel(true);
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closePanel(true);
+            }
+        };
+        return listen(node, 'keydown', keydown);
+    };
     /** Give the keyboard back to the editor (Escape in the bar), over the held selection. */
     release() {
-        const snapshot = this.selectionSnapshot;
+        const snapshot = this.#selectionSnapshot;
         this.panel = null;
         if (snapshot)
-            this.restoreSelection(snapshot);
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+            this.#restoreSelection(snapshot);
+        takeKeys(this.edytor);
     }
     updateFromSelection(selection = this.edytor.selection) {
-        if (!this.canShowForSelection(selection)) {
+        if (!this.#canShowForSelection(selection)) {
             this.shown = false;
             this.linkUrl = '';
             this.panel = null;
-            this.selectionSnapshot = null;
+            this.#selectionSnapshot = null;
             return;
         }
         this.shown = true;
-        if (!this.isRestoringSelection)
-            this.linkUrl = this.getSelectedLinkUrl(selection);
-        this.selectionSnapshot = selection.value.kind === 'text' ? selection.value : null;
+        if (!this.#isRestoringSelection)
+            this.linkUrl = this.#getSelectedLinkUrl();
+        this.#selectionSnapshot = selection.value.kind === 'text' ? selection.value : null;
     }
     setLinkUrl(value) {
         this.linkUrl = value;
@@ -93,16 +169,16 @@ export class ToolbarController {
     }
     /** The row naming the selection's block, for the kind button's label. */
     get currentKind() {
-        return rowOf(this.edytor, this.edytor.selection.state.startBlock);
+        return rowOf(this.edytor, this.edytor.selection.textRange().startText?.parent);
     }
     togglePanel(panel) {
         this.panel = this.panel === panel ? null : panel;
-        this.focusField = this.panel === 'link';
+        this.#focusField = this.panel === 'link';
     }
     /** Whether the link field mounting now takes the focus (once per opening). */
     takeFieldFocus() {
-        const focus = this.focusField;
-        this.focusField = false;
+        const focus = this.#focusField;
+        this.#focusField = false;
         return focus;
     }
     /**
@@ -112,7 +188,8 @@ export class ToolbarController {
      */
     openLinkPanel() {
         const { selection } = this.edytor;
-        const { isCollapsed, startText, yStart } = selection.state;
+        const { startText, yStart } = selection.textRange();
+        const { isCollapsed } = selection.projection;
         if (selection.value.kind !== 'text' || !startText)
             return false;
         const { voidRoot, islandRoot } = selection.projection;
@@ -122,14 +199,17 @@ export class ToolbarController {
             const run = linkAt(startText, yStart - 1) ?? linkAt(startText, yStart);
             if (!run)
                 return false;
-            selection.setAtRange(startText, run.start, startText, run.end);
+            selection.selectText(startText, run.start, startText, run.end);
         }
+        return this.#linkPanel();
+    }
+    /** The link panel over the selection, its field focused when it mounts; whether it opened. */
+    #linkPanel() {
         this.updateFromSelection();
         if (!this.isVisible)
             return false;
         this.panel = 'link';
-        this.focusField = true;
-        return true;
+        return (this.#focusField = true);
     }
     /**
      * Close the open panel. With `focus` (Enter or Escape in the link field)
@@ -137,13 +217,12 @@ export class ToolbarController {
      */
     closePanel(focus = false) {
         this.panel = null;
-        const snapshot = this.selectionSnapshot;
+        const snapshot = this.#selectionSnapshot;
         if (!focus || this.edytor.readonly)
             return;
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+        takeKeys(this.edytor);
         if (snapshot)
-            this.restoreSelection(snapshot);
+            this.#restoreSelection(snapshot);
     }
     /** The link card shows: a link is hovered in an editable view. */
     get card() {
@@ -168,26 +247,22 @@ export class ToolbarController {
     }
     /** The card's Edit: select the hovered link and open the link panel on it. */
     editHovered() {
-        const link = this.hoveredLink();
+        const link = this.#hoveredLink();
         this.hover(null);
         if (!link)
             return;
-        this.edytor.selection.setAtRange(link.text, link.start, link.text, link.end);
-        this.updateFromSelection();
-        if (!this.isVisible)
-            return;
-        this.panel = 'link';
-        this.focusField = true;
+        this.edytor.selection.selectText(link.text, link.start, link.text, link.end);
+        this.#linkPanel();
     }
     /** The card's Remove: unlink the whole hovered link (one undo step); the selection stays. */
     removeHovered() {
-        const link = this.hoveredLink();
+        const link = this.#hoveredLink();
         this.hover(null);
         if (link)
             richTextOperations(this.edytor).unlinkText(link.text, link.start, link.end);
     }
     /** The hovered link element's text and link run, read from the model (never from the DOM). */
-    hoveredLink() {
+    #hoveredLink() {
         const anchor = this.hovered;
         if (!anchor?.isConnected || anchor.closest(`${SUGGESTION}, ${SYNTHETIC_TEXT_OVERLAY_SELECTOR}`))
             return null;
@@ -201,12 +276,12 @@ export class ToolbarController {
     /** Convert every block the selection touches (Notion), as one undo step. */
     turnInto(kind) {
         this.panel = null;
-        this.runWithSelection(() => convertBlocks(this.edytor, getSelectionBlocks(this.edytor), kind));
+        this.#runWithSelection(() => convertBlocks(this.edytor, getSelectionBlocks(this.edytor), kind));
     }
     /** Set (or clear, with `null`) the text color or background of the selection. */
     setColor(mark, value) {
         this.panel = null;
-        this.runWithSelection(() => {
+        this.#runWithSelection(() => {
             const operations = richTextOperations(this.edytor);
             if (value)
                 operations.setMarkValueAtRange(mark, value);
@@ -218,7 +293,7 @@ export class ToolbarController {
         const run = this.edytor.marks.get(mark)?.toolbar?.run;
         if (run)
             return run(this.edytor);
-        this.runWithSelection(() => {
+        this.#runWithSelection(() => {
             richTextOperations(this.edytor).setMarkAtRange(mark);
         });
     }
@@ -227,30 +302,30 @@ export class ToolbarController {
         if (!href)
             this.removeLink();
         else
-            this.runWithSelection(() => {
+            this.#runWithSelection(() => {
                 richTextOperations(this.edytor).setLinkAtRange({ href });
                 this.linkUrl = href;
             });
     }
     removeLink() {
-        this.runWithSelection(() => {
+        this.#runWithSelection(() => {
             richTextOperations(this.edytor).removeLinkAtRange();
             this.linkUrl = '';
         });
     }
-    canShowForSelection(selection) {
-        const { state } = selection;
-        return (!state.isCollapsed &&
-            Boolean(state.startText) &&
-            Boolean(state.endText) &&
-            state.texts.length > 0 &&
+    #canShowForSelection(selection) {
+        const range = selection.textRange();
+        return (!selection.projection.isCollapsed &&
+            Boolean(range.startText) &&
+            Boolean(range.endText) &&
+            range.texts.length > 0 &&
             selection.selectedBlocks.size === 0 &&
             selection.selectedInlineBlock.size === 0 &&
             selection.projection.voidRoot === null &&
             selection.projection.islandRoot === null);
     }
-    getSelectedLinkUrl(selection) {
-        for (const { text, start, end } of selectedTextSpans(this.edytor, selection.state)) {
+    #getSelectedLinkUrl() {
+        for (const { text, start, end } of selectedTextSpans(this.edytor)) {
             for (const segment of text.getMarksAtRange(start, end)) {
                 const href = getLinkHref(segment.marks?.link);
                 if (href)
@@ -260,21 +335,21 @@ export class ToolbarController {
         return '';
     }
     /** Act on the held selection, then select it again (the projector displays it). */
-    runWithSelection(callback) {
-        const snapshot = this.selectionSnapshot;
+    #runWithSelection(callback) {
+        const snapshot = this.#selectionSnapshot;
         if (!this.isVisible || !snapshot)
             return;
-        this.restoreSelection(snapshot);
+        this.#restoreSelection(snapshot);
         callback();
-        this.restoreSelection(snapshot);
+        this.#restoreSelection(snapshot);
     }
-    restoreSelection(snapshot) {
-        this.isRestoringSelection = true;
+    #restoreSelection(snapshot) {
+        this.#isRestoringSelection = true;
         try {
             this.edytor.selection.select(snapshot);
         }
         finally {
-            this.isRestoringSelection = false;
+            this.#isRestoringSelection = false;
         }
     }
 }

package/dist/plugins/toolbar/toolbarPlugin.d.ts

@@ -1,24 +1,25 @@
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import { ToolbarController } from './ToolbarController.svelte.js';
-import { type PartialLabels } from '../../labels.js';
 export type ToolbarOptions = {
     /**
-     * Replace the toolbar; it renders while `controller.isVisible`, placed
-     * above the selection (mark your bar `data-edytor-toolbar-bar` if panels
-     * hang below it). A press on it never takes the editor's focus (its
-     * fields, an input or a select, take their own).
+     * The toolbar's markup; it renders while `controller.isVisible`, placed
+     * above the selection (without it, nothing shows). A press on it never takes the editor's focus (its
+     * fields, an input or a select, take their own). Give it the
+     * keyboard and ARIA with its attachments: `{@attach controller.popup}`
+     * and `{@attach controller.keys}` on the bar (its id, role, placement and
+     * publication; the shortcut that reaches it, the roving tab stop and
+     * Escape), `{@attach
+     * controller.linkField}` on a link field.
      */
     toolbar?: Snippet<[ToolbarController]>;
     /**
-     * The card shown under a hovered link, with its URL, Open, Edit (the link
-     * panel) and Remove (`link.card`). `false` shows none. Default `true`.
+     * The card shown under a hovered link (`link.card`): it renders while
+     * `controller.card`, just below the hovered link (`controller.hoveredHref`,
+     * and `openHovered`, `editHovered`, `removeHovered`); without it, no
+     * card. A press on it never takes the editor's focus.
      */
-    linkCard?: boolean;
-    /** The words the toolbar and the link card show, over the English ones. */
-    labels?: PartialLabels<'toolbar'>;
+    card?: Snippet<[ToolbarController]>;
 };
-/** The selection toolbar, with your own markup through a `toolbar` snippet. */
+/** The selection toolbar, drawn by your `toolbar` snippet, and the link card by your `card`. */
 export declare const createToolbarPlugin: (options?: ToolbarOptions) => Plugin;
-/** The Notion-style selection toolbar. */
-export declare const toolbarPlugin: Plugin;

package/dist/plugins/toolbar/toolbarPlugin.js

@@ -1,34 +1,31 @@
-import Toolbar from './Toolbar.svelte';
-import LinkCard from './LinkCard.svelte';
 import { ToolbarController } from './ToolbarController.svelte.js';
-import { labelsWith } from '../../labels.js';
+import { mountChrome } from '../chrome.js';
+import { placeNear } from '../../surface/overlay.js';
+import { all, listen } from '../../utils/listen.js';
 /** A press in a field of the chrome (an input, a select): it takes focus. */
 const isNativeFieldEvent = (event) => event
     .composedPath()
     .some((target) => target instanceof Element && target.matches('input, textarea, select'));
-/** The selection toolbar, with your own markup through a `toolbar` snippet. */
+/** The selection toolbar, drawn by your `toolbar` snippet, and the link card by your `card`. */
 export const createToolbarPlugin = (options = {}) => (edytor) => {
-    const controller = new ToolbarController(edytor, labelsWith('toolbar', options.labels));
+    const controller = new ToolbarController(edytor);
     /** Above the selection, kept in the viewport; measured in the overlay's frame, written after. */
     const positionToolbar = (host) => {
         const editor = edytor.node;
         if (!editor || !controller.isVisible)
             return;
-        const view = editor.ownerDocument.defaultView;
         const selection = editor.ownerDocument.getSelection();
-        if (!view || !selection?.rangeCount || !editor.contains(selection.anchorNode))
+        if (!selection?.rangeCount || !editor.contains(selection.anchorNode))
             return;
         const range = selection.getRangeAt(0);
         if (typeof range.getBoundingClientRect !== 'function')
             return;
-        const rect = range.getBoundingClientRect();
-        // The bar, not its open panel: panels drop over the text below it.
-        const toolbar = host.querySelector('[data-edytor-toolbar-bar]') ?? host.firstElementChild;
-        const width = toolbar?.getBoundingClientRect().width || 460;
-        const height = toolbar?.getBoundingClientRect().height || 40;
-        const left = `${Math.max(8, Math.min(rect.left + rect.width / 2 - width / 2, view.innerWidth - width - 8))}px`;
-        const top = `${rect.top - height - 8 >= 8 ? rect.top - height - 8 : rect.bottom + 8}px`;
-        return () => Object.assign(host.style, { left, top });
+        return placeNear(host, range.getBoundingClientRect(), [460, 40], {
+            above: true,
+            center: true,
+            // The bar, not its open panel: panels drop over the text below it.
+            box: host.querySelector('[data-edytor-toolbar-bar]') ?? host.firstElementChild
+        });
     };
     /** Just below the hovered link, flush with it (the host's top padding bridges the two). */
     const positionCard = (host) => {
@@ -65,14 +62,7 @@ export const createToolbarPlugin = (options = {}) => (edytor) => {
             if (!inside(event.relatedTarget) && !linkOf(event.relatedTarget))
                 controller.hover(null);
         };
-        node.addEventListener('mouseover', over);
-        node.addEventListener('mouseout', out);
-        card.addEventListener('mouseout', out);
-        return () => {
-            node.removeEventListener('mouseover', over);
-            node.removeEventListener('mouseout', out);
-            card.removeEventListener('mouseout', out);
-        };
+        return all(listen(node, 'mouseover', over), listen(node, 'mouseout', out), listen(card, 'mouseout', out));
     };
     /**
      * Alt+F10 (the editors' convention: TinyMCE, CKEditor, Google Docs):
@@ -107,37 +97,32 @@ export const createToolbarPlugin = (options = {}) => (edytor) => {
             edytor.overlay.invalidate();
         },
         onEdytorAttached: () => {
-            const unmount = edytor.overlay.mount(Toolbar, { controller, toolbar: options.toolbar }, 'edytor-toolbar-host', 60, positionToolbar);
+            const offs = [];
             // No press on the chrome takes focus, its background and a custom
             // snippet's markup included (not only its buttons): the editor keeps
             // its focus and its selection. A field (the link panel's input) takes
             // its own. Every press has a `mousedown`, WebKit's lone one too
             // (`onFocus.ts`), so no `pointerdown` is cancelled.
-            const host = edytor.overlay.layer?.querySelector('[data-edytor-toolbar-host]');
             const keep = (event) => {
                 if (!isNativeFieldEvent(event))
                     event.preventDefault();
             };
-            host?.addEventListener('mousedown', keep);
-            if (options.linkCard === false)
-                return () => {
-                    host?.removeEventListener('mousedown', keep);
-                    unmount();
-                };
-            const unmountCard = edytor.overlay.mount(LinkCard, { controller }, 'edytor-link-card-host', 61, positionCard);
-            const cardHost = edytor.overlay.layer?.querySelector('[data-edytor-link-card-host]');
-            cardHost?.addEventListener('mousedown', keep);
-            const untrack = edytor.node && cardHost ? trackLinks(edytor.node, cardHost) : () => { };
+            /** Mount `snippet` in the overlay while `shown`, its host keeping the focus on a press. */
+            const mount = (snippet, shown, name, zIndex, measure) => {
+                offs.push(mountChrome(edytor, snippet, controller, shown, { name, zIndex, measure }));
+                const host = snippet && edytor.overlay.layer?.querySelector(`[data-${name}]`);
+                offs.push(listen(host, 'mousedown', keep));
+                return host;
+            };
+            mount(options.toolbar, () => controller.isVisible, 'edytor-toolbar-host', 60, positionToolbar);
+            const card = mount(options.card, () => controller.card, 'edytor-link-card-host', 61, positionCard);
+            if (edytor.node && card)
+                offs.push(trackLinks(edytor.node, card));
+            offs.push(() => controller.hover(null));
             return () => {
-                host?.removeEventListener('mousedown', keep);
-                cardHost?.removeEventListener('mousedown', keep);
-                untrack();
-                controller.hover(null);
-                unmountCard();
-                unmount();
+                for (const off of offs.reverse())
+                    off();
             };
         }
     };
 };
-/** The Notion-style selection toolbar. */
-export const toolbarPlugin = createToolbarPlugin();

package/dist/plugins/triggers/TriggerController.svelte.d.ts

@@ -11,35 +11,22 @@
 import type { Block } from '../../block/block.svelte.js';
 import type { Text } from '../../text/text.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
-import type { TextAnchor } from '../../selection/selection.svelte.js';
 import type { Trigger, TriggerContext } from '../../plugins.js';
 import type { Popup } from '../../surface/popups.svelte.js';
 import type { SelectionValue } from '../../session/selection.js';
-export type TextInsertionPayload = {
-    value: string;
-    start?: number;
-    end?: number;
-};
+import { ChromeList } from '../list.svelte.js';
 /** Where the trigger is now: its text, the trigger's start and the query's end in it. */
 export type TriggerRange = {
     text: Text;
     triggerStart: number;
     queryEnd: number;
 };
-export declare abstract class TextTriggerController {
-    protected edytor: Edytor;
+export declare abstract class TextTriggerController extends ChromeList {
+    #private;
     /** The text that opens the menu. */
     readonly char: string;
-    /** The popup's owner name (`edytor.popups`), unique per view. */
-    protected owner: string;
     isOpen: boolean;
     query: string;
-    selectedIndex: number;
-    /** The trigger's start and the query's end, held as anchors so peers' edits move them. */
-    protected activeRange: {
-        trigger: TextAnchor;
-        end: TextAnchor;
-    } | null;
     /** A pick is running: its own selection changes close nothing. */
     protected picking: boolean;
     constructor(edytor: Edytor, 
@@ -49,28 +36,16 @@ export declare abstract class TextTriggerController {
     owner: string);
     /** The editor is readonly: the menu closes. */
     get readonly(): boolean;
-    /** The listbox's element id (page-unique), for `aria-controls`. */
-    get listId(): string;
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish: (popup: Popup | null) => void;
-    /** The rows the keyboard moves through. */
-    protected abstract get count(): number;
+    /** The record `popup` publishes, `active` the highlighted row's id when it is in the page. */
+    protected popupOf(active: string | undefined): Popup;
     /** Whether a trigger typed in `block` opens the menu. */
     protected abstract admits(block: Block): boolean;
     /** The query changed (or was set again): close the menu, or load its rows. */
     protected abstract queried(query: string): void;
     /** After an `insertText`: the trigger opens, the query grows, or the menu closes. */
-    handleTextInsertion(text: Text, block: Block, payload: TextInsertionPayload): void;
-    /**
-     * Where `value`, inserted at `start` of `text` (already written), completes
-     * the trigger: its start, or -1. A trigger of several characters (`[[`)
-     * completes with its last one.
-     */
-    private triggerAt;
+    handleTextInsertion(text: Text, block: Block, start: number, value: string): void;
     /** The caret moved: it stays after the trigger, in its text, and marks the query's end. */
     reconcileSelection(): void;
-    /** Move the keyboard's row (wrapping); `false` when there is nothing to move through. */
-    moveSelection(delta: number): boolean;
     close(): void;
     /** The range where its anchors resolve now: one text, the trigger before the query end. */
     protected get range(): TriggerRange | null;
@@ -88,7 +63,6 @@ export declare abstract class TextTriggerController {
     owns?: (text: Text, held: SelectionValue) => boolean): Promise<Awaited<R> | undefined>;
     protected setEnd(text: Text, queryEnd: number): void;
     protected open(text: Text, triggerStart: number, queryEnd: number): void;
-    private syncQueryFromText;
 }
 /** A plugin's trigger (`triggers`): rows from its `items(query)`, a pick its `onPick`. */
 export declare class TriggerMenuController<T = unknown> extends TextTriggerController {
@@ -101,21 +75,8 @@ export declare class TriggerMenuController<T = unknown> extends TextTriggerContr
     constructor(edytor: Edytor, trigger: Trigger<T>, owner: string);
     protected get count(): number;
     protected admits(block: Block): boolean;
-    /** The menu's accessible name. */
-    get name(): string;
-    /** The text shown when no row matches. */
-    get empty(): string;
-    /** The text shown while a search is pending and no row is shown. */
-    get searching(): string;
     labelOf: (item: T) => string;
     keyOf: (item: T) => string;
-    /**
-     * The element id of the row at `index` (page-unique, whatever the rows'
-     * keys or labels), for `aria-activedescendant`.
-     */
-    optionId: (index: number) => string;
-    /** The context `items` and `onPick` read, for the current range. */
-    private context;
     protected queried(query: string): void;
     /** The rows for the query: none after a word and a space is prose, and the menu closes. */
     private answered;