edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/marquee/MarqueeController.svelte.js

@@ -27,10 +27,6 @@ export class MarqueeController {
         this.edytor = edytor;
         this.threshold = threshold;
     }
-    /** Whether a press is down that may still become (or is) a marquee. */
-    get pressing() {
-        return this.#press !== null;
-    }
     /** What a `box` snippet receives. */
     get payload() {
         const { rect } = this;
@@ -64,10 +60,24 @@ export class MarqueeController {
             if (event.button === 0)
                 event.preventDefault();
         };
-        const listen = (target, type, listener, options = {}) => {
-            target.addEventListener(type, listener, options);
-            return () => target.removeEventListener(type, listener, options);
-        };
+        const listening = new AbortController();
+        const on = (target, type, listener) => target.addEventListener(type, listener, {
+            capture: true,
+            passive: type === 'scroll',
+            signal: listening.signal
+        });
+        // WebKit after a native drag sends a lone `mousedown` and may skip the
+        // pointer events of the press: its mouse events end it too.
+        for (const type of ['pointermove', 'mousemove'])
+            on(document, type, this.#moved);
+        for (const type of ['pointerup', 'mouseup'])
+            on(document, type, this.#released);
+        on(document, 'pointercancel', this.cancel);
+        on(document, 'mousedown', compat);
+        on(document, 'selectstart', cancel);
+        on(document, 'dragstart', cancel);
+        on(document, 'scroll', this.#scrolled);
+        on(view, 'keydown', this.#key);
         this.#press = {
             x: clientX - box.left,
             y: clientY - box.top,
@@ -75,20 +85,7 @@ export class MarqueeController {
             host,
             before,
             base: adding && before.kind === 'blocks' ? before.ids : [],
-            // WebKit after a native drag sends a lone `mousedown` and may skip the
-            // pointer events of the press: its mouse events end it too.
-            off: [
-                listen(document, 'pointermove', this.#moved, { capture: true }),
-                listen(document, 'mousemove', this.#moved, { capture: true }),
-                listen(document, 'pointerup', this.#released, { capture: true }),
-                listen(document, 'mouseup', this.#released, { capture: true }),
-                listen(document, 'pointercancel', this.cancel, { capture: true }),
-                listen(document, 'mousedown', compat, { capture: true }),
-                listen(document, 'selectstart', cancel, { capture: true }),
-                listen(document, 'dragstart', cancel, { capture: true }),
-                listen(document, 'scroll', this.#scrolled, { capture: true, passive: true }),
-                listen(view, 'keydown', this.#key, { capture: true })
-            ]
+            listening
         };
         this.#pointer = { x: clientX, y: clientY };
         this.adding = adding;
@@ -221,7 +218,7 @@ export class MarqueeController {
         const press = this.#press;
         this.#press = null;
         this.#active = false;
-        press?.off.forEach((off) => off());
+        press?.listening.abort();
         if (this.#frame !== null)
             this.edytor.node?.ownerDocument.defaultView?.cancelAnimationFrame(this.#frame);
         this.#frame = null;

package/dist/plugins/marquee/marquee.js

@@ -1,4 +1,5 @@
 import { hidden } from '../../selection/visibility.js';
+import { bandRun } from '../../surface/overlay.js';
 /** Whether two boxes overlap (an edge they share is no overlap: rows touch). */
 const meets = (rect, box) => rect.left < box.right && rect.right > box.left && rect.top < box.bottom && rect.bottom > box.top;
 /**
@@ -39,27 +40,9 @@ export const marqueeBlocks = (edytor, rect) => {
     /** The children of `parent` at the rectangle's height: a binary search over their boxes. */
     const rows = (ids) => {
         const at = (i) => box(idToBlock.block(ids[i]));
-        let lo = 0;
-        let hi = ids.length;
-        while (lo < hi) {
-            const mid = (lo + hi) >> 1;
-            const b = at(mid);
-            if (!b || b.bottom <= rect.top)
-                lo = mid + 1;
-            else
-                hi = mid;
-        }
-        const first = lo;
-        hi = ids.length;
-        while (lo < hi) {
-            const mid = (lo + hi) >> 1;
-            const b = at(mid);
-            if (!b || b.top < rect.bottom)
-                lo = mid + 1;
-            else
-                hi = mid;
-        }
-        return ids.slice(first, lo).flatMap((id) => {
+        // Rows touch: an edge they share is no overlap.
+        const [first, end] = bandRun(ids.length, at, rect.top, rect.bottom, true);
+        return ids.slice(first, end).flatMap((id) => {
             const block = idToBlock.block(id);
             return hidden(block) ? [] : [block];
         });

package/dist/plugins/marquee/marqueePlugin.d.ts

@@ -13,7 +13,10 @@ export type MarqueePluginOptions = {
     container?: string | ((editor: HTMLElement) => Element | null | undefined);
     /** How far (px) the pointer moves before the rectangle starts: a shorter press is a click. Default 4. */
     threshold?: number;
-    /** Replace the rectangle's markup; it renders in a host placed and sized to the rectangle. */
+    /**
+     * The rectangle's markup; it renders in a host placed and sized to the
+     * rectangle (without it, the blocks are selected and no rectangle shows).
+     */
     box?: Snippet<[MarqueeBoxPayload]>;
 };
 /**
@@ -27,5 +30,3 @@ export type MarqueePluginOptions = {
  * the last block, the trailing paragraph).
  */
 export declare const createMarqueePlugin: (options?: MarqueePluginOptions) => Plugin;
-/** The marquee with the default rectangle. */
-export declare const marqueePlugin: Plugin;

package/dist/plugins/marquee/marqueePlugin.js

@@ -42,19 +42,22 @@ export const createMarqueePlugin = (options = {}) => (edytor) => {
                     if (around)
                         controller.press(event, false);
                 }));
-            const unmount = edytor.overlay.mount(MarqueeBox, { controller, box: options.box }, 'edytor-marquee-host', 6, (host) => {
-                const rect = controller.rect;
-                return () => Object.assign(host.style, {
-                    pointerEvents: 'none',
-                    display: rect ? '' : 'none',
-                    ...(rect && {
-                        left: `${rect.left}px`,
-                        top: `${rect.top}px`,
-                        width: `${rect.width}px`,
-                        height: `${rect.height}px`
-                    })
-                });
-            });
+            const { box } = options;
+            const unmount = box
+                ? edytor.overlay.mount(MarqueeBox, { controller, box }, 'edytor-marquee-host', 6, (host) => {
+                    const rect = controller.rect;
+                    return () => Object.assign(host.style, {
+                        pointerEvents: 'none',
+                        display: rect ? '' : 'none',
+                        ...(rect && {
+                            left: `${rect.left}px`,
+                            top: `${rect.top}px`,
+                            width: `${rect.width}px`,
+                            height: `${rect.height}px`
+                        })
+                    });
+                })
+                : () => { };
             return () => {
                 controller.destroy();
                 offs.forEach((off) => off());
@@ -63,5 +66,3 @@ export const createMarqueePlugin = (options = {}) => (edytor) => {
         }
     };
 };
-/** The marquee with the default rectangle. */
-export const marqueePlugin = createMarqueePlugin();

package/dist/plugins/media/AudioPlugin.svelte

@@ -1,28 +1,16 @@
 <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 {
-		claimed,
-		escapeHtml,
-		mediaLabels,
-		mediaEmpty,
-		mediaSourceOf,
-		safeMediaSrc,
-		mediaUploads,
-		type MediaPluginOptions
-	} from './media.js';
+	import type { Plugin } from '../../plugins.js';
+	import { sourcePlugin } from './SourceBlock.svelte';
+	import type { Uploader } from '../uploads.svelte.js';
 
-	const uploadOf = new WeakMap<Edytor, MediaPluginOptions['upload']>();
-
-	const audioLink = (block: Block | undefined, value: string) => {
-		const src = safeMediaSrc(value);
-		if (!block || !src) return false;
-		block.data.src = src;
-		return true;
+	export type AudioPluginOptions = {
+		/**
+		 * Upload a audio file and answer its URL: an empty block's Upload, and
+		 * the pasted and dropped audio 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, audios are only linked.
+		 */
+		upload?: Uploader;
 	};
 
 	/**
@@ -30,69 +18,6 @@
 	 * through `upload`) in the browser's player, with an editable caption.
 	 * Void: its only text is the caption.
 	 */
-	export const createAudioPlugin =
-		(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, 'audio', options.upload) : undefined;
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.audio.claim(edytor, labels);
-			mediaEmpty.claim(edytor, 'audio', options.empty);
-			return {
-				...(onPaste ? { onPaste } : {}),
-				blocks: {
-					audio: {
-						...mediaKinds.audio,
-						snippet: audio,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.audio.label,
-								icon: '🎵',
-								keywords: keywordsOf('block.audio', ['sound', 'music', 'mp3'], options.keywords),
-								group: 'Media'
-							}
-						],
-						html: (block, caption) => {
-							const src = safeMediaSrc(block.data?.src);
-							const media = src ? `<audio src="${escapeHtml(src)}" controls></audio>` : '';
-							return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
-						},
-						// An `audio` (bare, or in a `figure`) with a safe `src` or `source`.
-						parse: (el) => {
-							const src = mediaSourceOf(claimed(el, 'audio'));
-							return src ? { src } : undefined;
-						}
-					}
-				}
-			};
-		};
-
-	/** The audio block, links only. */
-	export const audioPlugin = createAudioPlugin();
+	export const createAudioPlugin = ({ upload }: AudioPluginOptions = {}): Plugin =>
+		sourcePlugin('audio', ['sound', 'music', 'mp3'], undefined, {}, upload);
 </script>
-
-{#snippet audio({ block, content }: BlockSnippetPayload<{ src?: string }>)}
-	{@const src = safeMediaSrc(block.data.src)}
-	{#if src}
-		<div use:block.void data-edytor-audio>
-			<audio {src} controls preload="metadata" style="display: block; width: 100%"></audio>
-		</div>
-	{:else}
-		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
-				block={block.handle}
-				kind="audio"
-				icon="🎵"
-				accept="audio/*"
-				upload={block.handle && uploadOf.get(block.handle.edytor)}
-				link={(value) => audioLink(block.handle, value)}
-			/>
-		</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/AudioPlugin.svelte.d.ts

@@ -1,13 +1,20 @@
 import type { Plugin } from '../../plugins.js';
-import { type MediaPluginOptions } from './media.js';
+import type { Uploader } from '../uploads.svelte.js';
+export type AudioPluginOptions = {
+    /**
+     * Upload a audio file and answer its URL: an empty block's Upload, and
+     * the pasted and dropped audio 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, audios are only linked.
+     */
+    upload?: Uploader;
+};
 /**
  * Notion's audio block: an audio file (an `http(s)` link, or an upload
  * through `upload`) in the browser's player, with an editable caption.
  * Void: its only text is the caption.
  */
-export declare const createAudioPlugin: (options?: MediaPluginOptions) => Plugin;
-/** The audio block, links only. */
-export declare const audioPlugin: Plugin;
+export declare const createAudioPlugin: ({ upload }?: AudioPluginOptions) => 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/BookmarkPlugin.svelte

@@ -1,14 +1,23 @@
 <script module lang="ts">
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import MediaEmpty from './MediaEmpty.svelte';
-	import { mediaKinds } from '../../crdt/semantics.js';
+	import 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 { escapeHtml, mediaEmpty, mediaLabels, safeWebUrl } from './media.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
+	import {
+		MEDIA_ICONS,
+		escapeHtml,
+		mediaControl,
+		mediaLink,
+		mediaPlugin,
+		mediaView,
+		safeWebUrl,
+		LINK_REL,
+		type BookmarkCardPayload
+	} from './media.js';
+
+	export type { BookmarkCardPayload };
 
 	/** What an `unfurl` answers about a page; every field optional. */
 	export type BookmarkPreview = {
@@ -27,29 +36,24 @@
 		 * set from the panel or the paste menu; without it the card shows the URL.
 		 */
 		unfurl?: (url: string) => Promise<BookmarkPreview | null | undefined>;
-		/** The words the block shows (its empty panel, its menu row), over the English ones. */
-		labels?: PartialLabels<'media'>;
-		/** The slash menu's keywords of its command (`block.<kind>`), which replace its own. */
-		keywords?: Partial<Record<string, string[]>>;
 		/**
-		 * 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`).
+		 * The card of a bookmark with a link (default: Notion's, the title,
+		 * description and URL beside the cover): `<a href={card.url}
+		 * {@attach card.link}>`. The first bookmark plugin listed in a view gives its card.
 		 */
-		empty?: Snippet<[MediaEmptyController]>;
+		card?: Snippet<[BookmarkCardPayload]>;
 	};
 
-	const unfurlOf = new WeakMap<Edytor, BookmarkPluginOptions['unfurl']>();
-
 	/** A preview's text field, trimmed and capped: it is stored in the document. */
 	const text = (value: unknown, max: number) =>
 		typeof value === 'string' && value.trim() ? value.trim().slice(0, max) : undefined;
@@ -73,39 +77,8 @@
 	 */
 	const UNFURL_ORIGIN = Symbol('edytor.bookmark.unfurl');
 
-	/**
-	 * Ask the view's `unfurl` about `url` and store its answer on `block`, as
-	 * one data write outside the undo history (`UNFURL_ORIGIN`), when the
-	 * block still is that bookmark in a view that may write.
-	 */
-	const fill = async (block: Block, url: string) => {
-		const unfurl = unfurlOf.get(block.edytor);
-		if (!unfurl || block.edytor.readonly) return;
-		let preview: BookmarkPreview | null | undefined;
-		try {
-			preview = await unfurl(url);
-		} catch {
-			return;
-		}
-		const data = previewData(preview);
-		const { edytor, id } = block;
-		const live = edytor.idToBlock.get(id);
-		if (!Object.keys(data).length || !live?.isInTree || !edytor.dispatcher.permits()) return;
-		if (live.type !== 'bookmark' || edytor.facade.blockDataOf(id)?.url !== url) return;
-		const patches = Object.entries(data).map(([key, value]) => ({ path: [key], value }));
-		edytor.doc.transact(
-			() => edytor.facade.apply(edytor.facade.prepare.patchData(id, patches)),
-			UNFURL_ORIGIN
-		);
-	};
-
-	const bookmarkLink = (block: Block | undefined, value: string) => {
-		const url = safeWebUrl(value);
-		if (!block || !url) return false;
-		block.data.url = url;
-		void fill(block, url);
-		return true;
-	};
+	/** The view's card markup, if the app gave one. */
+	const cardOf = mediaControl('bookmark', 'card');
 
 	/**
 	 * Notion's web bookmark: a card linking to a page, with its title,
@@ -113,97 +86,101 @@
 	 * editable caption. Void: its only text is the caption. Pasting an
 	 * `http(s)` link on an empty line offers "Bookmark".
 	 */
-	export const createBookmarkPlugin =
-		(options: BookmarkPluginOptions = {}): Plugin =>
-		(edytor) => {
-			// First wins, as for the kind: a second listing never replaces it.
-			if (!unfurlOf.has(edytor)) unfurlOf.set(edytor, options.unfurl);
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.bookmark.claim(edytor, labels);
-			mediaEmpty.claim(edytor, 'bookmark', options.empty);
+	export const createBookmarkPlugin = (options: BookmarkPluginOptions = {}): Plugin =>
+		mediaPlugin('bookmark', ['link', 'url', 'preview', 'unfurl'], (edytor) => {
+			/**
+			 * Ask `unfurl` about `url` and store its answer on `block`, as one
+			 * data write outside the undo history (`UNFURL_ORIGIN`), when the
+			 * block still is that bookmark in a view that may write. The view's
+			 * is the first bookmark plugin's listed (first wins, as for the
+			 * kind): its store and its paste offer call this.
+			 */
+			const fill = async (block: Block, url: string) => {
+				const { unfurl } = options;
+				if (!unfurl || block.edytor.readonly) return;
+				let preview: BookmarkPreview | null | undefined;
+				try {
+					preview = await unfurl(url);
+				} catch {
+					return;
+				}
+				const data = previewData(preview);
+				const { edytor, id } = block;
+				const live = edytor.idToBlock.get(id);
+				if (!Object.keys(data).length || !live?.isInTree || !edytor.dispatcher.permits()) return;
+				if (live.type !== 'bookmark' || edytor.facade.blockDataOf(id)?.url !== url) return;
+				const patches = Object.entries(data).map(([key, value]) => ({ path: [key], value }));
+				edytor.doc.transact(
+					() => edytor.facade.apply(edytor.facade.prepare.patchData(id, patches)),
+					UNFURL_ORIGIN
+				);
+			};
 			return {
-				...urlPaste(
+				card: options.card,
+				store: (block, value) => {
+					const url = safeWebUrl(value);
+					if (!url) return 'invalid';
+					block.edytor.patchData(block.id, [{ path: ['url'], value: url }]);
+					void fill(block, url);
+					return null;
+				},
+				hooks: urlPaste(
 					edytor,
 					{
 						type: 'bookmark',
-						label: labels.bookmark.offer,
-						icon: '🔖',
+						icon: MEDIA_ICONS.bookmark,
 						data: (url) => ({ url }),
 						created: (block, url) => void fill(block, url)
 					},
-					labels,
 					options.menu
 				),
-				blocks: {
-					bookmark: {
-						...mediaKinds.bookmark,
-						snippet: bookmark,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.bookmark.label,
-								icon: '🔖',
-								keywords: keywordsOf(
-									'block.bookmark',
-									['link', 'url', 'preview', 'unfurl'],
-									options.keywords
-								),
-								group: 'Media'
-							}
-						],
-						html: (block, caption) => {
-							const url = safeWebUrl(block.data?.url);
-							const title = text(block.data?.title, 300) ?? url;
-							const link = url ? `<a href="${escapeHtml(url)}">${escapeHtml(title!)}</a>` : '';
-							return `<figure data-edytor-bookmark>${link}<figcaption>${caption}</figcaption></figure>`;
-						},
-						plain: (block, caption) =>
-							[safeWebUrl(block.data?.url), caption].filter(Boolean).join('\n'),
-						// Its own export: a `figure[data-edytor-bookmark]` holding the link.
-						parse: (el) => {
-							if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-bookmark')) return;
-							const anchor = el.querySelector('a[href]');
-							const url = safeWebUrl(anchor?.getAttribute('href'));
-							const title = text(anchor?.textContent, 300);
-							return url ? { url, ...(title && title !== url ? { title } : {}) } : undefined;
-						}
+				record: {
+					snippet: bookmark,
+					html: (block, caption) => {
+						const url = safeWebUrl(block.data?.url);
+						const title = text(block.data?.title, 300) ?? url;
+						const link = url ? `<a href="${escapeHtml(url)}">${escapeHtml(title!)}</a>` : '';
+						return `<figure data-edytor-bookmark>${link}<figcaption>${caption}</figcaption></figure>`;
+					},
+					plain: (block, caption) =>
+						[safeWebUrl(block.data?.url), caption].filter(Boolean).join('\n'),
+					// Its own export: a `figure[data-edytor-bookmark]` holding the link.
+					parse: (el) => {
+						if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-bookmark')) return;
+						const anchor = el.querySelector('a[href]');
+						const url = safeWebUrl(anchor?.getAttribute('href'));
+						const title = text(anchor?.textContent, 300);
+						return url ? { url, ...(title && title !== url ? { title } : {}) } : undefined;
 					}
 				}
 			};
-		};
-
-	/** The bookmark block, without unfurling: the card shows the URL. */
-	export const bookmarkPlugin = createBookmarkPlugin();
+		});
 </script>
 
 {#snippet bookmark({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
 	{@const url = safeWebUrl(block.data.url)}
 	{#if url}
-		{@const title = text(block.data.title, 300)}
-		{@const description = text(block.data.description, 1000)}
-		{@const image = safeWebUrl(block.data.image)}
-		{@const icon = safeWebUrl(block.data.icon)}
 		<div use:block.void data-edytor-bookmark>
-			<a href={url} target="_blank" rel="noopener noreferrer nofollow" draggable="false">
-				<span data-edytor-bookmark-text>
-					<span data-edytor-bookmark-title>{title ?? url}</span>
-					{#if description}<span data-edytor-bookmark-description>{description}</span>{/if}
-					<span data-edytor-bookmark-url>
-						{#if icon}<img src={icon} alt="" draggable="false" />{/if}<span>{url}</span>
-					</span>
-				</span>
-				{#if image}
-					<span data-edytor-bookmark-cover><img src={image} alt="" draggable="false" /></span>
-				{/if}
-			</a>
+			<Control
+				own={cardOf}
+				{initial}
+				payload={{
+					block: block.handle,
+					url,
+					title: text(block.data.title, 300),
+					description: text(block.data.description, 1000),
+					image: safeWebUrl(block.data.image) ?? undefined,
+					icon: safeWebUrl(block.data.icon) ?? undefined,
+					link: mediaLink({ draggable: 'false' })
+				}}
+			/>
 		</div>
 	{:else}
 		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
+			<EmptySlot
 				block={block.handle}
 				kind="bookmark"
-				icon="🔖"
-				link={(value) => bookmarkLink(block.handle, value)}
+				viewOf={(edytor) => mediaView(edytor, 'bookmark')}
 			/>
 		</div>
 	{/if}
@@ -211,3 +188,19 @@
 	<!-- svelte-ignore a11y_figcaption_parent -->
 	<figcaption>{@render content()}</figcaption>
 {/snippet}
+
+<!-- Notion's card: the page's title, description and URL (with its icon) beside its cover. -->
+{#snippet initial({ url, title, description, image, icon, link }: BookmarkCardPayload)}
+	<a href={url} target="_blank" rel={LINK_REL} draggable="false" {@attach link}>
+		<span data-edytor-bookmark-text>
+			<span data-edytor-bookmark-title>{title ?? url}</span>
+			{#if description}<span data-edytor-bookmark-description>{description}</span>{/if}
+			<span data-edytor-bookmark-url>
+				{#if icon}<img src={icon} alt="" draggable="false" />{/if}<span>{url}</span>
+			</span>
+		</span>
+		{#if image}
+			<span data-edytor-bookmark-cover><img src={image} alt="" draggable="false" /></span>
+		{/if}
+	</a>
+{/snippet}