edytor 1.0.0-rc.3 → 1.0.0

package/dist/plugins/media/EmbedPlugin.svelte

@@ -1,66 +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 EmptySlot from './EmptySlot.svelte';
+	import Control from '../Control.svelte';
 	import type { Snippet } from 'svelte';
 	import { urlPaste, type UrlPasteController } from './urlPaste.svelte.js';
-	import type { MediaEmptyController } from './empty.svelte.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
 	import {
 		EMBED_ALLOW,
 		EMBED_PROVIDERS,
 		EMBED_SANDBOX,
+		MEDIA_ICONS,
 		claimed,
 		embedSourceOf,
-		mediaLabels,
-		mediaEmpty,
 		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[]>>;
 		/**
-		 * Replace the menu a URL pasted on an empty line opens (Link, Embed,
-		 * Bookmark); it renders while `controller.open`, under the line. The
+		 * 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
-		 * `{...controller.option(index)}` on each row.
+		 * `{@attach controller.option(index)}` on each row.
 		 */
 		menu?: Snippet<[UrlPasteController]>;
 		/**
-		 * Replace an empty block's markup (its "Add …" button and link panel,
-		 * or a readonly view's placeholder): it receives the block's
-		 * `MediaEmptyController` (`open`, `draft`, `failed`, `embed`, `readonly`).
+		 * 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.
 		 */
-		empty?: Snippet<[MediaEmptyController]>;
+		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
@@ -71,68 +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);
-			mediaEmpty.claim(edytor, 'embed', options.empty);
-			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 }>)}
@@ -161,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}
@@ -177,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,32 +1,28 @@
 import type { Plugin } from '../../plugins.js';
 import type { Snippet } from 'svelte';
 import { type UrlPasteController } from './urlPaste.svelte.js';
-import type { MediaEmptyController } from './empty.svelte.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 { 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[]>>;
     /**
-     * Replace the menu a URL pasted on an empty line opens (Link, Embed,
-     * Bookmark); it renders while `controller.open`, under the line. The
+     * 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
-     * `{...controller.option(index)}` on each row.
+     * `{@attach controller.option(index)}` on each row.
      */
     menu?: Snippet<[UrlPasteController]>;
     /**
-     * Replace an empty block's markup (its "Add …" button and link panel,
-     * or a readonly view's placeholder): it receives the block's
-     * `MediaEmptyController` (`open`, `draft`, `failed`, `embed`, `readonly`).
+     * 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.
      */
-    empty?: Snippet<[MediaEmptyController]>;
+    fallback?: Snippet<[EmbedFallbackPayload]>;
 };
 /**
  * Notion's embed block: an "Embed a link" panel until it has a link, then
@@ -38,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}

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

@@ -0,0 +1,25 @@
+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 declare const emptyHosts: WeakMap<object, EmptyHost>;
+type $$ComponentProps = {
+    block: Block | undefined;
+    kind: MediaKind | 'image';
+    viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+};
+declare const EmptySlot: Component<$$ComponentProps, {}, "">;
+type EmptySlot = ReturnType<typeof EmptySlot>;
+export default EmptySlot;

package/dist/plugins/media/FilePlugin.svelte

@@ -1,28 +1,18 @@
 <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 { keywordsOf, labelsWith } from '../../labels.js';
-	import {
-		escapeHtml,
-		fileNameOf,
-		mediaLabels,
-		mediaEmpty,
-		safeMediaSrc,
-		mediaUploads,
-		type MediaPluginOptions
-	} from './media.js';
+	import type { Snippet } from 'svelte';
+	import type { Plugin } from '../../plugins.js';
+	import { escapeHtml, fileNameOf, safeMediaSrc, type FileRowPayload } from './media.js';
+	import { sourcePlugin } from './SourceBlock.svelte';
 
-	const uploadOf = new WeakMap<Edytor, MediaPluginOptions['upload']>();
+	export type { FileRowPayload };
 
-	/** Store a file's source, name and size on `block` as one data write; answers whether it did. */
-	const attach = (block: Block | undefined, value: string, name?: string, size?: number) => {
-		const src = safeMediaSrc(value);
-		if (!block || !src) return false;
-		block.setData({ src, name: name || fileNameOf(src), ...(size !== undefined ? { size } : {}) });
-		return true;
+	export type FilePluginOptions = {
+		/**
+		 * A file's row once it has a source (default: Notion's, a paperclip,
+		 * its name and size): `<a href={row.src} {@attach row.link}>`, which
+		 * downloads the file. The first file plugin listed in a view gives its row.
+		 */
+		row?: Snippet<[FileRowPayload]>;
 	};
 
 	/**
@@ -30,96 +20,28 @@
 	 * linked), shown as its name and size, linking to the file, with an
 	 * editable caption. Void: its only text is the caption.
 	 */
-	export const createFilePlugin =
-		(options: MediaPluginOptions = {}): Plugin =>
-		(edytor) => {
-			// First wins, as for the kind: a second listing never replaces it.
-			const first = !!edytor && !uploadOf.has(edytor);
-			if (first) uploadOf.set(edytor, options.upload);
-			const onPaste = first ? mediaUploads(edytor, 'file', options.upload) : undefined;
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.file.claim(edytor, labels);
-			mediaEmpty.claim(edytor, 'file', options.empty);
-			return {
-				...(onPaste ? { onPaste } : {}),
-				blocks: {
-					file: {
-						...mediaKinds.file,
-						snippet: file,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.file.label,
-								icon: '📎',
-								keywords: keywordsOf(
-									'block.file',
-									['attachment', 'upload', 'pdf', 'document'],
-									options.keywords
-								),
-								group: 'Media'
-							}
-						],
-						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;
-						}
-					}
+	export const createFilePlugin = (options: FilePluginOptions = {}): Plugin =>
+		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;
 				}
-			};
-		};
-
-	/** The file block, links only. */
-	export const filePlugin = createFilePlugin();
+			},
+			{ row: options.row }
+		);
 </script>
-
-{#snippet file({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
-	{@const src = safeMediaSrc(block.data.src)}
-	{#if src}
-		{@const name =
-			typeof block.data.name === 'string' && block.data.name ? block.data.name : fileNameOf(src)}
-		{@const size =
-			typeof block.data.size === 'number'
-				? mediaLabels.file.of(block.handle?.edytor).fileSize(block.data.size)
-				: ''}
-		<div use:block.void data-edytor-file>
-			<a
-				href={src}
-				target="_blank"
-				rel="noopener noreferrer nofollow"
-				download={name}
-				draggable="false"
-			>
-				<span aria-hidden="true">📎</span>
-				<span data-edytor-file-name>{name}</span>
-				{#if size}<span data-edytor-file-size>{size}</span>{/if}
-			</a>
-		</div>
-	{:else}
-		{@const upload = block.handle && uploadOf.get(block.handle.edytor)}
-		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
-				block={block.handle}
-				kind="file"
-				icon="📎"
-				{upload}
-				link={(value) => attach(block.handle, value)}
-				file={(picked, src) => attach(block.handle, src, picked.name, picked.size)}
-			/>
-		</div>
-	{/if}
-	<!-- The core renders the kind's <figure> around this markup. -->
-	<!-- svelte-ignore a11y_figcaption_parent -->
-	<figcaption>{@render content()}</figcaption>
-{/snippet}

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

@@ -1,13 +1,21 @@
+import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
-import { type MediaPluginOptions } from './media.js';
+import { type FileRowPayload } from './media.js';
+export type { FileRowPayload };
+export type FilePluginOptions = {
+    /**
+     * A file's row once it has a source (default: Notion's, a paperclip,
+     * its name and size): `<a href={row.src} {@attach row.link}>`, which
+     * downloads the file. The first file plugin listed in a view gives its row.
+     */
+    row?: Snippet<[FileRowPayload]>;
+};
 /**
  * Notion's file block: an attachment, uploaded through `upload` (or
  * linked), shown as its name and size, linking to the file, with an
  * editable caption. Void: its only text is the caption.
  */
-export declare const createFilePlugin: (options?: MediaPluginOptions) => Plugin;
-/** The file block, links only. */
-export declare const filePlugin: Plugin;
+export declare const createFilePlugin: (options?: FilePluginOptions) => 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;