@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/Editor.svelte

@@ -1,34 +1,23 @@
 <script lang="ts">
-	import { getContext, setContext, tick, untrack } from 'svelte';
-	import { Bold, Check, Code, GripVertical, Italic, Link, Plus, RemoveFormatting, Replace, Strikethrough, Subscript, Superscript, Trash2, Underline, Ungroup } from '@lucide/svelte';
-	import {
-		rich,
-		clean,
-		textLen,
-		splitAtCaret,
-		atStart,
-		atEnd,
-		caretOffset,
-		caretRect,
-		caretAt,
-		setCaret,
-		removeBeforeCaret,
-		onEdgeLine,
-		focusAtEdge,
-		toggleCode,
-		plainText
-	} from './dom';
+	import { tick, untrack } from 'svelte';
+	import { ArrowDown, ArrowUp, Bold, Check, Code, GripVertical, Italic, Link, Plus, RemoveFormatting, Replace, Strikethrough, Subscript, Superscript, Trash2, Underline, Ungroup } from '@lucide/svelte';
+	import { rich, clean, textLen, splitAtCaret, atStart, atEnd, caretOffset, caretRect, caretAt, setCaret, removeBeforeCaret, onEdgeLine, focusAtEdge, toggleCode, plainText, portal } from './dom';
 	import { fromMarkdown, fromStored, plainHtml, toMarkdown, toStored } from './markdown';
+	import { fromHtml } from './html';
 	import { useCodeLanguages } from './code';
 	import { provideText, useText, type Messages } from './i18n';
 	import { PopupContainer, createPopupManager, getPopupManager } from '@atom-forge/ui';
 	import LinkPrompt from './LinkPrompt.svelte';
 	import PluginHost from './PluginHost.svelte';
 	import PropsBar from './PropsBar.svelte';
+	import BlockMenu, { type MenuRow } from './editor/BlockMenu.svelte';
+	import FormatBar from './editor/FormatBar.svelte';
+	import { History } from './editor/history';
+	import { createSweep } from './editor/sweep.svelte';
+	import { createDrag, useHub } from './editor/drag.svelte';
 	import { acceptsId, BUILT_IN_IDS, PALETTE_ITEMS, type Icon, type PaletteItem } from './palette';
 	import { MAX_INDENT, newBlock, numbering, uid, type Block, type BlockPlugin, type BlockType, type StoredBlock, type PropField, type Content, BUILT_IN_CONTENT, isMd, MD } from './types';
 
-	const HUB = 'block-editor:hub';
 
 	interface Props {
 		/** The document: built-in blocks as markdown snippets, plugin blocks with their props. */
@@ -72,21 +61,50 @@
 	const pluginOf = (type: string | undefined) => plugins.find((p) => p.type === type);
 	/** Blocks the caret cannot enter from outside: dividers and plugin blocks. */
 	const atomic = (b: Block) => b.type === 'hr' || b.type === 'plugin';
+	/** Rendering on the server: the blocks' text goes into the markup (in the browser the `rich` action puts it in). */
+	const ssr = typeof document === 'undefined';
 
 	/* ------------------------------------------------------------ document io */
 
-	// The editor works on html blocks; `doc` is their markdown form, written back on every change.
+	// The editor works on html blocks; `doc` is their markdown form, written back on every change (not when read-only:
+	// showing a document must not change it).
 	const load = (d: StoredBlock[]) => (d.length ? d.map(fromStored) : [newBlock()]);
 	let value = $state<Block[]>(load(doc));
-	let written = '';
+
+	// The stored form of a built-in block, kept while the block does not change: typing in one block converts only that
+	// block (its inline html goes through the DOM), and the others keep their objects, so a preview re-renders only it.
+	// Plugin blocks are cheap to convert and keep their `props` and `blocks` objects anyway.
+	const stored = new Map<string, { key: string; out: StoredBlock }>();
+	function storedOf(b: Block): StoredBlock {
+		if (b.type === 'plugin') return toStored(b);
+		const key = `${b.type}|${b.indent}|${b.checked ?? ''}|${b.props?.lang ?? ''}|${b.props?.start ?? ''}|${b.html}`;
+		const hit = stored.get(b.id);
+		if (hit?.key === key) return hit.out;
+		const out = toStored(b);
+		stored.set(b.id, { key, out });
+		return out;
+	}
+
+	// What we wrote last, and `doc` as read back after writing it (the host's state may wrap it in its own proxy).
+	let written: StoredBlock[] | null = null;
+	let readBack: unknown = untrack(() => doc);
 	$effect(() => {
-		const out = value.map(toStored);
-		written = JSON.stringify(out);
+		const out = value.map(storedOf);
+		if (stored.size > out.length * 2) for (const id of [...stored.keys()]) if (!value.some((b) => b.id === id)) stored.delete(id);
+		if (untrack(() => readonly)) return;
+		written = out;
 		doc = out;
+		readBack = untrack(() => doc);
 	});
-	// A document replaced from outside (not by our own write) is loaded again.
+	// A document replaced from outside (not by our own write) is loaded again; an equal copy is not.
 	$effect(() => {
-		if (JSON.stringify(doc) !== written) value = load(doc);
+		const d = doc;
+		if (d === readBack) return;
+		readBack = d;
+		if (JSON.stringify(d) === JSON.stringify(written ?? untrack(() => value.map(storedOf)))) return;
+		value = load(d);
+		// Another document (or this one reverted by the editor around a nested one): the old steps no longer apply.
+		untrack(() => forget());
 	});
 
 	/* ------------------------------------------------------------------ state */
@@ -100,17 +118,9 @@
 
 	// State shared by an editor and every editor nested in its plugin blocks: blocks can be dragged between them,
 	// and only the editor last worked in keeps a block selection.
-	type DragSource = { editor: string; ids: string[]; payload: StoredBlock[]; rows: HTMLElement[]; remove: () => void };
-	type Hub = {
-		src: DragSource | null;
-		target: { editor: string; over: string; after: boolean } | null;
-		active: string | null;
-	};
 	// A string, not an object: $state would proxy an object and break identity checks.
 	const token = uid();
-	const ownHub = $state<Hub>({ src: null, target: null, active: null });
-	const hub: Hub = getContext<Hub>(HUB) ?? ownHub;
-	setContext(HUB, hub);
+	const hub = useHub();
 
 	$effect(() => {
 		if (selA) hub.active = token;
@@ -120,6 +130,8 @@
 	});
 
 	const idx = (id: string) => value.findIndex((b) => b.id === id);
+	/** Puts blocks into the document before position `at`. */
+	const insertAt = (at: number, ...blocks: Block[]) => (value = [...value.slice(0, at), ...blocks, ...value.slice(at)]);
 	// Direct children only: a plugin row may hold a nested editor with its own blocks.
 	const el = (id: string) => root?.querySelector<HTMLElement>(`[data-block="${id}"] > .body > .ce`) ?? null;
 	const ownRow = (n: Element | null) => {
@@ -147,66 +159,39 @@
 
 	/* ---------------------------------------------------------------- history */
 
-	type Snap = { blocks: string; id: string | null; off: number };
+	// A step holds the document as frozen copies of its blocks, and an unchanged block's copy is shared by every step
+	// (a step costs only the blocks that changed, not the whole document).
+	type Snap = { blocks: readonly Block[]; id: string | null; off: number };
+	const copies = new Map<string, { key: string; copy: Block }>();
+	function copyOf(b: Block): Block {
+		const key = `${b.type}|${b.indent}|${b.checked ?? ''}|${b.plugin ?? ''}|${JSON.stringify(b.props ?? null)}|${JSON.stringify(b.blocks ?? null)}|${b.html}`;
+		const hit = copies.get(b.id);
+		if (hit?.key === key) return hit.copy;
+		const copy = Object.freeze(JSON.parse(JSON.stringify($state.snapshot(b))) as Block);
+		copies.set(b.id, { key, copy });
+		return copy;
+	}
 	const take = (): Snap => {
 		const e = focusedId ? el(focusedId) : null;
-		return { blocks: JSON.stringify($state.snapshot(value)), id: focusedId, off: e ? caretOffset(e) : 0 };
+		const blocks = value.map(copyOf);
+		// copies of deleted blocks: the steps that hold them keep them; the map does not need them
+		if (copies.size > blocks.length * 2) for (const id of [...copies.keys()]) if (!value.some((b) => b.id === id)) copies.delete(id);
+		return { blocks, id: focusedId, off: e ? caretOffset(e) : 0 };
 	};
-	let past: Snap[] = [];
-	let future: Snap[] = [];
-	let last: Snap = take();
-	let pending = false;
-	let timer: ReturnType<typeof setTimeout>;
-
-	/** Call on every text edit: consecutive typing collapses into one undo step. */
-	function typed() {
-		if (!pending) {
-			past.push(last);
-			if (past.length > 300) past.shift();
-			future = [];
-			pending = true;
-		}
-		clearTimeout(timer);
-		timer = setTimeout(() => {
-			pending = false;
-			last = take();
-		}, 600);
-	}
-
-	/** Wrap every structural change: pushes an undo step. */
-	function mutate(fn: () => void) {
-		clearTimeout(timer);
-		pending = false;
-		past.push(take());
-		if (past.length > 300) past.shift();
-		future = [];
-		fn();
-		last = take();
-	}
+	const history = new History<Snap>(take, restore);
+	const typed = () => history.typed();
+	const mutate = (fn: () => void) => history.mutate(fn);
+	const forget = () => history.forget();
+	const undo = () => history.undo();
+	const redo = () => history.redo();
 
 	function restore(s: Snap) {
-		value = JSON.parse(s.blocks);
+		// fresh objects: the editor changes its blocks in place, the step's copies stay as they are
+		value = s.blocks.map((b) => JSON.parse(JSON.stringify(b)) as Block);
 		selA = selH = null;
 		slash = null;
-		last = s;
 		if (s.id && idx(s.id) >= 0) focusBlock(s.id, s.off);
 	}
-	function undo() {
-		clearTimeout(timer);
-		pending = false;
-		const s = past.pop();
-		if (!s) return;
-		future.push(take());
-		restore(s);
-	}
-	function redo() {
-		clearTimeout(timer);
-		pending = false;
-		const s = future.pop();
-		if (!s) return;
-		past.push(take());
-		restore(s);
-	}
 
 	/* ---------------------------------------------------------- block catalog */
 
@@ -234,7 +219,7 @@
 		blocks
 			.filter((b) => b.type !== 'hr' || allowed.has('hr'))
 			.map((b) => {
-				if (!allowed.has(b.type)) convert(b, 'p');
+				if (b.type !== 'plugin' && !allowed.has(b.type)) convert(b, 'p');
 				return b;
 			});
 
@@ -312,12 +297,6 @@
 		};
 	}
 
-	// Keep the highlighted item visible while moving through the menu with the arrow keys.
-	$effect(() => {
-		if (slash?.index === undefined && turn?.index === undefined) return;
-		root.querySelector(':scope > .menu .item.active')?.scrollIntoView({ block: 'nearest' });
-	});
-
 	function applySlash(item: PaletteItem) {
 		if (!slash) return;
 		const b = value[idx(slash.id)];
@@ -336,7 +315,7 @@
 			if (type === 'hr') {
 				const i = idx(b.id);
 				const nb = newBlock();
-				value = [...value.slice(0, i + 1), nb, ...value.slice(i + 1)];
+				insertAt(i + 1, nb);
 				focusBlock(nb.id, 'start');
 			} else focusBlock(b.id, off);
 		});
@@ -390,7 +369,7 @@
 				b.type = 'hr';
 				b.html = '';
 				const nb = newBlock();
-				value = [...value.slice(0, i + 1), nb, ...value.slice(i + 1)];
+				insertAt(i + 1, nb);
 				focusBlock(nb.id, 'start');
 			});
 			return;
@@ -431,7 +410,7 @@
 		const nb = newBlock(type, post, { indent: b.indent, ...(type === 'todo' ? { checked: false } : {}) });
 		mutate(() => {
 			b.html = pre;
-			value = [...value.slice(0, i + 1), nb, ...value.slice(i + 1)];
+			insertAt(i + 1, nb);
 		});
 		focusBlock(nb.id, 'start');
 	}
@@ -468,6 +447,11 @@
 			else if (k === 'k') fmt('link');
 			else if (k === '\\') fmt('plain');
 			else if (k === 'x' && e.shiftKey) fmt('strikeThrough');
+			else if (k === '/') {
+				// The turn-into menu of this block, from the text.
+				selectOnly(b.id);
+				void openTurnByKey();
+			}
 			else if (k === 'a' && (!ce.textContent || getSelection()?.toString() === ce.textContent)) {
 				selA = value[0].id;
 				selH = value[value.length - 1].id;
@@ -476,7 +460,7 @@
 			} else if (e.shiftKey && (key === 'ArrowUp' || key === 'ArrowDown')) nudge([b.id], key === 'ArrowUp' ? -1 : 1);
 			else if (key === 'Enter' && b.type === 'code') {
 				const nb = newBlock();
-				mutate(() => (value = [...value.slice(0, i + 1), nb, ...value.slice(i + 1)]));
+				mutate(() => insertAt(i + 1, nb));
 				focusBlock(nb.id, 'start');
 			} else handled = false;
 			if (handled) return e.preventDefault();
@@ -492,7 +476,7 @@
 			if (b.type === 'code') {
 				if (e.shiftKey) {
 					const nb = newBlock();
-					mutate(() => (value = [...value.slice(0, i + 1), nb, ...value.slice(i + 1)]));
+					mutate(() => insertAt(i + 1, nb));
 					focusBlock(nb.id, 'start');
 				} else document.execCommand('insertLineBreak');
 			} else if (e.shiftKey) document.execCommand('insertLineBreak');
@@ -616,21 +600,94 @@
 		detectSlash(ce, b);
 	}
 
+	/** The editor's own clipboard format: the copied blocks in their stored form, beside their markdown. */
+	const CLIP = 'application/x-brickee+json';
+
+	/**
+	 * Blocks from the editor's clipboard format, or null when it is missing, of another version or malformed. Each block
+	 * carries its markdown form as the copying editor wrote it, for an editor that cannot hold the block (`md`).
+	 */
+	function fromClip(data: string | undefined): (Block & { md?: string })[] | null {
+		if (!data) return null;
+		try {
+			const clip = JSON.parse(data);
+			const ok = (s: unknown, depth: number): s is StoredBlock => {
+				const b = s as StoredBlock;
+				return (
+					!!b && typeof b === 'object' && typeof b.type === 'string' && Number.isInteger(b.indent) && b.indent >= 0 && b.indent <= MAX_INDENT &&
+					(b.text === undefined || typeof b.text === 'string') &&
+					(b.props === undefined || (typeof b.props === 'object' && !Array.isArray(b.props))) &&
+					(b.blocks === undefined || (depth === 0 && Array.isArray(b.blocks) && b.blocks.every((x) => ok(x, 1))))
+				);
+			};
+			if (clip?.v !== 1 || !Array.isArray(clip.blocks) || clip.blocks.length > 2000 || !clip.blocks.every((x: unknown) => ok(x, 0))) return null;
+			const md: unknown[] = Array.isArray(clip.md) ? clip.md : [];
+			return (clip.blocks as StoredBlock[]).map((s, n) => ({ ...fromStored(s), md: typeof md[n] === 'string' ? (md[n] as string) : undefined }));
+		} catch {
+			return null;
+		}
+	}
+
+	/**
+	 * Pasted blocks this editor can hold: a plugin block it does not offer (or a unique one it already has) falls back
+	 * to its markdown form; built-in types outside the palette become text (fit).
+	 */
+	function admit(blocks: (Block & { md?: string })[]): Block[] {
+		const has = new Set(value.filter((b) => b.type === 'plugin').map((b) => b.plugin));
+		const offered = plugins.filter((p) => allowed.has(p.type));
+		return fit(
+			blocks.flatMap(({ md, ...b }): Block[] => {
+				if (b.type !== 'plugin') return [b];
+				const p = pluginOf(b.plugin);
+				if (p && allowed.has(p.type) && !(p.unique && has.has(p.type))) {
+					if (p.unique) has.add(p.type);
+					return [b];
+				}
+				return fromMarkdown(md ?? toMarkdown([b], { plugins }), { plugins: offered }).map((x) => ({ ...x, indent: Math.min(MAX_INDENT, x.indent + b.indent) }));
+			})
+		);
+	}
+
+	/**
+	 * What a paste brings, as blocks: our own blocks as they were, otherwise formatted HTML (a web page, Google Docs,
+	 * Word), otherwise markdown text; a GFM table goes to a plugin that takes tables, if this editor offers one.
+	 */
+	function pasted(data: DataTransfer | null): Block[] | null {
+		const own = fromClip(data?.getData(CLIP));
+		if (own) return admit(own);
+		const offered = { plugins: plugins.filter((p) => allowed.has(p.type)) };
+		const html = data?.getData('text/html');
+		if (html) return fit(fromHtml(html, offered));
+		const text = data?.getData('text/plain');
+		return text == null ? null : fit(fromMarkdown(text.replace(/\r/g, ''), offered));
+	}
+
 	function onPaste(e: ClipboardEvent, b: Block) {
-		const text = e.clipboardData?.getData('text/plain');
-		if (text == null) return;
+		const data = e.clipboardData;
+		// Files (a copied image, a screenshot) to a plugin that takes them; an empty block makes room for it.
+		const files = [...(data?.files ?? [])];
+		if (files.length && b.type !== 'code' && fileTakers().length) {
+			e.preventDefault();
+			const ce = e.currentTarget as HTMLElement;
+			void takeFiles(files, idx(b.id) + 1, clean(ce.innerHTML) ? undefined : b);
+			return;
+		}
+		const text = data?.getData('text/plain');
+		const rich = b.type !== 'code' && (data?.types.includes(CLIP) || data?.types.includes('text/html'));
+		if (!rich && text == null) return;
 		e.preventDefault();
 		const ce = e.currentTarget as HTMLElement;
-		const norm = text.replace(/\r/g, '');
+		const norm = (text ?? '').replace(/\r/g, '');
 
-		if (b.type === 'code' || !norm.includes('\n')) {
+		// Plain text into a code block, or a single line of plain text: typed in as it is.
+		if (!rich && (b.type === 'code' || !norm.includes('\n'))) {
 			norm.split('\n').forEach((line, n) => {
 				if (n) document.execCommand('insertLineBreak');
 				if (line) document.execCommand('insertText', false, line);
 			});
 			return;
 		}
-		const parsed = fit(fromMarkdown(norm));
+		const parsed = pasted(data) ?? [];
 		if (!parsed.length) return;
 		const parts = splitAtCaret(ce);
 		if (!parts) return;
@@ -638,28 +695,59 @@
 		const post = clean(parts[1]);
 		const i = idx(b.id);
 
+		// An empty block takes pasted plugin blocks or dividers in its place.
+		if (!pre && !post && atomic(parsed[0])) {
+			mutate(() => (value = [...value.slice(0, i), ...parsed, ...value.slice(i + 1)]));
+			const last = parsed[parsed.length - 1];
+			if (atomic(last)) selectOnly(last.id);
+			else focusBlock(last.id, 'end');
+			return;
+		}
 		let rest = parsed;
 		const first = parsed[0];
 		let curHtml = pre;
-		if (!pre && first.type !== 'hr') {
+		if (!pre && first.type !== 'hr' && first.type !== 'plugin') {
 			b.type = first.type;
 			b.indent = first.indent;
 			if (first.type === 'todo') b.checked = first.checked;
+			if (first.props) b.props = first.props;
+			else delete b.props;
 			curHtml = first.html;
 			rest = parsed.slice(1);
 		} else if (first.type === 'p') {
 			curHtml = pre + first.html;
 			rest = parsed.slice(1);
 		}
+		// Text after the caret goes into the last pasted block, or a new paragraph after a pasted plugin block or divider.
+		if (post && rest.length && atomic(rest[rest.length - 1])) rest = [...rest, newBlock('p', '')];
 		const target = rest.length ? rest[rest.length - 1] : b;
 		const off = textLen(target === b ? curHtml : target.html);
 		mutate(() => {
 			if (target === b) curHtml += post;
 			else target.html += post;
 			b.html = curHtml;
-			value = [...value.slice(0, i + 1), ...rest, ...value.slice(i + 1)];
+			insertAt(i + 1, ...rest);
 		});
-		focusBlock(target.id, off);
+		if (atomic(target)) selectOnly(target.id);
+		else focusBlock(target.id, off);
+	}
+
+	/** Pasting while whole blocks are selected: the blocks go in after the selection. */
+	function onRootPaste(e: ClipboardEvent) {
+		if (e.target !== root || readonly || !selH) return;
+		const at = Math.max(...value.map((b, n) => (selSet.has(b.id) ? n : -1))) + 1;
+		const files = [...(e.clipboardData?.files ?? [])];
+		if (files.length && fileTakers().length) {
+			e.preventDefault();
+			void takeFiles(files, at);
+			return;
+		}
+		const parsed = pasted(e.clipboardData) ?? [];
+		e.preventDefault();
+		if (!parsed.length) return;
+		mutate(() => insertAt(at, ...parsed));
+		selA = parsed[0].id;
+		selH = parsed[parsed.length - 1].id;
 	}
 
 	/* ---------------------------------------------------------- inline format */
@@ -766,8 +854,23 @@
 	}
 
 	function onRootKey(e: KeyboardEvent) {
+		// Undo and redo pressed inside a plugin's own field (a table cell): this editor's history, not the field's
+		// native one (which the next re-render would lose anyway). A nested editor handles its own and prevents this.
+		const mod0 = e.metaKey || e.ctrlKey;
+		const k0 = e.key.toLowerCase();
+		if (mod0 && (k0 === 'z' || k0 === 'y') && !e.defaultPrevented && e.target !== root && !(e.target as Element).closest?.('.ce')) {
+			e.preventDefault();
+			if (k0 === 'y' || e.shiftKey) redo();
+			else undo();
+			return;
+		}
 		if (e.target !== root || !selSet.size || !selH) return;
 		if (onTurnKey(e)) return;
+		// The turn-into menu from the keyboard: '/' or Ctrl+/ (also the menu key, Shift+F10) on selected blocks.
+		if (!readonly && (e.key === '/' || e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10'))) {
+			e.preventDefault();
+			return void openTurnByKey();
+		}
 		const mod = e.metaKey || e.ctrlKey;
 		const key = e.key;
 		const h = idx(selH);
@@ -789,7 +892,7 @@
 			if (el(b.id)) focusBlock(b.id, 'end');
 			else {
 				const nb = newBlock();
-				mutate(() => (value = [...value.slice(0, h + 1), nb, ...value.slice(h + 1)]));
+				mutate(() => insertAt(h + 1, nb));
 				focusBlock(nb.id, 'start');
 			}
 		} else if (key === 'Escape') {
@@ -813,7 +916,13 @@
 	function onCopy(e: ClipboardEvent, cut = false) {
 		if (!selSet.size) return;
 		e.preventDefault();
-		e.clipboardData?.setData('text/plain', toMarkdown(value.filter((b) => selSet.has(b.id)), { plugins }));
+		const blocks = value.filter((b) => selSet.has(b.id));
+		e.clipboardData?.setData('text/plain', toMarkdown(blocks, { plugins }));
+		// The blocks as they are, for pasting into this or another editor (the markdown is for everything else).
+		e.clipboardData?.setData(
+			CLIP,
+			JSON.stringify({ v: 1, blocks: blocks.map((b) => $state.snapshot(toStored(b))), md: blocks.map((b) => toMarkdown([b], { plugins })) })
+		);
 		if (cut) deleteSelected();
 	}
 
@@ -830,12 +939,23 @@
 			blurActive();
 			root.focus({ preventScroll: true });
 		} else selectOnly(b.id);
-		if (!menu) return;
-		const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		if (menu) openTurn(e.currentTarget as HTMLElement);
+	}
+
+	/** The turn-into menu for the selected blocks, beside `anchor` (a handle, a bubble button). */
+	function openTurn(anchor: Element) {
+		const r = anchor.getBoundingClientRect();
 		const up = r.bottom + 340 > innerHeight && r.top > 340;
 		turn = { x: Math.min(r.right + 6, innerWidth - 250), y: up ? r.bottom : r.top, up, index: 0 };
 	}
 
+	/** From the keyboard: the turn-into menu of the selected blocks, beside the handle of the selection's head. */
+	async function openTurnByKey() {
+		await tick();
+		const handle = selH ? root.querySelector(`[data-block="${selH}"] > .gutter .handle`) : null;
+		if (handle) openTurn(handle);
+	}
+
 	/* ------------------------------------------------------ properties panel */
 
 	// Plugin blocks and code blocks show their tag and fields on their top (PropsBar); read-only, a code block shows its
@@ -864,6 +984,17 @@
 		return f.format ? f.format(v) : v == null ? '' : String(v);
 	};
 
+	/**
+	 * A change from a plugin's view (a table cell, a nested editor): an undo step like typing, but only when the value
+	 * really differs (a nested editor writes its document back when it mounts).
+	 */
+	function pluginChange(b: Block, key: 'props' | 'blocks', v: Block['props'] | StoredBlock[]) {
+		if (JSON.stringify(v) === JSON.stringify(b[key])) return;
+		typed();
+		if (key === 'props') b.props = v as Block['props'];
+		else b.blocks = v as StoredBlock[];
+	}
+
 	/** Sets one property to a value as it is ('' or undefined removes it). */
 	function setValue(b: Block, key: string, v: unknown) {
 		typed();
@@ -894,6 +1025,8 @@
 		| { kind: 'type'; item: PaletteItem; type: BlockType; current: boolean; lossy: boolean }
 		| { kind: 'wrap'; item: PaletteItem; plugin: BlockPlugin; current: boolean }
 		| { kind: 'retype'; item: PaletteItem; plugin: BlockPlugin; current: boolean }
+		| { kind: 'up' }
+		| { kind: 'down' }
 		| { kind: 'unwrap' }
 		| { kind: 'delete' };
 
@@ -938,6 +1071,11 @@
 			const lossy = to === 'plain' && sel.some((b) => contentOf(b) === 'text' && formatted(b.html));
 			out.push({ kind: 'type', item, type, current: single?.type === type, lossy });
 		}
+		// Moving without dragging (touch, keyboard).
+		const at = value.findIndex((b) => selSet.has(b.id));
+		const end = value.length - 1 - [...value].reverse().findIndex((b) => selSet.has(b.id));
+		if (at > 0) out.push({ kind: 'up' });
+		if (end < value.length - 1) out.push({ kind: 'down' });
 		if (known && kinds.includes('blocks')) out.push({ kind: 'unwrap' });
 		out.push({ kind: 'delete' });
 		return out;
@@ -953,6 +1091,7 @@
 		if (!opt) return;
 		const sel = selected;
 		if (opt.kind === 'delete') return deleteSelected();
+		if (opt.kind === 'up' || opt.kind === 'down') return nudge([...selSet], opt.kind === 'up' ? -1 : 1);
 		if (opt.kind === 'unwrap') return unwrap(sel);
 		if (opt.kind === 'wrap') return wrap(sel, opt.plugin);
 		if (opt.kind === 'retype') return mutate(() => sel.forEach((b) => toPlugin(b, opt.plugin)));
@@ -1016,10 +1155,35 @@
 		selA = selH = null;
 	}
 
+	// Looks shared by several elements (Tailwind; whole class names, so Tailwind finds them).
+	/** The block actions in the bubble: inverted, the theme's text colour as the background. */
+	const BUBBLE =
+		'flex h-[26px] w-7 cursor-pointer items-center justify-center border-0 bg-surface-contrast p-0 text-surface shadow-[0_4px_12px_rgb(0_0_0/0.2)] first:rounded-l-md first:pl-0.5 last:rounded-r-md last:pr-0.5 hover:bg-[color-mix(in_srgb,var(--color-surface-contrast,#1d1d1f)_82%,var(--color-surface,#fff))]';
+	const BUBBLE_DELETE =
+		'flex h-[26px] w-7 cursor-pointer items-center justify-center border-0 bg-surface-contrast p-0 text-surface shadow-[0_4px_12px_rgb(0_0_0/0.2)] first:rounded-l-md first:pl-0.5 last:rounded-r-md last:pr-0.5 hover:bg-[#c62828]';
+	/** A block's small label (its type, a code block's language). */
+	const TAG =
+		'max-w-[18em] overflow-hidden rounded-[5px] px-1.5 py-px font-mono text-[11px] leading-[1.5] font-medium text-ellipsis whitespace-nowrap text-muted-contrast select-none';
+
 	const optionKey = (o: TurnOption) => ('item' in o ? o.kind + ':' + o.item.id : o.kind);
+	/** The actions after the types: a line above the first of them. */
+	const ACTIONS = new Set<TurnOption['kind']>(['up', 'down', 'unwrap', 'delete']);
+	/** The turn-into options as menu rows. */
+	const turnRows = $derived(
+		turnOptions.map((o, n): MenuRow => ({
+			key: optionKey(o),
+			...optionView(o),
+			warn: 'lossy' in o && o.lossy,
+			danger: o.kind === 'delete',
+			current: 'current' in o && o.current,
+			gap: ACTIONS.has(o.kind) && n > 0 && !ACTIONS.has(turnOptions[n - 1].kind)
+		}))
+	);
 	function optionView(o: TurnOption): { icon: Icon; label: string; hint: string } {
 		const n = selected.length;
 		if (o.kind === 'delete') return { icon: Trash2, label: tr('Delete'), hint: n > 1 ? tr('{n} blocks', { n }) : tr('Remove this block') };
+		if (o.kind === 'up') return { icon: ArrowUp, label: tr('Move up'), hint: 'Ctrl+Shift+↑' };
+		if (o.kind === 'down') return { icon: ArrowDown, label: tr('Move down'), hint: 'Ctrl+Shift+↓' };
 		if (o.kind === 'unwrap') return { icon: Ungroup, label: tr('Unwrap'), hint: tr('Move the inner blocks out') };
 		if (o.kind === 'wrap') return { icon: o.item.icon, label: o.item.label, hint: n > 1 ? tr('Put {n} blocks inside', { n }) : tr('Put inside') };
 		if (o.kind === 'type' && o.lossy) return { icon: o.item.icon, label: o.item.label, hint: tr('Loses formatting') };
@@ -1040,117 +1204,76 @@
 
 	/* ------------------------------------------------- selection across blocks */
 
-	// A text selection dragged out of its block turns into a selection of whole blocks (each block is its own
-	// editable field, so the browser cannot select text across them). Nested editors run the same logic, so a
-	// sweep that leaves a box is taken over by the editor around it, with the box as one block.
-	let sweeping = $state(false);
-	let sweepFrom: Element | null = null;
-
-	function startSweep(e: MouseEvent) {
-		if (readonly || e.button !== 0 || e.shiftKey) return;
-		const t = e.target as Element;
-		if (!t.closest('.ce') || t.closest('.grab')) return;
-		sweepFrom = t;
-		addEventListener('mousemove', sweep);
-		addEventListener('mouseup', endSweep, { once: true });
-	}
-
-	function sweep(e: MouseEvent) {
-		const from = ownRow(sweepFrom);
-		const here = document.elementFromPoint(e.clientX, e.clientY);
-		if (!from || !here) return;
-		const row = root.contains(here) ? ownRow(here) : null;
-		// Left this editor, or came back to the starting block: back to plain text selection.
-		if (!root.contains(here) || row === from) {
-			if (sweeping) {
-				sweeping = false;
-				selA = selH = null;
-			}
-			return;
-		}
-		if (!row) return;
-		if (!sweeping) {
-			sweeping = true;
+	const sweep = createSweep({
+		root: () => root,
+		ownRow,
+		readonly: () => readonly,
+		select: (a, h) => {
+			selA = a;
+			selH = h;
+		},
+		clear: () => (selA = selH = null),
+		focusRoot: () => {
 			blurActive();
 			root.focus({ preventScroll: true });
 		}
-		getSelection()?.removeAllRanges();
-		selA = from.dataset.block!;
-		selH = row.dataset.block!;
-	}
+	});
 
-	function endSweep() {
-		removeEventListener('mousemove', sweep);
-		sweepFrom = null;
-		sweeping = false;
-	}
+	// Removed in the middle of a sweep or of typing: no listener or timer is left behind. (An effect's cleanup, not
+	// onDestroy: that also runs after server-side rendering, where there is no window.)
+	$effect(() => () => {
+		sweep.end();
+		history.dispose();
+	});
 
 	/* ---------------------------------------------------------------- dragging */
 
-	function onDragStart(e: DragEvent, b: Block) {
-		const ids = selSet.has(b.id) ? value.filter((x) => selSet.has(x.id)).map((x) => x.id) : [b.id];
-		const moving = value.filter((x) => ids.includes(x.id));
-		hub.src = {
-			editor: token,
-			ids,
-			payload: moving.map((x) => $state.snapshot(toStored(x)) as StoredBlock),
-			rows: ids.map((id) => root.querySelector<HTMLElement>(`[data-block="${id}"]`)!).filter(Boolean),
-			remove: () => mutate(() => (value = value.filter((x) => !ids.includes(x.id)).concat(value.length === ids.length ? [newBlock()] : [])))
-		};
-		hub.target = null;
-		if (!e.dataTransfer) return;
-		e.dataTransfer.effectAllowed = 'move';
-		e.dataTransfer.setData('text/plain', ' ');
-		const row = (e.currentTarget as HTMLElement).closest('.row');
-		if (row) e.dataTransfer.setDragImage(row, 0, 0);
-	}
-
-	/** Can the dragged blocks land in this editor? Not inside themselves, and only plugins this editor offers. */
-	function accepts(src: DragSource) {
-		if (src.editor === token) return true;
-		if (src.rows.some((r) => r.contains(root))) return false;
-		return src.payload.every((s) => isMd(s) || (allowed.has(s.type) && !!pluginOf(s.type)));
-	}
-
-	function onDragOver(e: DragEvent) {
-		// A nested editor deeper in the tree already took this event.
-		if (!hub.src || e.defaultPrevented) return;
-		const row = ownRow(e.target as Element);
-		if (!row || !accepts(hub.src)) return;
-		e.preventDefault();
-		const r = row.getBoundingClientRect();
-		hub.target = { editor: token, over: row.dataset.block!, after: e.clientY > r.top + r.height / 2 };
-	}
-
-	function onDrop(e: DragEvent) {
-		const src = hub.src;
-		const at = hub.target;
-		if (!src || at?.editor !== token) return;
-		e.preventDefault();
-		hub.src = hub.target = null;
-		const { over, after } = at;
-		if (src.ids.includes(over)) return;
-		if (src.editor === token) {
+	const drag = createDrag({
+		token,
+		hub,
+		root: () => root,
+		ownRow,
+		moving: (id) => (selSet.has(id) ? value.filter((x) => selSet.has(x.id)).map((x) => x.id) : [id]),
+		payload: (ids) => value.filter((x) => ids.includes(x.id)).map((x) => $state.snapshot(toStored(x)) as StoredBlock),
+		remove: (ids) => mutate(() => (value = value.filter((x) => !ids.includes(x.id)).concat(value.length === ids.length ? [newBlock()] : []))),
+		holds: (payload) => payload.every((s) => isMd(s) || (allowed.has(s.type) && !!pluginOf(s.type))),
+		move: (ids, over, after) =>
 			mutate(() => {
-				const moving = value.filter((b) => src.ids.includes(b.id));
-				const rest = value.filter((b) => !src.ids.includes(b.id));
+				const moving = value.filter((b) => ids.includes(b.id));
+				const rest = value.filter((b) => !ids.includes(b.id));
 				const t = rest.findIndex((b) => b.id === over) + (after ? 1 : 0);
 				value = [...rest.slice(0, t), ...moving, ...rest.slice(t)];
-			});
-			return;
+			}),
+		insert: (payload, over, after) => {
+			const incoming = fit(payload.map(fromStored));
+			mutate(() => insertAt(idx(over) + (after ? 1 : 0), ...incoming));
+		},
+		takesFiles: () => fileTakers().length > 0,
+		files: (files, over, after) => void takeFiles(files, idx(over) + (after ? 1 : 0))
+	});
+
+	/** The plugins this editor offers that take files. */
+	const fileTakers = () => plugins.filter((p) => p.fromFiles && allowed.has(p.type));
+
+	/**
+	 * Files pasted or dropped: the first plugin that takes them gets one block, at `at` (or in place of the empty block
+	 * `empty`). False when none takes them.
+	 */
+	async function takeFiles(files: File[], at: number, empty?: Block): Promise<boolean> {
+		for (const p of fileTakers()) {
+			const props = await p.fromFiles!(files);
+			if (!props) continue;
+			const pb = newBlock('plugin', '', { plugin: p.type, indent: empty?.indent ?? 0, props });
+			fresh.add(pb.id);
+			const i = empty ? idx(empty.id) : -1;
+			mutate(() => (i >= 0 ? (value = [...value.slice(0, i), pb, ...value.slice(i + 1)]) : insertAt(Math.min(at, value.length), pb)));
+			await tick();
+			selectOnly(pb.id);
+			return true;
 		}
-		// From another editor: copy in through the stored form, then remove at the source.
-		const incoming = fit(src.payload.map(fromStored));
-		mutate(() => {
-			const t = idx(over) + (after ? 1 : 0);
-			value = [...value.slice(0, t), ...incoming, ...value.slice(t)];
-		});
-		src.remove();
+		return false;
 	}
 
-	const dropMark = (id: string, after: boolean) =>
-		hub.target?.editor === token && hub.target.over === id && hub.target.after === after && !hub.src?.ids.includes(id);
-
 	/* ------------------------------------------------------------------- misc */
 
 	/** The + button: a new paragraph below (or this one, if it is an empty paragraph) with the block menu open. */
@@ -1159,7 +1282,7 @@
 		if (!(b.type === 'p' && !b.html)) {
 			target = newBlock('p', '', { indent: b.indent });
 			const i = idx(b.id);
-			mutate(() => (value = [...value.slice(0, i + 1), target, ...value.slice(i + 1)]));
+			mutate(() => insertAt(i + 1, target));
 		}
 		await tick();
 		const ce = el(target.id);
@@ -1192,28 +1315,30 @@
 <div
 	class="editor"
 	class:nested
-	class:sweeping
+	class:sweeping={sweep.sweeping}
 	role="presentation"
 	bind:this={root}
 	tabindex="-1"
 	onkeydown={onRootKey}
 	oncopy={(e) => onCopy(e)}
 	oncut={(e) => onCopy(e, true)}
+	onpaste={onRootPaste}
 	onmousedown={(e) => {
 		if (selA && !(e.target as HTMLElement).closest('.grab')) selA = selH = null;
-		startSweep(e);
+		sweep.start(e);
 	}}
-	ondragover={onDragOver}
-	ondrop={onDrop}
-	ondragend={() => (hub.src = hub.target = null)}
+	ondragover={drag.over}
+	ondrop={drag.drop}
+	ondragend={drag.end}
+	ondragleave={drag.leave}
 >
 	{#each value as b, i (b.id)}
 		<div
 			class="row"
 			class:selected={selSet.has(b.id)}
-			class:dragging={hub.src?.editor === token && hub.src.ids.includes(b.id)}
-			class:drop-before={dropMark(b.id, false)}
-			class:drop-after={dropMark(b.id, true)}
+			class:dragging={drag.moves(b.id)}
+			class:drop-before={drag.mark(b.id, false)}
+			class:drop-after={drag.mark(b.id, true)}
 			data-block={b.id}
 			data-type={b.type}
 			style:--indent={b.indent}
@@ -1224,17 +1349,20 @@
 					     middle. Drag to move, click for the turn-into menu. Hovering it shows a small dark bubble on its right
 					     with the block actions (add a block below, turn into, delete). -->
 					<div class="grab">
-						<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-						<span
+						<button
+							type="button"
 							class="handle"
 							draggable="true"
+							tabindex="-1"
 							title={tr('Drag to move, click to select')}
-							ondragstart={(e) => onDragStart(e, b)}
-							onclick={(e) => onHandleClick(e, b)}><span class="grip"><GripVertical size={16} /></span></span
+							aria-label={tr('Select the block')}
+							ondragstart={(e) => drag.start(e, b.id)}
+							onclick={(e) => onHandleClick(e, b)}><span class="grip"><GripVertical size={16} /></span></button
 						>
 						<div class="bubble" role="toolbar" aria-label={tr('Block actions')}>
 							<button
 								type="button"
+								class={BUBBLE}
 								title={tr('Add a block below')}
 								aria-label={tr('Add a block below')}
 								onmousedown={(e) => e.preventDefault()}
@@ -1242,6 +1370,7 @@
 							>
 							<button
 								type="button"
+								class={BUBBLE}
 								title={tr('Turn into')}
 								aria-label={tr('Turn into')}
 								onmousedown={(e) => e.preventDefault()}
@@ -1249,7 +1378,7 @@
 							>
 							<button
 								type="button"
-								class="del"
+								class={BUBBLE_DELETE}
 								title={tr('Delete')}
 								aria-label={tr('Delete')}
 								onmousedown={(e) => e.preventDefault()}
@@ -1261,18 +1390,18 @@
 			{/if}
 			<div class="body t-{b.type}">
 				{#if b.type === 'hr'}
-					<hr />
+					<hr class="m-0 flex-1 border-0 border-t border-frame" />
 				{:else if b.type === 'plugin'}
 					{@const plugin = pluginOf(b.plugin)}
 					{#if plugin}
-						<div class="plugin">
+						<div class="my-[0.35em] min-w-0 flex-1">
 							{#snippet propsBar()}
 								<PropsBar block={b} tag={tagOf(b)} fields={plugin.fields ?? []} {tr} {setProp} {setValue} open={fresh.has(b.id)} />
 							{/snippet}
 							<PluginHost
 								{plugin}
-								bind:props={() => b.props ?? {}, (p) => (b.props = p)}
-								bind:blocks={() => b.blocks ?? [], (v) => (b.blocks = v)}
+								bind:props={() => b.props ?? {}, (p) => pluginChange(b, 'props', p)}
+								bind:blocks={() => b.blocks ?? [], (v) => pluginChange(b, 'blocks', v)}
 								{readonly}
 								{palette}
 								{plugins}
@@ -1280,18 +1409,19 @@
 							/>
 						</div>
 					{:else}
-						<div class="unknown">Unknown block: {b.plugin}</div>
+						<div class="flex-1 rounded-lg border border-dashed border-frame px-[0.9em] py-[0.6em] text-[0.85em] text-muted-contrast">{tr('Unknown block: {type}', { type: b.plugin ?? '' })}</div>
 					{/if}
 				{:else}
 					{#if b.type === 'ul'}
-						<span class="marker" aria-hidden="true">{['•', '◦', '▪'][b.indent % 3]}</span>
+						<span class="w-[1.3em] flex-none text-center text-surface-contrast select-none" aria-hidden="true">{['•', '◦', '▪'][b.indent % 3]}</span>
 					{:else if b.type === 'ol'}
-						<span class="marker num" aria-hidden="true">{nums[b.id]}.</span>
+						<span class="w-[1.6em] flex-none text-right text-surface-contrast tabular-nums select-none" aria-hidden="true">{nums[b.id]}.</span>
 					{:else if b.type === 'todo'}
 						<button
 							type="button"
-							class="check"
-							class:done={b.checked}
+							class="mt-[0.3em] mr-[0.2em] ml-[0.1em] grid size-[1.1em] flex-none cursor-pointer place-items-center rounded border-[1.6px] p-0 text-white {b.checked
+								? 'border-(--accent) bg-(--accent)'
+								: 'border-muted-contrast bg-transparent'}"
 							role="checkbox"
 							aria-checked={!!b.checked}
 							aria-label={tr('Done')}
@@ -1301,7 +1431,7 @@
 							>{#if b.checked}<Check size={12} strokeWidth={3} />{/if}</button
 						>
 					{:else if b.type === 'code' && !readonly}
-						<div class="code-fields">
+						<div class="basis-full">
 							<PropsBar block={b} tag={codeTag(b)} fields={codeFields(b)} {tr} {setProp} {setValue} />
 						</div>
 					{/if}
@@ -1329,628 +1459,356 @@
 							if (focusedId === b.id) focusedId = null;
 							slash = null;
 						}}
-					></div>
+					>{#if ssr}{@html b.html}{/if}</div>
 				{/if}
 				{#if b.type === 'code' && readonly}
 					<!-- read-only: the language of a code block, in its corner -->
-					<div class="badge">
-						<span class="tag">{tr('code')}</span>
-						{#if b.props?.lang}<span class="tag">{b.props.lang}</span>{/if}
+					<!-- `badge`: a hook for the code's room beside it -->
+					<div class="badge absolute top-[calc(0.15em+5px)] right-1.5 z-[2] flex items-center gap-0.5">
+						<span class={TAG}>{tr('code')}</span>
+						{#if b.props?.lang}<span class={TAG}>{b.props.lang}</span>{/if}
 					</div>
 				{:else if b.type === 'plugin' && (readonly || !pluginOf(b.plugin)?.fields?.length)}
-					<div class="badge"><span class="tag">{tagOf(b)}</span></div>
+					<!-- readable over a map or an image -->
+					<div class="absolute top-[calc(0.35em+5px)] right-1.5 z-[2] flex items-center gap-0.5 rounded-md bg-[color-mix(in_srgb,var(--color-surface,#fff)_92%,transparent)]">
+						<span class={TAG}>{tagOf(b)}</span>
+					</div>
 				{/if}
 			</div>
 		</div>
 	{/each}
 
 	{#if !readonly}
-		<button type="button" class="tail" aria-label={tr('New block at the end')} onclick={tailClick}></button>
+		<button type="button" class="tail block w-full cursor-text border-0 bg-transparent {nested ? 'min-h-3' : 'min-h-20'}" aria-label={tr('New block at the end')} onclick={tailClick}></button>
 	{/if}
 
 	{#if toolbar}
-		<div class="toolbar" style:left="{toolbar.x}px" style:top="{toolbar.y}px" role="toolbar" aria-label={tr('Formatting')}>
-			{#each tools as t (t.cmd)}
-				<button
-					type="button"
-					title={tr(t.title)}
-					aria-label={tr(t.title)}
-					onmousedown={(e) => e.preventDefault()}
-					onclick={() => fmt(t.cmd)}><t.icon size={16} /></button
-				>
-			{/each}
-		</div>
+		<FormatBar x={toolbar.x} y={toolbar.y} tools={tools.map((t) => ({ ...t, title: tr(t.title) }))} label={tr('Formatting')} onpick={(cmd) => fmt(cmd as Cmd)} />
 	{/if}
 
 	{#if turn}
-		<div
-			class="menu turn"
-			class:up={turn.up}
-			style:left="{turn.x}px"
-			style:top="{turn.y}px"
-			role="listbox"
-			aria-label={tr('Turn into')}
-		>
-			{#if turnOptions[0]?.kind !== 'unwrap' && turnOptions[0]?.kind !== 'delete'}
-				<div class="caption">{tr('Turn into')}</div>
-			{/if}
-			{#each turnOptions as o, n (optionKey(o))}
-				{@const v = optionView(o)}
-				{#if (o.kind === 'unwrap' || o.kind === 'delete') && n > 0 && turnOptions[n - 1].kind !== 'unwrap'}
-					<div class="sep"></div>
-				{/if}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<div
-					class="item"
-					class:danger={o.kind === 'delete'}
-					class:active={n === turn.index}
-					role="option"
-					tabindex="-1"
-					aria-selected={n === turn.index}
-					onmousedown={(e) => {
-						e.preventDefault();
-						applyTurn(n);
-					}}
-					onmouseenter={() => turn && (turn.index = n)}
-				>
-					<span class="icon"><v.icon size={14} /></span>
-					<span class="txt"><b>{v.label}</b><small class:warn={'lossy' in o && o.lossy}>{v.hint}</small></span>
-					{#if 'current' in o && o.current}<span class="current"><Check size={16} /></span>{/if}
-				</div>
-			{/each}
-		</div>
+		<BlockMenu
+			turn
+			rows={turnRows}
+			index={turn.index}
+			x={turn.x}
+			y={turn.y}
+			up={turn.up}
+			caption={turnOptions[0] && !ACTIONS.has(turnOptions[0].kind) ? tr('Turn into') : undefined}
+			label={tr('Turn into')}
+			onpick={applyTurn}
+			onhover={(n) => turn && (turn.index = n)}
+		/>
 	{/if}
 
 	{#if slash && filtered.length}
-		<div
-			class="menu"
-			class:up={slash.up}
-			style:left="{slash.x}px"
-			style:top="{slash.y}px"
-			role="listbox"
-			aria-label={tr('Block type')}
-		>
-			{#each filtered as it, n (it.id)}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<div
-					class="item"
-					class:active={n === slash.index}
-					role="option"
-					tabindex="-1"
-					aria-selected={n === slash.index}
-					onmousedown={(e) => {
-						e.preventDefault();
-						applySlash(it);
-					}}
-					onmouseenter={() => slash && (slash.index = n)}
-				>
-					<span class="icon"><it.icon size={14} /></span>
-					<span class="txt"><b>{it.label}</b><small>{it.hint}</small></span>
-				</div>
-			{/each}
-		</div>
+		<BlockMenu
+			rows={filtered.map((it) => ({ key: it.id, icon: it.icon, label: it.label, hint: it.hint }))}
+			index={slash.index}
+			x={slash.x}
+			y={slash.y}
+			up={slash.up}
+			label={tr('Block type')}
+			onpick={(n) => applySlash(filtered[n])}
+			onhover={(n) => slash && (slash.index = n)}
+		/>
 	{/if}
 </div>
 
 <!-- the popups of this editor and the ones nested in it -->
-{#if !nested}<PopupContainer />{/if}
-
-<style>
-	.editor {
-		--fg: var(--color-surface-contrast, #1d1d1f);
-		--muted: var(--color-muted-contrast, #a0a0a8);
-		--accent: #3b82f6;
-		--sel: rgba(59, 130, 246, 0.14);
-		--surface: var(--color-surface, #fff);
-		--border: var(--color-frame, #e5e5ea);
-		--code-bg: rgba(120, 120, 140, 0.14);
-		position: relative;
-		outline: none;
-		color: var(--fg);
-		font: 17px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
-		padding-bottom: 6rem;
-	}
-	/* While sweeping over whole blocks, the browser must not keep extending its own text selection. */
-	.editor.sweeping,
-	.editor.sweeping :global(*) {
-		user-select: none;
-	}
-	.editor.nested {
-		font-size: 1em;
-		padding-bottom: 0;
-	}
-	.editor.nested > .tail {
-		min-height: 0.75rem;
-	}
-	.plugin {
-		flex: 1;
-		min-width: 0;
-		margin: 0.35em 0;
-	}
-	.unknown {
-		flex: 1;
-		padding: 0.6em 0.9em;
-		border: 1px dashed var(--border);
-		border-radius: 8px;
-		color: var(--muted);
-		font-size: 0.85em;
-	}
-
-	.row {
-		position: relative;
-		display: flex;
-		border-radius: 6px;
-		margin: 0 -8px;
-		padding: 0 8px;
-	}
-	.row.selected {
-		background: var(--sel);
-	}
-	.row.dragging {
-		opacity: 0.35;
-	}
-	.row.drop-before::before,
-	.row.drop-after::after {
-		content: '';
-		position: absolute;
-		left: 8px;
-		right: 8px;
-		height: 3px;
-		border-radius: 2px;
-		background: var(--accent);
-		z-index: 2;
-	}
-	.row.drop-before::before {
-		top: -2px;
-	}
-	.row.drop-after::after {
-		bottom: -2px;
-	}
-
-	/* 1px short at both ends, so the bars of neighbouring blocks do not touch. */
-	.gutter {
-		position: absolute;
-		left: -22px;
-		top: 1px;
-		bottom: 1px;
-		width: 20px;
-	}
-	.handle {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		user-select: none;
-		color: var(--muted);
-		border-radius: 4px;
-		cursor: grab;
-		transition:
-			background 0.12s,
-			box-shadow 0.12s;
-	}
-	/* The grip icon shows with the block's hover, caret or selection; the bubble comes only from the icon. */
-	.grip {
-		width: 20px;
-		height: 20px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		transition: opacity 0.12s;
-	}
-	/* The mouse: a faint fill with the block's hover, stronger on the bar (below; and while dragging). The block with
-	   the typing caret (or the selected one): a thin frame instead (inset, so nothing moves). */
-	.row:hover > .gutter .handle {
-		background: rgba(120, 120, 140, 0.06);
-	}
-	.row:focus-within > .gutter .handle,
-	.row.selected > .gutter .handle {
-		box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.22);
-	}
-	/* with the caret it breathes gently, like the caret blinks; only the innermost block (not the box around it) */
-	.row:focus-within:not(:has(.row:focus-within)) > .gutter .handle {
-		animation: caret-pulse 1.1s ease-in-out infinite alternate;
-	}
-	@keyframes caret-pulse {
-		from {
-			box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.06);
-		}
-		to {
-			box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.3);
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.row:focus-within:not(:has(.row:focus-within)) > .gutter .handle {
-			animation: none;
-		}
-	}
-	.row:hover > .gutter .grip,
-	.row:focus-within > .gutter .grip,
-	.row.selected > .gutter .grip {
-		opacity: 1;
-	}
-	.row > .gutter .handle:hover,
-	.row.dragging > .gutter .handle {
-		background: var(--code-bg);
-	}
-	.grab {
-		position: relative;
-		height: 100%;
-	}
-	/* The block actions: a dark bubble right of the handle, over the start of the block. Its left padding bridges
-	   the gap, so the pointer can move from the handle into it without it closing. */
-	.bubble {
-		position: absolute;
-		left: 100%;
-		top: 50%;
-		z-index: 30;
-		display: flex;
-		padding-left: 6px;
-		translate: 0 -50%;
-		opacity: 0;
-		visibility: hidden;
-		transition:
-			opacity 0.12s,
-			visibility 0s 0.12s;
-	}
-	.bubble::before {
-		content: '';
-		position: absolute;
-		left: 2px;
-		top: 50%;
-		translate: 0 -50%;
-		border: 4px solid transparent;
-		border-right-color: var(--color-surface-contrast, #1d1d1f);
-		border-left: 0;
-	}
-	.grab:has(.grip:hover) .bubble,
-	.bubble:hover {
-		opacity: 1;
-		visibility: visible;
-		transition-delay: 0.15s, 0s;
-	}
-	/* Hidden from the press on (so it is not in the drag image) and while sweeping. Only visibility changes here:
-	   a layout change inside the row while the drag starts makes Chrome cancel the drag. */
-	.handle:active ~ .bubble,
-	.editor.sweeping .bubble {
-		opacity: 0;
-		visibility: hidden;
-		transition: none;
-	}
-	.bubble button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 26px;
-		padding: 0;
-		border: 0;
-		/* inverted: the theme's text colour as the background */
-		color: var(--color-surface, #fff);
-		background: var(--color-surface-contrast, #1d1d1f);
-		cursor: pointer;
-		box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
-	}
-	.bubble button:first-child {
-		border-radius: 6px 0 0 6px;
-		padding-left: 2px;
-	}
-	.bubble button:last-child {
-		border-radius: 0 6px 6px 0;
-		padding-right: 2px;
-	}
-	.bubble button:hover {
-		background: color-mix(in srgb, var(--color-surface-contrast, #1d1d1f) 82%, var(--color-surface, #fff));
-	}
-	.bubble button.del:hover {
-		background: #c62828;
-	}
-
-	.body {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		align-items: flex-start;
-		gap: 0.5em;
-		padding: 0.15em 0;
-		margin-left: calc(var(--indent, 0) * 1.7em);
-	}
-
-	.ce {
-		flex: 1;
-		min-width: 0;
-		min-height: 1.65em;
-		outline: none;
-		white-space: pre-wrap;
-		word-break: break-word;
-		caret-color: var(--accent);
-	}
-	.ce.empty::before {
-		content: attr(data-placeholder);
-		color: var(--muted);
-		pointer-events: none;
-	}
-	.t-p .ce.empty:not(:focus)::before,
-	.t-ul .ce.empty:not(:focus)::before,
-	.t-ol .ce.empty:not(:focus)::before {
-		content: '';
-	}
-	.ce.done {
-		color: var(--muted);
-		text-decoration: line-through;
-	}
-	.ce :global(code) {
-		background: var(--code-bg);
-		padding: 0.1em 0.35em;
-		border-radius: 4px;
-		font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace;
-	}
-	.ce :global(a) {
-		color: var(--accent);
-		text-decoration: underline;
-	}
-
-	.t-h1 .ce {
-		font-size: 2em;
-		font-weight: 700;
-		line-height: 1.25;
-	}
-	.t-h1 {
-		padding-top: 0.6em;
-	}
-	.t-h2 .ce {
-		font-size: 1.5em;
-		font-weight: 650;
-		line-height: 1.3;
-	}
-	.t-h2 {
-		padding-top: 0.45em;
-	}
-	.t-h3 .ce {
-		font-size: 1.2em;
-		font-weight: 600;
-		line-height: 1.4;
-	}
-	.t-h3 {
-		padding-top: 0.3em;
-	}
-	.t-h4 .ce {
-		font-size: 1.05em;
-		font-weight: 600;
-		line-height: 1.45;
-	}
-	.t-h4 {
-		padding-top: 0.25em;
-	}
-	.t-h5 .ce {
-		font-size: 0.95em;
-		font-weight: 600;
-		line-height: 1.5;
-	}
-	.t-h6 .ce {
-		font-size: 0.85em;
-		font-weight: 600;
-		line-height: 1.5;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-	}
-	.t-h5,
-	.t-h6 {
-		padding-top: 0.2em;
-	}
-	.t-quote .ce {
-		border-left: 3px solid var(--fg);
-		padding-left: 0.9em;
-		font-style: italic;
-	}
-	.t-code,
-	.t-plugin {
-		position: relative;
-	}
-	.badge {
-		position: absolute;
-		top: calc(0.15em + 5px);
-		right: 6px;
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		z-index: 2;
-	}
-	.t-plugin > .badge {
-		top: calc(0.35em + 5px);
-		/* Readable over a map or an image. */
-		background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
-		border-radius: 6px;
-	}
-	.tag {
-		max-width: 18em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		padding: 1px 6px;
-		border-radius: 5px;
-		color: var(--muted);
-		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-		user-select: none;
-	}
-	/* the fields bar on its own row above the code */
-	.t-code {
-		flex-wrap: wrap;
-		row-gap: 0;
-	}
-	.code-fields,
-	.t-code .ce {
-		flex-basis: 100%;
-	}
-	.t-code:has(> .badge) .ce {
-		padding-right: 7.5em;
-	}
-	.t-code .ce {
-		background: var(--code-bg);
-		border-radius: 8px;
-		padding: 0.7em 0.9em;
-		font: 0.88em/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
-		white-space: pre-wrap;
-	}
-	.t-hr {
-		padding: 0.6em 0;
-	}
-	hr {
-		flex: 1;
-		border: 0;
-		border-top: 1px solid var(--border);
-		margin: 0;
-	}
-
-	.marker {
-		flex: none;
-		width: 1.3em;
-		text-align: center;
-		color: var(--fg);
-		user-select: none;
-	}
-	.marker.num {
-		width: 1.6em;
-		text-align: right;
-		font-variant-numeric: tabular-nums;
-	}
-	.check {
-		flex: none;
-		width: 1.1em;
-		height: 1.1em;
-		margin: 0.3em 0.2em 0 0.1em;
-		border: 1.6px solid var(--muted);
-		border-radius: 4px;
-		background: transparent;
-		color: #fff;
-		display: grid;
-		place-items: center;
-		cursor: pointer;
-		padding: 0;
-	}
-	.check.done {
-		background: var(--accent);
-		border-color: var(--accent);
-	}
-
-	.tail {
-		display: block;
-		width: 100%;
-		min-height: 5rem;
-		border: 0;
-		background: none;
-		cursor: text;
-	}
-
-	.toolbar {
-		position: fixed;
-		transform: translate(-50%, calc(-100% - 8px));
-		display: flex;
-		gap: 2px;
-		padding: 4px;
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
-		z-index: 20;
-	}
-	.toolbar button {
-		min-width: 30px;
-		height: 30px;
-		border: 0;
-		border-radius: 6px;
-		background: none;
-		color: var(--fg);
-		display: grid;
-		place-items: center;
-		cursor: pointer;
-	}
-	.toolbar button:hover {
-		background: var(--code-bg);
-	}
-
-	.menu {
-		position: fixed;
-		width: 260px;
-		max-height: 300px;
-		overflow: auto;
-		padding: 6px;
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
-		z-index: 30;
-	}
-	.menu.up {
-		transform: translateY(-100%);
-	}
-	.menu.turn {
-		width: 240px;
-		max-height: 340px;
-	}
-	.caption {
-		padding: 4px 8px 6px;
-		font: 600 11px system-ui;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
-		color: var(--muted);
-	}
-	.sep {
-		height: 1px;
-		margin: 6px 4px;
-		background: var(--border);
-	}
-	.current {
-		margin-left: auto;
-		display: flex;
-		color: var(--accent);
-	}
-	.txt small.warn {
-		color: #b45309;
-	}
-	.item.danger {
-		color: #dc2626;
-	}
-	.item.danger .icon {
-		color: #dc2626;
-	}
-	/* Compact one-line rows: icon, label, and the hint after it in grey. */
-	.item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 3px 6px;
-		border-radius: 6px;
-		cursor: pointer;
-	}
-	.item.active {
-		background: var(--sel);
-	}
-	.icon {
-		flex: none;
-		width: 24px;
-		height: 24px;
-		display: grid;
-		place-items: center;
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--fg);
-	}
-	.txt {
-		min-width: 0;
-		display: flex;
-		align-items: baseline;
-		gap: 6px;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-	.txt b {
-		font: 500 13px system-ui;
-	}
-	.txt small {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		color: var(--muted);
-		font-size: 11px;
-	}
-</style>
+{#if !nested}<div class="contents" use:portal><PopupContainer /></div>{/if}
+
+<style>.editor {
+  --fg: var(--color-surface-contrast, #1d1d1f);
+  --muted: var(--color-muted-contrast, #a0a0a8);
+  --accent: var(--color-accent, #3b82f6);
+  --sel: color-mix(in srgb, var(--accent) 14%, transparent);
+  --surface: var(--color-surface, #fff);
+  --border: var(--color-frame, #e5e5ea);
+  --code-bg: rgba(120, 120, 140, 0.14);
+  position: relative;
+  outline: none;
+  color: var(--fg);
+  font-size: 17px;
+  line-height: 1.65;
+  padding-bottom: 6rem;
+}
+.editor.sweeping, .editor.sweeping :global(*) {
+  user-select: none;
+}
+.editor.nested {
+  font-size: 1em;
+  padding-bottom: 0;
+}
+
+.row {
+  position: relative;
+  display: flex;
+  border-radius: 6px;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+.row.selected {
+  background: var(--sel);
+}
+.row.dragging {
+  opacity: 0.35;
+}
+.row.drop-before::before, .row.drop-after::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--accent);
+  z-index: 2;
+}
+.row.drop-before::before {
+  top: -2px;
+}
+.row.drop-after::after {
+  bottom: -2px;
+}
+.row:hover > .gutter .handle {
+  background: rgba(120, 120, 140, 0.06);
+}
+.row:focus-within > .gutter .handle, .row.selected > .gutter .handle {
+  box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.22);
+}
+.row:focus-within:not(:has(.row:focus-within)) > .gutter .handle {
+  animation: caret-pulse 1.1s ease-in-out infinite alternate;
+}
+@media (prefers-reduced-motion: reduce) {
+  .row:focus-within:not(:has(.row:focus-within)) > .gutter .handle {
+    animation: none;
+  }
+}
+.row:hover > .gutter .grip, .row:focus-within > .gutter .grip, .row.selected > .gutter .grip {
+  opacity: 1;
+}
+.row > .gutter .handle:hover, .row.dragging > .gutter .handle {
+  background: var(--code-bg);
+}
+
+@keyframes caret-pulse {
+  from {
+    box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.06);
+  }
+  to {
+    box-shadow: inset 0 0 0 1px rgba(120, 120, 140, 0.3);
+  }
+}
+.gutter {
+  position: absolute;
+  left: -22px;
+  top: 1px;
+  bottom: 1px;
+  width: 20px;
+}
+
+.handle {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  color: var(--muted);
+  border-radius: 4px;
+  cursor: grab;
+  transition: background 0.12s, box-shadow 0.12s;
+}
+
+.grip {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.grab {
+  position: relative;
+  height: 100%;
+}
+
+.bubble {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  z-index: 30;
+  display: flex;
+  padding-left: 6px;
+  translate: 0 -50%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.12s, visibility 0s 0.12s;
+}
+.bubble::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  translate: 0 -50%;
+  border: 4px solid transparent;
+  border-right-color: var(--color-surface-contrast, #1d1d1f);
+  border-left: 0;
+}
+.grab:has(.grip:hover) .bubble, .grab:focus-within .bubble, .bubble:hover {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0.15s, 0s;
+}
+@media (hover: none) {
+  .row.selected > .gutter .bubble {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+.handle:active ~ .bubble, .editor.sweeping .bubble {
+  opacity: 0;
+  visibility: hidden;
+  transition: none;
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+  padding: 0.15em 0;
+  margin-left: calc(var(--indent, 0) * 1.7em);
+}
+
+.ce {
+  flex: 1;
+  min-width: 0;
+  min-height: 1.65em;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+  caret-color: var(--accent);
+}
+.ce.empty::before {
+  content: attr(data-placeholder);
+  color: var(--muted);
+  pointer-events: none;
+}
+.ce.done {
+  color: var(--muted);
+  text-decoration: line-through;
+}
+.ce :global(code) {
+  background: var(--code-bg);
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.ce :global(a) {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.t-p .ce.empty:not(:focus)::before,
+.t-ul .ce.empty:not(:focus)::before,
+.t-ol .ce.empty:not(:focus)::before {
+  content: "";
+}
+
+.t-h1 {
+  padding-top: 0.6em;
+}
+.t-h1 .ce {
+  font-size: 2em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.t-h2 {
+  padding-top: 0.45em;
+}
+.t-h2 .ce {
+  font-size: 1.5em;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.t-h3 {
+  padding-top: 0.3em;
+}
+.t-h3 .ce {
+  font-size: 1.2em;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.t-h4 {
+  padding-top: 0.25em;
+}
+.t-h4 .ce {
+  font-size: 1.05em;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.t-h5 {
+  padding-top: 0.2em;
+}
+.t-h5 .ce {
+  font-size: 0.95em;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.t-h6 {
+  padding-top: 0.2em;
+}
+.t-h6 .ce {
+  font-size: 0.85em;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.t-h6 .ce {
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.t-quote .ce {
+  border-left: 3px solid var(--fg);
+  padding-left: 0.9em;
+  font-style: italic;
+}
+
+.t-plugin {
+  position: relative;
+}
+
+.t-code {
+  position: relative;
+  flex-wrap: wrap;
+  row-gap: 0;
+}
+.t-code .ce {
+  flex-basis: 100%;
+  background: var(--code-bg);
+  border-radius: 8px;
+  padding: 0.7em 0.9em;
+  font: 0.88em/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+}
+.t-code:has(> .badge) .ce {
+  padding-right: 7.5em;
+}
+
+.t-hr {
+  padding: 0.6em 0;
+}</style>