edytor 1.0.0 → 3.0.0

package/dist/plugins/blockHandles/BlockHandles.svelte

@@ -10,7 +10,7 @@
 	import type { BlockHandleController } from './BlockHandleController.svelte.js';
 	import { gapBefore, handleSpan } from '../columns/gaps.js';
 	import { renderSkipped, rendered } from '../../surface/overlay.js';
-	import { getOwnRowBottom } from './geometry.js';
+	import { getOwnRowBottom } from '../../dnd/geometry.js';
 
 	/**
 	 * The handles, in the overlay: one per registered movable block that
@@ -201,14 +201,15 @@
 		pointer-events: none;
 	}
 
-	/* Over a gap between two columns (one hit rule, the handles'): the handle
-	 * spans the gap right of the column resize band, its `+` (compact) and its
-	 * grip together flush with its block (Notion's "+ ⋮⋮"), and its box takes
-	 * the pointer at its block's whole row, shown or not — a pointer there
-	 * hovers the block, so its grip is reached from any side. The band is the
-	 * gap's left part (`columns/gaps.ts`, one measurement): at the default
-	 * 46px gap (10 + 18 + 18) neither button is under it, and where its guide
-	 * shows a press resizes. */
+	/* Over a gap between two columns (one hit rule, the handles'): the handle's
+	 * box spans the gap right of the column resize band, centered in the gap
+	 * (`columns/gaps.ts`, one measurement), and takes the pointer at its
+	 * block's whole row, shown or not — a pointer there hovers the block, so
+	 * its grip is reached from any side. Its `+` (compact) and grip stand
+	 * together flush with its block (Notion's "+ ⋮⋮"), never shrunk: wider
+	 * than the box, the `+` reaches left under the band (the resizers' layer
+	 * is above the handles'): where the band's guide shows, at every height,
+	 * a press resizes; the `+`'s part left of the band takes its own. */
 	[data-edytor-block-handle-host][data-over-gap='true'] {
 		box-sizing: border-box;
 		width: var(--edytor-handle-gap-width, auto);
@@ -216,6 +217,10 @@
 		padding-inline-end: 0;
 	}
 
+	[data-edytor-block-handle-host][data-over-gap='true'] > :global(*) {
+		flex-shrink: 0;
+	}
+
 	[data-edytor-block-handle-host][data-over-gap='true']::before {
 		content: '';
 		position: absolute;
@@ -238,27 +243,4 @@
 			padding-inline-end: 0;
 		}
 	}
-
-	/* Where a handle's drag lands (`DropIndicator`): the bar (4px) and the nest
-	 * backdrop, placed in the overlay and shown (`data-shown`) by the plugin;
-	 * their look is a theme's (`edytor/themes/notion.css`). */
-	:global([data-edytor-drop-indicator]),
-	:global([data-edytor-drop-backdrop]) {
-		position: absolute;
-		pointer-events: none;
-	}
-
-	:global([data-edytor-drop-indicator]) {
-		z-index: 100;
-		box-sizing: border-box;
-		height: 4px;
-	}
-
-	:global([data-edytor-drop-backdrop]) {
-		z-index: 99;
-	}
-
-	:global([data-edytor-drop-backdrop]:not([data-shown='true'])) {
-		visibility: hidden;
-	}
 </style>

package/dist/plugins/blockHandles/blockHandlesPlugin.js

@@ -3,6 +3,7 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import BlockHandles from './BlockHandles.svelte';
 import { BlockHandleController } from './BlockHandleController.svelte.js';
 import { hidden } from '../../selection/visibility.js';
+import { isDropTarget } from '../../dnd/placement.js';
 import { all, listen } from '../../utils/listen.js';
 /**
  * Block handles in the overlay, created lazily: a handle mounts
@@ -123,7 +124,7 @@ export const createBlockHandlesPlugin = (options = {}) => (edytor) => {
         },
         onBlockAttached: ({ node, block }) => {
             // A table's rows move by its own row menus, its cells never (`table.fits`).
-            if (!block.movable || edytor.facade.isTableRow(block.id))
+            if (!isDropTarget(edytor, block))
                 return;
             const offDropTarget = controller.addDropTarget(node, block);
             // A layout and its columns are drop targets but have no handle (as

package/dist/plugins/blockHandles/dragPreview.d.ts

@@ -1,10 +1,3 @@
-/**
- * Notion's drag ghost: a copy of the dragged blocks, rendered as they look in
- * the editor, scaled down, that follows the pointer (the browser adds its own
- * drag-image translucency). Cloned once when the drag starts and mounted by
- * the drag library for the frame the browser takes its picture
- * (`setCustomNativeDragPreview`), then removed with it.
- */
 export type DragPreview = {
     /** The ghost, `[data-edytor-drag-preview]`, to mount in the drag library's container. */
     element: HTMLElement;
@@ -33,3 +26,29 @@ export declare const dragPreview: (root: HTMLElement, nodes: HTMLElement[], poin
     clientX: number;
     clientY: number;
 }, columns?: number[]) => DragPreview;
+type Pointer = {
+    clientX: number;
+    clientY: number;
+};
+/**
+ * One of the editor's own drags from `element` (a block's handle, a table's
+ * grip): `canDrag` asks whether it may start, `data` is what its targets
+ * read, `id` the block another view sees it carry (no view takes it as a
+ * foreign drop); `begin` runs as it starts (the ghost and the targets),
+ * `start` once it has, and `end` after the drop target's own drop (the drag
+ * library tells the source first).
+ */
+export declare const dragSource: (element: HTMLElement, { canDrag, data, id, begin, start, end }: {
+    canDrag: () => boolean;
+    data: () => Record<string | symbol, unknown>;
+    id: () => string;
+    begin: (pointer: Pointer, setImage: DataTransfer["setDragImage"] | null) => void;
+    start?: () => void;
+    end: (dropped: boolean) => void;
+}) => import("../../dnd/vendor/pragmatic/pragmatic-drag-and-drop/internal-types").CleanupFn;
+/**
+ * The drag's ghost (`dragPreview` of `nodes` under `root`), mounted for the
+ * browser's picture of it, when the drag has an image to set.
+ */
+export declare const ghost: (setImage: DataTransfer["setDragImage"] | null, root: HTMLElement | null | undefined, nodes: HTMLElement[], pointer: Pointer, columns?: number[]) => void;
+export {};

package/dist/plugins/blockHandles/dragPreview.js

@@ -1,3 +1,5 @@
+import { draggable, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
+import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
 /**
  * Notion's drag ghost: a copy of the dragged blocks, rendered as they look in
  * the editor, scaled down, that follows the pointer (the browser adds its own
@@ -227,3 +229,34 @@ export const dragPreview = (root, nodes, pointer, columns) => {
     };
     return { element, offset };
 };
+/**
+ * One of the editor's own drags from `element` (a block's handle, a table's
+ * grip): `canDrag` asks whether it may start, `data` is what its targets
+ * read, `id` the block another view sees it carry (no view takes it as a
+ * foreign drop); `begin` runs as it starts (the ghost and the targets),
+ * `start` once it has, and `end` after the drop target's own drop (the drag
+ * library tells the source first).
+ */
+export const dragSource = (element, { canDrag, data, id, begin, start, end }) => draggable({
+    element,
+    canDrag,
+    getInitialData: data,
+    getInitialDataForExternal: () => ({ [EDYTOR_BLOCK_DRAG_MIME]: id() }),
+    onGenerateDragPreview: ({ nativeSetDragImage, location }) => begin(location.current.input, nativeSetDragImage),
+    onDragStart: start,
+    onDrop: ({ location }) => queueMicrotask(() => end(location.current.dropTargets.length > 0))
+});
+/**
+ * The drag's ghost (`dragPreview` of `nodes` under `root`), mounted for the
+ * browser's picture of it, when the drag has an image to set.
+ */
+export const ghost = (setImage, root, nodes, pointer, columns) => {
+    if (!setImage || !root || !nodes.length)
+        return;
+    const preview = dragPreview(root, nodes, pointer, columns);
+    setCustomNativeDragPreview({
+        nativeSetDragImage: setImage,
+        getOffset: preview.offset,
+        render: ({ container }) => container.append(preview.element)
+    });
+};

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

@@ -69,6 +69,11 @@ export declare class BlockMenuController {
      * after). Delete and Turn into act on their `members`, its items too.
      */
     blocks: Block[];
+    /**
+     * Where the menu stands: the handle that opened it (a `ChromeAnchor`:
+     * your `menu` places itself beside it, its flyout beside the menu);
+     * `null` while closed.
+     */
     anchor: HTMLElement | null;
     query: string;
     /** The keyboard's row. */

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

@@ -63,7 +63,12 @@ export class BlockMenuController {
      * after). Delete and Turn into act on their `members`, its items too.
      */
     blocks = $state([]);
-    anchor = null;
+    /**
+     * Where the menu stands: the handle that opened it (a `ChromeAnchor`:
+     * your `menu` places itself beside it, its flyout beside the menu);
+     * `null` while closed.
+     */
+    anchor = $state.raw(null);
     query = $state('');
     /** The keyboard's row. */
     index = $state(0);
@@ -473,7 +478,7 @@ export class BlockMenuController {
     caret(block) {
         const text = block && shownText(block, 'first');
         if (text || !block?.isInTree)
-            this.edytor.dispatcher.caret(text, 0);
+            this.edytor.dispatcher.caretIn(text, 0);
         else
             this.edytor.selection.select(blockSelection([block.id]));
         this.focus();

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -11,14 +11,9 @@ import { BlockMenuController, colorCommands } from './BlockMenuController.svelte
 export const createBlockMenuPlugin = (options = {}) => (edytor) => {
     const controller = new BlockMenuController(edytor, options);
     /**
-     * Beside the handle: 8px right of it, top-aligned; left of it when the
-     * right has no room; flipped up when the space below is short. The Turn
-     * into flyout opens right of the menu, or left of it when the right has
-     * no room, top-aligned with it, moved up as far as the viewport needs
-     * (never above its top edge), and scrolls inside when taller (Notion):
-     * every row is in the viewport, reachable by the mouse. It follows
-     * scrolls and resizes, and closes when the handle leaves the view.
-     * Measured in the overlay's frame; the placement (or the close) is written after.
+     * The menu places itself by `controller.anchor` (the handle), its
+     * flyout by the menu; measured in the overlay's frame, the menu closes
+     * when the handle leaves the page or the view.
      */
     const close = () => controller.close(false);
     const place = (host) => {
@@ -27,50 +22,10 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
             return;
         if (!anchor?.isConnected)
             return close;
-        const view = host.ownerDocument.defaultView;
-        const menu = host.querySelector('[data-edytor-block-menu]') ??
-            host.firstElementChild;
-        if (!view || !menu)
-            return;
-        const [gap, edge, between] = [8, 8, 4];
         const rect = anchor.getBoundingClientRect();
-        if (rect.bottom < 0 || rect.top > view.innerHeight)
+        const height = host.ownerDocument.defaultView?.innerHeight ?? Infinity;
+        if (rect.bottom < 0 || rect.top > height)
             return close;
-        // Layout sizes, not the box: the menus open with a scale (0.98 → 1), and a
-        // box read mid-animation would place them up to 2% short of their size.
-        const [width, height] = [menu.offsetWidth, menu.offsetHeight];
-        const right = rect.right + gap;
-        const left = rect.left - gap - width;
-        let x = right + width <= view.innerWidth - edge
-            ? right
-            : left >= edge
-                ? left
-                : Math.max(edge, Math.min(right, view.innerWidth - edge - width));
-        const y = rect.top + height <= view.innerHeight - edge
-            ? rect.top
-            : Math.max(edge, Math.min(rect.bottom, view.innerHeight - edge) - height);
-        const flyout = host.querySelector('[data-edytor-block-menu-flyout]');
-        const frame = flyout?.parentElement;
-        let side = '';
-        let shift = '';
-        if (flyout && frame) {
-            const box = { width: flyout.offsetWidth, height: flyout.offsetHeight };
-            // Left of the menu when its right has no room (the menu stays where it is).
-            if (x + width + between + box.width > view.innerWidth - edge &&
-                x - between - box.width >= edge) {
-                side = 'row-reverse';
-                x -= between + box.width;
-            }
-            const top = Math.max(edge, Math.min(y, view.innerHeight - edge - box.height));
-            shift = `${top - y}px`;
-        }
-        return () => {
-            Object.assign(host.style, { left: `${x}px`, top: `${y}px` });
-            if (frame)
-                frame.style.flexDirection = side;
-            if (flyout)
-                flyout.style.marginTop = shift;
-        };
     };
     return {
         // Colours by name in the slash menu (`/red`), as in Notion.

package/dist/plugins/chrome.d.ts

@@ -9,17 +9,33 @@ import type { Snippet } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../edytor.svelte.js';
 import { type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
+/**
+ * Where a chrome surface stands, for the app's markup to place itself
+ * (Floating UI's virtual element: `computePosition(anchor, floating, …)`,
+ * or bits-ui's `customAnchor`): its box read now, in client pixels, on
+ * every call (the caret, the selection, a block, a grip, a button), and
+ * the element whose scrolling ancestors move it. The package places no
+ * popup.
+ */
+export type ChromeAnchor = {
+    getBoundingClientRect: () => DOMRect;
+    readonly contextElement?: Element;
+};
+/** A {@link ChromeAnchor} reading `rect` (an empty box while there is none) inside `context`. */
+export declare const virtualAnchor: (rect: () => DOMRect | null | undefined, context: () => Element | null | undefined) => ChromeAnchor;
 /**
  * Mount the app's `snippet` for a chrome surface in a fixed host of the
- * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
- * while `shown` holds and closed (`close`) when the view turns readonly.
- * Without a snippet the surface renders nothing (its controller still
- * works): nothing is mounted. Answers the teardown.
+ * overlay (`data-<name>`), rendered with `payload` while `shown` holds and
+ * closed (`close`) when the view turns readonly; the markup places itself
+ * by its controller's `anchor`. `measure` runs on the overlay's frames (a
+ * surface whose anchor left the page closes there). Without a snippet the
+ * surface renders nothing (its controller still works): nothing is
+ * mounted. Answers the teardown.
  */
 export declare const mountChrome: <T>(edytor: Edytor, snippet: Snippet<[T]> | undefined, payload: T, shown: () => unknown, place: {
     name: string;
     zIndex: number;
-    measure: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
+    measure?: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
 }, close?: () => void) => () => void;
 /**
  * One row of a chrome list a controller builds for the app's markup: the
@@ -68,6 +84,12 @@ export declare const identify: (node: HTMLElement, id: string, role?: string) =>
 export declare const attribute: (node: HTMLElement, name: string, value: string | undefined) => void;
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export declare const namesRows: (node: HTMLElement) => boolean;
+/**
+ * Every press in `document` (capture; WebKit's lone `mousedown` after a
+ * drag too, `onPress`) outside the elements `inside` matches: `outside`
+ * hears it. Answers the teardown.
+ */
+export declare const onPressOutside: (edytor: Edytor, document: Document, inside: string, outside: (event: MouseEvent) => void) => () => void;
 /**
  * A handle menu's events on the editor `node` (the block menu, the `+`'s
  * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer

package/dist/plugins/chrome.js

@@ -2,15 +2,24 @@ import Chrome from './Chrome.svelte';
 import { onPress } from '../events/onFocus.js';
 import { all, listen } from '../utils/listen.js';
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
+/** A {@link ChromeAnchor} reading `rect` (an empty box while there is none) inside `context`. */
+export const virtualAnchor = (rect, context) => ({
+    getBoundingClientRect: () => rect() ?? new DOMRect(),
+    get contextElement() {
+        return context() ?? undefined;
+    }
+});
 /**
  * Mount the app's `snippet` for a chrome surface in a fixed host of the
- * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
- * while `shown` holds and closed (`close`) when the view turns readonly.
- * Without a snippet the surface renders nothing (its controller still
- * works): nothing is mounted. Answers the teardown.
+ * overlay (`data-<name>`), rendered with `payload` while `shown` holds and
+ * closed (`close`) when the view turns readonly; the markup places itself
+ * by its controller's `anchor`. `measure` runs on the overlay's frames (a
+ * surface whose anchor left the page closes there). Without a snippet the
+ * surface renders nothing (its controller still works): nothing is
+ * mounted. Answers the teardown.
  */
 export const mountChrome = (edytor, snippet, payload, shown, place, close) => snippet
-    ? edytor.overlay.mount((Chrome), { edytor, snippet, payload, shown, close }, place.name, place.zIndex, place.measure)
+    ? edytor.overlay.mount((Chrome), { edytor, snippet, payload, shown, close }, place.name, place.zIndex, place.measure ?? (() => { }))
     : () => { };
 /**
  * Write `value` as `node`'s attribute `name`, only when it changes:
@@ -74,6 +83,15 @@ export const attribute = (node, name, value) => {
 };
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export const namesRows = (node) => isField(node) || node.hasAttribute('role');
+/**
+ * Every press in `document` (capture; WebKit's lone `mousedown` after a
+ * drag too, `onPress`) outside the elements `inside` matches: `outside`
+ * hears it. Answers the teardown.
+ */
+export const onPressOutside = (edytor, document, inside, outside) => onPress(edytor, document, (event) => {
+    if (!event.target?.closest?.(inside))
+        outside(event);
+}, true);
 /**
  * A handle menu's events on the editor `node` (the block menu, the `+`'s
  * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer
@@ -81,7 +99,4 @@ export const namesRows = (node) => isField(node) || node.hasAttribute('role');
  * matches (WebKit's lone `mousedown` after a drag too, `onPress`). Answers
  * the teardown.
  */
-export const handleMenuEvents = (edytor, node, activate, add, inside, outside) => all(listen(node, BLOCK_ACTIVATE_EVENT, activate), listen(node, BLOCK_ADD_EVENT, add), onPress(edytor, node.ownerDocument, (event) => {
-    if (!event.target?.closest?.(inside))
-        outside();
-}, true));
+export const handleMenuEvents = (edytor, node, activate, add, inside, outside) => all(listen(node, BLOCK_ACTIVATE_EVENT, activate), listen(node, BLOCK_ADD_EVENT, add), onPressOutside(edytor, node.ownerDocument, inside, outside));

package/dist/plugins/code/CodeHeader.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte';
 	import type { BlockView } from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { DEFAULT_CODE_SETTINGS, codeSettings } from './languages.js';
+	import { DEFAULT_CODE_SETTINGS } from './languages.js';
 	import { languageMenus } from './languageMenu.svelte.js';
 	import { CodeHeader } from './header.svelte.js';
 
@@ -14,8 +14,10 @@
 
 	/** The options of the view rendering it (a suggestion's preview included). */
 	const edytor = getContext<Edytor>('edytor');
-	const settings = codeSettings.get(edytor) ?? DEFAULT_CODE_SETTINGS;
-	const header = new CodeHeader(() => block, settings, languageMenus.get(edytor));
+	// The first code plugin listed owns the view's options (it draws the kind).
+	const menu = languageMenus.get(edytor);
+	const settings = menu?.settings ?? DEFAULT_CODE_SETTINGS;
+	const header = new CodeHeader(() => block, settings, menu);
 	$effect(() => header.dispose);
 </script>
 

package/dist/plugins/code/CodePlugin.svelte

@@ -1,19 +1,18 @@
 <script module lang="ts">
+	import { codeForms } from '../../export/forms.js';
 	import './code.css';
 	import type { Plugin, MarkSnippetPayload, BlockSnippetPayload } from '../../plugins.js';
 	import { Text } from '../../text/text.svelte.js';
 	import { runIntent } from '../../events/beforeInputCommands.js';
-	import { codeKinds } from '../../crdt/semantics.js';
+
 	import { shown } from '../../selection/visibility.js';
 	import { caretBeside } from '../../selection/replaceSelection.js';
 	import { siblingSlot } from '../../session/handles.js';
 	import CodeHeader from './CodeHeader.svelte';
-	import LanguageMenuPanel from './LanguageMenu.svelte';
 	import { LanguageMenu, languageMenus } from './languageMenu.svelte.js';
 	import { codeEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import {
 		DEFAULT_CODE_SETTINGS,
-		codeSettings,
 		languageOf,
 		tokenizeCode,
 		type CodePluginOptions,
@@ -47,8 +46,9 @@
 				header: options.header,
 				menu: options.menu
 			};
-			codeSettings.set(edytor, own);
-			// The view's language list: the first code plugin listed owns it.
+			// The view's code options and language list: the first code plugin
+			// listed owns them, as it draws the kind (first listed wins); the
+			// header reads them from it.
 			if (edytor && !languageMenus.has(edytor))
 				languageMenus.set(edytor, new LanguageMenu(edytor, own));
 			const ownMenu = () => {
@@ -115,7 +115,7 @@
 				onEdytorAttached: ({ node }) => {
 					const menu = ownMenu();
 					const snippet = menu?.settings.menu;
-					return snippet && menu.panel.mount(node, LanguageMenuPanel, { menu, snippet });
+					return snippet && menu.panel.mount(node, snippet, menu, () => menu.open !== null);
 				},
 				hotkeys: {
 					// Alt+F10 at a caret in a code line: the keys go to its language button
@@ -174,7 +174,7 @@
 								edytor.idToBlock.get(
 									edytor.insertBlocks(siblingSlot(line), [{ type: 'codeLine' }]).ids[0] ?? ''
 								);
-							return prevent(() => edytor.dispatcher.caret(next()?.firstText, 0));
+							return prevent(() => edytor.dispatcher.caretIn(next()?.firstText, 0));
 						}
 						prevent(() => runIntent(edytor, 'insertParagraph'));
 					}
@@ -189,7 +189,10 @@
 						prevent(() => {
 							const before = caretBeside(block, 'blockBefore', new Set([block]));
 							edytor.deleteBlock(block.id);
-							edytor.dispatcher.caret(before?.text ?? code.firstEditableText, before?.offset ?? 0);
+							edytor.dispatcher.caretIn(
+								before?.text ?? code.firstEditableText,
+								before?.offset ?? 0
+							);
 						});
 					}
 					// Backspace in an empty block right after a code block removes it; the
@@ -202,7 +205,7 @@
 						prevent(() => {
 							edytor.deleteBlock(block.id);
 							const text = previous.lastText;
-							edytor.dispatcher.caret(text, text?.length ?? 0);
+							edytor.dispatcher.caretIn(text, text?.length ?? 0);
 						});
 					}
 					if (block.type !== 'codeLine') return;
@@ -213,7 +216,7 @@
 						const [at, line] = [offset - startText.segStart, startText.stringContent];
 						// A closer typed before the same character steps over it.
 						if (CLOSERS.has(value) && line[at] === value) {
-							prevent(() => edytor.dispatcher.caret(startText, at + 1));
+							prevent(() => edytor.dispatcher.caretIn(startText, at + 1));
 						}
 						// Quotes pair only at a word boundary: the apostrophe in `don't` stays single.
 						const inWord = QUOTES.has(value) && /\w/.test((line[at - 1] ?? '') + (line[at] ?? ''));
@@ -230,7 +233,7 @@
 
 				blocks: {
 					code: {
-						...codeKinds.code,
+						...codeForms().code,
 						snippet: code,
 						presets: [
 							{
@@ -244,8 +247,8 @@
 						empty: { content: [], children: [{ type: 'codeLine', content: [{ text: '' }] }] }
 					},
 					codeLine: {
+						...codeForms().codeLine,
 						snippet: codeLine,
-						html: (_, content) => `<pre><code>${content}</code></pre>`,
 						transformText: ({ text, block }) =>
 							tokenizeCode(text.stringContent, lineLanguage(block.id)),
 						// A line holding newlines keeps its first line; each other becomes a code line after it.

package/dist/plugins/code/header.svelte.js

@@ -9,6 +9,7 @@ import { Text } from '../../text/text.svelte.js';
 import { attribute } from '../chrome.js';
 import { languageOf } from './languages.js';
 import { all, listen } from '../../utils/listen.js';
+import { keysOf } from '../list.svelte.js';
 /** How long Copy reads Copied after a copy, in milliseconds. */
 const COPIED_FOR = 1200;
 /** A code block's text: its lines, joined by newlines. */
@@ -112,17 +113,12 @@ export class CodeHeader {
         const mousedown = (event) => event.preventDefault();
         // A click from Enter or Space has no pointer (`detail` 0): the keys opened it.
         const click = (event) => this.toggle(event.detail === 0);
-        const keydown = (event) => {
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                if (!this.expanded)
-                    this.toggle(true);
-            }
-            else if (event.key === 'Escape')
-                this.menu?.release();
-            else
-                return;
-            event.preventDefault();
-        };
+        const open = () => this.expanded || this.toggle(true);
+        const keydown = keysOf({
+            ArrowDown: open,
+            ArrowUp: open,
+            Escape: () => this.menu?.release()
+        });
         const off = listen(node, 'mousedown', mousedown);
         const off2 = listen(node, 'click', click);
         const off3 = listen(node, 'keydown', keydown);

package/dist/plugins/code/languageMenu.svelte.d.ts

@@ -41,8 +41,11 @@ export declare class LanguageMenu extends ChromeList {
     } | null;
     /** The search field's text. */
     query: string;
-    /** The view is readonly (reactive): the list closes. */
-    get readonly(): boolean;
+    /**
+     * Where the list stands: the open block's language button
+     * (`ChromeAnchor`), which your `menu` places itself under.
+     */
+    get anchor(): import("../chrome.js").ChromeAnchor;
     /** The open block's language id. */
     get current(): string | null;
     /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */

package/dist/plugins/code/languageMenu.svelte.js

@@ -1,7 +1,7 @@
 import { untrack } from 'svelte';
 import { takeKeys } from '../../events/onFocus.js';
 import { attribute } from '../chrome.js';
-import { ChromeList, holdKeys } from '../list.svelte.js';
+import { ChromeList, holdKeys, keysOf } from '../list.svelte.js';
 import { Anchored } from '../anchored.svelte.js';
 import { languageOf } from './languages.js';
 import { all, listen } from '../../utils/listen.js';
@@ -40,9 +40,12 @@ export class LanguageMenu extends ChromeList {
         this.settings = settings;
         this.panel = new Anchored(edytor, 'edytor-code-language-host', () => (this.open ? this.#button(this.open.block) : undefined), () => this.close());
     }
-    /** The view is readonly (reactive): the list closes. */
-    get readonly() {
-        return this.edytor.readonly;
+    /**
+     * Where the list stands: the open block's language button
+     * (`ChromeAnchor`), which your `menu` places itself under.
+     */
+    get anchor() {
+        return this.panel.anchor;
     }
     /** The open block's language id. */
     get current() {
@@ -121,7 +124,6 @@ export class LanguageMenu extends ChromeList {
         if (!open)
             return;
         this.open = null;
-        this.panel.box = null;
         this.query = '';
         this.edytor.overlay.invalidate();
         if (keys === 'button')
@@ -152,21 +154,12 @@ export class LanguageMenu extends ChromeList {
         return all(off, off2);
     });
     /** The search field's keys (`keys`). */
-    #keydown = (event) => {
-        if (event.isComposing)
-            return;
-        const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
-        if (step)
-            this.move(step);
-        else if (event.key === 'Enter')
-            this.pick();
-        else if (event.key === 'Escape')
-            this.close(this.open?.keys ? 'button' : 'editor');
-        else
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-    };
+    #keydown = keysOf({
+        ArrowDown: () => this.move(1),
+        ArrowUp: () => this.move(-1),
+        Enter: () => this.pick(),
+        Escape: () => this.close(this.open?.keys ? 'button' : 'editor')
+    }, true);
     /**
      * The keys back to the editor from a language button (its Escape): the
      * host takes the focus, the caret shown where the selection is.

package/dist/plugins/code/languages.d.ts

@@ -7,7 +7,6 @@
  */
 import { type LanguageDefinition } from '@tanstack/highlight/core';
 import type { JSONText } from '../../utils/json.js';
-import type { Edytor } from '../../edytor.svelte.js';
 import type { Snippet } from 'svelte';
 import type { CodeHeader } from './header.svelte.js';
 import type { LanguageMenu } from './languageMenu.svelte.js';
@@ -68,8 +67,6 @@ export type CodeSettings = {
     menu?: Snippet<[LanguageMenu]>;
 };
 export declare const DEFAULT_CODE_SETTINGS: CodeSettings;
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export declare const codeSettings: WeakMap<Edytor, CodeSettings>;
 /** A code block's language id: its `data.language`, else the default. */
 export declare const languageOf: (data: {
     language?: unknown;

package/dist/plugins/code/languages.js

@@ -99,7 +99,5 @@ export const DEFAULT_CODE_SETTINGS = {
     languages: CODE_LANGUAGES,
     defaultLanguage: 'javascript'
 };
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export const codeSettings = new WeakMap();
 /** A code block's language id: its `data.language`, else the default. */
 export const languageOf = (data, { defaultLanguage }) => (typeof data?.language === 'string' && data.language ? data.language : defaultLanguage);