edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/blockMenu/BlockMenuController.svelte.d.ts

@@ -1,28 +1,24 @@
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import type { EditorCommand } from '../../plugins.js';
 import type { Block } from '../../block/block.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import { type KindRow } from '../../kinds.js';
-import type { Popup } from '../../surface/popups.svelte.js';
-import { type BlockMenuLabels, type PartialLabels } from '../../labels.js';
 import { BLOCK_COLORS, type BlockColorField } from '../../block/colors.js';
-import { type OptionAttributes } from '../chrome.js';
 export type BlockMenuOptions = {
     /** A link to the block, for "Copy link to block" (the row is hidden without it). */
     linkTo?: (block: Block) => string;
     /**
-     * Replace the menu; it renders while `controller.isOpen`, placed beside
-     * the handle (mark your panel `data-edytor-block-menu` for placement).
+     * The menu's markup and its words; it renders while `controller.isOpen`, placed beside
+     * the handle (mark your panel `data-edytor-block-menu` for placement;
+     * without it, nothing shows).
      * The controller runs every action; `close()` returns the caret. Keep
-     * the built-in keyboard and ARIA with its attachments: `{@attach
+     * the keyboard and the ARIA with its attachments: `{@attach
      * controller.keys}` on the field that holds the keyboard, `{@attach
      * controller.popup}` on the menu, `{...controller.option(index)}` on each
      * row, `{@attach controller.flyoutMenu}` on an open flyout.
      */
     menu?: Snippet<[BlockMenuController]>;
-    /** The words the menu shows (its actions, search field, headings), over the English ones. */
-    labels?: PartialLabels<'blockMenu'>;
 };
 export type BlockMenuAction = {
     id: string;
@@ -41,7 +37,7 @@ export type BlockMenuAction = {
 export type BlockMenuColor = {
     /** `color.<name>` or `background.<name>` (`color.default`, `background.default`). */
     id: string;
-    /** Its words in the menu's labels (`colorText`, `colorBackground`): "Red text", "Red background", "Default text". */
+    /** Its words in the view's labels (`colorText`, `colorBackground`): "Red text", "Red background", "Default text". */
     label: string;
     field: BlockColorField;
     value: (typeof BLOCK_COLORS)[number] | null;
@@ -59,7 +55,7 @@ export declare const colorQueryRow: (row: BlockMenuColor) => {
  * listed once a query names them (`searchOnly`): each paints the caret's
  * block, as the block menu's Color does (`setBlockColor`).
  */
-export declare const colorCommands: (edytor: Edytor, labels: BlockMenuLabels) => EditorCommand[];
+export declare const colorCommands: (edytor: Edytor) => EditorCommand[];
 export declare class BlockMenuController {
     #private;
     private edytor;
@@ -75,13 +71,12 @@ export declare class BlockMenuController {
     blocks: Block[];
     anchor: HTMLElement | null;
     query: string;
-    selectedIndex: number;
+    /** The keyboard's row. */
+    index: number;
     /** The open flyout: the kinds (`turn`), the colours (`color`), or none. */
     flyout: false | "color" | "turn";
     /** The keyboard's row in the open flyout. */
     flyoutIndex: number;
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu`. */
-    readonly labels: BlockMenuLabels;
     constructor(edytor: Edytor, options?: BlockMenuOptions);
     get isOpen(): boolean;
     /** The editor is readonly: the menu closes. */
@@ -91,8 +86,6 @@ export declare class BlockMenuController {
     get flyoutId(): string;
     /** A row's element id (page-unique; a flyout's with `flyout`), for `aria-activedescendant`. */
     rowId: (row: BlockMenuAction | KindRow | BlockMenuColor, flyout?: boolean) => string;
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish: (popup: Popup | null) => void;
     /**
      * The menu element (`{@attach controller.popup}`, the one with the rows):
      * it takes the menu's id, its `menu` role and name unless it has its
@@ -102,9 +95,9 @@ export declare class BlockMenuController {
      */
     popup: Attachment<HTMLElement>;
     /**
-     * An open flyout (`{@attach controller.flyoutMenu}`): its id, `menu`
-     * role and name, the overlay's placement beside the menu, and presses
-     * that keep the focus.
+     * An open flyout (`{@attach controller.flyoutMenu}`, named by your
+     * markup): its id, `menu` role, the overlay's placement beside the menu,
+     * and presses that keep the focus.
      */
     flyoutMenu: Attachment<HTMLElement>;
     /**
@@ -118,14 +111,14 @@ export declare class BlockMenuController {
      */
     keys: Attachment<HTMLElement>;
     /**
-     * The attributes of the row at `index` (of the open flyout's rows with
-     * `flyout`): spread them on its element (`{...controller.option(index)}`).
+     * The attachment of the row at `index` (of the open flyout's rows with
+     * `flyout`): `{@attach controller.option(index)}` on its element.
      * Its id, its role (`menuitem`, a switch's `menuitemcheckbox`, a colour's
      * `menuitemradio` with its ✓ as `aria-checked`, a flyout's opener with
-     * `aria-haspopup` and `aria-expanded`), `data-selected` for the keyboard's
-     * row, which scrolls into view.
+     * `aria-haspopup` and `aria-expanded`); the keyboard's row scrolls into
+     * view. Its look is the markup's (`index`, `flyoutIndex`).
      */
-    option: (index: number, flyout?: boolean) => OptionAttributes;
+    option: (index: number, flyout?: boolean) => Attachment<HTMLElement>;
     /** The search field typed in: the rows match `query`, the first one highlighted, no flyout open. */
     search(query: string): void;
     /** What Delete and Turn into act on: `blocks`, a list or a code block with its subtree (`selectedMembers`). */
@@ -143,11 +136,6 @@ export declare class BlockMenuController {
     /** The row naming the open block. */
     get currentKind(): KindRow | undefined;
     get actions(): BlockMenuAction[];
-    /**
-     * With a query, the kinds it names join the list (Notion's "Turn into"
-     * results), matched as the slash menu matches them (`matchesQuery`).
-     */
-    get matchingKinds(): KindRow[];
     /**
      * With a query, the colours it names join the list after the kinds
      * (Notion's "Color" results: `red` lists "Red text" and "Red background"),
@@ -171,13 +159,13 @@ export declare class BlockMenuController {
      * closes and the blocks stay selected, as in Notion.
      */
     paint(row: BlockMenuColor): void;
-    duplicate(block: Block): void;
     /**
-     * Duplicate several blocks as one undo step, each copy after its block (a
-     * block inside another of them is copied with it; a vetoed one is skipped,
-     * `dispatcher.each`); the copies are selected.
+     * Duplicate `blocks` as one undo step, each copy after its block (a
+     * block inside another of them is copied with it; a vetoed one is
+     * skipped, `dispatcher.each`); the copies are selected (`select`), else
+     * the first copy takes the caret (refused: its block keeps it).
      */
-    duplicateAll(blocks: Block[]): void;
+    duplicate(blocks: Block[], select: boolean): void;
     /**
      * Delete the open blocks' `members` (a list with its items) as the
      * keyboard's block delete does (`deleteSelectedBlocks`):
@@ -193,10 +181,12 @@ export declare class BlockMenuController {
      */
     get linked(): Block | undefined;
     copyLink(): Promise<void>;
-    /** Run the keyboard row (or open its flyout). */
-    runSelected(): void;
-    /** Run the open flyout's keyboard row: convert to its kind, or paint its colour. */
-    runFlyout(): void;
+    /**
+     * Run a row of the menu or of its open flyout (a click; Enter runs the
+     * keyboard's): paint a colour, convert to a kind, open an action's
+     * flyout or run it.
+     */
+    run(row: BlockMenuAction | KindRow | BlockMenuColor | undefined): void;
     /**
      * Open a flyout on its first row (keyboard or mouse): the "Turn into"
      * kinds (default) or the colours; that flyout already open stays as it

package/dist/plugins/blockMenu/BlockMenuController.svelte.js

@@ -1,10 +1,13 @@
-import { untrack } from 'svelte';
+import { blockSelection } from '../../session/selection.js';
 import { convertBlocks, convertedBlocks, convertibleKinds, convertToKind, matchesQuery, rowOf, turnCommands } from '../../kinds.js';
 import { deleteSelectedBlocks, getSelectedBlocksInDocumentOrder, liftLayouts, outermost, shownText } from '../../selection/replaceSelection.js';
 import { selectedMembers } from '../../selection/visibility.js';
-import { labelsWith } from '../../labels.js';
+import { blockMenuEnglish, labelsOf } from '../../labels.js';
 import { BLOCK_COLORS, colorable, setBlockColor } from '../../block/colors.js';
-import { attribute, identify, inPage, keepFocus, namesRows, optionAttributes } from '../chrome.js';
+import { attribute, identify, keepFocus } from '../chrome.js';
+import { holdKeys, listPopup, optionAttachment, stepRow } from '../list.svelte.js';
+import { listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
 /** The Color flyout's rows in `labels`: the text colours, then the backgrounds, each from the default. */
 const colorRows = (labels) => ['color', 'background'].flatMap((field) => [null, ...BLOCK_COLORS].map((value) => {
     const name = labels.colors[value ?? 'default'] ?? value ?? 'default';
@@ -28,18 +31,18 @@ export const colorQueryRow = (row) => ({
  * listed once a query names them (`searchOnly`): each paints the caret's
  * block, as the block menu's Color does (`setBlockColor`).
  */
-export const colorCommands = (edytor, labels) => colorRows(labels).map((row) => ({
+export const colorCommands = (edytor) => colorRows(labelsOf(edytor, 'blockMenu', blockMenuEnglish)).map((row) => ({
     id: row.id,
     ...colorQueryRow(row),
     icon: 'A',
     group: 'Color',
     searchOnly: true,
     isEnabled: (view = edytor) => {
-        const block = view.selection.state.startBlock;
+        const block = view.selection.textRange().startText?.parent;
         return Boolean(block && colorable(block));
     },
     run: () => {
-        const block = edytor.selection.state.startBlock;
+        const block = edytor.selection.textRange().startText?.parent;
         if (!block || !colorable(block))
             return false;
         if (setBlockColor(edytor, [block], row.field, row.value))
@@ -62,20 +65,25 @@ export class BlockMenuController {
     blocks = $state([]);
     anchor = null;
     query = $state('');
-    selectedIndex = $state(0);
+    /** The keyboard's row. */
+    index = $state(0);
     /** The open flyout: the kinds (`turn`), the colours (`color`), or none. */
     flyout = $state(false);
     /** The keyboard's row in the open flyout. */
     flyoutIndex = $state(0);
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu`. */
-    labels;
-    /** The Color flyout's rows, in `labels`. */
+    /** The actions' words: the view's `blockMenu` labels. */
+    #labels;
+    /** The Color flyout's rows, in those words. */
     #colors;
     constructor(edytor, options = {}) {
         this.edytor = edytor;
         this.options = options;
-        this.labels = labelsWith('blockMenu', options.labels);
-        this.#colors = colorRows(this.labels);
+        this.#labels = labelsOf(edytor, 'blockMenu', blockMenuEnglish);
+        this.#colors = colorRows(this.#labels);
+        this.popup = listPopup(edytor, 'block-menu', 'menu', () => {
+            const { block } = this;
+            return block && { opener: { block: block.id, control: 'grip' } };
+        });
     }
     get isOpen() {
         return this.block !== null;
@@ -93,8 +101,6 @@ export class BlockMenuController {
     }
     /** A row's element id (page-unique; a flyout's with `flyout`), for `aria-activedescendant`. */
     rowId = (row, flyout = false) => this.edytor.popups.idOf(`block-menu-${flyout ? 'flyout-' : ''}${'field' in row ? 'color-' : 'value' in row ? 'kind-' : ''}${row.id}`);
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish = (popup) => this.edytor.popups.set('block-menu', popup);
     /**
      * The menu element (`{@attach controller.popup}`, the one with the rows):
      * it takes the menu's id, its `menu` role and name unless it has its
@@ -102,33 +108,16 @@ export class BlockMenuController {
      * and is published to the view's root (`edytor.popups`) while it is in
      * the page, the grip that opened it told so.
      */
-    popup = (node) => {
-        identify(node, this.menuId, 'menu', this.labels.menu);
-        node.addEventListener('mousedown', keepFocus);
-        $effect(() => {
-            const { block } = this;
-            if (!block)
-                return;
-            this.publish({
-                id: this.menuId,
-                haspopup: 'menu',
-                opener: { block: block.id, control: 'grip' }
-            });
-            return () => this.publish(null);
-        });
-        return () => node.removeEventListener('mousedown', keepFocus);
-    };
+    popup;
     /**
-     * An open flyout (`{@attach controller.flyoutMenu}`): its id, `menu`
-     * role and name, the overlay's placement beside the menu, and presses
-     * that keep the focus.
+     * An open flyout (`{@attach controller.flyoutMenu}`, named by your
+     * markup): its id, `menu` role, the overlay's placement beside the menu,
+     * and presses that keep the focus.
      */
     flyoutMenu = (node) => {
-        const { color, turnInto } = this.labels;
-        identify(node, this.flyoutId, 'menu', untrack(() => this.flyout) === 'color' ? color : turnInto);
+        identify(node, this.flyoutId, 'menu');
         node.setAttribute('data-edytor-block-menu-flyout', '');
-        node.addEventListener('mousedown', keepFocus);
-        return () => node.removeEventListener('mousedown', keepFocus);
+        return listen(node, 'mousedown', keepFocus);
     };
     /**
      * The element that holds the keyboard (`{@attach controller.keys}`: the
@@ -140,52 +129,40 @@ export class BlockMenuController {
      * `aria-activedescendant`, once that row is in the page).
      */
     keys = (node) => {
-        untrack(() => {
-            if (!node.contains(node.ownerDocument.activeElement))
-                node.focus({ preventScroll: true });
-        });
-        node.addEventListener('keydown', this.#keydown);
-        $effect(() => {
+        $effect(() => attribute(node, 'aria-controls', this.flyout ? this.flyoutId : this.menuId));
+        return holdKeys(node, this.#keydown, () => {
             const flyout = Boolean(this.flyout);
-            const row = flyout ? this.flyoutRows[this.flyoutIndex] : this.rows[this.selectedIndex];
-            attribute(node, 'aria-controls', flyout ? this.flyoutId : this.menuId);
-            if (!namesRows(node))
-                return;
-            attribute(node, 'aria-activedescendant', inPage(node, row && this.rowId(row, flyout)));
+            const row = flyout ? this.flyoutRows[this.flyoutIndex] : this.rows[this.index];
+            return row && this.rowId(row, flyout);
         });
-        return () => node.removeEventListener('keydown', this.#keydown);
     };
     /**
-     * The attributes of the row at `index` (of the open flyout's rows with
-     * `flyout`): spread them on its element (`{...controller.option(index)}`).
+     * The attachment of the row at `index` (of the open flyout's rows with
+     * `flyout`): `{@attach controller.option(index)}` on its element.
      * Its id, its role (`menuitem`, a switch's `menuitemcheckbox`, a colour's
      * `menuitemradio` with its ✓ as `aria-checked`, a flyout's opener with
-     * `aria-haspopup` and `aria-expanded`), `data-selected` for the keyboard's
-     * row, which scrolls into view.
+     * `aria-haspopup` and `aria-expanded`); the keyboard's row scrolls into
+     * view. Its look is the markup's (`index`, `flyoutIndex`).
      */
     option = (index, flyout = false) => {
         const row = (flyout ? this.flyoutRows : this.rows)[index];
-        const selected = (flyout ? this.flyoutIndex : this.selectedIndex) === index;
-        const id = row
+        // Only an action has `checked` and `submenu`, only a colour `field`.
+        const { checked, submenu } = (row ?? {});
+        const color = row && 'field' in row;
+        const on = color ? this.isCurrentColor(row) : checked;
+        return optionAttachment(row
             ? this.rowId(row, flyout)
-            : this.edytor.popups.idOf(`block-menu-${flyout ? 'flyout-' : ''}${index}`);
-        if (row && 'field' in row)
-            return optionAttributes(id, 'menuitemradio', selected, {
-                'aria-checked': this.isCurrentColor(row)
-            });
-        if (!row || 'value' in row)
-            return optionAttributes(id, 'menuitem', selected);
-        return optionAttributes(id, row.checked === undefined ? 'menuitem' : 'menuitemcheckbox', selected, {
-            ...(row.checked === undefined ? {} : { 'aria-checked': row.checked }),
-            ...(row.submenu
-                ? { 'aria-haspopup': 'menu', 'aria-expanded': this.flyout === row.submenu }
+            : this.edytor.popups.idOf(`block-menu-${flyout ? 'flyout-' : ''}${index}`), color ? 'menuitemradio' : on === undefined ? 'menuitem' : 'menuitemcheckbox', (flyout ? this.flyoutIndex : this.index) === index, {
+            ...(on === undefined ? {} : { 'aria-checked': on }),
+            ...(submenu
+                ? { 'aria-haspopup': 'menu', 'aria-expanded': this.flyout === submenu }
                 : {})
         });
     };
     /** The search field typed in: the rows match `query`, the first one highlighted, no flyout open. */
     search(query) {
         this.query = query;
-        this.selectedIndex = 0;
+        this.index = 0;
         this.flyout = false;
     }
     /** The menu's keys, on the element that holds the keyboard (`keys`). */
@@ -193,44 +170,33 @@ export class BlockMenuController {
         if (event.defaultPrevented || event.isComposing)
             return;
         const { key } = event;
-        const rows = this.rows;
-        const count = rows.length;
-        const arrow = key === 'ArrowDown' || key === 'ArrowUp';
-        /** One arrow step through `length` rows, wrapping. */
-        const step = (index, length) => (index + (key === 'ArrowDown' ? 1 : length - 1)) % length;
-        const row = rows[this.selectedIndex];
+        const { flyout, rows } = this;
+        const row = rows[this.index];
         const submenu = row && 'submenu' in row ? row.submenu : undefined;
+        const to = stepRow(key, this.index, rows.length, { ends: true });
         if (key === 'Escape') {
-            if (this.flyout)
+            if (flyout)
                 this.flyout = false;
             else
                 this.close();
         }
-        else if (this.flyout && arrow) {
+        else if (flyout && (key === 'ArrowDown' || key === 'ArrowUp'))
             // In a flyout, the arrows walk its rows.
-            const length = this.flyoutRows.length;
-            if (length)
-                this.flyoutIndex = step(this.flyoutIndex, length);
-        }
-        else if (this.flyout && key === 'Enter')
-            this.runFlyout();
+            this.flyoutIndex = stepRow(key, this.flyoutIndex, this.flyoutRows.length);
+        else if (flyout && key === 'Enter')
+            this.run(this.flyoutRows[this.flyoutIndex]);
         else if (key === 'Delete' && !this.query)
             this.remove();
-        else if (arrow) {
-            if (count)
-                this.selectedIndex = step(this.selectedIndex, count);
-            this.flyout = false;
-        }
-        else if ((key === 'Home' || key === 'End') && count) {
-            this.selectedIndex = key === 'Home' ? 0 : count - 1;
+        else if (to !== undefined) {
+            this.index = to;
             this.flyout = false;
         }
         else if (key === 'ArrowRight' && submenu)
             this.openFlyout(submenu);
-        else if (key === 'ArrowLeft' && this.flyout)
+        else if (key === 'ArrowLeft' && flyout)
             this.flyout = false;
         else if (key === 'Enter')
-            this.runSelected();
+            this.run(row);
         else
             return;
         event.preventDefault();
@@ -266,38 +232,34 @@ export class BlockMenuController {
         return rowOf(this.edytor, this.block);
     }
     get actions() {
-        const { block, blocks } = this;
+        const { block, blocks, edytor } = this;
+        const labels = this.#labels;
         if (!block)
             return [];
-        const canMove = (direction) => () => this.edytor.canMoveBlocks({ blocks: outermost(blocks), direction });
-        const { labels } = this;
-        const [mod, shift] = this.edytor.keymap.isMac
-            ? ['⌘', '⇧']
-            : [`${labels.ctrl}+`, `${labels.shift}+`];
+        const [mod, shift] = edytor.keymap.isMac ? ['⌘', '⇧'] : [`${labels.ctrl}+`, `${labels.shift}+`];
+        /** An action row, its icon named by its id. */
+        const action = (id, label, more) => ({
+            id,
+            label,
+            icon: `action.${id}`,
+            ...more
+        });
+        const move = (direction, label, arrow) => action(direction, label, {
+            hint: `${mod}${shift}${arrow}`,
+            isEnabled: () => edytor.canMove({ blocks: outermost(blocks), direction }),
+            run: () => this.move(direction)
+        });
         const all = [
-            {
-                id: 'turn',
-                label: labels.turnInto,
-                icon: 'action.turn',
+            action('turn', labels.turnInto, {
                 submenu: 'turn',
                 isEnabled: () => convertedBlocks(this.members).length > 0
-            },
-            {
-                id: 'color',
-                label: labels.color,
-                icon: 'action.color',
+            }),
+            action('color', labels.color, {
                 submenu: 'color',
                 isEnabled: () => this.colorable.length > 0
-            },
+            }),
             ...(this.options.linkTo && this.linked
-                ? [
-                    {
-                        id: 'link',
-                        label: labels.copyLink,
-                        icon: 'action.link',
-                        run: () => this.copyLink()
-                    }
-                ]
+                ? [action('link', labels.copyLink, { run: () => this.copyLink() })]
                 : []),
             // The kind's own rows, on its block alone (a table's rows and switches). A
             // switch keeps the menu open; any other row closes it, the caret its
@@ -315,37 +277,17 @@ export class BlockMenuController {
                         : row.run
                 }))
                 : []),
-            {
-                id: 'duplicate',
-                label: labels.duplicate,
-                icon: 'action.duplicate',
+            action('duplicate', labels.duplicate, {
                 hint: `${mod}D`,
-                run: () => (blocks.length > 1 ? this.duplicateAll(blocks) : this.duplicate(block))
-            },
-            {
-                id: 'up',
-                label: labels.moveUp,
-                icon: 'action.up',
-                hint: `${mod}${shift}↑`,
-                isEnabled: canMove('up'),
-                run: () => this.move('up')
-            },
-            {
-                id: 'down',
-                label: labels.moveDown,
-                icon: 'action.down',
-                hint: `${mod}${shift}↓`,
-                isEnabled: canMove('down'),
-                run: () => this.move('down')
-            },
-            {
-                id: 'delete',
-                label: labels.delete,
-                icon: 'action.delete',
+                run: () => this.duplicate(blocks, blocks.length > 1)
+            }),
+            move('up', labels.moveUp, '↑'),
+            move('down', labels.moveDown, '↓'),
+            action('delete', labels.delete, {
                 hint: labels.deleteKey,
                 danger: true,
                 run: () => this.remove()
-            }
+            })
         ];
         return all.filter((action) => matchesQuery(action, this.query) && action.isEnabled?.() !== false);
     }
@@ -353,12 +295,13 @@ export class BlockMenuController {
      * With a query, the kinds it names join the list (Notion's "Turn into"
      * results), matched as the slash menu matches them (`matchesQuery`).
      */
-    get matchingKinds() {
+    get #matchingKinds() {
         if (!this.query.trim())
             return [];
-        if (!convertedBlocks(this.members).length)
-            return turnCommands(this.edytor, this.blocks).filter((kind) => matchesQuery(kind, this.query));
-        return this.kinds.filter((kind) => matchesQuery(kind, this.query));
+        const kinds = convertedBlocks(this.members).length
+            ? this.kinds
+            : turnCommands(this.edytor, this.blocks);
+        return kinds.filter((kind) => matchesQuery(kind, this.query));
     }
     /**
      * With a query, the colours it names join the list after the kinds
@@ -372,7 +315,7 @@ export class BlockMenuController {
     }
     /** Every keyboard row: actions, then the matching kinds, then the matching colours. */
     get rows() {
-        return [...this.actions, ...this.matchingKinds, ...this.matchingColors];
+        return [...this.actions, ...this.#matchingKinds, ...this.matchingColors];
     }
     open(block, anchor) {
         const selected = getSelectedBlocksInDocumentOrder(this.edytor);
@@ -380,7 +323,7 @@ export class BlockMenuController {
         this.block = block;
         this.anchor = anchor;
         this.query = '';
-        this.selectedIndex = 0;
+        this.index = 0;
         this.flyout = false;
         this.flyoutIndex = 0;
     }
@@ -396,7 +339,7 @@ export class BlockMenuController {
     move(direction) {
         if (!this.blocks.length)
             return;
-        this.edytor.moveBlocks({ blocks: outermost(this.blocks), direction });
+        this.edytor.move({ blocks: outermost(this.blocks), direction });
         this.close();
     }
     /**
@@ -432,26 +375,24 @@ export class BlockMenuController {
         setBlockColor(this.edytor, painted, row.field, row.value);
         const live = blocks.flatMap((block) => this.edytor.idToBlock.get(block.id) ?? []);
         if (live.length)
-            this.edytor.selection.selectBlocks(...live);
+            this.edytor.selection.select(blockSelection(live.map((block) => block.id)));
         this.focus();
     }
-    duplicate(block) {
-        const copy = block.duplicateBlock();
-        this.close(false);
-        this.caret(copy ?? block);
-    }
     /**
-     * Duplicate several blocks as one undo step, each copy after its block (a
-     * block inside another of them is copied with it; a vetoed one is skipped,
-     * `dispatcher.each`); the copies are selected.
+     * Duplicate `blocks` as one undo step, each copy after its block (a
+     * block inside another of them is copied with it; a vetoed one is
+     * skipped, `dispatcher.each`); the copies are selected (`select`), else
+     * the first copy takes the caret (refused: its block keeps it).
      */
-    duplicateAll(blocks) {
+    duplicate(blocks, select) {
         const copies = this.edytor.dispatcher
-            .each('insertBlock', outermost(blocks), (block) => block.duplicateBlock())
-            .filter((copy) => copy != null);
+            .each('duplicateBlock', outermost(blocks), (block) => this.edytor.duplicateBlock(block.id))
+            .flatMap((copy) => (copy?.status === 'applied' ? copy.ids : []));
         this.close(false);
-        if (copies.length)
-            this.edytor.selection.selectBlocks(...copies);
+        if (!select)
+            this.caret(this.edytor.idToBlock.get(copies[0] ?? '') ?? blocks[0]);
+        else if (copies.length)
+            this.edytor.selection.select(blockSelection(copies));
     }
     /**
      * Delete the open blocks' `members` (a list with its items) as the
@@ -485,30 +426,23 @@ export class BlockMenuController {
             await navigator.clipboard?.writeText(options.linkTo(linked));
         this.close();
     }
-    /** Run the keyboard row (or open its flyout). */
-    runSelected() {
-        const row = this.rows[this.selectedIndex];
+    /**
+     * Run a row of the menu or of its open flyout (a click; Enter runs the
+     * keyboard's): paint a colour, convert to a kind, open an action's
+     * flyout or run it.
+     */
+    run(row) {
         if (!row)
             return;
         if ('field' in row)
-            return this.paint(row);
-        if ('value' in row)
-            return this.turnInto(row);
-        if (row.submenu)
+            this.paint(row);
+        else if ('value' in row)
+            this.turnInto(row);
+        else if (row.submenu)
             this.openFlyout(row.submenu);
         else
             row.run?.();
     }
-    /** Run the open flyout's keyboard row: convert to its kind, or paint its colour. */
-    runFlyout() {
-        const row = this.flyoutRows[this.flyoutIndex];
-        if (!row)
-            return;
-        if ('field' in row)
-            this.paint(row);
-        else
-            this.turnInto(row);
-    }
     /**
      * Open a flyout on its first row (keyboard or mouse): the "Turn into"
      * kinds (default) or the colours; that flyout already open stays as it
@@ -524,7 +458,7 @@ export class BlockMenuController {
     restore(blocks) {
         const live = blocks.flatMap((block) => this.edytor.idToBlock.get(block.id) ?? []);
         if (live.length > 1) {
-            this.edytor.selection.selectBlocks(...live);
+            this.edytor.selection.select(blockSelection(live.map((block) => block.id)));
             this.focus();
         }
         else if (live[0]?.node?.isConnected)
@@ -541,12 +475,11 @@ export class BlockMenuController {
         if (text || !block?.isInTree)
             this.edytor.dispatcher.caret(text, 0);
         else
-            this.edytor.selection.selectBlocks(block);
+            this.edytor.selection.select(blockSelection([block.id]));
         this.focus();
     }
     /** Back to the editor: its own focus, not a user gesture (as its selection writes). */
     focus() {
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+        takeKeys(this.edytor);
     }
 }