edytor 1.0.0 → 3.0.0

package/dist/plugins/media/FilePlugin.svelte

@@ -1,8 +1,9 @@
 <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';
 
 	export type { FileRowPayload };
 
@@ -13,6 +14,14 @@
 		 * downloads the file. The first file plugin listed in a view gives its row.
 		 */
 		row?: Snippet<[FileRowPayload]>;
+		/**
+		 * Upload a file and answer its URL: an empty file block's Upload, and
+		 * the pasted and dropped files no other kind takes, each placed as a
+		 * file block at once (one undo step), its row showing the file's name,
+		 * size and progress, then filled with the URL this answers. Without
+		 * it, files are only linked.
+		 */
+		upload?: Uploader;
 	};
 
 	/**
@@ -24,24 +33,7 @@
 		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 }
+			{ row: options.row },
+			options.upload
 		);
 </script>

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import { type FileRowPayload } from './media.js';
+import type { Uploader } from '../uploads.svelte.js';
 export type { FileRowPayload };
 export type FilePluginOptions = {
     /**
@@ -9,6 +10,14 @@ export type FilePluginOptions = {
      * downloads the file. The first file plugin listed in a view gives its row.
      */
     row?: Snippet<[FileRowPayload]>;
+    /**
+     * Upload a file and answer its URL: an empty file block's Upload, and
+     * the pasted and dropped files no other kind takes, each placed as a
+     * file block at once (one undo step), its row showing the file's name,
+     * size and progress, then filled with the URL this answers. Without
+     * it, files are only linked.
+     */
+    upload?: Uploader;
 };
 /**
  * Notion's file block: an attachment, uploaded through `upload` (or

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,16 +1,26 @@
 <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';
+	import { emptyHosts } from './EmptySlot.svelte';
+	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,
@@ -20,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> = {
@@ -48,32 +97,22 @@
 	 * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
 	 * snippet, a link or an uploaded file stored as one data write (a file's
 	 * whole data, its source, name and size; a video's or audio track's
-	 * `src`), and with an `upload`, the pasted and dropped files it takes
-	 * (`media.files`, its first listing in a view). A video or an audio track
+	 * `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'> = {}
+		own: Pick<MediaView, 'row'> = {},
+		upload?: Uploader
 	): Plugin =>
-		mediaPlugin(kind, keywords, () => {
+		mediaPlugin(kind, keywords, (edytor) => {
 			return {
 				...own,
+				hooks: uploadHooks(edytor, upload),
 				store: (block, value, file) => {
 					const data = sourceData(kind, value, file);
 					if (!data) return 'invalid';
@@ -83,47 +122,111 @@
 				},
 				record: {
 					snippet: source,
-					// Its files: with the uploads plugin, an Upload and pasted or dropped files.
-					upload: {
-						accepts: ACCEPTS[kind],
-						fallback: kind === 'file',
-						data: (file, answer) => sourceData(kind, answer, file),
-						filled: (data) => safeMediaSrc(data.src) !== null
-					},
-					...record
+					// Its files, with an `upload`: an Upload and pasted or dropped files.
+					...(upload && {
+						upload: {
+							send: upload,
+							accepts: ACCEPTS[kind],
+							fallback: kind === 'file',
+							data: (file: File, answer: string) => sourceData(kind, answer, file),
+							filled: (data: Record<string, unknown>) => safeMediaSrc(data.src) !== null
+						}
+					}),
+					...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)}
-	{#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}
+	{@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 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),
-					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)}
+		<!-- An upload with no empty markup to draw it: the file's name and size at once, its progress. -->
+		<div use:block.void data-edytor-media-empty>
+			{#if block.type === 'file' && pending.preview}
+				<Control
+					own={rowOf}
+					{initial}
+					payload={fileRow(
+						block.handle,
+						pending.preview,
+						pending.name,
+						pending.size,
+						pending.progress
+					)}
+				/>
+			{:else}
+				<UploadPreview upload={pending} />
+			{/if}
+		</div>
 	{:else if src && block.type === 'video'}
 		<div use:block.void data-edytor-video>
 			<!-- svelte-ignore a11y_media_has_caption -->
@@ -144,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}
@@ -154,11 +257,34 @@
 	<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 }: FileRowPayload)}
+{#snippet initial({ src, name, sizeLabel, link, uploading, progress }: FileRowPayload)}
 	<a href={src} target="_blank" rel={LINK_REL} draggable="false" download={name} {@attach link}>
 		<span aria-hidden="true">📎</span>
 		<span data-edytor-file-name>{name}</span>
 		{#if sizeLabel}<span data-edytor-file-size>{sizeLabel}</span>{/if}
 	</a>
+	{#if uploading}<progress data-edytor-file-progress value={progress ?? undefined} max="1"
+		></progress>{/if}
 {/snippet}

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

@@ -1,18 +1,25 @@
-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
  * snippet, a link or an uploaded file stored as one data write (a file's
  * whole data, its source, name and size; a video's or audio track's
- * `src`), and with an `upload`, the pasted and dropped files it takes
- * (`media.files`, its first listing in a view). A video or an audio track
+ * `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">) => 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/UploadPreview.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+	import './upload.css';
+</script>
+
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { FileUpload } from '../uploads.svelte.js';
+	import { labelsOf, mediaEnglish } from '../../labels.js';
+
+	/**
+	 * A file uploading, the plugin's own markup when the view has no empty
+	 * markup to draw it: an image at once from its object URL (this view's
+	 * only, never stored) with the progress over it; another file's name and
+	 * size, then the progress (indeterminate until `upload` reports one).
+	 */
+	let {
+		upload,
+		image = false
+	}: { upload: Extract<FileUpload, { status: 'uploading' }>; image?: boolean } = $props();
+	const labels = labelsOf(getContext<Edytor>('edytor'), 'media', mediaEnglish);
+</script>
+
+<div data-edytor-upload data-edytor-upload-image={image ? '' : undefined} role="status">
+	{#if image && upload.preview}
+		<img src={upload.preview} alt={upload.name} draggable="false" />
+	{:else}
+		<span data-edytor-file-name>{upload.name}</span>
+		<span data-edytor-file-size>{labels.fileSize(upload.size)}</span>
+	{/if}
+	<progress value={upload.progress ?? undefined} max="1" aria-label={labels.uploading}></progress>
+</div>

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

@@ -0,0 +1,11 @@
+import './upload.css';
+import type { FileUpload } from '../uploads.svelte.js';
+type $$ComponentProps = {
+    upload: Extract<FileUpload, {
+        status: 'uploading';
+    }>;
+    image?: boolean;
+};
+declare const UploadPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploadPreview = ReturnType<typeof UploadPreview>;
+export default UploadPreview;

package/dist/plugins/media/VideoPlugin.svelte

@@ -1,6 +1,17 @@
 <script module lang="ts">
 	import type { Plugin } from '../../plugins.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
+	import type { Uploader } from '../uploads.svelte.js';
+
+	export type VideoPluginOptions = {
+		/**
+		 * Upload a video file and answer its URL: an empty block's Upload, and
+		 * the pasted and dropped video 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, videos are only linked.
+		 */
+		upload?: Uploader;
+	};
 
 	/**
 	 * Notion's video block: a video file (an `http(s)` link, or an upload
@@ -8,5 +19,6 @@
 	 * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
 	 * text is the caption.
 	 */
-	export const createVideoPlugin = (): Plugin => sourcePlugin('video', ['movie', 'mp4', 'clip']);
+	export const createVideoPlugin = ({ upload }: VideoPluginOptions = {}): Plugin =>
+		sourcePlugin('video', ['movie', 'mp4', 'clip'], {}, upload);
 </script>

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

@@ -1,11 +1,21 @@
 import type { Plugin } from '../../plugins.js';
+import type { Uploader } from '../uploads.svelte.js';
+export type VideoPluginOptions = {
+    /**
+     * Upload a video file and answer its URL: an empty block's Upload, and
+     * the pasted and dropped video 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, videos are only linked.
+     */
+    upload?: Uploader;
+};
 /**
  * Notion's video block: a video file (an `http(s)` link, or an upload
  * through `upload`) in the browser's player, with an editable caption.
  * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
  * text is the caption.
  */
-export declare const createVideoPlugin: () => Plugin;
+export declare const createVideoPlugin: ({ upload }?: VideoPluginOptions) => 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/empty.svelte.d.ts

@@ -52,16 +52,25 @@ export declare class MediaEmptyController {
      * block). Show a passive placeholder then.
      */
     get readonly(): boolean;
-    /** The view lists the uploads plugin and the kind takes files: offer Upload. */
+    /** The kind's plugin was given an `upload`: offer Upload. */
     get canUpload(): boolean;
     /** The upload of a pasted or dropped file into this block, if any (its `status`, `progress`, `preview`). */
     get pending(): FileUpload | undefined;
+    /**
+     * The file uploading into this block, shown at once: its object URL
+     * (this view's only, never stored; revoked once the upload ends), else `null`.
+     */
+    get preview(): string | null;
+    /** The share of the upload sent, `0` to `1`; `null` before a report, or with no upload. */
+    get progress(): number | null;
     /** Embed `value` (default the `draft`): the block takes the link, or `failed` says why not. */
     embed: (value?: string) => void;
     /**
-     * Upload `file` with the view's uploader (`createUploadsPlugin`) and store the URL it answers,
-     * only on the block as it was picked from: still in the tree, of its kind
-     * and empty (a peer may have set a source, or deleted it, meanwhile).
+     * Upload `file` with its kind's uploader (its plugin's `upload`), the
+     * block showing it meanwhile (`pending`, `preview`, `progress`), and
+     * store the URL it answers, only on the block as it was picked from:
+     * still in the tree, of its kind and empty (a peer may have set a
+     * source, or deleted it, meanwhile).
      */
     upload: (picked: File) => Promise<void>;
     /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */