edytor 1.0.0 → 2.0.0

package/dist/plugins/pageLink/PageLinkPlugin.svelte

@@ -1,8 +1,16 @@
 <svelte:options runes />
 
 <script module lang="ts">
+	import './pageLink.css';
 	import type { Snippet } from 'svelte';
-	import type { InlineBlockSnippetPayload, Plugin, TriggerContext } from '../../plugins.js';
+	import type {
+		InlineBlockSnippetPayload,
+		Plugin,
+		PluginOperations,
+		TriggerContext
+	} from '../../plugins.js';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { TextAnchor } from '../../selection/selection.svelte.js';
 	import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
 	import { withRulesAndTriggers } from '../triggers/triggers.js';
 	import { pageLinkEnglish, labelsOf } from '../../labels.js';
@@ -31,6 +39,18 @@
 		) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
 		/** A page's URL when the search answers none (`/pages/<id>`, say). */
 		href?: (page: PageLinkItem) => string | undefined;
+		/**
+		 * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+		 * at once or as a promise; `null` when it names none. Asked for a plain
+		 * text paste at a caret that is one item (trimmed, one line): a page
+		 * turns the pasted text into a `pageLink` atom, an undo step of its own
+		 * after the paste, so undo gives the text back. A promise lets the paste
+		 * land as it would without this option and swaps it when it answers, if
+		 * the text is still there.
+		 */
+		fromPaste?: (
+			text: string
+		) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
 		/** The text that opens the menu (default `[[`). */
 		char?: string;
 		/**
@@ -42,11 +62,107 @@
 		menu?: Snippet<[TriggerMenuController<PageLinkItem>]>;
 	};
 
+	/** The atom for `page`, its href sanitized. */
+	const atomOf = (page: PageLinkItem, options: PageLinkPluginOptions) => {
+		const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
+		const data: PageLinkData = {
+			id: page.id,
+			title: page.title,
+			...(href ? { href } : {}),
+			...(page.icon ? { icon: page.icon } : {})
+		};
+		return { type: 'pageLink', data };
+	};
+
+	const isPromise = <T,>(value: unknown): value is Promise<T> =>
+		typeof (value as Promise<T> | null)?.then === 'function';
+
+	/**
+	 * Swap the pasted `item`, where the paste put it (right after `start`,
+	 * past leading spaces), for `page`'s atom: one `autolink` step, so undo
+	 * gives the text back. Nothing when the view is readonly or the text is
+	 * no longer there; the caret follows the atom when it was at the text's end.
+	 */
+	const swapPasted = (
+		edytor: Edytor,
+		start: TextAnchor,
+		item: string,
+		page: PageLinkItem,
+		options: PageLinkPluginOptions
+	) => {
+		if (edytor.readonly) return;
+		const at = edytor.selection.resolveTextAnchor(start);
+		if (!at) return;
+		const { text } = at;
+		const content = text.stringContent;
+		let from = at.offset;
+		while (from < content.length && /\s/.test(content[from])) from++;
+		if (content.slice(from, from + item.length) !== item) return;
+		const block = text.parent;
+		const offset = text.segStart + from;
+		const caret = edytor.selection.caret;
+		const follows = caret?.block === block && caret.offset === offset + item.length;
+		edytor.dispatcher.run('autolink', () => {
+			if (edytor.deleteText(block.id, offset, item.length).status !== 'applied') return;
+			edytor.insertInline(block.id, offset, atomOf(page, options));
+			if (follows) edytor.dispatcher.caret({ block, offset: offset + 1 });
+		});
+	};
+
+	/**
+	 * The paste hook of `fromPaste` (it runs before the other plugins'
+	 * `onPaste`, `pasteFirst`): a plain text paste at a caret in a text,
+	 * outside islands and voids, that is one item. A page answered at once
+	 * claims the paste (the text, then the swap); a promise claims nothing
+	 * (the rich text link, the URL menu or the plain paste take it) and swaps
+	 * what landed when it answers a page.
+	 */
+	const pasteHook = (edytor: Edytor, options: PageLinkPluginOptions): PluginOperations['onPaste'] =>
+		options.fromPaste &&
+		(({ e, prevent, at }) => {
+			const { fromPaste } = options;
+			if (!fromPaste || at || edytor.readonly) return;
+			const plain = e.clipboardData?.getData('text/plain') ?? '';
+			const item = plain.trim();
+			if (!item || /[\r\n]/.test(item)) return;
+			const { value, projection } = edytor.selection;
+			if (value.kind !== 'text' || !projection.isCollapsed) return;
+			if (projection.islandRoot !== null || projection.voidRoot !== null) return;
+			const { startText: text, yStart } = edytor.selection.textRange();
+			if (!text) return;
+			const start = edytor.selection.createTextAnchor(text, yStart, 'left');
+			if (!start) return;
+			let answer: ReturnType<typeof fromPaste>;
+			try {
+				answer = fromPaste(item);
+			} catch {
+				return;
+			}
+			if (isPromise<PageLinkItem | null | undefined>(answer)) {
+				answer.then(
+					(page) => page && swapPasted(edytor, start, item, page, options),
+					() => {}
+				);
+				return;
+			}
+			const page = answer;
+			if (!page) return;
+			prevent(() => {
+				edytor.dispatcher.run('insertFromPaste', () => {
+					edytor.insertText(text.parent.id, text.segStart + yStart, item);
+					edytor.dispatcher.caret(text, yStart + item.length);
+				});
+				if (edytor.dispatcher.last?.status === 'applied')
+					swapPasted(edytor, start, item, page, options);
+			});
+		});
+
 	/**
 	 * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
 	 * your app's `search(query)` answers; picking one replaces `[[query` with
 	 * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
-	 * and puts the caret after it, in one undo step.
+	 * and puts the caret after it, in one undo step. With `fromPaste`, a
+	 * pasted text your app recognizes becomes a page link too.
 	 */
 	export const createPageLinkPlugin =
 		(options: PageLinkPluginOptions): Plugin =>
@@ -54,6 +170,9 @@
 			withRulesAndTriggers(
 				edytor,
 				{
+					...(edytor && options.fromPaste
+						? { onPaste: pasteHook(edytor, options), pasteFirst: true }
+						: {}),
 					inlineBlocks: {
 						pageLink: {
 							snippet: pageLink,
@@ -73,14 +192,7 @@
 							key: (page: PageLinkItem) => page.id,
 							menu: options.menu,
 							onPick: (page: PageLinkItem, { edytor, block, from, caret }) => {
-								const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
-								const data: PageLinkData = {
-									id: page.id,
-									title: page.title,
-									...(href ? { href } : {}),
-									...(page.icon ? { icon: page.icon } : {})
-								};
-								const atom = { type: 'pageLink', data };
+								const atom = atomOf(page, options);
 								const written = edytor.insertInline(block.id, from, atom).status === 'applied';
 								if (written) caret(from + 1);
 								return written;
@@ -104,10 +216,3 @@
 		></a
 	>
 {/snippet}
-
-<style>
-	/* One unit, on one line; its look is a theme's. */
-	.edytor-page-link {
-		white-space: nowrap;
-	}
-</style>

package/dist/plugins/pageLink/PageLinkPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './pageLink.css';
 import type { Snippet } from 'svelte';
 import type { Plugin, TriggerContext } from '../../plugins.js';
 import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
@@ -24,6 +25,16 @@ export type PageLinkPluginOptions = {
     search: (query: string, ctx: TriggerContext) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
     /** A page's URL when the search answers none (`/pages/<id>`, say). */
     href?: (page: PageLinkItem) => string | undefined;
+    /**
+     * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+     * at once or as a promise; `null` when it names none. Asked for a plain
+     * text paste at a caret that is one item (trimmed, one line): a page
+     * turns the pasted text into a `pageLink` atom, an undo step of its own
+     * after the paste, so undo gives the text back. A promise lets the paste
+     * land as it would without this option and swaps it when it answers, if
+     * the text is still there.
+     */
+    fromPaste?: (text: string) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
     /** The text that opens the menu (default `[[`). */
     char?: string;
     /**
@@ -38,7 +49,8 @@ export type PageLinkPluginOptions = {
  * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
  * your app's `search(query)` answers; picking one replaces `[[query` with
  * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
- * and puts the caret after it, in one undo step.
+ * and puts the caret after it, in one undo step. With `fromPaste`, a
+ * pasted text your app recognizes becomes a page link too.
  */
 export declare const createPageLinkPlugin: (options: PageLinkPluginOptions) => Plugin;
 declare const PageLinkPlugin: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/plugins/pageLink/pageLink.css

@@ -0,0 +1,6 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* One unit, on one line; its look is a theme's. */
+.edytor-page-link {
+	white-space: nowrap;
+}

package/dist/plugins/richtext/RichTextPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import './richtext.css';
 	import type { Plugin, BlockSnippetPayload, KindPreset, PlaceholderView } from '../../plugins.js';
 	import { branded } from '../brand.js';
 	import type { Edytor } from '../../edytor.svelte.js';
@@ -32,6 +33,9 @@
 		iconOf
 	} from './callouts.js';
 	import { listen } from '../../utils/listen.js';
+	import { onLastLine } from '../../session/navigation.js';
+	import { bodyShows } from '../../selection/visibility.js';
+	import { openBody } from './body.js';
 	import type { Snippet } from 'svelte';
 	import {
 		richTextControls,
@@ -262,6 +266,16 @@
 				'mod+shift+s': setMarkAndSelect('strike'),
 				'mod+shift+x': setMarkAndSelect('strike'),
 				'mod+shift+h': setMarkAndSelect('color', 'red'),
+				// ArrowDown on the last line of a header whose body shows and is empty
+				// (an open toggle, a callout) goes into that body, as its hint's click
+				// does (`body.down`): one command, one undo step. Elsewhere the key
+				// moves as usual.
+				arrowdown: ({ prevent }) => {
+					const header = onLastLine(edytor);
+					if (!header || header.hasChildren || !bodyShows(header)) return;
+					if (!edytor.dispatcher.permits()) return;
+					prevent(() => void openBody(header));
+				},
 				// Mod+Enter checks or unchecks each shown to-do it is in (Notion): the
 				// selected blocks', else the caret's; the toggles among them open or
 				// close as with the built-in binding, in the same key.
@@ -760,10 +774,3 @@
 {#snippet list({ children }: BlockSnippetPayload)}<!--
 -->{#if children}<div>{@render children()}</div>{/if}<!--
 -->{/snippet}
-
-<style>
-	/* An empty body's hint: chrome, not text (`body.hint`); its look is a theme's. */
-	:global([data-edytor-empty-body]) {
-		user-select: none;
-	}
-</style>

package/dist/plugins/richtext/RichTextPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './richtext.css';
 import type { Plugin, PlaceholderView } from '../../plugins.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import { richTextOperations } from './richTextOperations.js';

package/dist/plugins/richtext/richtext.css

@@ -0,0 +1,6 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* An empty body's hint: chrome, not text (`body.hint`); its look is a theme's. */
+[data-edytor-empty-body] {
+	user-select: none;
+}

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

@@ -197,7 +197,8 @@ export class TableChrome extends ChromeList {
     }
     /**
      * Where the grips stand, layer-relative, the point each centers on: the
-     * row grip on the grid's left edge, at the middle of the row it stands
+     * row grip on the left edge of the part of the grid its box shows
+     * (`table.overflow`: the box's edge once the grid is scrolled), at the middle of the row it stands
      * for; the column grip on its top edge, at the middle of the column it
      * stands for, while that middle shows (the grip a drag started from
      * stays, its source, even scrolled out of view).
@@ -211,7 +212,7 @@ export class TableChrome extends ChromeList {
         const x = c ? c.left + c.width / 2 : 0;
         return [
             ...(row && r
-                ? [{ ...row, kind: 'row', x: row.layout.left, y: r.top + r.height / 2 }]
+                ? [{ ...row, kind: 'row', x: this.span.left, y: r.top + r.height / 2 }]
                 : []),
             ...(column && (this.moving?.kind === 'column' || this.inView(x))
                 ? [{ ...column, kind: 'column', x, y: column.layout.top }]
@@ -248,7 +249,7 @@ export class TableChrome extends ChromeList {
         const { layout, index } = at;
         if (kind === 'row') {
             const row = layout.rows[index];
-            return { left: layout.left - 9, top: row.top + Math.min(row.height, 28) };
+            return { left: this.span.left - 9, top: row.top + Math.min(row.height, 28) };
         }
         const column = layout.columns[index];
         return { left: column.left + column.width / 2 - 12, top: layout.top + 10 };

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

@@ -1,5 +1,7 @@
 import type { Edytor } from '../edytor.svelte.js';
-import type { Plugin, PluginOperations } from '../plugins.js';
+import type { PluginDefinitions, PluginOperations } from '../plugins.js';
+import type { DropAt } from '../session/attempt.js';
+import { type FileDropPort, type ViewUploads } from '../session/uploads.js';
 /** What an `upload` may report while it runs. */
 export type UploadReport = {
     /** The share sent so far, `0` to `1`: the block shows it as a bar. */
@@ -17,8 +19,14 @@ export type Uploader = (file: File, report: UploadReport) => Promise<string>;
  */
 export type FileUpload = {
     readonly status: 'uploading';
-    /** The file, shown while it uploads (a `blob:` URL; `null` where there is none). */
+    /**
+     * The file, shown while it uploads: its object URL (`blob:`), this
+     * view's only, never stored; `null` where there is none.
+     */
     readonly preview: string | null;
+    /** The file's name and size in bytes, shown at once. */
+    readonly name: string;
+    readonly size: number;
     /** The share sent, `0` to `1`; `null` until `upload` reports one. */
     readonly progress: number | null;
 } | {
@@ -29,10 +37,12 @@ export type FileUpload = {
 };
 /**
  * What files a kind takes (its record's `upload`, `BlockDefinition`): which,
- * and the data an upload's answer writes. The view's uploader, if the
- * uploads plugin is listed, sends them.
+ * who sends them (`send`, its plugin's `upload` option) and the data an
+ * upload's answer writes. A kind without it takes no files.
  */
 export type KindUpload = {
+    /** Upload a file of this kind and answer its URL (its plugin's `upload`). */
+    send: Uploader;
     /** Whether it takes `file`. */
     accepts: (file: File) => boolean;
     /** It takes any file no other kind takes (the file block): asked last. */
@@ -41,14 +51,13 @@ export type KindUpload = {
     data: (file: File, answer: string) => Record<string, unknown> | null;
     /** Whether the block has a source already (a peer's, a link's): its upload then writes nothing. */
     filled: (data: Record<string, unknown>) => boolean;
-    /** Show the file while it uploads (an image's `blob:` preview). */
-    preview?: boolean;
 };
 /**
- * The view's uploads (`media.files`), one per view, the uploads plugin's:
- * its uploader (`upload`, an empty block's Upload too) and the uploads of
- * pasted and dropped files, session state, never in the document. A kind
- * takes files by its record's `upload`; a paste or a drop (a drop replays
+ * The view's uploads (`media.files`), one per view, claimed by the first
+ * media plugin listed with an `upload`: the uploads of pasted, dropped and
+ * picked files (an empty block's Upload), session state, never in the
+ * document. A kind takes files by its record's `upload`, and sends them
+ * with its `send` (its plugin's uploader); a paste or a drop (a drop replays
  * the paste hooks) of files the kinds take places one empty block per
  * file, each of the kind that takes it (`fallback` last), in the
  * clipboard's order, as one paste (one command, one undo step), and each
@@ -62,14 +71,14 @@ export type KindUpload = {
  * (`fill`, asked by the empty block's render), so a redo brings it back
  * whole.
  */
-export declare class FileUploads {
+export declare class FileUploads implements ViewUploads {
     #private;
     private edytor;
-    /** The view's uploader. */
-    readonly upload: Uploader;
-    constructor(edytor: Edytor, 
-    /** The view's uploader. */
-    upload: Uploader);
+    constructor(edytor: Edytor);
+    /** The kind that takes `file`, if any. */
+    kindOf: (file: File) => string | undefined;
+    /** Files dragged from outside: the drop indicator and the placement (`fileDrop.ts`). */
+    readonly drop: FileDropPort;
     /** The upload of block `id` in this view (reactive), if any. */
     of: (id: string) => FileUpload | undefined;
     /**
@@ -78,8 +87,20 @@ export declare class FileUploads {
      * clipboard).
      */
     paste: NonNullable<PluginOperations['onPaste']>;
-    /** Place a block per file at the selection (one paste), then upload each. */
-    insert: (files: readonly File[]) => void;
+    /**
+     * Place a block per file at the selection (one paste), or at a drop's
+     * placement (`at`: beside, before, after or inside a block, one command),
+     * then upload each.
+     */
+    insert: (files: readonly File[], at?: DropAt) => void;
+    /**
+     * Upload `file`, picked on the empty block `id` (its Upload), with its
+     * kind's uploader, the block showing it meanwhile, and hand the answer to
+     * `land` before the preview goes (so the block never shows nothing
+     * between them): `false` when it failed (the block then shows no
+     * upload; the caller says why).
+     */
+    pick: (id: string, file: File, land: (answer: string) => void) => Promise<boolean>;
     /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
     clear: (id: string) => void;
     /**
@@ -91,20 +112,12 @@ export declare class FileUploads {
     /** Release every preview. */
     destroy: () => void;
 }
-/** The view's uploads, when it lists the uploads plugin. */
+/** The view's uploads, when a media plugin with an `upload` is listed. */
 export declare const fileUploads: (edytor: Edytor | undefined) => FileUploads | undefined;
-export type UploadsOptions = {
-    /**
-     * Upload a file and answer its URL: an empty image or media block's
-     * Upload, and the pasted and dropped files a kind takes, each placed as a
-     * block of that kind at once (one undo step) and filled with the URL this
-     * answers (the block shows the progress it reports).
-     */
-    upload: Uploader;
-};
 /**
- * File uploads (Notion's): the view's one uploader, for every kind whose
- * record takes files (`upload`: the image, file, video and audio kinds).
- * Without it, only links are embedded. The first listed claims the view.
+ * The hooks of a media plugin given an `upload` (its kind's record carries
+ * it, `KindUpload.send`): the first such plugin listed in a view claims the
+ * view's one `FileUploads` and runs its paste hook (a drop replays it) and
+ * teardown; the others add none.
  */
-export declare const createUploadsPlugin: ({ upload }: UploadsOptions) => Plugin;
+export declare const uploadHooks: (edytor: Edytor | undefined, upload: Uploader | undefined) => PluginOperations & PluginDefinitions;

package/dist/plugins/uploads.svelte.js

@@ -2,11 +2,15 @@ import { SvelteMap } from 'svelte/reactivity';
 import { pasteFlow } from '../clipboard/insertClipboardFragment.js';
 import { jsonBlockToSpec } from '../utils/json.js';
 import { id as mint } from '../utils.js';
+import { placeNew } from '../session/moves.js';
+import { claimUploads, viewUploads } from '../session/uploads.js';
+import { fileDragEnd, fileDragOver, fileDropAt } from './fileDrop.js';
 /**
- * The view's uploads (`media.files`), one per view, the uploads plugin's:
- * its uploader (`upload`, an empty block's Upload too) and the uploads of
- * pasted and dropped files, session state, never in the document. A kind
- * takes files by its record's `upload`; a paste or a drop (a drop replays
+ * The view's uploads (`media.files`), one per view, claimed by the first
+ * media plugin listed with an `upload`: the uploads of pasted, dropped and
+ * picked files (an empty block's Upload), session state, never in the
+ * document. A kind takes files by its record's `upload`, and sends them
+ * with its `send` (its plugin's uploader); a paste or a drop (a drop replays
  * the paste hooks) of files the kinds take places one empty block per
  * file, each of the kind that takes it (`fallback` last), in the
  * clipboard's order, as one paste (one command, one undo step), and each
@@ -22,13 +26,9 @@ import { id as mint } from '../utils.js';
  */
 export class FileUploads {
     edytor;
-    upload;
     #uploads = new SvelteMap();
-    constructor(edytor, 
-    /** The view's uploader. */
-    upload) {
+    constructor(edytor) {
         this.edytor = edytor;
-        this.upload = upload;
     }
     /** The kinds that take files (their records' `upload`), in registration order. */
     get #kinds() {
@@ -37,6 +37,14 @@ export class FileUploads {
     /** The kind that takes `file`, if any. */
     #kindOf = (file) => this.#kinds.find((kind) => !kind.fallback && kind.accepts(file)) ??
         this.#kinds.find((kind) => kind.fallback && kind.accepts(file));
+    /** The kind that takes `file`, if any. */
+    kindOf = (file) => this.#kindOf(file)?.type;
+    /** Files dragged from outside: the drop indicator and the placement (`fileDrop.ts`). */
+    drop = {
+        over: (event) => fileDragOver(this.edytor, event) !== null,
+        at: (event) => fileDropAt(this.edytor, event),
+        end: () => fileDragEnd(this.edytor)
+    };
     /** The upload of block `id` in this view (reactive), if any. */
     of = (id) => this.#uploads.get(id);
     /**
@@ -44,15 +52,19 @@ export class FileUploads {
      * shows text (an office app puts a picture of copied text on the
      * clipboard).
      */
-    paste = ({ e, prevent }) => {
+    paste = ({ e, prevent, at }) => {
         if (this.edytor.readonly)
             return;
         const files = Array.from(e.clipboardData?.files ?? []).filter((file) => this.#kindOf(file));
         if (files.length && !showsText(e.clipboardData?.getData('text/html')))
-            prevent(() => this.insert(files));
+            prevent(() => this.insert(files, at));
     };
-    /** Place a block per file at the selection (one paste), then upload each. */
-    insert = (files) => {
+    /**
+     * Place a block per file at the selection (one paste), or at a drop's
+     * placement (`at`: beside, before, after or inside a block, one command),
+     * then upload each.
+     */
+    insert = (files, at) => {
         const { edytor } = this;
         const placed = files.flatMap((file) => {
             const kind = this.#kindOf(file);
@@ -61,16 +73,38 @@ export class FileUploads {
         if (!placed.length)
             return;
         const lines = placed.map(({ kind, id }) => jsonBlockToSpec({ id, type: kind.type, data: {}, content: [] }));
-        edytor.dispatcher.run('insertFromPaste', () => pasteFlow(edytor, { lines }));
+        const target = at && edytor.idToBlock.get(at.block);
+        if (at && target)
+            edytor.dispatcher.run('insertFromDrop', () => placeNew(edytor, placed.map(({ kind, id }) => ({ id, type: kind.type })), target, at.position));
+        else
+            edytor.dispatcher.run('insertFromPaste', () => pasteFlow(edytor, { lines }));
         for (const { file, kind, id } of placed) {
             // Refused, or placed as no such block (a code line takes plain lines, `flow.lines`).
             if (!edytor.facade.isVisibleBlock(id) || edytor.facade.blockTypeOf(id) !== kind.type)
                 continue;
-            const preview = kind.preview && typeof URL.createObjectURL === 'function'
-                ? URL.createObjectURL(file)
-                : null;
-            this.#uploads.set(id, { status: 'uploading', preview, progress: null });
-            void this.#send(id, kind, file, preview);
+            void this.#send(id, kind, file);
+        }
+    };
+    /**
+     * Upload `file`, picked on the empty block `id` (its Upload), with its
+     * kind's uploader, the block showing it meanwhile, and hand the answer to
+     * `land` before the preview goes (so the block never shows nothing
+     * between them): `false` when it failed (the block then shows no
+     * upload; the caller says why).
+     */
+    pick = async (id, file, land) => {
+        const kind = this.edytor.idToBlock.get(id)?.definition.upload;
+        if (!kind)
+            return false;
+        try {
+            land(await this.#run(id, kind, file));
+            return true;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            this.#settle(id);
         }
     };
     /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
@@ -104,7 +138,21 @@ export class FileUploads {
                 URL.revokeObjectURL(upload.preview);
         this.#uploads.clear();
     };
-    #send = async (id, kind, file, preview) => {
+    /**
+     * Send `file` with the kind's uploader, block `id` showing it meanwhile
+     * (`uploading`: its object URL, name, size and progress): the answer.
+     * The object URL stays until `#settle` (after the answer is stored, so
+     * the block never shows nothing between them).
+     */
+    #run = (id, kind, file) => {
+        const preview = typeof URL.createObjectURL === 'function' ? URL.createObjectURL(file) : null;
+        this.#uploads.set(id, {
+            status: 'uploading',
+            preview,
+            name: file.name,
+            size: file.size,
+            progress: null
+        });
         const report = {
             progress: (fraction) => {
                 const upload = this.#uploads.get(id);
@@ -113,28 +161,43 @@ export class FileUploads {
                 this.#uploads.set(id, { ...upload, progress: Math.min(1, Math.max(0, fraction)) });
             }
         };
+        return kind.send(file, report);
+    };
+    /** The upload of `id` ended: revoke its object URL and forget it, if it still runs. */
+    #settle = (id) => {
+        const upload = this.#uploads.get(id);
+        if (upload?.status !== 'uploading')
+            return;
+        if (upload.preview)
+            URL.revokeObjectURL(upload.preview);
+        this.#uploads.delete(id);
+    };
+    #send = async (id, kind, file) => {
         let data;
         try {
-            data = kind.data(file, await this.upload(file, report));
+            data = kind.data(file, await this.#run(id, kind, file));
         }
         catch {
             data = null;
         }
         const { edytor } = this;
-        if (preview)
-            URL.revokeObjectURL(preview);
         if (edytor.destroyed)
             return;
         const block = edytor.idToBlock.get(id);
+        const upload = this.#uploads.get(id);
+        const preview = upload?.status === 'uploading' ? upload.preview : null;
         // Given a source meanwhile (a peer, the link field): nothing to fill.
         if (block?.isInTree && kind.filled(block.data))
-            return this.#uploads.delete(id);
-        if (!data)
-            return this.#uploads.set(id, { status: 'failed' });
+            this.#uploads.delete(id);
+        else if (!data)
+            this.#uploads.set(id, { status: 'failed' });
         // Not shown (undone, deleted): held until it shows again (`fill`).
-        if (!block?.isInTree)
-            return this.#uploads.set(id, { status: 'landed', data });
-        this.#write(id, data);
+        else if (!block?.isInTree)
+            this.#uploads.set(id, { status: 'landed', data });
+        else
+            this.#write(id, data);
+        if (preview)
+            URL.revokeObjectURL(preview);
     };
     /** The data's write, outside the history; refused (readonly), it is held for the next show. */
     #write = (id, data) => {
@@ -150,18 +213,21 @@ export class FileUploads {
 const showsText = (html) => !!html &&
     typeof DOMParser !== 'undefined' &&
     !!new DOMParser().parseFromString(html, 'text/html').body.textContent?.trim();
-const views = new WeakMap();
-/** The view's uploads, when it lists the uploads plugin. */
-export const fileUploads = (edytor) => edytor && views.get(edytor);
+/** The view's uploads, when a media plugin with an `upload` is listed. */
+export const fileUploads = (edytor) => {
+    const uploads = viewUploads(edytor);
+    return uploads instanceof FileUploads ? uploads : undefined;
+};
 /**
- * File uploads (Notion's): the view's one uploader, for every kind whose
- * record takes files (`upload`: the image, file, video and audio kinds).
- * Without it, only links are embedded. The first listed claims the view.
+ * The hooks of a media plugin given an `upload` (its kind's record carries
+ * it, `KindUpload.send`): the first such plugin listed in a view claims the
+ * view's one `FileUploads` and runs its paste hook (a drop replays it) and
+ * teardown; the others add none.
  */
-export const createUploadsPlugin = ({ upload }) => (edytor) => {
-    if (!edytor || views.has(edytor))
+export const uploadHooks = (edytor, upload) => {
+    if (!edytor || !upload || viewUploads(edytor))
         return {};
-    const uploads = new FileUploads(edytor, upload);
-    views.set(edytor, uploads);
+    const uploads = new FileUploads(edytor);
+    claimUploads(edytor, uploads);
     return { onPaste: uploads.paste, onEdytorAttached: () => uploads.destroy };
 };