edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/media/BookmarkPlugin.svelte

@@ -1,12 +1,23 @@
 <script module lang="ts">
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import MediaEmpty from './MediaEmpty.svelte';
-	import { mediaKinds } from '../../crdt/semantics.js';
-	import { urlPaste } from './urlPaste.svelte.js';
-	import { escapeHtml, mediaLabels, safeWebUrl } from './media.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
+	import EmptySlot from './EmptySlot.svelte';
+	import Control from '../Control.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';
+
+	export type { BookmarkCardPayload };
 
 	/** What an `unfurl` answers about a page; every field optional. */
 	export type BookmarkPreview = {
@@ -25,14 +36,24 @@
 		 * set from the panel or the paste menu; without it the card shows the URL.
 		 */
 		unfurl?: (url: string) => Promise<BookmarkPreview | null | undefined>;
-		/** The words the block shows (its empty panel, its menu row), over the English ones. */
-		labels?: PartialLabels<'media'>;
-		/** The slash menu's keywords of its command (`block.<kind>`), which replace its own. */
-		keywords?: Partial<Record<string, string[]>>;
+		/**
+		 * The menu a URL pasted on an empty line opens (Link, Embed, Bookmark);
+		 * it renders while `controller.open`, under the line (without it, the
+		 * link is kept and nothing shows). The
+		 * view's one menu takes the first `menu` its embed and bookmark
+		 * plugins pass. Its keys stay the editor's; keep its ARIA with
+		 * `{@attach controller.popup}` on the list and
+		 * `{@attach controller.option(index)}` on each row.
+		 */
+		menu?: Snippet<[UrlPasteController]>;
+		/**
+		 * The card of a bookmark with a link (default: Notion's, the title,
+		 * description and URL beside the cover): `<a href={card.url}
+		 * {@attach card.link}>`. The first bookmark plugin listed in a view gives its card.
+		 */
+		card?: Snippet<[BookmarkCardPayload]>;
 	};
 
-	const unfurlOf = new WeakMap<Edytor, BookmarkPluginOptions['unfurl']>();
-
 	/** 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;
@@ -56,39 +77,8 @@
 	 */
 	const UNFURL_ORIGIN = Symbol('edytor.bookmark.unfurl');
 
-	/**
-	 * Ask the view's `unfurl` about `url` and store its answer on `block`, as
-	 * one data write outside the undo history (`UNFURL_ORIGIN`), when the
-	 * block still is that bookmark in a view that may write.
-	 */
-	const fill = async (block: Block, url: string) => {
-		const unfurl = unfurlOf.get(block.edytor);
-		if (!unfurl || block.edytor.readonly) return;
-		let preview: BookmarkPreview | null | undefined;
-		try {
-			preview = await unfurl(url);
-		} catch {
-			return;
-		}
-		const data = previewData(preview);
-		const { edytor, id } = block;
-		const live = edytor.idToBlock.get(id);
-		if (!Object.keys(data).length || !live?.isInTree || !edytor.dispatcher.permits()) return;
-		if (live.type !== 'bookmark' || edytor.facade.blockDataOf(id)?.url !== url) return;
-		const patches = Object.entries(data).map(([key, value]) => ({ path: [key], value }));
-		edytor.doc.transact(
-			() => edytor.facade.apply(edytor.facade.prepare.patchData(id, patches)),
-			UNFURL_ORIGIN
-		);
-	};
-
-	const bookmarkLink = (block: Block | undefined, value: string) => {
-		const url = safeWebUrl(value);
-		if (!block || !url) return false;
-		block.data.url = url;
-		void fill(block, url);
-		return true;
-	};
+	/** 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,
@@ -96,95 +86,101 @@
 	 * editable caption. Void: its only text is the caption. Pasting an
 	 * `http(s)` link on an empty line offers "Bookmark".
 	 */
-	export const createBookmarkPlugin =
-		(options: BookmarkPluginOptions = {}): Plugin =>
-		(edytor) => {
-			// First wins, as for the kind: a second listing never replaces it.
-			if (!unfurlOf.has(edytor)) unfurlOf.set(edytor, options.unfurl);
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.bookmark.claim(edytor, labels);
+	export const createBookmarkPlugin = (options: BookmarkPluginOptions = {}): Plugin =>
+		mediaPlugin('bookmark', ['link', 'url', 'preview', 'unfurl'], (edytor) => {
+			/**
+			 * Ask `unfurl` about `url` and store its answer on `block`, as one
+			 * data write outside the undo history (`UNFURL_ORIGIN`), when the
+			 * block still is that bookmark in a view that may write. The view's
+			 * is the first bookmark plugin's listed (first wins, as for the
+			 * kind): its store and its paste offer call this.
+			 */
+			const fill = async (block: Block, url: string) => {
+				const { unfurl } = options;
+				if (!unfurl || block.edytor.readonly) return;
+				let preview: BookmarkPreview | null | undefined;
+				try {
+					preview = await unfurl(url);
+				} catch {
+					return;
+				}
+				const data = previewData(preview);
+				const { edytor, id } = block;
+				const live = edytor.idToBlock.get(id);
+				if (!Object.keys(data).length || !live?.isInTree || !edytor.dispatcher.permits()) return;
+				if (live.type !== 'bookmark' || edytor.facade.blockDataOf(id)?.url !== url) return;
+				const patches = Object.entries(data).map(([key, value]) => ({ path: [key], value }));
+				edytor.doc.transact(
+					() => edytor.facade.apply(edytor.facade.prepare.patchData(id, patches)),
+					UNFURL_ORIGIN
+				);
+			};
 			return {
-				...urlPaste(
+				card: options.card,
+				store: (block, value) => {
+					const url = safeWebUrl(value);
+					if (!url) return 'invalid';
+					block.edytor.patchData(block.id, [{ path: ['url'], value: url }]);
+					void fill(block, url);
+					return null;
+				},
+				hooks: urlPaste(
 					edytor,
 					{
 						type: 'bookmark',
-						label: labels.bookmark.offer,
-						icon: '🔖',
+						icon: MEDIA_ICONS.bookmark,
 						data: (url) => ({ url }),
 						created: (block, url) => void fill(block, url)
 					},
-					labels
+					options.menu
 				),
-				blocks: {
-					bookmark: {
-						...mediaKinds.bookmark,
-						snippet: bookmark,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.bookmark.label,
-								icon: '🔖',
-								keywords: keywordsOf(
-									'block.bookmark',
-									['link', 'url', 'preview', 'unfurl'],
-									options.keywords
-								),
-								group: 'Media'
-							}
-						],
-						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;
-						}
+				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;
 					}
 				}
 			};
-		};
-
-	/** The bookmark block, without unfurling: the card shows the URL. */
-	export const bookmarkPlugin = createBookmarkPlugin();
+		});
 </script>
 
 {#snippet bookmark({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
 	{@const url = safeWebUrl(block.data.url)}
 	{#if url}
-		{@const title = text(block.data.title, 300)}
-		{@const description = text(block.data.description, 1000)}
-		{@const image = safeWebUrl(block.data.image)}
-		{@const icon = safeWebUrl(block.data.icon)}
 		<div use:block.void data-edytor-bookmark>
-			<a href={url} target="_blank" rel="noopener noreferrer nofollow" draggable="false">
-				<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>
+			<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>
-			<MediaEmpty
+			<EmptySlot
 				block={block.handle}
 				kind="bookmark"
-				icon="🔖"
-				link={(value) => bookmarkLink(block.handle, value)}
+				viewOf={(edytor) => mediaView(edytor, 'bookmark')}
 			/>
 		</div>
 	{/if}
@@ -192,3 +188,19 @@
 	<!-- 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/BookmarkPlugin.svelte.d.ts

@@ -1,5 +1,8 @@
 import type { Plugin } from '../../plugins.js';
-import { type PartialLabels } from '../../labels.js';
+import type { Snippet } from 'svelte';
+import { type UrlPasteController } from './urlPaste.svelte.js';
+import { type BookmarkCardPayload } from './media.js';
+export type { BookmarkCardPayload };
 /** What an `unfurl` answers about a page; every field optional. */
 export type BookmarkPreview = {
     title?: string;
@@ -16,10 +19,22 @@ export type BookmarkPluginOptions = {
      * set from the panel or the paste menu; without it the card shows the URL.
      */
     unfurl?: (url: string) => Promise<BookmarkPreview | null | undefined>;
-    /** The words the block shows (its empty panel, its menu row), over the English ones. */
-    labels?: PartialLabels<'media'>;
-    /** The slash menu's keywords of its command (`block.<kind>`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    /**
+     * The menu a URL pasted on an empty line opens (Link, Embed, Bookmark);
+     * it renders while `controller.open`, under the line (without it, the
+     * link is kept and nothing shows). The
+     * view's one menu takes the first `menu` its embed and bookmark
+     * plugins pass. Its keys stay the editor's; keep its ARIA with
+     * `{@attach controller.popup}` on the list and
+     * `{@attach controller.option(index)}` on each row.
+     */
+    menu?: Snippet<[UrlPasteController]>;
+    /**
+     * The card of a bookmark with a link (default: Notion's, the title,
+     * description and URL beside the cover): `<a href={card.url}
+     * {@attach card.link}>`. The first bookmark plugin listed in a view gives its card.
+     */
+    card?: Snippet<[BookmarkCardPayload]>;
 };
 /**
  * Notion's web bookmark: a card linking to a page, with its title,
@@ -28,8 +43,6 @@ export type BookmarkPluginOptions = {
  * `http(s)` link on an empty line offers "Bookmark".
  */
 export declare const createBookmarkPlugin: (options?: BookmarkPluginOptions) => Plugin;
-/** The bookmark block, without unfurling: the card shows the URL. */
-export declare const bookmarkPlugin: 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/EmbedPlugin.svelte

@@ -1,48 +1,68 @@
 <script module lang="ts">
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import MediaEmpty from './MediaEmpty.svelte';
-	import { mediaKinds } from '../../crdt/semantics.js';
-	import { urlPaste } from './urlPaste.svelte.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
+	import EmptySlot from './EmptySlot.svelte';
+	import Control from '../Control.svelte';
+	import type { Snippet } from 'svelte';
+	import { urlPaste, type UrlPasteController } from './urlPaste.svelte.js';
 	import {
 		EMBED_ALLOW,
 		EMBED_PROVIDERS,
 		EMBED_SANDBOX,
+		MEDIA_ICONS,
 		claimed,
 		embedSourceOf,
-		mediaLabels,
 		escapeHtml,
+		mediaControl,
+		mediaLink,
+		LINK_REL,
+		mediaPlugin,
+		mediaView,
 		safeWebUrl,
+		type EmbedFallbackPayload,
 		type EmbedProvider
 	} from './media.js';
 
-	export { EMBED_ALLOW, EMBED_PROVIDERS, EMBED_SANDBOX, embedSourceOf, type EmbedProvider };
+	export {
+		EMBED_ALLOW,
+		EMBED_PROVIDERS,
+		EMBED_SANDBOX,
+		embedSourceOf,
+		type EmbedFallbackPayload,
+		type EmbedProvider
+	};
 
 	export type EmbedPluginOptions = {
 		/** The allowlist (default {@link EMBED_PROVIDERS}); a link none of them plays shows no frame. */
 		providers?: readonly EmbedProvider[];
-		/** The words the block shows (its empty panel, its menu row), over the English ones. */
-		labels?: PartialLabels<'media'>;
-		/** The slash menu's keywords of its command (`block.<kind>`), which replace its own. */
-		keywords?: Partial<Record<string, string[]>>;
+		/**
+		 * The menu a URL pasted on an empty line opens (Link, Embed, Bookmark);
+		 * it renders while `controller.open`, under the line (without it, the
+		 * link is kept and nothing shows). The
+		 * view's one menu takes the first `menu` its embed and bookmark
+		 * plugins pass. Its keys stay the editor's; keep its ARIA with
+		 * `{@attach controller.popup}` on the list and
+		 * `{@attach controller.option(index)}` on each row.
+		 */
+		menu?: Snippet<[UrlPasteController]>;
+		/**
+		 * An embed whose link no allowed provider plays (a peer may store any),
+		 * or a suggestion's preview: a plain link, never a frame (default: the
+		 * URL as a link): `<a href={fallback.url} {@attach fallback.link}>`. The first embed
+		 * plugin listed in a view gives it.
+		 */
+		fallback?: Snippet<[EmbedFallbackPayload]>;
 	};
 
-	const providersOf = new WeakMap<Edytor, readonly EmbedProvider[]>();
+	/** 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) => (block && providersOf.get(block.edytor)) ?? [];
-
-	/** Store `value` as the block's link when a provider plays it; answers whether it did. */
-	const embedLink = (block: Block | undefined, value: string) => {
-		const url = safeWebUrl(value);
-		if (!block || !url || !embedSourceOf(url, providers(block))) return false;
-		block.data.url = url;
-		return true;
-	};
+	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
@@ -53,66 +73,54 @@
 	 * text is the caption. Pasting a link a provider plays on an empty line
 	 * offers "Embed".
 	 */
-	export const createEmbedPlugin =
-		(options: EmbedPluginOptions = {}): Plugin =>
-		(edytor) => {
-			const allowed = options.providers ?? EMBED_PROVIDERS;
-			if (!providersOf.has(edytor)) providersOf.set(edytor, allowed);
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.embed.claim(edytor, labels);
-			return {
-				...urlPaste(
+	export const createEmbedPlugin = (options: EmbedPluginOptions = {}): Plugin => {
+		const allowed = options.providers ?? EMBED_PROVIDERS;
+		return mediaPlugin(
+			'embed',
+			['iframe', 'youtube', 'vimeo', 'loom', 'figma', 'codepen', 'spotify'],
+			(edytor) => ({
+				providers: allowed,
+				fallback: options.fallback,
+				// The block's link, when a provider plays it.
+				store: (block, value) => {
+					const url = safeWebUrl(value);
+					if (!url || !embedSourceOf(url, allowed)) return 'invalid';
+					block.edytor.patchData(block.id, [{ path: ['url'], value: url }]);
+					return null;
+				},
+				hooks: urlPaste(
 					edytor,
 					{
 						type: 'embed',
-						label: labels.embed.offer,
-						icon: '⧉',
+						icon: MEDIA_ICONS.embed,
 						data: (url) => (embedSourceOf(url, allowed) ? { url } : null)
 					},
-					labels
+					options.menu
 				),
-				blocks: {
-					embed: {
-						...mediaKinds.embed,
-						snippet: embed,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.embed.label,
-								icon: '⧉',
-								keywords: keywordsOf(
-									'block.embed',
-									['iframe', 'youtube', 'vimeo', 'loom', 'figma', 'codepen', 'spotify'],
-									options.keywords
-								),
-								group: 'Media'
-							}
-						],
-						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;
-						}
+				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;
 					}
 				}
-			};
-		};
-
-	/** The embed block with the default providers. */
-	export const embedPlugin = createEmbedPlugin();
+			})
+		);
+	};
 </script>
 
 {#snippet embed({ block, content }: BlockSnippetPayload<{ url?: string }>)}
@@ -141,15 +149,18 @@
 		<!-- 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>
-			<a href={url} target="_blank" rel="noopener noreferrer nofollow">{url}</a>
+			<Control
+				own={fallbackOf}
+				{initial}
+				payload={{ block: block.handle, url, link: mediaLink() }}
+			/>
 		</div>
 	{:else}
 		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
+			<EmptySlot
 				block={block.handle}
 				kind="embed"
-				icon="⧉"
-				link={(value) => embedLink(block.handle, value)}
+				viewOf={(edytor) => mediaView(edytor, 'embed')}
 			/>
 		</div>
 	{/if}
@@ -157,3 +168,8 @@
 	<!-- 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/EmbedPlugin.svelte.d.ts

@@ -1,14 +1,28 @@
 import type { Plugin } from '../../plugins.js';
-import { type PartialLabels } from '../../labels.js';
-import { EMBED_ALLOW, EMBED_PROVIDERS, EMBED_SANDBOX, embedSourceOf, type EmbedProvider } from './media.js';
-export { EMBED_ALLOW, EMBED_PROVIDERS, EMBED_SANDBOX, embedSourceOf, type EmbedProvider };
+import type { Snippet } from 'svelte';
+import { type UrlPasteController } from './urlPaste.svelte.js';
+import { EMBED_ALLOW, EMBED_PROVIDERS, EMBED_SANDBOX, embedSourceOf, type EmbedFallbackPayload, type EmbedProvider } from './media.js';
+export { EMBED_ALLOW, EMBED_PROVIDERS, EMBED_SANDBOX, embedSourceOf, type EmbedFallbackPayload, type EmbedProvider };
 export type EmbedPluginOptions = {
     /** The allowlist (default {@link EMBED_PROVIDERS}); a link none of them plays shows no frame. */
     providers?: readonly EmbedProvider[];
-    /** The words the block shows (its empty panel, its menu row), over the English ones. */
-    labels?: PartialLabels<'media'>;
-    /** The slash menu's keywords of its command (`block.<kind>`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    /**
+     * The menu a URL pasted on an empty line opens (Link, Embed, Bookmark);
+     * it renders while `controller.open`, under the line (without it, the
+     * link is kept and nothing shows). The
+     * view's one menu takes the first `menu` its embed and bookmark
+     * plugins pass. Its keys stay the editor's; keep its ARIA with
+     * `{@attach controller.popup}` on the list and
+     * `{@attach controller.option(index)}` on each row.
+     */
+    menu?: Snippet<[UrlPasteController]>;
+    /**
+     * An embed whose link no allowed provider plays (a peer may store any),
+     * or a suggestion's preview: a plain link, never a frame (default: the
+     * URL as a link): `<a href={fallback.url} {@attach fallback.link}>`. The first embed
+     * plugin listed in a view gives it.
+     */
+    fallback?: Snippet<[EmbedFallbackPayload]>;
 };
 /**
  * Notion's embed block: an "Embed a link" panel until it has a link, then
@@ -20,8 +34,6 @@ export type EmbedPluginOptions = {
  * offers "Embed".
  */
 export declare const createEmbedPlugin: (options?: EmbedPluginOptions) => Plugin;
-/** The embed block with the default providers. */
-export declare const embedPlugin: 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/EmptySlot.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import type { Component, 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 const emptyHosts = new WeakMap<object, EmptyHost>();
+</script>
+
+<script lang="ts">
+	import { getContext, untrack } from 'svelte';
+
+	/**
+	 * 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.
+	 */
+	let {
+		block,
+		kind,
+		viewOf
+	}: {
+		block: Block | undefined;
+		kind: MediaKind | 'image';
+		viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+	} = $props();
+	const view = getContext<Edytor>('edytor');
+	const host = untrack(() => emptyHosts.get(block?.edytor ?? view));
+</script>
+
+{#if host}<host.Host {block} {kind} {viewOf} empty={host.empty} />{/if}