edytor 1.0.0 → 3.0.0

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

@@ -1,10 +1,9 @@
-import { onPress, takeKeys } from '../../events/onFocus.js';
-import { pin } from '../../surface/overlay.js';
+import { takeKeys } from '../../events/onFocus.js';
 import { imageAlignOf, imageAltOf } from './image.js';
 import { imageControls } from './controls.svelte.js';
-import { identify, keepFocus } from '../chrome.js';
+import { identify, keepFocus, onPressOutside, virtualAnchor } from '../chrome.js';
 import { all, listen } from '../../utils/listen.js';
-import ImageToolbarHost from './ImageToolbarHost.svelte';
+import { keysOf } from '../list.svelte.js';
 /** Where a press keeps the alt field open: the toolbar (its Alt button toggles it) and the field's own. */
 const ALT_CHROME = '[data-edytor-image-alt-panel], [data-edytor-image-toolbar], [data-edytor-image-alt]';
 /**
@@ -15,11 +14,22 @@ const ALT_CHROME = '[data-edytor-image-alt-panel], [data-edytor-image-toolbar],
  */
 export class ImageToolbar {
     controls;
+    snippet;
+    /** @internal */
     constructor(
     /** @internal */
-    controls) {
+    controls, 
+    /** The app's markup. @internal */
+    snippet) {
         this.controls = controls;
+        this.snippet = snippet;
     }
+    /**
+     * Where the toolbar stands (`ChromeAnchor`): the image the chrome is
+     * on, whose top right your `toolbar` places itself in.
+     */
+    anchor = virtualAnchor(() => this.#image()?.getBoundingClientRect(), () => this.#image());
+    #image = () => this.#block()?.node?.querySelector('[data-edytor-image] img');
     /** The measured image the toolbar is on (`null`: none). */
     get box() {
         return this.controls.box;
@@ -59,20 +69,6 @@ export class ImageToolbar {
         this.editing = this.editing ? null : (this.box?.id ?? null);
         this.#edytor.overlay.invalidate();
     };
-    /**
-     * A press anywhere (`onPress`, capture): one outside the alt panel and the
-     * toolbar (whose Alt button toggles it) closes the field, so the chrome
-     * follows the pointer again.
-     * @internal
-     */
-    pressed = (event) => {
-        const target = event.target;
-        if (this.editing === null)
-            return;
-        if (target?.closest?.(ALT_CHROME))
-            return;
-        this.closeAlt();
-    };
     /** Focus left the alt field: for somewhere outside its panel, the field closes. @internal */
     blurred = (event) => {
         const to = event.relatedTarget;
@@ -106,13 +102,8 @@ export class ImageToolbar {
         identify(node, this.#edytor.popups.idOf('image-alt'));
         node.setAttribute('data-edytor-image-alt', '');
         node.focus({ preventScroll: true });
-        const keydown = (event) => {
-            if (event.isComposing || (event.key !== 'Enter' && event.key !== 'Escape'))
-                return;
-            event.preventDefault();
-            this.closeAlt(true);
-        };
-        return all(listen(node, 'keydown', keydown), listen(node, 'focusout', this.blurred));
+        const close = () => this.closeAlt(true);
+        return all(listen(node, 'keydown', keysOf({ Enter: close, Escape: close })), listen(node, 'focusout', this.blurred));
     };
     /** Close the alt field; with `keys`, the editor takes the keys back. */
     closeAlt = (keys = false) => {
@@ -135,11 +126,10 @@ export const createImageToolbarPlugin = ({ toolbar }) => (edytor) => ({
         const controls = imageControls.get(edytor);
         if (!controls || controls.toolbar)
             return;
-        const bar = (controls.toolbar = new ImageToolbar(controls));
+        const bar = (controls.toolbar = new ImageToolbar(controls, toolbar));
         return all(
-        // A press outside the alt panel closes it (WebKit's lone `mousedown` too).
-        onPress(edytor, node.ownerDocument, bar.pressed, true), edytor.overlay.mount(ImageToolbarHost, { toolbar: bar, snippet: toolbar }, 'edytor-image-toolbar-host', 
-        // With the image chrome: above the block handles and the column bands.
-        7, (host) => () => pin(host)), () => (controls.toolbar = undefined));
+        // A press outside the alt panel and the toolbar (whose Alt button toggles it)
+        // closes it (WebKit's lone `mousedown` too).
+        onPressOutside(edytor, node.ownerDocument, ALT_CHROME, () => bar.closeAlt()), () => (controls.toolbar = undefined));
     }
 });

package/dist/plugins/index.d.ts

@@ -1,8 +1,7 @@
 export { createRichTextPlugin, richTextOperations, richTextPlaceholder, type RichTextPluginOptions, type TodoCheckboxPayload, type CalloutIconPayload, type EmptyBodyPayload } from './richtext/RichTextPlugin.svelte';
 export { CALLOUT_ICONS, createCalloutIconsPlugin, type CalloutIconPicker, type CalloutIconsOptions } from './richtext/calloutIcons.svelte.js';
-export { createUploadsPlugin, type UploadsOptions } from './uploads.svelte.js';
 export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
-export type { MenuItemPayload } from './chrome.js';
+export type { ChromeAnchor, MenuItemPayload } from './chrome.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT, type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
 export { createBlockHandlesPlugin, type BlockHandlesOptions, type BlockHandleSnippetPayload } from './blockHandles/blockHandlesPlugin.js';
 export { createCodePlugin, CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOptions } from './code/CodePlugin.svelte';
@@ -21,12 +20,12 @@ export { createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
 export { createSuggestionsPlugin, type SuggestionBarOptions, type SuggestionBarPayload } from './suggestions/suggestionsPlugin.js';
 export { createSuggestionBarPlugin } from './suggestions/SuggestionBars.svelte';
 export type { BlockMenuOptions, BlockMenuController, BlockMenuAction, BlockMenuColor } from './blockMenu/BlockMenuController.svelte.js';
-export { createImagePlugin, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
+export { createImagePlugin, type ImagePluginOptions, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
 export { createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions, type EmbedFallbackPayload } from './media/EmbedPlugin.svelte';
 export { createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview, type BookmarkCardPayload } from './media/BookmarkPlugin.svelte';
 export { createFilePlugin, type FilePluginOptions, type FileRowPayload } from './media/FilePlugin.svelte';
-export { createVideoPlugin } from './media/VideoPlugin.svelte';
-export { createAudioPlugin } from './media/AudioPlugin.svelte';
+export { createVideoPlugin, type VideoPluginOptions } from './media/VideoPlugin.svelte';
+export { createAudioPlugin, type AudioPluginOptions } from './media/AudioPlugin.svelte';
 export { safeWebUrl, safeMediaSrc, type MediaKind } from './media/media.js';
 export type { MediaEmptyController, MediaEmptyFailure } from './media/empty.svelte.js';
 export { createMediaEmptyPlugin, type MediaEmptyOptions } from './media/MediaEmpty.svelte';

package/dist/plugins/index.js

@@ -1,6 +1,5 @@
 export { createRichTextPlugin, richTextOperations, richTextPlaceholder } from './richtext/RichTextPlugin.svelte';
 export { CALLOUT_ICONS, createCalloutIconsPlugin } from './richtext/calloutIcons.svelte.js';
-export { createUploadsPlugin } from './uploads.svelte.js';
 export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
 export { createBlockHandlesPlugin } from './blockHandles/blockHandlesPlugin.js';

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

@@ -36,6 +36,13 @@ type Steps = {
     ends?: boolean;
     usable?: (index: number) => boolean;
 };
+/**
+ * A field's or a control's keys (`keydown`): `keys[event.key]` runs and the
+ * key's default is prevented (with `stop`, it goes no further), unless the
+ * handler answers `false`; a key an IME composes, or one already prevented,
+ * is left alone.
+ */
+export declare const keysOf: (keys: Partial<Record<string, (event: KeyboardEvent) => unknown>>, stop?: boolean) => ((event: KeyboardEvent) => void);
 /**
  * A key on a menu that holds the keyboard itself, not a field (WAI-ARIA's
  * menu keys): the arrows, Home and End move its row (`stepRow`), Enter and
@@ -112,6 +119,8 @@ export declare abstract class ChromeList {
     role: 'listbox' | 'menu', open?: (node: HTMLElement) => Omit<Popup, 'id'> | false | null);
     /** How many rows the keyboard walks. */
     protected abstract get count(): number;
+    /** The view is readonly (reactive): the list closes. */
+    get readonly(): boolean;
     /** The list's element id (page-unique), for `aria-controls`. */
     get listId(): string;
     /** Row `index`'s element id (page-unique), for `aria-activedescendant`. */

package/dist/plugins/list.svelte.js

@@ -70,6 +70,20 @@ export const stepRow = (key, at, count, { columns = 0, ends = false, usable = ()
     if (ends && length && (key === 'Home' || key === 'End'))
         return rows[key === 'Home' ? 0 : length - 1];
 };
+/**
+ * A field's or a control's keys (`keydown`): `keys[event.key]` runs and the
+ * key's default is prevented (with `stop`, it goes no further), unless the
+ * handler answers `false`; a key an IME composes, or one already prevented,
+ * is left alone.
+ */
+export const keysOf = (keys, stop = false) => (event) => {
+    const run = keys[event.key];
+    if (event.defaultPrevented || event.isComposing || !run || run(event) === false)
+        return;
+    event.preventDefault();
+    if (stop)
+        event.stopPropagation();
+};
 /**
  * A key on a menu that holds the keyboard itself, not a field (WAI-ARIA's
  * menu keys): the arrows, Home and End move its row (`stepRow`), Enter and
@@ -192,6 +206,10 @@ export class ChromeList {
         this.role = role;
         this.popup = listPopup(edytor, owner, role, open);
     }
+    /** The view is readonly (reactive): the list closes. */
+    get readonly() {
+        return this.edytor.readonly;
+    }
     /** The list's element id (page-unique), for `aria-controls`. */
     get listId() {
         return this.edytor.popups.idOf(this.owner);

package/dist/plugins/markdownShortcuts.js

@@ -91,12 +91,12 @@ export const createMarkdownShortcutsPlugin = () => (edytor) => {
             if (!text)
                 return false;
             const { id } = block;
-            // The segment's start, in block offsets: the caret, less the text before it.
-            const at = to - before.length + found.start;
+            // The segment's start, in block offsets: the caret (after the typed text), less the text before it.
+            const at = to - match.input.length + found.start;
             const { facade, dispatcher } = edytor;
-            const plan = () => facade.compose(facade.prepare.formatRange(id, at + found.open, found.content, { [found.mark]: true }), ...(found.closing
-                ? [facade.prepare.deleteText(id, at + found.open + found.content, found.closing)]
-                : []), facade.prepare.deleteText(id, at, found.open));
+            const plan = () => facade.compose(facade.prepare.formatRange(id, at + found.open, found.content, { [found.mark]: true }), 
+            // The closing marker, the typed character with it.
+            facade.prepare.deleteText(id, at + found.open + found.content, found.closing + typed.length), facade.prepare.deleteText(id, at, found.open));
             const payload = { value: typed, start: before.length, end: before.length };
             const result = dispatcher.plan('inlineMarkdown', payload, plan, block, text);
             if (result.status !== 'applied')

package/dist/plugins/marquee/marqueePlugin.js

@@ -3,9 +3,6 @@ import MarqueeBox from './MarqueeBox.svelte';
 import { MarqueeController } from './MarqueeController.svelte.js';
 /** The handle gutter: a block handle's own box, around its buttons (never a button). */
 const HANDLE_HOST = '[data-edytor-block-handle-host]';
-const controllers = new WeakMap();
-/** The marquee's controller of `edytor`; `undefined` when the plugin is not listed. @internal */
-export const marqueeController = (edytor) => controllers.get(edytor);
 /**
  * Block selection with a rectangle (Notion's rubber band), opt-in: a press
  * in the editor's empty area — the margins beside the blocks (the handle
@@ -18,7 +15,6 @@ export const marqueeController = (edytor) => controllers.get(edytor);
  */
 export const createMarqueePlugin = (options = {}) => (edytor) => {
     const controller = new MarqueeController(edytor, options.threshold ?? 4);
-    controllers.set(edytor, controller);
     return {
         onEdytorAttached: ({ node }) => {
             const layer = edytor.overlay.layer;

package/dist/plugins/media/AudioPlugin.svelte

@@ -1,11 +1,23 @@
 <script module lang="ts">
 	import type { Plugin } from '../../plugins.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
+	import type { Uploader } from '../uploads.svelte.js';
+
+	export type AudioPluginOptions = {
+		/**
+		 * Upload a audio file and answer its URL: an empty block's Upload, and
+		 * the pasted and dropped audio files, each placed as a block at once
+		 * (one undo step), showing its name and progress, then filled with the
+		 * URL this answers. Without it, audios are only linked.
+		 */
+		upload?: Uploader;
+	};
 
 	/**
 	 * Notion's audio block: an audio file (an `http(s)` link, or an upload
 	 * through `upload`) in the browser's player, with an editable caption.
 	 * Void: its only text is the caption.
 	 */
-	export const createAudioPlugin = (): Plugin => sourcePlugin('audio', ['sound', 'music', 'mp3']);
+	export const createAudioPlugin = ({ upload }: AudioPluginOptions = {}): Plugin =>
+		sourcePlugin('audio', ['sound', 'music', 'mp3'], {}, upload);
 </script>

package/dist/plugins/media/AudioPlugin.svelte.d.ts

@@ -1,10 +1,20 @@
 import type { Plugin } from '../../plugins.js';
+import type { Uploader } from '../uploads.svelte.js';
+export type AudioPluginOptions = {
+    /**
+     * Upload a audio file and answer its URL: an empty block's Upload, and
+     * the pasted and dropped audio files, each placed as a block at once
+     * (one undo step), showing its name and progress, then filled with the
+     * URL this answers. Without it, audios are only linked.
+     */
+    upload?: Uploader;
+};
 /**
  * Notion's audio block: an audio file (an `http(s)` link, or an upload
  * through `upload`) in the browser's player, with an editable caption.
  * Void: its only text is the caption.
  */
-export declare const createAudioPlugin: () => Plugin;
+export declare const createAudioPlugin: ({ upload }?: AudioPluginOptions) => Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/media/BookmarkPlugin.svelte

@@ -1,21 +1,11 @@
 <script module lang="ts">
-	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
+	import { mediaForms } from '../../export/forms.js';
+	import type { Plugin } from '../../plugins.js';
 	import type { Block } from '../../block/block.svelte.js';
-	import EmptySlot from './EmptySlot.svelte';
-	import Control from '../Control.svelte';
+	import { previewData, source } from './SourceBlock.svelte';
 	import type { Snippet } from 'svelte';
 	import { urlPaste, type UrlPasteController } from './urlPaste.svelte.js';
-	import {
-		MEDIA_ICONS,
-		escapeHtml,
-		mediaControl,
-		mediaLink,
-		mediaPlugin,
-		mediaView,
-		safeWebUrl,
-		LINK_REL,
-		type BookmarkCardPayload
-	} from './media.js';
+	import { MEDIA_ICONS, mediaPlugin, safeWebUrl, type BookmarkCardPayload } from './media.js';
 
 	export type { BookmarkCardPayload };
 
@@ -54,21 +44,6 @@
 		card?: Snippet<[BookmarkCardPayload]>;
 	};
 
-	/** A preview's text field, trimmed and capped: it is stored in the document. */
-	const text = (value: unknown, max: number) =>
-		typeof value === 'string' && value.trim() ? value.trim().slice(0, max) : undefined;
-
-	/** The fields of `preview` a bookmark stores: text capped, images {@link safeWebUrl} only. */
-	const previewData = (preview: BookmarkPreview | null | undefined) => {
-		const fields = {
-			title: text(preview?.title, 300),
-			description: text(preview?.description, 1000),
-			image: safeWebUrl(preview?.image) ?? undefined,
-			icon: safeWebUrl(preview?.icon) ?? undefined
-		};
-		return Object.fromEntries(Object.entries(fields).filter(([, value]) => value !== undefined));
-	};
-
 	/**
 	 * The unfurl's writes: background bookkeeping, not a gesture, so no
 	 * view's history tracks this origin (`crdt/document.ts`, History). The
@@ -77,9 +52,6 @@
 	 */
 	const UNFURL_ORIGIN = Symbol('edytor.bookmark.unfurl');
 
-	/** The view's card markup, if the app gave one. */
-	const cardOf = mediaControl('bookmark', 'card');
-
 	/**
 	 * Notion's web bookmark: a card linking to a page, with its title,
 	 * description and images when your `unfurl` answers them, and an
@@ -135,72 +107,9 @@
 					options.menu
 				),
 				record: {
-					snippet: bookmark,
-					html: (block, caption) => {
-						const url = safeWebUrl(block.data?.url);
-						const title = text(block.data?.title, 300) ?? url;
-						const link = url ? `<a href="${escapeHtml(url)}">${escapeHtml(title!)}</a>` : '';
-						return `<figure data-edytor-bookmark>${link}<figcaption>${caption}</figcaption></figure>`;
-					},
-					plain: (block, caption) =>
-						[safeWebUrl(block.data?.url), caption].filter(Boolean).join('\n'),
-					// Its own export: a `figure[data-edytor-bookmark]` holding the link.
-					parse: (el) => {
-						if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-bookmark')) return;
-						const anchor = el.querySelector('a[href]');
-						const url = safeWebUrl(anchor?.getAttribute('href'));
-						const title = text(anchor?.textContent, 300);
-						return url ? { url, ...(title && title !== url ? { title } : {}) } : undefined;
-					}
+					snippet: source,
+					...mediaForms().bookmark
 				}
 			};
 		});
 </script>
-
-{#snippet bookmark({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
-	{@const url = safeWebUrl(block.data.url)}
-	{#if url}
-		<div use:block.void data-edytor-bookmark>
-			<Control
-				own={cardOf}
-				{initial}
-				payload={{
-					block: block.handle,
-					url,
-					title: text(block.data.title, 300),
-					description: text(block.data.description, 1000),
-					image: safeWebUrl(block.data.image) ?? undefined,
-					icon: safeWebUrl(block.data.icon) ?? undefined,
-					link: mediaLink({ draggable: 'false' })
-				}}
-			/>
-		</div>
-	{:else}
-		<div use:block.void data-edytor-media-empty>
-			<EmptySlot
-				block={block.handle}
-				kind="bookmark"
-				viewOf={(edytor) => mediaView(edytor, 'bookmark')}
-			/>
-		</div>
-	{/if}
-	<!-- The core renders the kind's <figure> around this markup. -->
-	<!-- svelte-ignore a11y_figcaption_parent -->
-	<figcaption>{@render content()}</figcaption>
-{/snippet}
-
-<!-- Notion's card: the page's title, description and URL (with its icon) beside its cover. -->
-{#snippet initial({ url, title, description, image, icon, link }: BookmarkCardPayload)}
-	<a href={url} target="_blank" rel={LINK_REL} draggable="false" {@attach link}>
-		<span data-edytor-bookmark-text>
-			<span data-edytor-bookmark-title>{title ?? url}</span>
-			{#if description}<span data-edytor-bookmark-description>{description}</span>{/if}
-			<span data-edytor-bookmark-url>
-				{#if icon}<img src={icon} alt="" draggable="false" />{/if}<span>{url}</span>
-			</span>
-		</span>
-		{#if image}
-			<span data-edytor-bookmark-cover><img src={image} alt="" draggable="false" /></span>
-		{/if}
-	</a>
-{/snippet}

package/dist/plugins/media/EmbedPlugin.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
-	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import type { Block } from '../../block/block.svelte.js';
-	import EmptySlot from './EmptySlot.svelte';
-	import Control from '../Control.svelte';
+	import { mediaForms } from '../../export/forms.js';
+	import type { Plugin } from '../../plugins.js';
+	import { source } from './SourceBlock.svelte';
 	import type { Snippet } from 'svelte';
 	import { urlPaste, type UrlPasteController } from './urlPaste.svelte.js';
 	import {
@@ -10,14 +9,8 @@
 		EMBED_PROVIDERS,
 		EMBED_SANDBOX,
 		MEDIA_ICONS,
-		claimed,
 		embedSourceOf,
-		escapeHtml,
-		mediaControl,
-		mediaLink,
-		LINK_REL,
 		mediaPlugin,
-		mediaView,
 		safeWebUrl,
 		type EmbedFallbackPayload,
 		type EmbedProvider
@@ -54,16 +47,6 @@
 		fallback?: Snippet<[EmbedFallbackPayload]>;
 	};
 
-	/** The view's fallback markup, if the app gave one. */
-	const fallbackOf = mediaControl('embed', 'fallback');
-
-	/**
-	 * The view's allowlist: the first embed plugin listed in it (first wins,
-	 * as for the kind). Never a broader list: no entry plays nothing.
-	 */
-	const providers = (block: Block | undefined) =>
-		mediaView(block?.edytor, 'embed')?.providers ?? [];
-
 	/**
 	 * Notion's embed block: an "Embed a link" panel until it has a link, then
 	 * the provider's player in a sandboxed frame, with an editable caption.
@@ -98,78 +81,10 @@
 					options.menu
 				),
 				record: {
-					snippet: embed,
-					html: (block, caption) => {
-						const player = embedSourceOf(block.data?.url, allowed);
-						const url = safeWebUrl(block.data?.url);
-						const media = player
-							? `<iframe src="${escapeHtml(player.src)}" title="${escapeHtml(player.provider.name)}" sandbox="${EMBED_SANDBOX}" allowfullscreen></iframe>`
-							: url
-								? `<a href="${escapeHtml(url)}">${escapeHtml(url)}</a>`
-								: '';
-						return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
-					},
-					plain: (block, caption) =>
-						[safeWebUrl(block.data?.url), caption].filter(Boolean).join('\n'),
-					// An allowlisted `iframe` (bare, or in a `figure`): its `src` is the link.
-					parse: (el) => {
-						const src = claimed(el, 'iframe')?.getAttribute('src');
-						const url = embedSourceOf(src, allowed) && safeWebUrl(src);
-						return url ? { url } : undefined;
-					}
+					snippet: source,
+					...mediaForms(allowed).embed
 				}
 			})
 		);
 	};
 </script>
-
-{#snippet embed({ block, content }: BlockSnippetPayload<{ url?: string }>)}
-	{@const player = block.handle ? embedSourceOf(block.data.url, providers(block.handle)) : null}
-	{@const url = safeWebUrl(block.data.url)}
-	{#if player}
-		{@const { height, aspectRatio = '16 / 9' } = player.provider}
-		<div
-			use:block.void
-			data-edytor-embed
-			style:aspect-ratio={height ? undefined : aspectRatio}
-			style:height={height ? `${height}px` : undefined}
-		>
-			<iframe
-				src={player.src}
-				title={player.provider.name}
-				sandbox={EMBED_SANDBOX}
-				allow={EMBED_ALLOW}
-				referrerpolicy="strict-origin-when-cross-origin"
-				loading="lazy"
-				allowfullscreen
-				style="display: block; width: 100%; height: 100%; border: 0"
-			></iframe>
-		</div>
-	{:else if url}
-		<!-- A link no provider plays (a peer may store any), or a suggestion's preview (no handle, so no
-		view's allowlist): a plain link, never a frame. -->
-		<div use:block.void data-edytor-embed-unsupported>
-			<Control
-				own={fallbackOf}
-				{initial}
-				payload={{ block: block.handle, url, link: mediaLink() }}
-			/>
-		</div>
-	{:else}
-		<div use:block.void data-edytor-media-empty>
-			<EmptySlot
-				block={block.handle}
-				kind="embed"
-				viewOf={(edytor) => mediaView(edytor, 'embed')}
-			/>
-		</div>
-	{/if}
-	<!-- The core renders the kind's <figure> around this markup. -->
-	<!-- svelte-ignore a11y_figcaption_parent -->
-	<figcaption>{@render content()}</figcaption>
-{/snippet}
-
-<!-- The link itself. -->
-{#snippet initial({ url, link }: EmbedFallbackPayload)}
-	<a href={url} target="_blank" rel={LINK_REL} {@attach link}>{url}</a>
-{/snippet}

package/dist/plugins/media/EmptySlot.svelte

@@ -1,32 +1,29 @@
 <script lang="ts" module>
-	import type { Component, Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { MediaKind } from './media.js';
-	import type { EmptyView, MediaEmptyController } from './empty.svelte.js';
+	import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
 
-	/** What an empty image or media block renders in its view: the media empty plugin's host and snippet. */
-	type EmptyHost = {
-		Host: Component<{
-			block: Block | undefined;
-			kind: MediaKind | 'image';
-			viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
-			empty: Snippet<[MediaEmptyController]>;
-		}>;
-		empty: Snippet<[MediaEmptyController]>;
-	};
-
-	/** Each view's empty-block chrome (the first media empty plugin listed claims it). */
-	export const emptyHosts = new WeakMap<object, EmptyHost>();
+	/** Each view's empty-block markup (the first media empty plugin listed claims it). */
+	export const emptyHosts = new WeakMap<object, Snippet<[MediaEmptyController]>>();
 </script>
 
 <script lang="ts">
 	import { getContext, untrack } from 'svelte';
+	import { fileUploads } from '../uploads.svelte.js';
 
 	/**
-	 * Where an empty image or media block shows its empty state: the view's
-	 * media empty plugin's host, when one is listed (else nothing). The view
-	 * rendering it is the block's, or a suggestion preview's.
+	 * Where an empty image or media block shows its empty state: a
+	 * `MediaEmptyController`, which the view's `empty` snippet (the media
+	 * empty plugin's) draws, when one is listed (else nothing). The view
+	 * rendering it is the block's, or a suggestion preview's. The kind in the
+	 * block's view (`viewOf`) stores the link, or an uploaded file's URL
+	 * (only on a block still empty when it lands). A readonly view, or a
+	 * suggestion's preview (no `block`), may not write: no control may run
+	 * `upload`. A pasted or dropped file shows its upload (`pending`); a
+	 * failed one opens the panel with its error; data answered while the
+	 * block was not shown fills it as soon as it shows.
 	 */
 	let {
 		block,
@@ -35,10 +32,29 @@
 	}: {
 		block: Block | undefined;
 		kind: MediaKind | 'image';
+		/** The kind in a view: how it stores a source. */
 		viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
 	} = $props();
 	const view = getContext<Edytor>('edytor');
-	const host = untrack(() => emptyHosts.get(block?.edytor ?? view));
+	const empty = untrack(() => emptyHosts.get(block?.edytor ?? view));
+	const panel = untrack(() => new MediaEmptyController(block, kind, viewOf(block?.edytor)));
+	/** The upload of a pasted or dropped file into this block, if any. */
+	const pending = $derived(empty && panel.pending);
+	// After the flush that shows the block: never inside the transaction that showed it.
+	$effect(() => {
+		if (pending?.status === 'landed' && block && !block.edytor.readonly) {
+			const id = block.id;
+			untrack(() => fileUploads(block.edytor)?.fill(id));
+		}
+	});
+	// The panel opens on a failed upload, with its error; the user closes it.
+	$effect(() => {
+		if (pending?.status === 'failed')
+			untrack(() => {
+				panel.open = true;
+				panel.failed = 'upload';
+			});
+	});
 </script>
 
-{#if host}<host.Host {block} {kind} {viewOf} empty={host.empty} />{/if}
+{#if empty}{@render empty(panel)}{/if}

package/dist/plugins/media/EmptySlot.svelte.d.ts

@@ -1,25 +1,16 @@
-import type { Component, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { Block } from '../../block/block.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { MediaKind } from './media.js';
-import type { EmptyView, MediaEmptyController } from './empty.svelte.js';
-/** What an empty image or media block renders in its view: the media empty plugin's host and snippet. */
-type EmptyHost = {
-    Host: Component<{
-        block: Block | undefined;
-        kind: MediaKind | 'image';
-        viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
-        empty: Snippet<[MediaEmptyController]>;
-    }>;
-    empty: Snippet<[MediaEmptyController]>;
-};
-/** Each view's empty-block chrome (the first media empty plugin listed claims it). */
-export declare const emptyHosts: WeakMap<object, EmptyHost>;
+import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
+/** Each view's empty-block markup (the first media empty plugin listed claims it). */
+export declare const emptyHosts: WeakMap<object, Snippet<[MediaEmptyController]>>;
 type $$ComponentProps = {
     block: Block | undefined;
     kind: MediaKind | 'image';
+    /** The kind in a view: how it stores a source. */
     viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
 };
-declare const EmptySlot: Component<$$ComponentProps, {}, "">;
+declare const EmptySlot: import("svelte").Component<$$ComponentProps, {}, "">;
 type EmptySlot = ReturnType<typeof EmptySlot>;
 export default EmptySlot;