edytor 1.0.0 → 3.0.0

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

@@ -72,6 +72,13 @@ export class SlashMenuController extends TextTriggerController {
     constructor(edytor) {
         super(edytor, '/', 'slash-menu');
     }
+    /** A `+`'s menu stands under the `+` (its block while the `+` is gone); a `/` menu at the caret. */
+    anchorRect() {
+        const { addition } = this;
+        const anchor = addition?.anchor?.isConnected ? addition.anchor : addition?.block.node;
+        const box = anchor?.getBoundingClientRect();
+        return box && (box.width || box.height) ? box : super.anchorRect();
+    }
     /** A `+`'s menu names its highlighted row from its own field, and tells the `+` it opened it. */
     popupOf(active) {
         const { addition } = this;

package/dist/plugins/slashMenu/slashMenuPlugin.js

@@ -1,5 +1,3 @@
-import { caretRect } from '../triggers/place.js';
-import { placeNear } from '../../surface/overlay.js';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
 import { handleMenuEvents, mountChrome } from '../chrome.js';
 import { withTriggerMenus } from '../triggers/triggers.js';
@@ -7,21 +5,14 @@ import { withTriggerMenus } from '../triggers/triggers.js';
 export const createSlashMenuPlugin = (options = {}) => (edytor) => {
     const controller = new SlashMenuController(edytor);
     /**
-     * Beside the caret (below a `+` it was opened from), kept in the
-     * viewport; measured in the overlay's frame, written after, as
-     * is the close of a `+` menu whose block is gone.
+     * Measured in the overlay's frame, written after: the close of a `+`
+     * menu whose block is gone (a peer's or a command's delete), as the
+     * block menu does. The menu places itself by `controller.anchor`.
      */
-    const positionMenu = (host) => {
-        if (!edytor.node || !controller.isOpen)
-            return;
+    const positionMenu = () => {
         const { addition } = controller;
-        // Its block is gone (a peer's or a command's delete): the `+` menu closes, as the block menu does.
-        if (addition && !addition.block.isInTree)
+        if (controller.isOpen && addition && !addition.block.isInTree)
             return () => controller.dismiss();
-        const anchor = addition?.anchor?.isConnected ? addition.anchor : addition?.block.node;
-        const box = anchor?.getBoundingClientRect();
-        const rect = box && (box.width || box.height) ? box : caretRect(edytor);
-        return rect && placeNear(host, rect, [310, 350]);
     };
     const plugin = {
         onEdytorAttached: ({ node }) => handleMenuEvents(edytor, node, 

package/dist/plugins/table/TableChrome.svelte

@@ -29,7 +29,6 @@
 	const labels = $derived(labelsOf(chrome.edytor, 'table', tableEnglish));
 	const layout = $derived(chrome.layout);
 	const line = $derived(chrome.line);
-	const menuPlace = $derived(chrome.menuPlace);
 
 	// The view turning readonly mid-drag drops the preview at once.
 	$effect(() => {
@@ -114,8 +113,8 @@
 			{/if}
 		{/each}
 	{/if}
-	{#if menu && chrome.menu && menuPlace}
-		<div data-edytor-table-menu-host style:left={px(menuPlace.left)} style:top={px(menuPlace.top)}>
+	{#if menu && chrome.menu}
+		<div data-edytor-table-menu-host>
 			{@render menu(chrome)}
 		</div>
 	{/if}

package/dist/plugins/table/TablePlugin.svelte

@@ -1,9 +1,10 @@
 <script module lang="ts">
+	import { tableForms } from '../../export/forms.js';
 	import './table.css';
 	import type { BlockSnippetPayload, BlockView, KindMenuAction, Plugin } from '../../plugins.js';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { tableKinds } from '../../crdt/semantics.js';
+
 	import { listedColumns, tableBlock, unlistedOrder } from '../../crdt/tables.js';
 	import { onPress } from '../../events/onFocus.js';
 	import { all } from '../../utils/listen.js';
@@ -161,6 +162,8 @@
 					...switches
 				];
 			};
+			/** The kinds' export and import forms. */
+			const forms = tableForms();
 			/** Tab and Shift+Tab (`step`) walk the cells, unless blocks are selected. */
 			const tab =
 				(step: 1 | -1): HotKey =>
@@ -181,7 +184,7 @@
 				},
 				blocks: {
 					table: {
-						...tableKinds.table,
+						...forms.table,
 						element: (data) => ({
 							tag: 'div',
 							attributes: {
@@ -208,26 +211,17 @@
 								group: 'Advanced blocks'
 							}
 						],
-						menu: menuOf,
-						html: (block, _, children) => tableHtml(block.data ?? {}, children),
-						plain: (_, __, children) => children,
-						parse: (element) => (element.localName === 'table' ? parseTable(element) : undefined)
+						menu: menuOf
 					},
 					tableRow: {
-						...tableKinds.tableRow,
+						...forms.tableRow,
 						element: { tag: 'div', attributes: { 'data-edytor-table-row': '', role: 'row' } },
-						snippet: row,
-						html: (_, __, children) => `<tr>${children}</tr>`,
-						plain: (_, __, children) => children.split('\n').join('\t'),
-						parse: (element) => (element.localName === 'tr' ? {} : undefined)
+						snippet: row
 					},
 					tableCell: {
-						...tableKinds.tableCell,
+						...forms.tableCell,
 						element: cellElement,
-						snippet: cell,
-						html: (_, content) => `<td>${content}</td>`,
-						plain: (_, content) => content.replace(/\n/g, ' '),
-						parse: (element) => (/^t[dh]$/.test(element.localName) ? parseCell(element) : undefined)
+						snippet: cell
 					}
 				},
 				hotkeys: {
@@ -278,13 +272,21 @@
 		return plugin;
 	};
 
-	/** `table`'s grid template: each column's width (the resize preview while a band drags it). */
+	/**
+	 * `table`'s grid template: each column's width (the resize preview while a
+	 * band drags it). In a suggestion's preview, the widths its data lists.
+	 */
 	const templateOf = (view: BlockView) => {
 		const edytor = view.handle?.edytor;
 		const chrome = edytor && chromes.get(edytor);
 		const listed = view.data.columns;
 		const fallback = chrome?.columnWidth ?? 120;
-		const columns = edytor ? columnsOfTable(edytor, view.id) : [];
+		// A suggestion's preview has no handle (no document grid): its listed columns, in order.
+		const columns = edytor
+			? columnsOfTable(edytor, view.id)
+			: Array.isArray(listed)
+				? listed.map((c, i) => String((c as { id?: unknown } | null)?.id ?? i))
+				: [];
 		if (Array.isArray(listed)) {
 			const entry = (id: string) => listed.find((c) => (c as { id?: unknown } | null)?.id === id);
 			return columns
@@ -322,42 +324,6 @@
 	};
 
 	/** The table's HTML (`<table>`): its header row's and header column's cells are `th`. */
-	const tableHtml = (data: Record<string, unknown>, rows: string) => {
-		let html = rows;
-		if (data.headerColumn === true)
-			html = html.replace(/<tr><td>([\s\S]*?)<\/td>/g, '<tr><th>$1</th>');
-		if (data.headerRow === true)
-			html = html.replace(
-				/^<tr>([\s\S]*?)<\/tr>/,
-				(_, row: string) => `<tr>${row.replace(/<td>/g, '<th>').replace(/<\/td>/g, '</th>')}</tr>`
-			);
-		return `<table><tbody>${html}</tbody></table>`;
-	};
-
-	/** The rows of an imported `<table>` (its own, not a nested table's). */
-	const rowsOf = (table: HTMLElement): HTMLTableRowElement[] =>
-		[...table.querySelectorAll('tr')].filter((tr) => tr.closest('table') === table);
-
-	/** An imported `<table>`'s data: a column per cell of its widest row, its header flags. */
-	const parseTable = (table: HTMLElement) => {
-		const rows = rowsOf(table);
-		const width = Math.max(1, ...rows.map((tr) => tr.cells.length));
-		const head = (cell: Element | undefined) => cell?.localName === 'th';
-		const headerRow = rows.length > 1 && [...(rows[0]?.cells ?? [])].every((c) => head(c));
-		const headerColumn =
-			rows.length > 0 && rows.slice(headerRow ? 1 : 0).every((tr) => head(tr.cells[0]));
-		return {
-			columns: Array.from({ length: width }, (_, i) => ({ id: `c${i + 1}` })),
-			...(headerRow && { headerRow: true }),
-			...(headerColumn && !headerRow && { headerColumn: true })
-		};
-	};
-
-	/** An imported cell's column: its position in its row (`c1`, `c2`, … as its table's). */
-	const parseCell = (cell: HTMLElement) => {
-		const index = (cell as HTMLTableCellElement).cellIndex;
-		return { column: `c${(Number.isInteger(index) && index >= 0 ? index : 0) + 1}` };
-	};
 </script>
 
 <!--

package/dist/plugins/table/chrome.svelte.d.ts

@@ -95,8 +95,11 @@ export declare class TableChrome extends ChromeList {
     /** @internal */
     minColumnWidth: number);
     protected get count(): number;
-    /** The view is readonly (reactive): the chrome shows nothing. */
-    get readonly(): boolean;
+    /**
+     * Where the open menu stands (`ChromeAnchor`): its grip, which your
+     * `menu` places itself under.
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
     /**
      * Open the `kind` grip's menu on the row or column it stands for, its
      * first row that can run the keyboard's, or close it when it is open

package/dist/plugins/table/chrome.svelte.js

@@ -1,14 +1,13 @@
 import { untrack } from 'svelte';
 import { autoScrollFor } from '../../dnd/autoScroll.js';
-import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
-import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
+import { dropTargetForElements, elementScrollers } from '../../dnd/pragmatic.js';
 import { takeKeys } from '../../events/onFocus.js';
 import { pin } from '../../surface/overlay.js';
-import { attribute } from '../chrome.js';
-import { ChromeList, holdKeys, menuKey, optionAttachment } from '../list.svelte.js';
+import { attribute, virtualAnchor } from '../chrome.js';
+import { ChromeList, holdKeys, keysOf, menuKey, optionAttachment } from '../list.svelte.js';
 import { BandDrag, bandKey } from '../bands.svelte.js';
 import { all, listen } from '../../utils/listen.js';
-import { dragPreview } from '../blockHandles/dragPreview.js';
+import { dragSource, ghost } from '../blockHandles/dragPreview.js';
 import { caretCell, deleteColumn, deleteRows, gridOf, insertColumn, insertRow, moveColumn, moveRows, widthOf } from './table.js';
 /** The drag data key naming the chrome a row's or a column's drag is from. */
 const MOVE = Symbol('edytor table move');
@@ -107,10 +106,6 @@ export class TableChrome extends ChromeList {
     get count() {
         return this.#rows.length;
     }
-    /** The view is readonly (reactive): the chrome shows nothing. */
-    get readonly() {
-        return this.edytor.readonly;
-    }
     /**
      * The column resize in progress.
      * @internal
@@ -197,7 +192,8 @@ export class TableChrome extends ChromeList {
     }
     /**
      * Where the grips stand, layer-relative, the point each centers on: the
-     * row grip on the grid's left edge, at the middle of the row it stands
+     * row grip on the left edge of the part of the grid its box shows
+     * (`table.overflow`: the box's edge once the grid is scrolled), at the middle of the row it stands
      * for; the column grip on its top edge, at the middle of the column it
      * stands for, while that middle shows (the grip a drag started from
      * stays, its source, even scrolled out of view).
@@ -211,7 +207,7 @@ export class TableChrome extends ChromeList {
         const x = c ? c.left + c.width / 2 : 0;
         return [
             ...(row && r
-                ? [{ ...row, kind: 'row', x: row.layout.left, y: r.top + r.height / 2 }]
+                ? [{ ...row, kind: 'row', x: this.span.left, y: r.top + r.height / 2 }]
                 : []),
             ...(column && (this.moving?.kind === 'column' || this.inView(x))
                 ? [{ ...column, kind: 'column', x, y: column.layout.top }]
@@ -237,22 +233,16 @@ export class TableChrome extends ChromeList {
         ];
     }
     /**
-     * Where the open menu stands: under its grip.
-     * @internal
+     * Where the open menu stands (`ChromeAnchor`): its grip, which your
+     * `menu` places itself under.
      */
-    get menuPlace() {
+    anchor = virtualAnchor(() => this.#gripAnchor()?.getBoundingClientRect(), () => this.#gripAnchor());
+    /** The grip elements in the page, by kind. */
+    #gripNodes = {};
+    #gripAnchor = () => {
         const kind = this.menu?.kind;
-        const at = kind && this.#lines(kind);
-        if (!at)
-            return null;
-        const { layout, index } = at;
-        if (kind === 'row') {
-            const row = layout.rows[index];
-            return { left: layout.left - 9, top: row.top + Math.min(row.height, 28) };
-        }
-        const column = layout.columns[index];
-        return { left: column.left + column.width / 2 - 12, top: layout.top + 10 };
-    }
+        return kind ? this.#gripNodes[kind] : undefined;
+    };
     /**
      * The drop line of a grip's drag, layer-relative: between two rows
      * (columns), where the drop would land.
@@ -549,43 +539,37 @@ export class TableChrome extends ChromeList {
     #grips = {};
     #grip = (node, kind) => {
         node.setAttribute('aria-haspopup', 'menu');
+        this.#gripNodes[kind] = node;
         $effect(() => {
             const open = this.menu?.kind === kind;
             attribute(node, 'aria-expanded', String(open));
             attribute(node, 'aria-controls', open ? this.listId : undefined);
             attribute(node, 'data-dragging', this.moving?.kind === kind ? 'true' : undefined);
         });
-        const off = all(listen(node, 'click', () => this.toggle(kind)), listen(node, 'keydown', (event) => {
+        const off = all(listen(node, 'click', () => this.toggle(kind)), listen(node, 'keydown', keysOf({
             // Escape gives the keys back to the editor (closing the menu if open).
-            if (event.key === 'Escape')
-                this.close();
-            else if (event.key === 'ArrowDown' && this.menu?.kind !== kind)
-                this.toggle(kind);
-            else
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-        }), draggable({
-            element: node,
+            Escape: this.close,
+            ArrowDown: () => this.menu?.kind !== kind && this.toggle(kind)
+        }, true)), dragSource(node, {
             canDrag: () => !this.edytor.readonly && this.edytor.dispatcher.permits() && this.#source(kind) !== null,
-            getInitialData: () => ({ [MOVE]: this }),
-            // The editor's own drag: no view takes it as a foreign drop.
-            getInitialDataForExternal: () => {
+            data: () => ({ [MOVE]: this }),
+            id: () => {
                 const source = this.#source(kind);
-                return {
-                    [EDYTOR_BLOCK_DRAG_MIME]: (kind === 'row' ? source?.id : source?.table.id) ?? ''
-                };
+                return (kind === 'row' ? source?.id : source?.table.id) ?? '';
             },
-            onGenerateDragPreview: ({ nativeSetDragImage, location }) => this.#begin(kind, node, location.current.input, nativeSetDragImage),
-            // The drag library tells the source before the drop target: the drop runs first.
-            onDrop: () => queueMicrotask(() => {
+            begin: (pointer, setImage) => this.#begin(kind, node, pointer, setImage),
+            end: () => {
                 for (const release of this.#releases.splice(0))
                     release();
                 this.moving = null;
                 this.edytor.overlay.invalidate();
-            })
+            }
         }));
-        return off;
+        return () => {
+            off();
+            if (this.#gripNodes[kind] === node)
+                delete this.#gripNodes[kind];
+        };
     };
     /**
      * The `+` under the table (`row`: a row at its end, the caret in its
@@ -674,14 +658,7 @@ export class TableChrome extends ChromeList {
         this.moving = { kind, table: table.id, id, gap: null };
         const widths = this.#widthsOf(table);
         const cells = (kind === 'row' ? grid.rows[index].cells : grid.rows.map((r) => r.cells[index])).flatMap((cell) => (cell && this.edytor.idToBlock.get(cell)?.node) || []);
-        if (nativeSetDragImage && cells.length) {
-            const preview = dragPreview(root, cells, pointer, kind === 'row' ? widths : [widths[index]]);
-            setCustomNativeDragPreview({
-                nativeSetDragImage,
-                getOffset: preview.offset,
-                render: ({ container }) => container.append(preview.element)
-            });
-        }
+        ghost(nativeSetDragImage, root, cells, pointer, kind === 'row' ? widths : [widths[index]]);
         const ours = (data) => data[MOVE] === this;
         // The page is the target: the line follows the pointer from the grips, outside the grid.
         this.#releases.push(dropTargetForElements({
@@ -694,7 +671,7 @@ export class TableChrome extends ChromeList {
         }));
         const scroller = table.node?.querySelector('[data-edytor-table-scroll]');
         if (scroller)
-            this.#releases.push(autoScrollFor(scroller, ours));
+            this.#releases.push(autoScrollFor(scroller, elementScrollers(ours)));
         this.edytor.overlay.invalidate();
     }
     /**

package/dist/plugins/table/table.js

@@ -45,7 +45,7 @@ export const insertRow = (table, index, caret = false) => {
     const plan = run(table, 'insertTableRow', { index }, (p) => ops.insertTableRow(edytor.facade, table.id, p.index));
     const row = plan ? (edytor.idToBlock.get(plan.ids[0]) ?? null) : null;
     if (row && caret)
-        edytor.dispatcher.caret(row.children[0]?.firstText, 0);
+        edytor.dispatcher.caretIn(row.children[0]?.firstText, 0);
     return row;
 };
 /** Delete `rows` with their cells (`table.delete-row`). */
@@ -61,7 +61,7 @@ export const insertColumn = (table, index, width, caret) => {
         const at = Math.max(0, Math.min(Math.trunc(index) || 0, grid.columns.length - 1));
         const text = cellAt(table, grid, caret, at)?.firstText;
         if (text)
-            table.edytor.dispatcher.caret(text, 0);
+            table.edytor.dispatcher.caretIn(text, 0);
     }
     return applied;
 };
@@ -80,7 +80,7 @@ export const fillCell = (table, row, column) => {
     const plan = run(table, 'fillTableCell', { row, column }, (p) => ops.fillTableCell(edytor.facade, p.row, p.column));
     const cell = plan ? (edytor.idToBlock.get(plan.ids[0]) ?? null) : null;
     if (cell)
-        edytor.dispatcher.caret(cell.firstText, 0);
+        edytor.dispatcher.caretIn(cell.firstText, 0);
     return cell;
 };
 /** Toggle `flag` (`headerRow` or `headerColumn`) of `table`'s data (`table.header`). */

package/dist/plugins/toc/TocPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { tocForms } from '../../export/forms.js';
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import { tocKinds } from '../../crdt/semantics.js';
 	import { tocEnglish, keywordsOf, labelsOf } from '../../labels.js';
@@ -53,11 +54,8 @@
 								group: 'Advanced blocks'
 							}
 						],
-						html: () => '<nav data-edytor-toc></nav>',
-						plain: () => '',
 						// Its own export: the list is drawn from the document, never carried.
-						parse: (el) =>
-							el.localName === 'nav' && el.hasAttribute('data-edytor-toc') ? {} : undefined
+						...tocForms().toc
 					}
 				}
 			};

package/dist/plugins/toolbar/ToolbarController.svelte.d.ts

@@ -76,6 +76,13 @@ export declare class ToolbarController {
     get card(): boolean;
     /** The hovered link's URL, as stored (the card shows it). */
     get hoveredHref(): string;
+    /**
+     * Where the bar stands (`ChromeAnchor`): the selection's box, which your
+     * `toolbar` places itself above (below when there is no room).
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
+    /** Where the link card stands (`ChromeAnchor`): the hovered link, which your `card` places itself under. */
+    readonly cardAnchor: import("../chrome.js").ChromeAnchor;
     /** Show the card for `anchor`, or hide it (`null`). */
     hover(anchor: HTMLAnchorElement | null): void;
     /** The card's Open: the hovered link in a new tab. */

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

@@ -4,9 +4,10 @@ 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 { identify } from '../chrome.js';
+import { identify, virtualAnchor } from '../chrome.js';
 import { all, listen } from '../../utils/listen.js';
 import { takeKeys } from '../../events/onFocus.js';
+import { keysOf } from '../list.svelte.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;
@@ -113,20 +114,13 @@ export class ToolbarController {
         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();
+        return listen(node, 'keydown', keysOf({
+            Enter: () => {
                 this.applyLink();
                 this.closePanel(true);
-            }
-            else if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closePanel(true);
-            }
-        };
-        return listen(node, 'keydown', keydown);
+            },
+            Escape: () => this.closePanel(true)
+        }));
     };
     /** Give the keyboard back to the editor (Escape in the bar), over the held selection. */
     release() {
@@ -232,6 +226,19 @@ export class ToolbarController {
     get hoveredHref() {
         return this.hovered?.getAttribute('href') ?? '';
     }
+    /**
+     * Where the bar stands (`ChromeAnchor`): the selection's box, which your
+     * `toolbar` places itself above (below when there is no room).
+     */
+    anchor = virtualAnchor(() => {
+        const editor = this.edytor.node;
+        const selection = editor?.ownerDocument.getSelection();
+        if (!selection?.rangeCount || !editor?.contains(selection.anchorNode))
+            return;
+        return selection.getRangeAt(0).getBoundingClientRect();
+    }, () => this.edytor.node);
+    /** Where the link card stands (`ChromeAnchor`): the hovered link, which your `card` places itself under. */
+    cardAnchor = virtualAnchor(() => this.hovered?.getBoundingClientRect(), () => this.hovered);
     /** Show the card for `anchor`, or hide it (`null`). */
     hover(anchor) {
         if (this.hovered === anchor)

package/dist/plugins/toolbar/toolbarPlugin.js

@@ -1,42 +1,14 @@
 import { ToolbarController } from './ToolbarController.svelte.js';
-import { mountChrome } from '../chrome.js';
-import { placeNear } from '../../surface/overlay.js';
+import { keepFocus, mountChrome } from '../chrome.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, drawn by your `toolbar` snippet, and the link card by your `card`. */
 export const createToolbarPlugin = (options = {}) => (edytor) => {
     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 selection = editor.ownerDocument.getSelection();
-        if (!selection?.rangeCount || !editor.contains(selection.anchorNode))
-            return;
-        const range = selection.getRangeAt(0);
-        if (typeof range.getBoundingClientRect !== 'function')
-            return;
-        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) => {
+    /** A hovered link that left the page hides its card (measured in the overlay's frame). */
+    const positionCard = () => {
         const anchor = controller.hovered;
-        if (!anchor || !controller.card)
-            return;
-        if (!anchor.isConnected)
+        if (anchor && controller.card && !anchor.isConnected)
             return () => controller.hover(null);
-        const rect = anchor.getBoundingClientRect();
-        const [left, top] = [`${Math.max(8, rect.left)}px`, `${rect.bottom}px`];
-        return () => Object.assign(host.style, { left, top, paddingTop: '4px' });
     };
     /**
      * The link card follows the pointer: over a link in the host it shows,
@@ -97,32 +69,26 @@ export const createToolbarPlugin = (options = {}) => (edytor) => {
             edytor.overlay.invalidate();
         },
         onEdytorAttached: () => {
-            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 keep = (event) => {
-                if (!isNativeFieldEvent(event))
-                    event.preventDefault();
-            };
-            /** 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 () => {
-                for (const off of offs.reverse())
-                    off();
-            };
+            const host = (name) => edytor.overlay.layer?.querySelector(`[data-${name}]`);
+            const offs = [
+                mountChrome(edytor, options.toolbar, controller, () => controller.isVisible, {
+                    name: 'edytor-toolbar-host',
+                    zIndex: 60
+                }),
+                mountChrome(edytor, options.card, controller, () => controller.card, {
+                    name: 'edytor-link-card-host',
+                    zIndex: 61,
+                    measure: positionCard
+                })
+            ];
+            const bar = options.toolbar && host('edytor-toolbar-host');
+            const card = options.card && host('edytor-link-card-host');
+            return all(() => controller.hover(null), edytor.node && card ? trackLinks(edytor.node, card) : () => { }, listen(card, 'mousedown', keepFocus), listen(bar, 'mousedown', keepFocus), ...offs.reverse());
         }
     };
 };

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

@@ -34,8 +34,13 @@ export declare abstract class TextTriggerController extends ChromeList {
     char: string, 
     /** The popup's owner name (`edytor.popups`), unique per view. */
     owner: string);
-    /** The editor is readonly: the menu closes. */
-    get readonly(): boolean;
+    /**
+     * Where the menu stands (`ChromeAnchor`): the caret, which your `menu`
+     * places itself under (above it when there is no room).
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
+    /** The anchor's box, read now: the caret's. */
+    protected anchorRect(): DOMRect | undefined;
     /** 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. */

package/dist/plugins/triggers/TriggerController.svelte.js

@@ -1,5 +1,7 @@
 import { inCodeLines } from '../../session/inputRules.js';
 import { ChromeList, inPage } from '../list.svelte.js';
+import { virtualAnchor } from '../chrome.js';
+import { caretRect } from './place.js';
 /** A trigger opens at a text's start or after whitespace, never inside a word (`1/2`, `a@b`). */
 const startsTrigger = (text, offset) => offset === 0 || /\s/.test(text.stringContent[offset - 1] ?? '');
 /** What `items` and `onPick` read: the trigger's block, its range in block offsets, the query. */
@@ -30,9 +32,14 @@ export class TextTriggerController extends ChromeList {
         super(edytor, owner, 'listbox', (node) => this.isOpen && this.popupOf(inPage(node, this.rowId(this.index))));
         this.char = char;
     }
-    /** The editor is readonly: the menu closes. */
-    get readonly() {
-        return this.edytor.readonly;
+    /**
+     * Where the menu stands (`ChromeAnchor`): the caret, which your `menu`
+     * places itself under (above it when there is no room).
+     */
+    anchor = virtualAnchor(() => this.anchorRect(), () => this.edytor.node);
+    /** The anchor's box, read now: the caret's. */
+    anchorRect() {
+        return caretRect(this.edytor);
     }
     /** The record `popup` publishes, `active` the highlighted row's id when it is in the page. */
     popupOf(active) {
@@ -139,7 +146,7 @@ export class TextTriggerController extends ChromeList {
             const kept = run.out === false || (run.taken && dispatcher.last?.status === 'refused');
             const out = await run.out;
             if (owns(text, held))
-                dispatcher.caret(text, kept ? end : triggerStart);
+                dispatcher.caretIn(text, kept ? end : triggerStart);
             return out;
         }
         finally {