edytor 1.0.0-rc.3 → 1.0.0

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);
     }
 }

package/dist/plugins/blockMenu/blockMenuPlugin.d.ts

@@ -1,12 +1,10 @@
 import type { Plugin } from '../../plugins.js';
 import { type BlockMenuOptions } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
  * slash menu by name (`/red`: "Red text", "Red background").
  */
 export declare const createBlockMenuPlugin: (options?: BlockMenuOptions) => Plugin;
-/** The block menu without a block link. */
-export declare const blockMenuPlugin: Plugin;

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -1,10 +1,8 @@
-import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
-import { onPress } from '../../events/onFocus.js';
+import { handleMenuEvents, mountChrome } from '../chrome.js';
 import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
-import BlockMenu from './BlockMenu.svelte';
 import { BlockMenuController, colorCommands } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
@@ -76,48 +74,33 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
     };
     return {
         // Colours by name in the slash menu (`/red`), as in Notion.
-        commands: colorCommands(edytor, controller.labels),
+        commands: colorCommands(edytor),
         hotkeys: {
             'mod+d': ({ prevent }) => {
                 if (edytor.readonly)
                     return;
                 const selected = getSelectedBlocksInDocumentOrder(edytor).filter((b) => b.movable);
                 if (selected.length)
-                    return prevent(() => controller.duplicateAll(selected));
-                const block = edytor.selection.state.startBlock;
+                    return prevent(() => controller.duplicate(selected, true));
+                const block = edytor.selection.textRange().startText?.parent;
                 if (block?.movable)
-                    prevent(() => controller.duplicate(block));
+                    prevent(() => controller.duplicate([block], false));
             }
         },
         onEdytorAttached: ({ node }) => {
-            const activate = (event) => {
+            const off = handleMenuEvents(edytor, node, (event) => {
                 // The menu takes the keyboard (its search field).
                 event.preventDefault();
-                const { block, anchor } = event.detail;
-                controller.open(block, anchor);
+                controller.open(event.detail.block, event.detail.anchor);
                 edytor.overlay.invalidate();
-            };
-            const outside = (event) => {
-                const target = event.target;
-                if (controller.isOpen &&
-                    !target?.closest?.('[data-edytor-block-menu-host], [data-edytor-block-handle-host]'))
-                    controller.close(false);
-            };
+            }, 
             // A `+` opens its own menu: this one closes.
-            const add = () => controller.close(false);
-            node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            node.addEventListener(BLOCK_ADD_EVENT, add);
-            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
-            const offPress = onPress(edytor, node.ownerDocument, outside, true);
-            const unmount = edytor.overlay.mount(BlockMenu, { controller, menu: options.menu }, 'edytor-block-menu-host', 70, place);
+            close, '[data-edytor-block-menu-host], [data-edytor-block-handle-host]', () => controller.isOpen && close());
+            const unmount = mountChrome(edytor, options.menu, controller, () => controller.isOpen, { name: 'edytor-block-menu-host', zIndex: 70, measure: place }, close);
             return () => {
-                node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                node.removeEventListener(BLOCK_ADD_EVENT, add);
-                offPress();
+                off();
                 unmount();
             };
         }
     };
 };
-/** The block menu without a block link. */
-export const blockMenuPlugin = createBlockMenuPlugin();

package/dist/plugins/brand.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '../plugins.js';
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export declare const branded: (name: string, plugin: Plugin) => Plugin;
+/** The name `plugin` was branded with, if any. */
+export declare const brandOf: (plugin: Plugin) => string | undefined;

package/dist/plugins/brand.js

@@ -0,0 +1,8 @@
+const brands = new WeakMap();
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export const branded = (name, plugin) => (brands.set(plugin, name), plugin);
+/** The name `plugin` was branded with, if any. */
+export const brandOf = (plugin) => brands.get(plugin);