edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/media/VideoPlugin.svelte

@@ -1,105 +1,12 @@
 <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,
-		mediaSourceOf,
-		safeMediaSrc,
-		mediaUploads,
-		type MediaPluginOptions
-	} from './media.js';
-
-	const uploadOf = new WeakMap<Edytor, MediaPluginOptions['upload']>();
-
-	const videoLink = (block: Block | undefined, value: string) => {
-		const src = safeMediaSrc(value);
-		if (!block || !src) return false;
-		block.data.src = src;
-		return true;
-	};
+	import type { Plugin } from '../../plugins.js';
+	import { sourcePlugin } from './SourceBlock.svelte';
 
 	/**
 	 * 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 (`embedPlugin`). Void: its only
+	 * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
 	 * text is the caption.
 	 */
-	export const createVideoPlugin =
-		(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, 'video', options.upload) : undefined;
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.video.claim(edytor, labels);
-			return {
-				...(onPaste ? { onPaste } : {}),
-				blocks: {
-					video: {
-						...mediaKinds.video,
-						snippet: video,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.video.label,
-								icon: '🎬',
-								keywords: keywordsOf('block.video', ['movie', 'mp4', 'clip'], options.keywords),
-								group: 'Media'
-							}
-						],
-						html: (block, caption) => {
-							const src = safeMediaSrc(block.data?.src);
-							const media = src ? `<video src="${escapeHtml(src)}" controls></video>` : '';
-							return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
-						},
-						// A `video` (bare, or in a `figure`) with a safe `src` or `source`.
-						parse: (el) => {
-							const src = mediaSourceOf(claimed(el, 'video'));
-							return src ? { src } : undefined;
-						}
-					}
-				}
-			};
-		};
-
-	/** The video block, links only. */
-	export const videoPlugin = createVideoPlugin();
+	export const createVideoPlugin = (): Plugin => sourcePlugin('video', ['movie', 'mp4', 'clip']);
 </script>
-
-{#snippet video({ block, content }: BlockSnippetPayload<{ src?: string }>)}
-	{@const src = safeMediaSrc(block.data.src)}
-	{#if src}
-		<div use:block.void data-edytor-video>
-			<!-- svelte-ignore a11y_media_has_caption -->
-			<video
-				{src}
-				controls
-				preload="metadata"
-				playsinline
-				draggable="false"
-				style="display: block; width: 100%"
-			></video>
-		</div>
-	{:else}
-		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
-				block={block.handle}
-				kind="video"
-				icon="🎬"
-				accept="video/*"
-				upload={block.handle && uploadOf.get(block.handle.edytor)}
-				link={(value) => videoLink(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/VideoPlugin.svelte.d.ts

@@ -1,14 +1,11 @@
 import type { Plugin } from '../../plugins.js';
-import { type MediaPluginOptions } from './media.js';
 /**
  * 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 (`embedPlugin`). Void: its only
+ * A YouTube or Vimeo link is an embed (`createEmbedPlugin()`). Void: its only
  * text is the caption.
  */
-export declare const createVideoPlugin: (options?: MediaPluginOptions) => Plugin;
-/** The video block, links only. */
-export declare const videoPlugin: Plugin;
+export declare const createVideoPlugin: () => 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

@@ -0,0 +1,69 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Block } from '../../block/block.svelte.js';
+import type { MediaKind } from './media.js';
+import { type FileUpload } from '../uploads.svelte.js';
+/** Each media kind's icon (the image's too): its menu row, its empty block, its paste offer. */
+export declare const MEDIA_ICONS: Record<MediaKind | 'image', string>;
+/**
+ * Why the last link or upload was not embedded: no source the kind takes
+ * (`invalid`), an inline image over the cap (`inline`), a failed upload.
+ */
+export type MediaEmptyFailure = 'invalid' | 'inline' | 'upload';
+/** What an empty block reads of its kind in a view: how it stores a source. */
+export type EmptyView = {
+    /** Store a link (or the URL an upload of `file` answered) on `block`: why it did not, or `null`. */
+    store: (block: Block, value: string, file?: File) => MediaEmptyFailure | null;
+};
+/**
+ * An empty image or media block's state (an image, an embed, a bookmark, a
+ * file, a video, an audio track: Notion's "Add …"): the panel's `open`
+ * state, the link field's `draft`, why the last link or upload was not
+ * embedded (`failed`), and the upload of a pasted or dropped file
+ * (`pending`); `embed` and `upload` set the source. What an image or media
+ * plugin's `empty` snippet receives (one per empty block shown).
+ */
+export declare class MediaEmptyController {
+    #private;
+    /** The empty block; none in a suggestion's preview. */
+    readonly block: Block | undefined;
+    /** Which kind it is (your words for it: its button, placeholder, errors). */
+    readonly kind: MediaKind | 'image';
+    /** The kind in the block's view. */
+    private view;
+    /** The link panel is open. */
+    open: boolean;
+    /** The link field's text. */
+    draft: string;
+    /** Why the last link or upload was not embedded (`null`: it was, or none was tried). */
+    failed: MediaEmptyFailure | null;
+    constructor(
+    /** The empty block; none in a suggestion's preview. */
+    block: Block | undefined, 
+    /** Which kind it is (your words for it: its button, placeholder, errors). */
+    kind: MediaKind | 'image', 
+    /** The kind in the block's view. */
+    view: EmptyView | undefined);
+    /** The kind's icon (an emoji). */
+    get icon(): string;
+    /** The file picker's `accept`: `image/*`, `video/*`, `audio/*`, else any file. */
+    get accept(): string | undefined;
+    /**
+     * No control may write: a readonly view, or a suggestion's preview (no
+     * block). Show a passive placeholder then.
+     */
+    get readonly(): boolean;
+    /** The view lists the uploads plugin and the kind takes files: 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;
+    /** 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: (picked: File) => Promise<void>;
+    /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
+    field: Attachment<HTMLInputElement>;
+}

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

@@ -0,0 +1,111 @@
+import { fileUploads } from '../uploads.svelte.js';
+import { listen } from '../../utils/listen.js';
+/** Each media kind's icon (the image's too): its menu row, its empty block, its paste offer. */
+export const MEDIA_ICONS = {
+    image: '🖼',
+    embed: '⧉',
+    bookmark: '🔖',
+    file: '📎',
+    video: '🎬',
+    audio: '🎵'
+};
+/**
+ * An empty image or media block's state (an image, an embed, a bookmark, a
+ * file, a video, an audio track: Notion's "Add …"): the panel's `open`
+ * state, the link field's `draft`, why the last link or upload was not
+ * embedded (`failed`), and the upload of a pasted or dropped file
+ * (`pending`); `embed` and `upload` set the source. What an image or media
+ * plugin's `empty` snippet receives (one per empty block shown).
+ */
+export class MediaEmptyController {
+    block;
+    kind;
+    view;
+    /** The link panel is open. */
+    open = $state(false);
+    /** The link field's text. */
+    draft = $state('');
+    /** Why the last link or upload was not embedded (`null`: it was, or none was tried). */
+    failed = $state(null);
+    constructor(
+    /** The empty block; none in a suggestion's preview. */
+    block, 
+    /** Which kind it is (your words for it: its button, placeholder, errors). */
+    kind, 
+    /** The kind in the block's view. */
+    view) {
+        this.block = block;
+        this.kind = kind;
+        this.view = view;
+    }
+    /** The kind's icon (an emoji). */
+    get icon() {
+        return MEDIA_ICONS[this.kind];
+    }
+    /** The file picker's `accept`: `image/*`, `video/*`, `audio/*`, else any file. */
+    get accept() {
+        const { kind } = this;
+        return kind === 'image' || kind === 'video' || kind === 'audio' ? `${kind}/*` : undefined;
+    }
+    /**
+     * No control may write: a readonly view, or a suggestion's preview (no
+     * block). Show a passive placeholder then.
+     */
+    get readonly() {
+        return !this.block || this.block.edytor.readonly;
+    }
+    /** The view lists the uploads plugin and the kind takes files: offer Upload. */
+    get canUpload() {
+        const { block } = this;
+        return Boolean(block && fileUploads(block.edytor) && block.definition.upload);
+    }
+    /** The upload of a pasted or dropped file into this block, if any (its `status`, `progress`, `preview`). */
+    get pending() {
+        const { block } = this;
+        return block ? fileUploads(block.edytor)?.of(block.id) : undefined;
+    }
+    /** Store `value` on the block: why it did not take it, or `null`. */
+    #store = (value, file) => this.block && this.view ? this.view.store(this.block, value, file) : 'invalid';
+    /** Embed `value` (default the `draft`): the block takes the link, or `failed` says why not. */
+    embed = (value = this.draft) => {
+        this.failed = this.#store(value);
+        if (!this.failed && this.block)
+            fileUploads(this.block.edytor)?.clear(this.block.id);
+    };
+    /**
+     * 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 = async (picked) => {
+        const { block } = this;
+        const upload = this.canUpload && fileUploads(block?.edytor)?.upload;
+        if (!upload || !block || block.edytor.readonly)
+            return;
+        const { edytor, id, type } = block;
+        let src;
+        try {
+            src = await upload(picked, { progress: () => { } });
+        }
+        catch {
+            this.failed = 'upload';
+            return;
+        }
+        const live = edytor.idToBlock.get(id);
+        if (!live?.isInTree || live.type !== type || edytor.readonly)
+            return;
+        if (edytor.facade.blockDataOf(id)?.src !== undefined)
+            return;
+        this.failed = this.#store(src, picked);
+    };
+    /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
+    field = (node) => {
+        const keydown = (event) => {
+            if (event.key !== 'Enter' || event.isComposing)
+                return;
+            event.preventDefault();
+            this.embed();
+        };
+        return listen(node, 'keydown', keydown);
+    };
+}

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

@@ -1,14 +1,99 @@
+import type { Snippet } from 'svelte';
 import type { Edytor } from '../../edytor.svelte.js';
-import type { PluginOperations } from '../../plugins.js';
-import { type Uploader } from '../uploads.svelte.js';
-import { viewLabels, type PartialLabels } from '../../labels.js';
-/** The media kinds a view shows the labels of. */
+import type { Block } from '../../block/block.svelte.js';
+import type { Attachment } from 'svelte/attachments';
+import type { BlockDefinition, Plugin, PluginDefinitions, PluginOperations } from '../../plugins.js';
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+import { MEDIA_ICONS, type EmptyView } from './empty.svelte.js';
+/** The media kinds. */
 export type MediaKind = 'embed' | 'bookmark' | 'file' | 'video' | 'audio';
+export { MEDIA_ICONS };
 /**
- * Each view's media labels, by kind: the first plugin of a kind listed in a
- * view claims them, as its kind record (first wins).
+ * A media kind in a view: the first plugin of the kind listed in it claims
+ * it, as its kind record (first wins): how a block of it stores a source,
+ * the embed's allowlist, and the app's markup for the kind's own control
+ * (the bookmark's `card`, the file's `row`, the embed's `fallback`).
  */
-export declare const mediaLabels: Record<MediaKind, ReturnType<typeof viewLabels<'media'>>>;
+export type MediaView = EmptyView & {
+    providers?: readonly EmbedProvider[];
+    card?: Snippet<[BookmarkCardPayload]>;
+    row?: Snippet<[FileRowPayload]>;
+    fallback?: Snippet<[EmbedFallbackPayload]>;
+};
+/** What a bookmark's `card` snippet receives: the page it links to, as `unfurl` described it. */
+export type BookmarkCardPayload = {
+    /** The bookmark; `undefined` in a suggestion's preview. */
+    block: Block | undefined;
+    /** The page's URL (`http(s)`). */
+    url: string;
+    /** Its title, description, cover image and icon, when `unfurl` answered them. */
+    title: string | undefined;
+    description: string | undefined;
+    image: string | undefined;
+    icon: string | undefined;
+    /**
+     * The card's link (`<a href={card.url} {@attach card.link}>`): a new tab
+     * without the opener, never dragged out of the editor.
+     */
+    link: Attachment<HTMLElement>;
+};
+/** What a file block's `row` snippet receives: the file it links to. */
+export type FileRowPayload = {
+    /** The file block; `undefined` in a suggestion's preview. */
+    block: Block | undefined;
+    /** The file's URL. */
+    src: string;
+    /** Its name: the uploaded file's, else its URL's last segment. */
+    name: string;
+    /** Its size in bytes, when it was uploaded. */
+    size: number | undefined;
+    /** That size in the view's words (`media.fileSize`), `''` without one. */
+    sizeLabel: string;
+    /**
+     * The row's link (`<a href={row.src} {@attach row.link}>`): it downloads
+     * the file under its name, in a new tab without the opener, never dragged
+     * out of the editor.
+     */
+    link: Attachment<HTMLElement>;
+};
+/** What an embed's `fallback` snippet receives: a link no allowed provider plays. */
+export type EmbedFallbackPayload = {
+    /** The embed; `undefined` in a suggestion's preview. */
+    block: Block | undefined;
+    /** The link (`http(s)`), shown as a link, never in a frame. */
+    url: string;
+    /** Its link (`<a href={fallback.url} {@attach fallback.link}>`): a new tab without the opener. */
+    link: Attachment<HTMLElement>;
+};
+/** A media block's link opens a new tab without the opener (and tells the target nothing). */
+export declare const LINK_REL = "noopener noreferrer nofollow";
+/**
+ * A media block's link's attachment: a new tab without the opener
+ * (`target`, `rel`), and `own` (`draggable="false"`: no drag of its own; a
+ * file's `download` name). The default markup writes the same, so a server
+ * render's link is safe too; its `href` is the markup's.
+ */
+export declare const mediaLink: (own?: {
+    draggable?: "false";
+    download?: string;
+}) => Attachment<HTMLElement>;
+/** The app's markup for a media kind's own control in `view`, if any. */
+export declare const mediaControl: <K extends "card" | "row" | "fallback">(kind: MediaKind, control: K) => (view: Edytor | undefined) => MediaView[K] | undefined;
+/** The view's media kind, when a plugin of it is listed there. */
+export declare const mediaView: (edytor: Edytor | undefined, kind: MediaKind) => MediaView | undefined;
+/**
+ * A media kind's plugin (Notion's): a void `figure` with an editable
+ * caption, its preset (its icon, `keywords`, its name in the view's
+ * `media` labels), and its view
+ * (`MediaView`), which the first plugin of the kind listed claims. `own`
+ * answers the kind's own parts: how it stores a source, its hooks and its
+ * record (its snippet, its export and import); `claims` says whether this
+ * plugin claimed the kind in `edytor`.
+ */
+export declare const mediaPlugin: (kind: MediaKind, keywords: string[], own: (edytor: Edytor, claims: boolean) => Pick<MediaView, "store" | "providers" | "card" | "row" | "fallback"> & {
+    hooks?: PluginOperations & PluginDefinitions;
+    record: Partial<BlockDefinition>;
+}) => Plugin;
 /**
  * A web page's URL a media block may store or render: the link sanitizer's
  * reading of it (`sanitizeLinkHref`: ASCII control characters and spaces stripped,
@@ -23,20 +108,6 @@ export declare const safeWebUrl: (value: unknown) => string | null;
  * an inline file would be stored in the document and sent in every update.
  */
 export declare const safeMediaSrc: (value: unknown) => string | null;
-/** The file, video and audio plugins' options. */
-export type MediaPluginOptions = {
-    /**
-     * Upload a file and answer its URL: the empty block's Upload button, and
-     * the pasted and dropped files the kind takes (`media.files`), each shown
-     * uploading with the progress it reports. Without it only links are
-     * embedded.
-     */
-    upload?: Uploader;
-    /** 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[]>>;
-};
 /** One allowlisted embed provider: which links it plays, and its player. */
 export type EmbedProvider = {
     /** The provider's name: the frame's `title`. */
@@ -86,12 +157,4 @@ export declare const fileNameOf: (src: string) => string;
 export declare const claimed: (element: HTMLElement, tag: string) => HTMLElement | undefined;
 /** An imported `video`'s or `audio`'s source: its `src`, else its first `source`'s. */
 export declare const mediaSourceOf: (element: HTMLElement | undefined) => string | null;
-/** HTML-escape `value` for an attribute or text of an export. */
-export declare const escapeHtml: (value: string) => string;
-/**
- * Register `type`'s uploads on the view's (`media.files`): with an
- * `upload`, the files it takes (the file kind: any no other kind takes)
- * become its blocks. Answers the paste hook to list, or `undefined`
- * without an `upload` or a view.
- */
-export declare const mediaUploads: (edytor: Edytor | undefined, type: "video" | "audio" | "file", upload: Uploader | undefined) => PluginOperations["onPaste"];
+export { escapeHtml };