edytor 2.0.0 → 4.0.0

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;

package/dist/plugins/media/FilePlugin.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { Plugin } from '../../plugins.js';
-	import { escapeHtml, fileNameOf, safeMediaSrc, type FileRowPayload } from './media.js';
+	import { type FileRowPayload } from './media.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
 	import type { Uploader } from '../uploads.svelte.js';
 
@@ -33,24 +33,6 @@
 		sourcePlugin(
 			'file',
 			['attachment', 'upload', 'pdf', 'document'],
-			{
-				html: (block, caption) => {
-					const src = safeMediaSrc(block.data?.src);
-					const name = String(block.data?.name || (src && fileNameOf(src)) || '');
-					const link = src ? `<a href="${escapeHtml(src)}">${escapeHtml(name)}</a>` : '';
-					return `<figure data-edytor-file>${link}<figcaption>${caption}</figcaption></figure>`;
-				},
-				plain: (block, caption) =>
-					[safeMediaSrc(block.data?.src), caption].filter(Boolean).join('\n'),
-				// Its own export: a `figure[data-edytor-file]` holding the link.
-				parse: (el) => {
-					if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-file')) return;
-					const anchor = el.querySelector('a[href]');
-					const src = safeMediaSrc(anchor?.getAttribute('href'));
-					const name = anchor?.textContent?.trim().slice(0, 300);
-					return src ? { src, name: name || fileNameOf(src) } : undefined;
-				}
-			},
 			{ row: options.row },
 			options.upload
 		);

package/dist/plugins/media/MediaEmpty.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
+	import type { MediaEmptyController } from './empty.svelte.js';
 	import type { Plugin } from '../../plugins.js';
 	import { emptyHosts } from './EmptySlot.svelte';
-	import Self from './MediaEmpty.svelte';
 
 	export type MediaEmptyOptions = {
 		/**
@@ -23,60 +23,7 @@
 	export const createMediaEmptyPlugin =
 		({ empty }: MediaEmptyOptions): Plugin =>
 		(edytor) => {
-			if (edytor && !emptyHosts.has(edytor)) emptyHosts.set(edytor, { Host: Self, empty });
+			if (edytor && !emptyHosts.has(edytor)) emptyHosts.set(edytor, empty);
 			return {};
 		};
 </script>
-
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import type { MediaKind } from './media.js';
-	import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
-	import { fileUploads } from '../uploads.svelte.js';
-
-	/**
-	 * An image's or a media block's empty state: a `MediaEmptyController`,
-	 * which the view's `empty` snippet draws. 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,
-		kind,
-		viewOf,
-		empty
-	}: {
-		block: Block | undefined;
-		kind: MediaKind | 'image';
-		/** The kind in a view: how it stores a source. */
-		viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
-		/** The view's `empty` snippet. */
-		empty: Snippet<[MediaEmptyController]>;
-	} = $props();
-	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(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>
-
-{@render empty(panel)}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { MediaEmptyController } from './empty.svelte.js';
 import type { Plugin } from '../../plugins.js';
 export type MediaEmptyOptions = {
     /**
@@ -16,18 +17,21 @@ export type MediaEmptyOptions = {
  * listed claims the view.
  */
 export declare const createMediaEmptyPlugin: ({ empty }: MediaEmptyOptions) => Plugin;
-import type { Block } from '../../block/block.svelte.js';
-import type { Edytor } from '../../edytor.svelte.js';
-import type { MediaKind } from './media.js';
-import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
-type $$ComponentProps = {
-    block: Block | undefined;
-    kind: MediaKind | 'image';
-    /** The kind in a view: how it stores a source. */
-    viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
-    /** The view's `empty` snippet. */
-    empty: Snippet<[MediaEmptyController]>;
-};
-declare const MediaEmpty: import("svelte").Component<$$ComponentProps, {}, "">;
-type MediaEmpty = ReturnType<typeof MediaEmpty>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MediaEmpty: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MediaEmpty = InstanceType<typeof MediaEmpty>;
 export default MediaEmpty;

package/dist/plugins/media/SourceBlock.svelte

@@ -1,5 +1,7 @@
 <script module lang="ts">
-	import type { BlockDefinition, BlockSnippetPayload, Plugin } from '../../plugins.js';
+	import { capped, mediaForms } from '../../export/forms.js';
+	import type { Block } from '../../block/block.svelte.js';
+	import type { BlockSnippetPayload, Plugin } from '../../plugins.js';
 	import EmptySlot from './EmptySlot.svelte';
 	import Control from '../Control.svelte';
 	import { labelsOf, mediaEnglish } from '../../labels.js';
@@ -7,13 +9,18 @@
 	import UploadPreview from './UploadPreview.svelte';
 	import { fileUploads, uploadHooks, type Uploader } from '../uploads.svelte.js';
 	import {
-		claimed,
-		escapeHtml,
+		EMBED_ALLOW,
+		EMBED_SANDBOX,
+		embedSourceOf,
+		fileNameFor,
 		fileNameOf,
+		safeWebUrl,
+		type BookmarkCardPayload,
+		type EmbedFallbackPayload,
+		type MediaKind,
 		mediaControl,
 		mediaLink,
 		mediaPlugin,
-		mediaSourceOf,
 		mediaView,
 		safeMediaSrc,
 		LINK_REL,
@@ -23,8 +30,47 @@
 
 	type SourceKind = 'video' | 'audio' | 'file';
 
-	/** The view's file row markup, if the app gave one. */
+	/** The view's markup for a file's row, a bookmark's card, an unplayable embed's link, if the app gave one. */
 	const rowOf = mediaControl('file', 'row');
+	const cardOf = mediaControl('bookmark', 'card');
+	const fallbackOf = mediaControl('embed', 'fallback');
+
+	/**
+	 * The view's embed 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 ?? [];
+
+	/** The fields of a bookmark's `preview` it stores and shows: text capped, images `safeWebUrl` only. */
+	export const previewData = (preview: Record<string, unknown> | null | undefined) => {
+		const fields = {
+			title: capped(preview?.title, 300),
+			description: capped(preview?.description, 1000),
+			image: safeWebUrl(preview?.image) ?? undefined,
+			icon: safeWebUrl(preview?.icon) ?? undefined
+		};
+		return Object.fromEntries(Object.entries(fields).filter(([, value]) => value !== undefined));
+	};
+
+	/** A file's row: its source, name and size, and whether it is uploading. */
+	const fileRow = (
+		block: Block | undefined,
+		src: string,
+		name: string,
+		size: number | undefined,
+		progress?: number | null
+	): FileRowPayload => ({
+		block,
+		src,
+		name,
+		size,
+		sizeLabel:
+			size === undefined ? '' : labelsOf(block?.edytor, 'media', mediaEnglish).fileSize(size),
+		uploading: progress !== undefined,
+		progress: progress ?? null,
+		link: mediaLink({ draggable: 'false', download: name })
+	});
 
 	/** The files each kind takes: a video, an audio track, any other file. */
 	const ACCEPTS: Record<SourceKind, (file: File) => boolean> = {
@@ -54,24 +100,12 @@
 	 * `src`), and with an `upload` (its uploader), the pasted, dropped and
 	 * picked files it takes (`media.files`). A video or an audio track
 	 * exports as its tag in a `figure` and imports from one (bare, or in a
-	 * `figure`) with a safe `src` or `source`; the file kind brings its own
-	 * (`record`), and its `row` markup (`own`).
+	 * `figure`) with a safe `src` or `source`, a file as its link; the file
+	 * kind brings its `row` markup (`own`).
 	 */
 	export const sourcePlugin = (
 		kind: SourceKind,
 		keywords: string[],
-		record: Partial<BlockDefinition> = {
-			html: (block, caption) => {
-				const src = safeMediaSrc(block.data?.src);
-				// The tag, then its attributes: `<video src="…" controls></video>`.
-				const media = src ? `<${kind}` + ` src="${escapeHtml(src)}" controls></${kind}>` : '';
-				return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
-			},
-			parse: (el) => {
-				const src = mediaSourceOf(claimed(el, kind));
-				return src ? { src } : undefined;
-			}
-		},
 		own: Pick<MediaView, 'row'> = {},
 		upload?: Uploader
 	): Plugin =>
@@ -98,42 +132,80 @@
 							filled: (data: Record<string, unknown>) => safeMediaSrc(data.src) !== null
 						}
 					}),
-					...record
+					...mediaForms()[kind]
 				}
 			};
 		});
+
+	export { source };
 </script>
 
 <!--
-	A file (its name and size, linking to it), a video or an audio track in
-	the browser's player, or the empty block until it has a source; its
-	caption below.
+	A media block: a file (its name and size, linking to it), a video or an
+	audio track in the browser's player, an embed's player (or its link), a
+	bookmark's card, or the empty block until it has a source; its caption below.
 -->
 {#snippet source({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
-	{@const src = safeMediaSrc(block.data.src)}
+	{@const url = safeWebUrl(block.data.url)}
+	{@const src =
+		block.type === 'embed' || block.type === 'bookmark' ? url : safeMediaSrc(block.data.src)}
+	{@const player =
+		block.type === 'embed' && block.handle ? embedSourceOf(url, providers(block.handle)) : null}
 	{@const pending =
 		block.handle && !src ? fileUploads(block.handle.edytor)?.of(block.id) : undefined}
-	{#if src && block.type === 'file'}
-		{@const name =
-			typeof block.data.name === 'string' && block.data.name ? block.data.name : fileNameOf(src)}
-		{@const size = typeof block.data.size === 'number' ? block.data.size : undefined}
+	{#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 && block.type === 'embed'}
+		<!-- 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={link}
+				payload={{ block: block.handle, url, link: mediaLink() }}
+			/>
+		</div>
+	{:else if url && block.type === 'bookmark'}
+		<div use:block.void data-edytor-bookmark>
+			<Control
+				own={cardOf}
+				initial={card}
+				payload={{
+					block: block.handle,
+					url,
+					...previewData(block.data),
+					link: mediaLink({ draggable: 'false' })
+				} as BookmarkCardPayload}
+			/>
+		</div>
+	{:else if src && block.type === 'file'}
 		<div use:block.void data-edytor-file>
 			<Control
 				own={rowOf}
 				{initial}
-				payload={{
-					block: block.handle,
+				payload={fileRow(
+					block.handle,
 					src,
-					name,
-					size,
-					sizeLabel:
-						size === undefined
-							? ''
-							: labelsOf(block.handle?.edytor, 'media', mediaEnglish).fileSize(size),
-					uploading: false,
-					progress: null,
-					link: mediaLink({ draggable: 'false', download: name })
-				}}
+					fileNameFor(block.data, src),
+					typeof block.data.size === 'number' ? block.data.size : undefined
+				)}
 			/>
 		</div>
 	{:else if !src && pending?.status === 'uploading' && !emptyHosts.has(block.handle!.edytor)}
@@ -143,16 +215,13 @@
 				<Control
 					own={rowOf}
 					{initial}
-					payload={{
-						block: block.handle,
-						src: pending.preview,
-						name: pending.name,
-						size: pending.size,
-						sizeLabel: labelsOf(block.handle?.edytor, 'media', mediaEnglish).fileSize(pending.size),
-						uploading: true,
-						progress: pending.progress,
-						link: mediaLink({ draggable: 'false', download: pending.name })
-					}}
+					payload={fileRow(
+						block.handle,
+						pending.preview,
+						pending.name,
+						pending.size,
+						pending.progress
+					)}
 				/>
 			{:else}
 				<UploadPreview upload={pending} />
@@ -178,8 +247,8 @@
 		<div use:block.void data-edytor-media-empty>
 			<EmptySlot
 				block={block.handle}
-				kind={block.type as SourceKind}
-				viewOf={(edytor) => mediaView(edytor, block.type as SourceKind)}
+				kind={block.type as MediaKind}
+				viewOf={(edytor) => mediaView(edytor, block.type as MediaKind)}
 			/>
 		</div>
 	{/if}
@@ -188,6 +257,27 @@
 	<figcaption>{@render content()}</figcaption>
 {/snippet}
 
+<!-- An embed no provider plays: the link itself. -->
+{#snippet link({ url, link }: EmbedFallbackPayload)}
+	<a href={url} target="_blank" rel={LINK_REL} {@attach link}>{url}</a>
+{/snippet}
+
+<!-- Notion's card: the page's title, description and URL (with its icon) beside its cover. -->
+{#snippet card({ 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}
+
 <!-- A file: its name and size, a link downloading it. -->
 {#snippet initial({ src, name, sizeLabel, link, uploading, progress }: FileRowPayload)}
 	<a href={src} target="_blank" rel={LINK_REL} draggable="false" download={name} {@attach link}>

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

@@ -1,7 +1,12 @@
-import type { BlockDefinition, Plugin } from '../../plugins.js';
+import type { BlockSnippetPayload, Plugin } from '../../plugins.js';
 import { type Uploader } from '../uploads.svelte.js';
 import { type MediaView } from './media.js';
+declare const source: ({ block, content }: BlockSnippetPayload<Record<string, unknown>>) => ReturnType<import("svelte").Snippet>;
 type SourceKind = 'video' | 'audio' | 'file';
+/** The fields of a bookmark's `preview` it stores and shows: text capped, images `safeWebUrl` only. */
+export declare const previewData: (preview: Record<string, unknown> | null | undefined) => {
+    [k: string]: string | undefined;
+};
 /**
  * The plugin of a kind holding one source (a video, an audio track, an
  * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
@@ -10,10 +15,11 @@ type SourceKind = 'video' | 'audio' | 'file';
  * `src`), and with an `upload` (its uploader), the pasted, dropped and
  * picked files it takes (`media.files`). A video or an audio track
  * exports as its tag in a `figure` and imports from one (bare, or in a
- * `figure`) with a safe `src` or `source`; the file kind brings its own
- * (`record`), and its `row` markup (`own`).
+ * `figure`) with a safe `src` or `source`, a file as its link; the file
+ * kind brings its `row` markup (`own`).
  */
-export declare const sourcePlugin: (kind: SourceKind, keywords: string[], record?: Partial<BlockDefinition>, own?: Pick<MediaView, "row">, upload?: Uploader) => Plugin;
+export declare const sourcePlugin: (kind: SourceKind, keywords: string[], own?: Pick<MediaView, "row">, upload?: Uploader) => Plugin;
+export { source };
 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/VideoPlugin.svelte

@@ -20,5 +20,5 @@
 	 * text is the caption.
 	 */
 	export const createVideoPlugin = ({ upload }: VideoPluginOptions = {}): Plugin =>
-		sourcePlugin('video', ['movie', 'mp4', 'clip'], undefined, {}, upload);
+		sourcePlugin('video', ['movie', 'mp4', 'clip'], {}, upload);
 </script>

package/dist/plugins/media/empty.svelte.js

@@ -1,5 +1,6 @@
 import { fileUploads } from '../uploads.svelte.js';
 import { listen } from '../../utils/listen.js';
+import { keysOf } from '../list.svelte.js';
 /** Each media kind's icon (the image's too): its menu row, its empty block, its paste offer. */
 export const MEDIA_ICONS = {
     image: '🖼',
@@ -111,12 +112,6 @@ export class MediaEmptyController {
     };
     /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
     field = (node) => {
-        const keydown = (event) => {
-            if (event.key !== 'Enter' || event.isComposing)
-                return;
-            event.preventDefault();
-            this.embed();
-        };
-        return listen(node, 'keydown', keydown);
+        return listen(node, 'keydown', keysOf({ Enter: () => this.embed() }));
     };
 }

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

@@ -101,67 +101,6 @@ export declare const mediaPlugin: (kind: MediaKind, keywords: string[], own: (ed
     hooks?: PluginOperations & PluginDefinitions;
     record: Partial<BlockDefinition>;
 }) => Plugin;
-/**
- * A web page's URL a media block may store or render: the link sanitizer's
- * reading of it (`sanitizeLinkHref`: ASCII control characters and spaces stripped,
- * tab/newline anywhere), then only an absolute `http:`/`https:` URL with a
- * host. `null` for anything else: a script or `data:` URL, a `mailto:`, a
- * relative path, a bare domain.
- */
-export declare const safeWebUrl: (value: unknown) => string | null;
-/**
- * A media file's source (a video, an audio track, an attachment): a
- * {@link safeWebUrl}, or a `blob:` URL an upload answered. Never `data:`:
- * an inline file would be stored in the document and sent in every update.
- */
-export declare const safeMediaSrc: (value: unknown) => string | null;
-/** One allowlisted embed provider: which links it plays, and its player. */
-export type EmbedProvider = {
-    /** The provider's name: the frame's `title`. */
-    name: string;
-    /**
-     * The player's URL for a link of this provider, else `null`. It must be
-     * `https:` on another origin than the page's: any other answer is
-     * refused (the frame has `allow-scripts` and `allow-same-origin`, so a
-     * player on the page's origin, or on one that can script it, could lift
-     * its own sandbox). Match the host exactly (never a
-     * suffix or a substring) and check every id you copy into the player URL.
-     */
-    embed: (url: URL) => string | null;
-    /** The frame's CSS `aspect-ratio` (default `16 / 9`); ignored with `height`. */
-    aspectRatio?: string;
-    /** A fixed frame height in pixels (a music player). */
-    height?: number;
-};
-/** The frame's `sandbox`: scripts and the provider's own origin, popups that leave it; no top navigation, modals, downloads or forms. */
-export declare const EMBED_SANDBOX = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation";
-/** The frame's permissions (`allow`): what a player needs, nothing that reads the viewer. */
-export declare const EMBED_ALLOW = "fullscreen; picture-in-picture; encrypted-media; clipboard-write";
-/**
- * The default allowlist: YouTube (through `youtube-nocookie.com`), Vimeo,
- * Loom, Figma, CodePen and Spotify. A link no provider plays renders no
- * frame. Extend it with `createEmbedPlugin({ providers: [...EMBED_PROVIDERS, mine] })`.
- */
-export declare const EMBED_PROVIDERS: readonly EmbedProvider[];
-/**
- * The player for `value` (a stored or pasted link): the first provider of
- * `providers` that plays it, and its `https:` player URL. `null` when the
- * link is not a {@link safeWebUrl}, no provider plays it, or the player URL
- * a provider answers is not `https:` or is on the page's own origin. The frame's `src` is always this
- * answer, never the stored value.
- */
-export declare const embedSourceOf: (value: unknown, providers?: readonly EmbedProvider[]) => {
-    src: string;
-    provider: EmbedProvider;
-} | null;
-/** A file's display name from its URL's last path segment, decoded. */
-export declare const fileNameOf: (src: string) => string;
-/**
- * The element a media kind's HTML import reads: `element` itself when it
- * is a `tag` (not inside a `figure`, which claims it), or a `figure`'s own
- * `tag` child.
- */
-export declare const claimed: (element: HTMLElement, tag: string) => HTMLElement | undefined;
-/** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
-export declare const mediaSourceOf: (element: HTMLElement | undefined) => string | null;
+export * from './sources.js';
+import type { EmbedProvider } from './sources.js';
 export { escapeHtml };