edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/index.d.ts

@@ -1,46 +1,50 @@
-export { richTextPlugin, createRichTextPlugin, richTextOperations, richTextPlaceholder, createRichTextPlaceholder, CALLOUT_ICONS, type CalloutIconPicker, type CalloutIconOption, type RichTextPluginOptions } from './richtext/RichTextPlugin.svelte';
-export { arrowMovePlugin } from './arrowMove/arrowMove.js';
-export type { MenuItemPayload, OptionAttributes } from './chrome.js';
+export { createRichTextPlugin, richTextOperations, richTextPlaceholder, type RichTextPluginOptions, type TodoCheckboxPayload, type CalloutIconPayload, type EmptyBodyPayload } from './richtext/RichTextPlugin.svelte';
+export { CALLOUT_ICONS, createCalloutIconsPlugin, type CalloutIconPicker, type CalloutIconsOptions } from './richtext/calloutIcons.svelte.js';
+export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
+export type { MenuItemPayload } from './chrome.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT, type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
-export { TOOLBAR_COLORS } from './toolbar/ToolbarController.svelte.js';
-export { blockHandlesPlugin, createBlockHandlesPlugin, type BlockHandleActivation, type BlockHandlesOptions, type BlockHandleSnippetPayload } from './blockHandles/blockHandlesPlugin.js';
-export { codePlugin, createCodePlugin, CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOptions } from './code/CodePlugin.svelte';
+export { createBlockHandlesPlugin, type BlockHandlesOptions, type BlockHandleSnippetPayload } from './blockHandles/blockHandlesPlugin.js';
+export { createCodePlugin, CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOptions } from './code/CodePlugin.svelte';
 export type { CodeHeader } from './code/header.svelte.js';
 export type { LanguageMenu, LanguageMenuItem, LanguageRow } from './code/languageMenu.svelte.js';
-export { markdownShortcutsPlugin } from './markdownShortcuts.js';
+export { createMarkdownShortcutsPlugin } from './markdownShortcuts.js';
 export { createMentionPlugin, type MentionItem, type MentionData, type MentionPluginOptions } from './mention/MentionPlugin.svelte';
 export { createPageLinkPlugin, type PageLinkItem, type PageLinkData, type PageLinkPluginOptions } from './pageLink/PageLinkPlugin.svelte';
 export type { TriggerMenuController } from './triggers/TriggerController.svelte.js';
-export { slashMenuPlugin, createSlashMenuPlugin, type SlashMenuOptions, type SlashMenuItem } from './slashMenu/slashMenuPlugin.js';
+export { withRulesAndTriggers } from './triggers/triggers.js';
+export { createSlashMenuPlugin, type SlashMenuOptions } from './slashMenu/slashMenuPlugin.js';
 export type { SlashMenuController } from './slashMenu/SlashMenuController.svelte.js';
-export { toolbarPlugin, createToolbarPlugin, type ToolbarOptions } from './toolbar/toolbarPlugin.js';
+export { createToolbarPlugin, type ToolbarOptions } from './toolbar/toolbarPlugin.js';
 export type { ToolbarController } from './toolbar/ToolbarController.svelte.js';
-export { blockMenuPlugin, createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
-export { suggestionsPlugin, createSuggestionsPlugin, isSuggestionsPlugin, type SuggestionsOptions, type SuggestionBarPayload } from './suggestions/suggestionsPlugin.js';
+export { createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
+export { createSuggestionsPlugin, type SuggestionBarOptions, type SuggestionBarPayload } from './suggestions/suggestionsPlugin.js';
+export { createSuggestionBarPlugin } from './suggestions/SuggestionBars.svelte';
 export type { BlockMenuOptions, BlockMenuController, BlockMenuAction, BlockMenuColor } from './blockMenu/BlockMenuController.svelte.js';
-export { imagePlugin, createImagePlugin, isImagePlugin, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImagePluginOptions, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
-export { embedPlugin, createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions } from './media/EmbedPlugin.svelte';
-export { bookmarkPlugin, createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview } from './media/BookmarkPlugin.svelte';
-export { filePlugin, createFilePlugin } from './media/FilePlugin.svelte';
-export { videoPlugin, createVideoPlugin } from './media/VideoPlugin.svelte';
-export { audioPlugin, createAudioPlugin } from './media/AudioPlugin.svelte';
-export { safeWebUrl, safeMediaSrc, type MediaKind, type MediaPluginOptions } from './media/media.js';
+export { createImagePlugin, type ImagePluginOptions, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
+export { createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions, type EmbedFallbackPayload } from './media/EmbedPlugin.svelte';
+export { createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview, type BookmarkCardPayload } from './media/BookmarkPlugin.svelte';
+export { createFilePlugin, type FilePluginOptions, type FileRowPayload } from './media/FilePlugin.svelte';
+export { createVideoPlugin, type VideoPluginOptions } from './media/VideoPlugin.svelte';
+export { createAudioPlugin, type AudioPluginOptions } from './media/AudioPlugin.svelte';
+export { safeWebUrl, safeMediaSrc, type MediaKind } from './media/media.js';
 export type { MediaEmptyController, MediaEmptyFailure } from './media/empty.svelte.js';
+export { createMediaEmptyPlugin, type MediaEmptyOptions } from './media/MediaEmpty.svelte';
 export type { UrlPasteController, UrlPasteOffer, UrlPasteOption } from './media/urlPaste.svelte.js';
 export type { ImageControls, ImageBox } from './image/controls.svelte.js';
-export type { ImageEmptyController, ImageEmptyFailure } from './image/empty.svelte.js';
+export { createImageToolbarPlugin, type ImageToolbar, type ImageToolbarOptions } from './image/toolbar.svelte.js';
 export type { BlockHandleController } from './blockHandles/BlockHandleController.svelte.js';
-export { columnsPlugin, createColumnsPlugin, isColumnsPlugin, type ColumnsPluginOptions } from './columns/ColumnsPlugin.svelte';
-export { findPlugin, createFindPlugin, findController, type FindPluginOptions } from './find/findPlugin.js';
+export { createColumnsPlugin, type ColumnsPluginOptions } from './columns/ColumnsPlugin.svelte';
+export { createFindPlugin, findController, type FindPluginOptions } from './find/findPlugin.js';
 export type { FindController, ReplaceMatches } from './find/FindController.svelte.js';
-export { marqueePlugin, createMarqueePlugin, type MarqueePluginOptions } from './marquee/marqueePlugin.js';
+export { createMarqueePlugin, type MarqueePluginOptions } from './marquee/marqueePlugin.js';
 export type { MarqueeBoxPayload } from './marquee/MarqueeController.svelte.js';
 export { findMatches, type FindMatch, type FindOptions } from './find/search.js';
 export { createCommentsPlugin, commentsController, type CommentsPluginOptions, type CommentCardPayload } from './comments/commentsPlugin.js';
 export type { CommentsController, CommentDraft, CommentNotice, CommentUser, PlacedThread } from './comments/CommentsController.svelte.js';
-export { pagePlugin, createPagePlugin, type PagePluginOptions } from './page/PagePlugin.svelte';
-export { tocPlugin, createTocPlugin, type TocPluginOptions, type TocHeadingLevel } from './toc/TocPlugin.svelte';
-export { tablePlugin, createTablePlugin, isTablePlugin, type TablePluginOptions } from './table/TablePlugin.svelte';
+export { createPagePlugin, type PagePluginOptions, type PageBlockLinkPayload } from './page/PagePlugin.svelte';
+export { createTocPlugin, type TocPluginOptions, type TocHeadingLevel, type TocEntryPayload, type TocEmptyPayload } from './toc/TocPlugin.svelte';
+export { createTablePlugin, type TablePluginOptions } from './table/TablePlugin.svelte';
+export { insertTableRow, deleteTableRows, insertTableColumn, deleteTableColumn, moveTableColumn, moveTableRows, fillTableCell } from './table/ops.js';
 export type { TableChrome, TableMenu, TableMenuRow, TableMenuItem, TableGripPayload, TableAddPayload } from './table/chrome.svelte.js';
 export { tableBlock, type TableBlockOptions } from '../crdt/tables.js';
-export { createEquationPlugin, KATEX_CDN, KATEX_VERSION, type EquationPluginOptions, type EquationData, type EquationEditor, type EquationTarget, type KatexLike, type KatexLoader } from './equation/EquationPlugin.svelte';
+export { createEquationPlugin, KATEX_CDN, KATEX_VERSION, type EquationPluginOptions, type EquationData, type EquationEditor, type EquationErrorPayload, type EquationPlaceholderPayload, type EquationTarget, type KatexLike, type KatexLoader } from './equation/EquationPlugin.svelte';

package/dist/plugins/index.js

@@ -1,31 +1,37 @@
-export { richTextPlugin, createRichTextPlugin, richTextOperations, richTextPlaceholder, createRichTextPlaceholder, CALLOUT_ICONS } from './richtext/RichTextPlugin.svelte';
-export { arrowMovePlugin } from './arrowMove/arrowMove.js';
+export { createRichTextPlugin, richTextOperations, richTextPlaceholder } from './richtext/RichTextPlugin.svelte';
+export { CALLOUT_ICONS, createCalloutIconsPlugin } from './richtext/calloutIcons.svelte.js';
+export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
-export { TOOLBAR_COLORS } from './toolbar/ToolbarController.svelte.js';
-export { blockHandlesPlugin, createBlockHandlesPlugin } from './blockHandles/blockHandlesPlugin.js';
-export { codePlugin, createCodePlugin, CODE_LANGUAGES, loadCodeLanguage } from './code/CodePlugin.svelte';
-export { markdownShortcutsPlugin } from './markdownShortcuts.js';
+export { createBlockHandlesPlugin } from './blockHandles/blockHandlesPlugin.js';
+export { createCodePlugin, CODE_LANGUAGES, loadCodeLanguage } from './code/CodePlugin.svelte';
+export { createMarkdownShortcutsPlugin } from './markdownShortcuts.js';
 export { createMentionPlugin } from './mention/MentionPlugin.svelte';
 export { createPageLinkPlugin } from './pageLink/PageLinkPlugin.svelte';
-export { slashMenuPlugin, createSlashMenuPlugin } from './slashMenu/slashMenuPlugin.js';
-export { toolbarPlugin, createToolbarPlugin } from './toolbar/toolbarPlugin.js';
-export { blockMenuPlugin, createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
-export { suggestionsPlugin, createSuggestionsPlugin, isSuggestionsPlugin } from './suggestions/suggestionsPlugin.js';
-export { imagePlugin, createImagePlugin, isImagePlugin, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH } from './image/ImagePlugin.svelte';
-export { embedPlugin, createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf } from './media/EmbedPlugin.svelte';
-export { bookmarkPlugin, createBookmarkPlugin } from './media/BookmarkPlugin.svelte';
-export { filePlugin, createFilePlugin } from './media/FilePlugin.svelte';
-export { videoPlugin, createVideoPlugin } from './media/VideoPlugin.svelte';
-export { audioPlugin, createAudioPlugin } from './media/AudioPlugin.svelte';
+export { withRulesAndTriggers } from './triggers/triggers.js';
+export { createSlashMenuPlugin } from './slashMenu/slashMenuPlugin.js';
+export { createToolbarPlugin } from './toolbar/toolbarPlugin.js';
+export { createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
+export { createSuggestionsPlugin } from './suggestions/suggestionsPlugin.js';
+export { createSuggestionBarPlugin } from './suggestions/SuggestionBars.svelte';
+export { createImagePlugin, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH } from './image/ImagePlugin.svelte';
+export { createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf } from './media/EmbedPlugin.svelte';
+export { createBookmarkPlugin } from './media/BookmarkPlugin.svelte';
+export { createFilePlugin } from './media/FilePlugin.svelte';
+export { createVideoPlugin } from './media/VideoPlugin.svelte';
+export { createAudioPlugin } from './media/AudioPlugin.svelte';
 export { safeWebUrl, safeMediaSrc } from './media/media.js';
-export { columnsPlugin, createColumnsPlugin, isColumnsPlugin } from './columns/ColumnsPlugin.svelte';
-export { findPlugin, createFindPlugin, findController } from './find/findPlugin.js';
-export { marqueePlugin, createMarqueePlugin } from './marquee/marqueePlugin.js';
+export { createMediaEmptyPlugin } from './media/MediaEmpty.svelte';
+export { createImageToolbarPlugin } from './image/toolbar.svelte.js';
+export { createColumnsPlugin } from './columns/ColumnsPlugin.svelte';
+export { createFindPlugin, findController } from './find/findPlugin.js';
+export { createMarqueePlugin } from './marquee/marqueePlugin.js';
 export { findMatches } from './find/search.js';
 export { createCommentsPlugin, commentsController } from './comments/commentsPlugin.js';
-export { pagePlugin, createPagePlugin } from './page/PagePlugin.svelte';
-export { tocPlugin, createTocPlugin } from './toc/TocPlugin.svelte';
-export { tablePlugin, createTablePlugin, isTablePlugin } from './table/TablePlugin.svelte';
+export { createPagePlugin } from './page/PagePlugin.svelte';
+export { createTocPlugin } from './toc/TocPlugin.svelte';
+export { createTablePlugin } from './table/TablePlugin.svelte';
+// The table ops, prepared over any document (`document.apply(insertTableRow(document, …))`).
+export { insertTableRow, deleteTableRows, insertTableColumn, deleteTableColumn, moveTableColumn, moveTableRows, fillTableCell } from './table/ops.js';
 // The table kind's value as JSON (also on `edytor/crdt/edytor`).
 export { tableBlock } from '../crdt/tables.js';
 export { createEquationPlugin, KATEX_CDN, KATEX_VERSION } from './equation/EquationPlugin.svelte';

package/dist/plugins/list.svelte.d.ts

@@ -0,0 +1,128 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Edytor } from '../edytor.svelte.js';
+import type { HotKey, HotKeyCombination } from '../session/keymap.js';
+import type { Popup } from '../surface/popups.svelte.js';
+/** `id` when an element of `node`'s page has it, else `undefined` (looked up again as rows take their ids). */
+export declare const inPage: (node: Node, id: string | undefined) => string | undefined;
+/** The ARIA a row may carry beside its role. */
+export type OptionState = {
+    /** `-1` where a field or the editor holds the keyboard; a roving list's own row `0`. */
+    tabindex?: 0 | -1;
+    'aria-checked'?: boolean;
+    /** A row that cannot run now (a table menu's Move up on the first row). */
+    'aria-disabled'?: boolean;
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: boolean;
+};
+/**
+ * A row's attachment: its id, role, `aria-selected` (a `listbox`'s
+ * option) and `state`; the keyboard's row (`selected`)
+ * scrolls into view when it becomes it, unless `reveal` is `false` (a list
+ * in the page, whose focus scrolls it).
+ */
+export declare const optionAttachment: (id: string, role: "option" | "menuitem" | "menuitemcheckbox" | "menuitemradio", selected: boolean, state?: OptionState, reveal?: boolean) => Attachment<HTMLElement>;
+/**
+ * The keyboard's row after `key` among `count` rows from `at`, `undefined`
+ * when the key does not move it: ArrowDown and ArrowUp step through the
+ * rows `usable` keeps (a disabled one is skipped), around the ends; in a
+ * grid of `columns`, ArrowRight and ArrowLeft step around the ends, ArrowDown
+ * and ArrowUp a whole row, stopping at the first and last; with `ends`, Home
+ * and End reach the first and last rows.
+ */
+export declare const stepRow: (key: string, at: number, count: number, { columns, ends, usable }?: Steps) => number | undefined;
+/** How a list's keys step (`stepRow`): a grid's columns, Home and End, the rows they stop at. */
+type Steps = {
+    columns?: number;
+    ends?: boolean;
+    usable?: (index: number) => boolean;
+};
+/**
+ * A key on a menu that holds the keyboard itself, not a field (WAI-ARIA's
+ * menu keys): the arrows, Home and End move its row (`stepRow`), Enter and
+ * Space pick it, Escape and Tab close it. Whether the key was the menu's
+ * (then its default is prevented).
+ */
+export declare const menuKey: (event: KeyboardEvent, menu: {
+    at: number;
+    count: number;
+    to: (index: number) => void;
+    pick: () => void;
+    close: () => void;
+}, steps?: Steps) => boolean;
+/**
+ * A list's element (`{@attach controller.popup}`, named by its markup): it
+ * takes the list's id (`edytor.popups.idOf(owner)`) and its `role` unless
+ * it has its own, keeps the focus where it is on a press (a field takes its
+ * own), and is published to the view's root (`edytor.popups`, `role` its
+ * `aria-haspopup`) while `open` answers the rest of its record (its
+ * highlighted row, the control that opened it), withdrawn when it closes or
+ * leaves the page.
+ */
+export declare const listPopup: (edytor: Edytor, owner: string, role: "listbox" | "menu", open?: (node: HTMLElement) => Omit<Popup, "id"> | false | null) => Attachment<HTMLElement>;
+/**
+ * The element that holds a list's keyboard (a `keys` attachment's body): it
+ * takes the focus as it mounts (unless the focus is already in it), `keydown`
+ * hears the keys on `keyed` (the element itself by default), and it names
+ * the highlighted row (`aria-activedescendant`, once that row is in the
+ * page) when it may name one (a field, or an element with a role).
+ */
+export declare const holdKeys: (node: HTMLElement, keydown: (event: KeyboardEvent) => void, active: () => string | undefined, keyed?: HTMLElement) => () => void;
+/** An open list the editor keeps the keyboard for, as its keys drive it. */
+export type HeldList = {
+    /** Move the keyboard's row by `step`; whether it moved (no rows: the arrows stay the caret's). */
+    move: (step: number) => boolean;
+    /** Pick the keyboard's row; none when Enter is not the list's (no row to pick). */
+    pick?: () => void;
+    close: () => void;
+};
+/**
+ * The editor's keys for the list it keeps the keyboard for (a trigger's
+ * menu, the URL paste menu), while `open` answers one: ArrowDown and ArrowUp
+ * move its row, Enter picks it, Escape closes it.
+ */
+export declare const listHotkeys: (open: () => HeldList | false | undefined) => Partial<Record<HotKeyCombination, HotKey>>;
+/**
+ * A chrome list and its keyboard's row (the trigger and slash menus, the
+ * code language list, the callout icon picker, the URL paste menu, a table
+ * grip's menu): the list's element (`popup`, its id `listId`), a row's id
+ * and attachment (`rowId`, `option`: rows are named by position) and the
+ * step the keys take (`move`). Each controller extends it with its rows,
+ * its keys and its actions.
+ */
+export declare abstract class ChromeList {
+    /** The list's name among the view's popups (`edytor.popups`). */
+    protected readonly owner: string;
+    /** Its role: a `listbox` the editor or a field keeps the keyboard for, or a `menu`. */
+    protected readonly role: 'listbox' | 'menu';
+    /** The keyboard's row. */
+    index: number;
+    /**
+     * The list's element (`{@attach controller.popup}`, named by your
+     * markup): its id and role unless it has its own, presses that keep the
+     * focus, and its publication to the view's root (`edytor.popups`) while
+     * it is open and in the page.
+     */
+    readonly popup: Attachment<HTMLElement>;
+    constructor(
+    /** @internal */
+    edytor: Edytor, 
+    /** The list's name among the view's popups (`edytor.popups`). */
+    owner: string, 
+    /** Its role: a `listbox` the editor or a field keeps the keyboard for, or a `menu`. */
+    role: 'listbox' | 'menu', open?: (node: HTMLElement) => Omit<Popup, 'id'> | false | null);
+    /** How many rows the keyboard walks. */
+    protected abstract get count(): number;
+    /** The list's element id (page-unique), for `aria-controls`. */
+    get listId(): string;
+    /** Row `index`'s element id (page-unique), for `aria-activedescendant`. */
+    rowId: (index: number) => string;
+    /**
+     * Row `index`'s attachment (`{@attach controller.option(index)}`): its
+     * id, its role and `aria-selected` (a `listbox`'s); the keyboard's row
+     * scrolls into view. Its look is the markup's (`index === this.index`).
+     */
+    option(index: number): Attachment<HTMLElement>;
+    /** Move the keyboard's row by `step`, around the ends; `false` when there is no row. */
+    move: (step: number) => boolean;
+}
+export {};

package/dist/plugins/list.svelte.js

@@ -0,0 +1,217 @@
+/**
+ * The one list behaviour every chrome menu shares (the trigger and slash
+ * menus, the block menu, the code language list, the callout icon picker,
+ * the URL paste menu, the table grip menu): the keyboard's row a key moves
+ * to, the list element's id, role, name and publication to the view's root,
+ * the element holding the keyboard (its focus, its keys, the row it names),
+ * and the editor's keys for a list the editor keeps the keyboard for. Each
+ * controller keeps its own state, rows and payload; these are its
+ * attachments' and bindings' bodies.
+ */
+import { untrack } from 'svelte';
+import { attach, attribute, keepFocus, namesRows } from './chrome.js';
+import { listen } from '../utils/listen.js';
+/**
+ * How many rows took their id so far: a row's attachment runs after the
+ * effects of the elements before it (the field naming the highlighted row,
+ * the list's publication), which read it to look again.
+ */
+let named = $state(0);
+/** `id` when an element of `node`'s page has it, else `undefined` (looked up again as rows take their ids). */
+export const inPage = (node, id) => {
+    void named;
+    return id && node.ownerDocument?.getElementById(id) ? id : undefined;
+};
+/**
+ * A row's attachment: its id, role, `aria-selected` (a `listbox`'s
+ * option) and `state`; the keyboard's row (`selected`)
+ * scrolls into view when it becomes it, unless `reveal` is `false` (a list
+ * in the page, whose focus scrolls it).
+ */
+export const optionAttachment = (id, role, selected, state = {}, reveal = true) => {
+    const own = attach({
+        id,
+        role,
+        tabindex: -1,
+        'aria-selected': role === 'option' ? selected : undefined,
+        'aria-checked': undefined,
+        'aria-disabled': undefined,
+        'aria-haspopup': undefined,
+        'aria-expanded': undefined,
+        ...state
+    });
+    return (node) => {
+        const fresh = node.id !== id;
+        own(node);
+        if (fresh)
+            untrack(() => named++);
+        if (selected && reveal)
+            node.scrollIntoView?.({ block: 'nearest' });
+    };
+};
+/**
+ * The keyboard's row after `key` among `count` rows from `at`, `undefined`
+ * when the key does not move it: ArrowDown and ArrowUp step through the
+ * rows `usable` keeps (a disabled one is skipped), around the ends; in a
+ * grid of `columns`, ArrowRight and ArrowLeft step around the ends, ArrowDown
+ * and ArrowUp a whole row, stopping at the first and last; with `ends`, Home
+ * and End reach the first and last rows.
+ */
+export const stepRow = (key, at, count, { columns = 0, ends = false, usable = () => true } = {}) => {
+    const rows = [...Array(count).keys()].filter(usable);
+    const length = rows.length;
+    const down = { ArrowDown: 1, ArrowUp: -1 }[key];
+    const across = columns && { ArrowRight: 1, ArrowLeft: -1 }[key];
+    if (down && columns)
+        return Math.max(0, Math.min(length - 1, at + down * columns));
+    const step = down || across;
+    if (step)
+        return length ? rows[(rows.indexOf(at) + step + length) % length] : at;
+    if (ends && length && (key === 'Home' || key === 'End'))
+        return rows[key === 'Home' ? 0 : length - 1];
+};
+/**
+ * A key on a menu that holds the keyboard itself, not a field (WAI-ARIA's
+ * menu keys): the arrows, Home and End move its row (`stepRow`), Enter and
+ * Space pick it, Escape and Tab close it. Whether the key was the menu's
+ * (then its default is prevented).
+ */
+export const menuKey = (event, menu, steps) => {
+    const { key } = event;
+    const to = stepRow(key, menu.at, menu.count, { ends: true, ...steps });
+    if (to !== undefined)
+        menu.to(to);
+    else if (key === 'Enter' || key === ' ')
+        menu.pick();
+    else if (key === 'Escape' || key === 'Tab')
+        menu.close();
+    else
+        return false;
+    event.preventDefault();
+    return true;
+};
+/**
+ * A list's element (`{@attach controller.popup}`, named by its markup): it
+ * takes the list's id (`edytor.popups.idOf(owner)`) and its `role` unless
+ * it has its own, keeps the focus where it is on a press (a field takes its
+ * own), and is published to the view's root (`edytor.popups`, `role` its
+ * `aria-haspopup`) while `open` answers the rest of its record (its
+ * highlighted row, the control that opened it), withdrawn when it closes or
+ * leaves the page.
+ */
+export const listPopup = (edytor, owner, role, open = () => ({})) => (node) => {
+    const id = edytor.popups.idOf(owner);
+    node.id = id;
+    if (!node.hasAttribute('role'))
+        node.setAttribute('role', role);
+    const off = listen(node, 'mousedown', keepFocus);
+    $effect(() => {
+        const popup = open(node);
+        if (!popup)
+            return;
+        edytor.popups.set(owner, { id, haspopup: role, ...popup });
+        return () => edytor.popups.set(owner, null);
+    });
+    return off;
+};
+/**
+ * The element that holds a list's keyboard (a `keys` attachment's body): it
+ * takes the focus as it mounts (unless the focus is already in it), `keydown`
+ * hears the keys on `keyed` (the element itself by default), and it names
+ * the highlighted row (`aria-activedescendant`, once that row is in the
+ * page) when it may name one (a field, or an element with a role).
+ */
+export const holdKeys = (node, keydown, active, keyed = node) => {
+    untrack(() => {
+        if (!node.contains(node.ownerDocument.activeElement))
+            node.focus({ preventScroll: true });
+    });
+    const off = listen(keyed, 'keydown', keydown);
+    $effect(() => {
+        if (namesRows(node))
+            attribute(node, 'aria-activedescendant', inPage(node, active()));
+    });
+    return off;
+};
+/**
+ * The editor's keys for the list it keeps the keyboard for (a trigger's
+ * menu, the URL paste menu), while `open` answers one: ArrowDown and ArrowUp
+ * move its row, Enter picks it, Escape closes it.
+ */
+export const listHotkeys = (open) => {
+    const step = (by) => ({ prevent }) => {
+        const list = open();
+        if (list && list.move(by))
+            prevent();
+    };
+    return {
+        arrowdown: step(1),
+        arrowup: step(-1),
+        enter: ({ prevent }) => {
+            const list = open();
+            if (list && list.pick)
+                prevent(list.pick);
+        },
+        escape: ({ prevent }) => {
+            const list = open();
+            if (list)
+                prevent(list.close);
+        }
+    };
+};
+/**
+ * A chrome list and its keyboard's row (the trigger and slash menus, the
+ * code language list, the callout icon picker, the URL paste menu, a table
+ * grip's menu): the list's element (`popup`, its id `listId`), a row's id
+ * and attachment (`rowId`, `option`: rows are named by position) and the
+ * step the keys take (`move`). Each controller extends it with its rows,
+ * its keys and its actions.
+ */
+export class ChromeList {
+    edytor;
+    owner;
+    role;
+    /** The keyboard's row. */
+    index = $state(0);
+    /**
+     * The list's element (`{@attach controller.popup}`, named by your
+     * markup): its id and role unless it has its own, presses that keep the
+     * focus, and its publication to the view's root (`edytor.popups`) while
+     * it is open and in the page.
+     */
+    popup;
+    constructor(
+    /** @internal */
+    edytor, 
+    /** The list's name among the view's popups (`edytor.popups`). */
+    owner, 
+    /** Its role: a `listbox` the editor or a field keeps the keyboard for, or a `menu`. */
+    role, open) {
+        this.edytor = edytor;
+        this.owner = owner;
+        this.role = role;
+        this.popup = listPopup(edytor, owner, role, open);
+    }
+    /** The list's element id (page-unique), for `aria-controls`. */
+    get listId() {
+        return this.edytor.popups.idOf(this.owner);
+    }
+    /** Row `index`'s element id (page-unique), for `aria-activedescendant`. */
+    rowId = (index) => this.edytor.popups.idOf(`${this.owner}-${index}`);
+    /**
+     * Row `index`'s attachment (`{@attach controller.option(index)}`): its
+     * id, its role and `aria-selected` (a `listbox`'s); the keyboard's row
+     * scrolls into view. Its look is the markup's (`index === this.index`).
+     */
+    option(index) {
+        const role = this.role === 'menu' ? 'menuitem' : 'option';
+        return optionAttachment(this.rowId(index), role, index === this.index);
+    }
+    /** Move the keyboard's row by `step`, around the ends; `false` when there is no row. */
+    move = (step) => {
+        const count = this.count;
+        if (count)
+            this.index = (this.index + step + count) % count;
+        return count > 0;
+    };
+}

package/dist/plugins/markdownShortcuts.d.ts

@@ -1,3 +1,3 @@
 import type { Plugin } from '../plugins.js';
 /** Markdown prefixes come from the kind catalogue: a row whose shortcut the typed character completes. */
-export declare const markdownShortcutsPlugin: Plugin;
+export declare const createMarkdownShortcutsPlugin: () => Plugin;

package/dist/plugins/markdownShortcuts.js

@@ -1,5 +1,6 @@
 import { convertToKind } from '../kinds.js';
 import { jsonEquals } from '../utils/json.js';
+import { withRulesAndTriggers } from './triggers/triggers.js';
 /**
  * Notion's inline markdown, completed by the typed closing character: the
  * mark, the opening marker's start and length, the content's length and
@@ -60,7 +61,7 @@ const shortcutRow = (kinds, block, typed) => {
     return best ?? kinds.find((kind) => kind.markdown?.includes(typed));
 };
 /** Markdown prefixes come from the kind catalogue: a row whose shortcut the typed character completes. */
-export const markdownShortcutsPlugin = (edytor) => {
+export const createMarkdownShortcutsPlugin = () => (edytor) => {
     /** The catalogue's prefixes as one pattern, from a text's start (built once the catalogue is). */
     let prefixes = null;
     const prefixPattern = () => {
@@ -90,15 +91,15 @@ export const markdownShortcutsPlugin = (edytor) => {
             if (!text)
                 return false;
             const { id } = block;
-            // The segment's start, in block offsets: the caret, less the text before it.
-            const at = to - before.length + found.start;
+            // The segment's start, in block offsets: the caret (after the typed text), less the text before it.
+            const at = to - match.input.length + found.start;
             const { facade, dispatcher } = edytor;
-            const plan = () => facade.compose(facade.prepare.setMark(id, at + found.open, found.content, found.mark, true), ...(found.closing
-                ? [facade.prepare.deleteText(id, at + found.open + found.content, found.closing)]
-                : []), facade.prepare.deleteText(id, at, found.open));
+            const plan = () => facade.compose(facade.prepare.formatRange(id, at + found.open, found.content, { [found.mark]: true }), 
+            // The closing marker, the typed character with it.
+            facade.prepare.deleteText(id, at + found.open + found.content, found.closing + typed.length), facade.prepare.deleteText(id, at, found.open));
             const payload = { value: typed, start: before.length, end: before.length };
-            const applied = dispatcher.dispatch('inlineMarkdown', payload, { block, text }, (_p, prepared = plan()) => ('writes' in prepared ? facade.apply(prepared) : null), plan);
-            if (!applied)
+            const result = dispatcher.plan('inlineMarkdown', payload, plan, block, text);
+            if (result.status !== 'applied')
                 return false;
             // Typing after the shortcut continues without the mark.
             edytor.selection.stage({});
@@ -132,5 +133,5 @@ export const markdownShortcutsPlugin = (edytor) => {
             return converted;
         }
     };
-    return { inputRules: [inline, prefix] };
+    return withRulesAndTriggers(edytor, {}, { inputRules: [inline, prefix] });
 };

package/dist/plugins/marquee/MarqueeBox.svelte

@@ -4,29 +4,12 @@
 
 	/**
 	 * The marquee's rectangle, in its overlay host (placed and sized to the
-	 * rectangle by the plugin's measure): the default box, or the app's `box`.
+	 * rectangle by the plugin's measure): the app's `box`.
 	 */
-	let { controller, box }: { controller: MarqueeController; box?: Snippet<[MarqueeBoxPayload]> } =
+	let { controller, box }: { controller: MarqueeController; box: Snippet<[MarqueeBoxPayload]> } =
 		$props();
 
 	const payload = $derived(controller.payload);
 </script>
 
-{#if payload}
-	{#if box}
-		{@render box(payload)}
-	{:else}
-		<div data-edytor-marquee data-adding={payload.adding ? 'true' : undefined}></div>
-	{/if}
-{/if}
-
-<style>
-	[data-edytor-marquee] {
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		background: var(--edytor-marquee-background, rgba(35, 131, 226, 0.14));
-		border: var(--edytor-marquee-border, 1px solid rgba(35, 131, 226, 0.4));
-		border-radius: var(--edytor-marquee-radius, 2px);
-	}
-</style>
+{#if payload}{@render box(payload)}{/if}

package/dist/plugins/marquee/MarqueeBox.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { MarqueeBoxPayload, MarqueeController } from './MarqueeController.svelte.js';
 type $$ComponentProps = {
     controller: MarqueeController;
-    box?: Snippet<[MarqueeBoxPayload]>;
+    box: Snippet<[MarqueeBoxPayload]>;
 };
 declare const MarqueeBox: import("svelte").Component<$$ComponentProps, {}, "">;
 type MarqueeBox = ReturnType<typeof MarqueeBox>;

package/dist/plugins/marquee/MarqueeController.svelte.d.ts

@@ -32,8 +32,6 @@ export declare class MarqueeController {
     /** Shift or Mod was held at the press (reactive). */
     adding: boolean;
     constructor(edytor: Edytor, threshold: number);
-    /** Whether a press is down that may still become (or is) a marquee. */
-    get pressing(): boolean;
     /** What a `box` snippet receives. */
     get payload(): MarqueeBoxPayload | null;
     /**