edytor 2.0.0 → 3.0.0

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,16 +1,15 @@
 <script module lang="ts">
+	import { imageForms } from '../../export/forms.js';
 	import './image.css';
-	import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import type { Edytor } from '../../edytor.svelte.js';
 	import EmptySlot from '../media/EmptySlot.svelte';
 	import ImageChrome from './ImageChrome.svelte';
-	import { imageKinds } from '../../crdt/semantics.js';
+
 	import {
 		imageAlignOf,
 		imageAltOf,
 		imageWidthOf,
-		imgData,
 		isImageFile,
 		MAX_INLINE_IMAGE_BYTES,
 		MIN_IMAGE_WIDTH,
@@ -20,7 +19,7 @@
 		type ImageAlign
 	} from './image.js';
 	import { ImageControls, imageControls } from './controls.svelte.js';
-	import { MEDIA_ICONS, type EmptyView } from '../media/empty.svelte.js';
+	import { MEDIA_ICONS } from '../media/empty.svelte.js';
 	import { imageEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import { listen } from '../../utils/listen.js';
 	import { fileUploads, uploadHooks, type Uploader } from '../uploads.svelte.js';
@@ -41,11 +40,6 @@
 
 	const px = (width: number | undefined) => (width === undefined ? undefined : `${width}px`);
 
-	/** One view's image state: its source rule, the chrome. */
-	type View = EmptyView & { controls: ImageControls };
-	/** By view; the first image plugin of a view owns it, as its kind's definition (first wins). */
-	const views = new WeakMap<Edytor, View>();
-
 	export type ImagePluginOptions = {
 		/**
 		 * Upload an image file and answer its URL: an empty image's Upload,
@@ -67,23 +61,12 @@
 		const plugin: Plugin = (edytor) => {
 			const labels = labelsOf(edytor, 'image', imageEnglish);
 			const uploads = uploadHooks(edytor, upload);
-			const own: View = {
-				controls: new ImageControls(edytor),
-				// An accepted source; an inline image over the cap is never stored.
-				store: (block, value) => {
-					const src = safeImageSrc(value);
-					if (!src) return 'invalid';
-					if (oversizedInlineImage(src)) return 'inline';
-					block.edytor.patchData(block.id, [{ path: ['src'], value: src }]);
-					return null;
-				}
-			};
-			// The records read with no view (`plugin(undefined)`) keep no state.
-			if (edytor && !views.has(edytor)) {
-				views.set(edytor, own);
-				imageControls.set(edytor, own.controls);
-			}
-			const owns = () => views.get(edytor) === own;
+			// The view's image state (its source rule, the chrome): the first image
+			// plugin of a view owns it, as its kind's definition (first wins). The
+			// records read with no view (`plugin(undefined)`) keep no state.
+			const controls = new ImageControls(edytor);
+			if (edytor && !imageControls.has(edytor)) imageControls.set(edytor, controls);
+			const owns = () => imageControls.get(edytor) === controls;
 			return {
 				onPaste: uploads.onPaste,
 				// The chrome: in the overlay, for the image under the pointer.
@@ -91,7 +74,6 @@
 					const release = uploads.onEdytorAttached?.(view);
 					if (!owns()) return release;
 					const { node } = view;
-					const { controls } = own;
 					const over = (event: PointerEvent) => controls.hover(event.target);
 					const leave = (event: PointerEvent) =>
 						!controls.drag && controls.leave(event.relatedTarget);
@@ -117,7 +99,7 @@
 				},
 				blocks: {
 					image: {
-						...imageKinds.image,
+						...imageForms().image,
 						snippet: image,
 						element: 'figure',
 						// Image files, with an `upload`: an Upload and pasted or dropped files.
@@ -139,26 +121,7 @@
 								keywords: keywordsOf(edytor, 'block.image', ['picture', 'photo', 'img']),
 								group: 'Media'
 							}
-						],
-						html: (block, caption) => {
-							const src = safeImageSrc(block.data?.src);
-							const width = imageWidthOf(block.data);
-							const align = imageAlignOf(block.data);
-							const img = src
-								? `<img src="${escapeHtml(src)}" alt="${escapeHtml(imageAltOf(block.data))}"${width ? ` width="${Math.round(width)}"` : ''}>`
-								: '';
-							const at = align === 'center' ? '' : ` data-align="${align}"`;
-							return `<figure${at}>${img}<figcaption>${caption}</figcaption></figure>`;
-						},
-						// A `figure` holding an `img`, or a bare `img`, with an accepted
-						// source; a pasted inline image over the cap is not imported.
-						parse: (el) => {
-							if (el.localName === 'img') return imgData(el) ?? undefined;
-							const data = el.localName === 'figure' && imgData(el.querySelector('img'));
-							if (!data) return undefined;
-							const align = el.getAttribute('data-align');
-							return align === 'left' || align === 'right' ? { ...data, align } : data;
-						}
+						]
 					}
 				}
 			};
@@ -172,7 +135,7 @@
 <!-- prettier-ignore -->
 {#snippet image({ block, content }: BlockSnippetPayload<ImageData>)}
 	<!-- A suggestion's preview (no handle) reads only its data. -->
-	{@const view = block.handle ? views.get(block.handle.edytor) : undefined}
+	{@const controls = block.handle ? imageControls.get(block.handle.edytor) : undefined}
 	{@const src = safeImageSrc(block.data.src)}
 	{@const pending = block.handle && !src ? fileUploads(block.handle.edytor)?.of(block.id) : undefined}
 	{#if src}
@@ -182,7 +145,7 @@
 				alt={imageAltOf(block.data)}
 				draggable="false"
 				style:width={px(
-					view ? view.controls.width(block.id, block.data) : imageWidthOf(block.data)
+					controls ? controls.width(block.id, block.data) : imageWidthOf(block.data)
 				)}
 			/>
 		</div>
@@ -196,7 +159,7 @@
 			<EmptySlot
 				block={block.handle}
 				kind="image"
-				viewOf={(edytor) => (edytor ? views.get(edytor) : undefined)}
+				viewOf={(edytor) => (edytor ? imageControls.get(edytor) : undefined)}
 			/>
 		</div>
 	{/if}<!--

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

@@ -1,6 +1,6 @@
 import { BandDrag } from '../bands.svelte.js';
 import { layerBox, pin, sameValues } from '../../surface/overlay.js';
-import { imageAlignOf, imageWidthOf, MIN_IMAGE_WIDTH } from './image.js';
+import { imageAlignOf, imageWidthOf, MIN_IMAGE_WIDTH, oversizedInlineImage, safeImageSrc } from './image.js';
 /** The image element of a shown image block (none while it uploads); an image holds no block. */
 const imageOf = (node) => node?.querySelector('[data-edytor-image] > img') ?? null;
 /**
@@ -29,13 +29,27 @@ export class ImageControls {
     /** The handles' gesture (a resize band's: press, view-only preview, one write). @internal */
     band;
     /** The view's image toolbar, when its plugin is listed. @internal */
-    toolbar;
+    toolbar = $state();
     constructor(
     /** @internal */
     edytor) {
         this.edytor = edytor;
         this.band = new BandDrag(edytor);
     }
+    /**
+     * Store a link or an upload's answer on `block` (an empty image's): an
+     * accepted source; an inline image over the cap is never stored.
+     * @internal
+     */
+    store = (block, value) => {
+        const src = safeImageSrc(value);
+        if (!src)
+            return 'invalid';
+        if (oversizedInlineImage(src))
+            return 'inline';
+        block.edytor.patchData(block.id, [{ path: ['src'], value: src }]);
+        return null;
+    };
     /** The handle being dragged. */
     get drag() {
         return this.band.drag;

package/dist/plugins/image/toolbar.svelte.d.ts

@@ -11,7 +11,6 @@ import type { Attachment } from 'svelte/attachments';
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import { type ImageAlign } from './image.js';
-import { type ImageControls } from './controls.svelte.js';
 /**
  * What a `toolbar` snippet receives: the image the chrome is on (`box`),
  * its alignment (`align`) and alt text (`alt`, `setAlt`), the alt field's
@@ -20,9 +19,11 @@ import { type ImageControls } from './controls.svelte.js';
  */
 export declare class ImageToolbar {
     #private;
-    constructor(
-    /** @internal */
-    controls: ImageControls);
+    /**
+     * Where the toolbar stands (`ChromeAnchor`): the image the chrome is
+     * on, whose top right your `toolbar` places itself in.
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
     /** The measured image the toolbar is on (`null`: none). */
     get box(): import("./controls.svelte.js").ImageBox | null;
     /** The view is readonly (reactive). */

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,7 +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 { 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';

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/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

@@ -19,5 +19,5 @@
 	 * Void: its only text is the caption.
 	 */
 	export const createAudioPlugin = ({ upload }: AudioPluginOptions = {}): Plugin =>
-		sourcePlugin('audio', ['sound', 'music', 'mp3'], undefined, {}, upload);
+		sourcePlugin('audio', ['sound', 'music', 'mp3'], {}, upload);
 </script>

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}