edytor 0.1.0-next.43 → 0.1.0-next.44

package/README.md

@@ -17,7 +17,7 @@
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **Work in progress.** Edytor is a pre-release (`0.1.0-next.43`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Work in progress.** Edytor is a pre-release (`0.1.0-next.44`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 

package/dist/clipboard/insertClipboardFragment.d.ts

@@ -4,6 +4,14 @@ import { type SelectionInsertionTarget, type SelectionReplacementState } from '.
 import { type JSONText } from '../utils/json.js';
 import type { EdytorClipboardFragment } from './types.js';
 export declare const flowOfText: (text: string, marks?: JSONText["marks"]) => Flow;
+/**
+ * A pasted `text/plain` as markdown (`paste.markdown`): `null` unless a line
+ * holds block markdown (`hasBlockMarkdown`), else the blocks it reads as
+ * (`textToBlocks`). A kind the view does not register is a paragraph of its
+ * text, its children after it (a divider is dropped); without a paragraph
+ * kind, nothing converts.
+ */
+export declare const flowOfMarkdown: (edytor: Pick<Edytor, "blocks">, text: string) => Flow | null;
 export declare const flowOfFragment: (fragment: EdytorClipboardFragment) => Flow;
 /**
  * Place `flow` (`flow.*`) at `at`, over the selected blocks (unless

package/dist/clipboard/insertClipboardFragment.js

@@ -4,6 +4,7 @@ import { cloneJsonSafe, jsonBlockToSpec, jsonContentToItems } from '../utils/jso
 import { id } from '../utils.js';
 import { caretAt } from '../session/attempt.js';
 import { isValidEdytorClipboardFragment } from './fragmentData.js';
+import { hasBlockMarkdown, textToBlocks } from './textBlocks.js';
 // Admission (`flow.shape`): every id is minted fresh here, once.
 const run = (content) => ({
     id: id('b'),
@@ -12,6 +13,28 @@ const run = (content) => ({
 export const flowOfText = (text, marks) => ({
     lines: text.split(/\r\n|\r|\n/).map((line) => run(line ? [{ text: line, marks }] : []))
 });
+/**
+ * A pasted `text/plain` as markdown (`paste.markdown`): `null` unless a line
+ * holds block markdown (`hasBlockMarkdown`), else the blocks it reads as
+ * (`textToBlocks`). A kind the view does not register is a paragraph of its
+ * text, its children after it (a divider is dropped); without a paragraph
+ * kind, nothing converts.
+ */
+export const flowOfMarkdown = (edytor, text) => {
+    if (!edytor.blocks.has('paragraph') || !hasBlockMarkdown(text))
+        return null;
+    const known = (block) => {
+        const children = (block.children ?? []).flatMap(known);
+        if (edytor.blocks.has(block.type))
+            return [{ ...block, ...(block.children ? { children } : {}) }];
+        const own = block.type === 'divider' || (!block.content?.length && block.children?.length)
+            ? []
+            : [{ type: 'paragraph', content: block.content ?? [] }];
+        return [...own, ...children];
+    };
+    const blocks = textToBlocks(text).flatMap(known);
+    return blocks.length ? { lines: blocks.map((block) => jsonBlockToSpec(block, true)) } : null;
+};
 export const flowOfFragment = (fragment) => fragment.kind === 'content'
     ? { lines: [run(fragment.content)] }
     : {

package/dist/clipboard/textBlocks.d.ts

@@ -19,5 +19,7 @@ export type TextToBlocksOptions = {
     /** The kind of a paragraph (default `paragraph`). */
     type?: string;
 };
+/** Whether `text` holds block markdown (one line of it is enough), as a paste reads it. */
+export declare const hasBlockMarkdown: (text: string) => boolean;
 /** `text` as blocks (see the module comment). */
 export declare const textToBlocks: (text: string, { markdown, type }?: TextToBlocksOptions) => JSONBlock[];

package/dist/clipboard/textBlocks.js

@@ -21,6 +21,10 @@ const runs = (text) => {
         out.push({ text: text.slice(at) });
     return out;
 };
+/** A line that opens block markdown: a heading, a list or to-do item, a quote, a fence, a divider. */
+const BLOCK_LINE = /^\s*(?:#{1,6}\s|[-*+]\s|\d+[.)]\s|>|```|(?:-{3,}|\*{3,}|_{3,})\s*$)/;
+/** Whether `text` holds block markdown (one line of it is enough), as a paste reads it. */
+export const hasBlockMarkdown = (text) => text.split(/\r?\n/).some((line) => BLOCK_LINE.test(line));
 /** One line's kind, data and text, or `null` for a paragraph line. */
 const lineKind = (line) => {
     let m = /^(#{1,6})\s+(.*)$/.exec(line);

package/dist/events/onPaste.js

@@ -1,6 +1,7 @@
 import { vetoable } from '../utils.js';
 import { readEdytorClipboardFragment } from '../clipboard/clipboard.js';
-import { flowOfFragment, pasteFlow } from '../clipboard/insertClipboardFragment.js';
+import { flowOfFragment, flowOfMarkdown, pasteFlow } from '../clipboard/insertClipboardFragment.js';
+import { inCodeLines } from '../session/inputRules.js';
 import { flowOfHtml } from '../clipboard/htmlFlow.js';
 import { getDomSelectionSnapshot } from '../selection/domSelection.js';
 import { getYIndex } from '../selection/selection.utils.js';
@@ -100,6 +101,16 @@ export async function onPaste(e) {
             e.preventDefault();
             return this.dispatcher.run('insertFromPaste', () => pasteFlow(this, flow));
         }
+        // Markdown text (`paste.markdown`): its blocks, except in a code block's lines.
+        const start = this.selection.projection.start?.block;
+        const at = start ? this.idToBlock.get(start) : undefined;
+        const markdown = at && inCodeLines(this, at)
+            ? null
+            : flowOfMarkdown(this, e.clipboardData?.getData('text/plain') ?? '');
+        if (markdown) {
+            e.preventDefault();
+            return this.dispatcher.run('insertFromPaste', () => pasteFlow(this, markdown));
+        }
     }
     if (!e.clipboardData?.getData('text/plain') &&
         !firstUriListEntry(e.clipboardData?.getData('text/uri-list'))) {

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export type { TextOperations } from './text/text.utils.js';
 export type { BlockBeside, BlockOperations } from './block/block.utils.js';
 export type { TextInsertionPayload, TriggerRange } from './plugins/triggers/TriggerController.svelte.js';
 export type { RichTextLink, RichTextMark } from './plugins/richtext/richTextOperations.js';
+export type { UploadReport, Uploader } from './plugins/uploads.svelte.js';
 export type { AwarenessLike, PresenceWriter } from './collaboration/awarenessSelection.js';
 export type { DataPatch } from './crdt/data.js';
 export type { AnchorAffinity, BlockRole, DocAnchor, TextRange } from './crdt/doc/types.js';

package/dist/labels.d.ts

@@ -211,6 +211,10 @@ export type MediaLabels = {
     video: MediaKindLabels;
     audio: MediaKindLabels;
     upload: string;
+    /** A pasted or dropped file's block while it uploads. */
+    uploading: string;
+    /** A pasted or dropped file whose upload failed. */
+    uploadFailed: string;
     /** A file's size, in bytes. */
     fileSize: (bytes: number) => string;
     /** The menu a pasted link opens. */

package/dist/labels.js

@@ -239,6 +239,8 @@ export const englishLabels = frozen({
             invalid: "That doesn't look like an audio link or upload."
         },
         upload: 'Upload',
+        uploading: 'Uploading…',
+        uploadFailed: 'The upload failed: try again or paste a link.',
         fileSize: bytes,
         pasteAs: 'Paste as',
         pasteLink: 'Link'

package/dist/plugins/image/ImageEmpty.svelte

@@ -8,7 +8,7 @@
 		oversizedInlineImage,
 		safeImageSrc
 	} from './image.js';
-	import type { ImageUploads } from './uploads.svelte.js';
+	import type { FileUploads, Uploader } from '../uploads.svelte.js';
 
 	/**
 	 * Notion's empty image: "Add an image", then a link field (and Upload with
@@ -27,8 +27,8 @@
 		landed = false
 	}: {
 		block: Block | undefined;
-		upload?: (file: File) => Promise<string>;
-		uploads?: ImageUploads;
+		upload?: Uploader;
+		uploads?: FileUploads;
 		error?: 'upload' | null;
 		landed?: boolean;
 	} = $props();
@@ -94,7 +94,7 @@
 							const file = event.currentTarget.files?.[0];
 							if (!file || block?.edytor.readonly !== false) return;
 							try {
-								embed(await upload(file));
+								embed(await upload(file, { progress: () => {} }));
 							} catch {
 								failed = 'upload';
 							}

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

@@ -1,9 +1,9 @@
 import type { Block } from '../../block/block.svelte.js';
-import type { ImageUploads } from './uploads.svelte.js';
+import type { FileUploads, Uploader } from '../uploads.svelte.js';
 type $$ComponentProps = {
     block: Block | undefined;
-    upload?: (file: File) => Promise<string>;
-    uploads?: ImageUploads;
+    upload?: Uploader;
+    uploads?: FileUploads;
     error?: 'upload' | null;
     landed?: boolean;
 };

package/dist/plugins/image/ImagePlugin.svelte

@@ -19,7 +19,7 @@
 		type ImageAlign
 	} from './image.js';
 	import { ImageControls } from './controls.svelte.js';
-	import { ImageUploads } from './uploads.svelte.js';
+	import { fileUploads, type FileUploads, type Uploader } from '../uploads.svelte.js';
 	import { onPress } from '../../events/onFocus.js';
 	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
 
@@ -37,9 +37,10 @@
 		 * Upload a file and answer its URL. Adds an Upload button to the empty
 		 * block, and claims pasted and dropped image files: each is placed as an
 		 * image block at once (one undo step) and filled with the URL this
-		 * answers. Without it only links are embedded.
+		 * answers (the block shows the progress it reports). Without it only
+		 * links are embedded.
 		 */
-		upload?: (file: File) => Promise<string>;
+		upload?: Uploader;
 		/** The words the block, its empty panel and its chrome show, over the English ones. */
 		labels?: PartialLabels<'image'>;
 		/**
@@ -57,9 +58,9 @@
 
 	/** One view's image state: its plugin's `upload`, the chrome, the uploads in flight. */
 	type View = {
-		upload?: (file: File) => Promise<string>;
+		upload?: Uploader;
 		controls: ImageControls;
-		uploads?: ImageUploads;
+		uploads?: FileUploads;
 	};
 	/** By view; the first image plugin of a view owns it, as its kind's definition (first wins). */
 	const views = new WeakMap<Edytor, View>();
@@ -68,17 +69,6 @@
 	/** Recognize any image plugin instance (the component's default yields to yours). */
 	export const isImagePlugin = (plugin: Plugin) => imagePlugins.has(plugin);
 
-	/**
-	 * Whether a pasted `html` shows nothing but images (a copied image's
-	 * `<img>`), so the clipboard's files are the content. HTML with text (an
-	 * office app also puts a picture of the copied text on the clipboard) is
-	 * imported instead.
-	 */
-	const onlyImages = (html: string | undefined) =>
-		!html ||
-		typeof DOMParser === 'undefined' ||
-		!new DOMParser().parseFromString(html, 'text/html').body.textContent?.trim();
-
 	/**
 	 * Notion's image block: an "Add an image" panel until it has a source (a
 	 * pasted link, or an upload when `upload` is given), then the image with
@@ -93,20 +83,30 @@
 			const own: View = {
 				upload,
 				controls: new ImageControls(edytor, labels),
-				uploads: upload ? new ImageUploads(edytor, upload) : undefined
+				uploads: upload ? fileUploads(edytor) : undefined
 			};
 			// The records read with no view (`plugin(undefined)`) keep no state.
-			if (edytor && !views.has(edytor)) views.set(edytor, own);
+			if (edytor && !views.has(edytor)) {
+				views.set(edytor, own);
+				if (upload)
+					own.uploads?.register({
+						type: 'image',
+						accepts: isImageFile,
+						upload,
+						data: (_file, answer) => {
+							const src = storableImageSrc(answer);
+							return src ? { src } : null;
+						},
+						filled: (data) => safeImageSrc(data.src) !== null,
+						preview: true
+					});
+			}
 			const owns = () => views.get(edytor) === own;
 			return {
-				// A pasted or dropped image file (a drop replays the paste hooks):
-				// placed and uploaded, unless the HTML beside it shows text.
-				onPaste: ({ e, prevent }) => {
-					const uploads = own.uploads;
-					if (!uploads || !owns() || edytor.readonly) return;
-					const files = Array.from(e.clipboardData?.files ?? []).filter(isImageFile);
-					if (files.length && onlyImages(e.clipboardData?.getData('text/html')))
-						prevent(() => uploads.insert(files));
+				// Pasted or dropped files (a drop replays the paste hooks): the
+				// view's uploads place a block per file of every kind that uploads.
+				onPaste: (payload) => {
+					if (owns()) own.uploads?.paste(payload);
 				},
 				// The chrome: in the overlay, for the image under the pointer.
 				onEdytorAttached: ({ node }) => {
@@ -206,9 +206,10 @@
 	{:else if upload?.status === 'uploading'}
 		<div use:block.void data-edytor-image data-edytor-image-uploading data-align="center">
 			{#if upload.preview}<img src={upload.preview} alt="" draggable="false" />{/if}
-			<span data-edytor-image-progress role="status"
-				>{imageLabels.of(block.handle?.edytor).uploading}</span
-			>
+			<span data-edytor-image-progress role="status">
+				<progress value={upload.progress ?? undefined} max="1"></progress>
+				{imageLabels.of(block.handle?.edytor).uploading}
+			</span>
 		</div>
 	{:else}
 		<div use:block.void data-edytor-image-empty>

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

@@ -1,5 +1,6 @@
 import type { Plugin } from '../../plugins.js';
 import { MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, oversizedInlineImage, safeImageSrc, storableImageSrc, type ImageAlign } from './image.js';
+import { type Uploader } from '../uploads.svelte.js';
 import { type PartialLabels } from '../../labels.js';
 export { MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, oversizedInlineImage, safeImageSrc, storableImageSrc, type ImageAlign };
 export type ImagePluginOptions = {
@@ -7,9 +8,10 @@ export type ImagePluginOptions = {
      * Upload a file and answer its URL. Adds an Upload button to the empty
      * block, and claims pasted and dropped image files: each is placed as an
      * image block at once (one undo step) and filled with the URL this
-     * answers. Without it only links are embedded.
+     * answers (the block shows the progress it reports). Without it only
+     * links are embedded.
      */
-    upload?: (file: File) => Promise<string>;
+    upload?: Uploader;
     /** The words the block, its empty panel and its chrome show, over the English ones. */
     labels?: PartialLabels<'image'>;
     /**

package/dist/plugins/media/AudioPlugin.svelte

@@ -11,6 +11,7 @@
 		mediaLabels,
 		mediaSourceOf,
 		safeMediaSrc,
+		mediaUploads,
 		type MediaPluginOptions
 	} from './media.js';
 
@@ -32,10 +33,13 @@
 		(options: MediaPluginOptions = {}): Plugin =>
 		(edytor) => {
 			// First wins, as for the kind: a second listing never replaces it.
-			if (!uploadOf.has(edytor)) uploadOf.set(edytor, options.upload);
+			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);
 			return {
+				...(onPaste ? { onPaste } : {}),
 				blocks: {
 					audio: {
 						...mediaKinds.audio,

package/dist/plugins/media/FilePlugin.svelte

@@ -10,6 +10,7 @@
 		fileNameOf,
 		mediaLabels,
 		safeMediaSrc,
+		mediaUploads,
 		type MediaPluginOptions
 	} from './media.js';
 
@@ -32,10 +33,13 @@
 		(options: MediaPluginOptions = {}): Plugin =>
 		(edytor) => {
 			// First wins, as for the kind: a second listing never replaces it.
-			if (!uploadOf.has(edytor)) uploadOf.set(edytor, options.upload);
+			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);
 			return {
+				...(onPaste ? { onPaste } : {}),
 				blocks: {
 					file: {
 						...mediaKinds.file,

package/dist/plugins/media/MediaEmpty.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, untrack } from 'svelte';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import { mediaLabels, type MediaKind } from './media.js';
+	import { fileUploads, type Uploader } from '../uploads.svelte.js';
 
 	/**
 	 * A media block's empty state (the image's pattern, Notion): an "Add …"
@@ -11,7 +12,10 @@
 	 * upload fills `src`, and only a block still empty when it lands). A
 	 * readonly view, or a suggestion's preview (no `block`), shows a passive
 	 * placeholder: no control may run `upload` (or a bookmark's `unfurl`) for
-	 * a write the view would refuse.
+	 * a write the view would refuse. A pasted or dropped file (`media.files`)
+	 * shows its upload and progress here; a failed one opens the panel with
+	 * its error; data answered while the block was not shown fills it as soon
+	 * as it shows.
 	 */
 	let {
 		block,
@@ -28,7 +32,7 @@
 		icon: string;
 		/** The file picker's `accept`. */
 		accept?: string;
-		upload?: (file: File) => Promise<string>;
+		upload?: Uploader;
 		link: (value: string) => boolean;
 		file?: (file: File, src: string) => boolean;
 	} = $props();
@@ -39,16 +43,41 @@
 	/** The button and placeholder text ("Embed a link"); the file's names its upload. */
 	const label = $derived(upload && 'addOrUpload' in words ? words.addOrUpload : words.add);
 	const { placeholder, submit, invalid } = $derived(words);
+	/** The upload of a pasted or dropped file into this block, if any. */
+	const uploads = $derived(block ? fileUploads(block.edytor) : undefined);
+	const pending = $derived(block ? uploads?.of(block.id) : undefined);
+	// After the flush that shows the block: never inside the transaction that showed it.
+	$effect(() => {
+		if (pending?.status === 'landed' && block && !block.edytor.readonly) {
+			const id = block.id;
+			untrack(() => uploads?.fill(id));
+		}
+	});
 	let draft = $state('');
 	let open = $state(false);
-	let failed = $state(false);
+	let failed = $state<'invalid' | 'upload' | false>(false);
+	// The panel opens on a failed upload, with its error; the user closes it.
+	$effect(() => {
+		if (pending?.status === 'failed')
+			untrack(() => {
+				open = true;
+				failed = 'upload';
+			});
+	});
 
 	const embed = (value: string) => {
-		failed = !link(value);
+		failed = link(value) ? false : 'invalid';
+		if (!failed && block) uploads?.clear(block.id);
 	};
 </script>
 
-{#if !block || block.edytor.readonly}
+{#if pending?.status === 'uploading'}
+	<div data-edytor-media-uploading role="status">
+		<span aria-hidden="true">{icon}</span>
+		<progress value={pending.progress ?? undefined} max="1"></progress>
+		{labels.uploading}
+	</div>
+{:else if !block || block.edytor.readonly}
 	<div data-edytor-media-placeholder><span aria-hidden="true">{icon}</span> {label}</div>
 {:else}
 	<button
@@ -84,9 +113,9 @@
 							const { edytor, id, type } = block;
 							let src: string;
 							try {
-								src = await upload(picked);
+								src = await upload(picked, { progress: () => {} });
 							} catch {
-								failed = true;
+								failed = 'upload';
 								return;
 							}
 							// Write only to the block as it was picked from: still in the
@@ -95,13 +124,15 @@
 							const live = edytor.idToBlock.get(id);
 							if (!live?.isInTree || live.type !== type || edytor.readonly) return;
 							if (edytor.facade.blockDataOf(id)?.src !== undefined) return;
-							failed = !(file ? file(picked, src) : link(src));
+							failed = (file ? file(picked, src) : link(src)) ? false : 'invalid';
 						}}
 					/>
 				</label>
 			{/if}
-			{#if failed}
-				<small data-edytor-media-error>{invalid}</small>
+			{#if failed === 'upload'}
+				<small data-edytor-media-error="upload">{labels.uploadFailed}</small>
+			{:else if failed}
+				<small data-edytor-media-error="invalid">{invalid}</small>
 			{/if}
 		</div>
 	{/if}

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

@@ -1,5 +1,6 @@
 import type { Block } from '../../block/block.svelte.js';
 import { type MediaKind } from './media.js';
+import { type Uploader } from '../uploads.svelte.js';
 type $$ComponentProps = {
     block: Block | undefined;
     /** Whose words it shows, in the labels of the view rendering it (a suggestion's preview included). */
@@ -7,7 +8,7 @@ type $$ComponentProps = {
     icon: string;
     /** The file picker's `accept`. */
     accept?: string;
-    upload?: (file: File) => Promise<string>;
+    upload?: Uploader;
     link: (value: string) => boolean;
     file?: (file: File, src: string) => boolean;
 };

package/dist/plugins/media/VideoPlugin.svelte

@@ -11,6 +11,7 @@
 		mediaLabels,
 		mediaSourceOf,
 		safeMediaSrc,
+		mediaUploads,
 		type MediaPluginOptions
 	} from './media.js';
 
@@ -33,10 +34,13 @@
 		(options: MediaPluginOptions = {}): Plugin =>
 		(edytor) => {
 			// First wins, as for the kind: a second listing never replaces it.
-			if (!uploadOf.has(edytor)) uploadOf.set(edytor, options.upload);
+			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,

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

@@ -1,3 +1,6 @@
+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. */
 export type MediaKind = 'embed' | 'bookmark' | 'file' | 'video' | 'audio';
@@ -22,8 +25,13 @@ export declare const safeWebUrl: (value: unknown) => string | null;
 export declare const safeMediaSrc: (value: unknown) => string | null;
 /** The file, video and audio plugins' options. */
 export type MediaPluginOptions = {
-    /** Upload a picked file and answer its URL; without it only links are embedded. */
-    upload?: (file: File) => Promise<string>;
+    /**
+     * 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. */
@@ -80,3 +88,10 @@ export declare const claimed: (element: HTMLElement, tag: string) => HTMLElement
 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"];

package/dist/plugins/media/media.js

@@ -1,4 +1,5 @@
 import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
+import { fileUploads } from '../uploads.svelte.js';
 import { viewLabels } from '../../labels.js';
 /**
  * Each view's media labels, by kind: the first plugin of a kind listed in a
@@ -223,3 +224,36 @@ export const claimed = (element, tag) => {
 export const mediaSourceOf = (element) => safeMediaSrc(element?.getAttribute('src') ?? element?.querySelector('source[src]')?.getAttribute('src'));
 /** HTML-escape `value` for an attribute or text of an export. */
 export const escapeHtml = (value) => value.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+/** The files each media kind takes: a video, an audio track, any other file. */
+const ACCEPTS = {
+    video: (file) => /^video\//i.test(file.type),
+    audio: (file) => /^audio\//i.test(file.type),
+    file: () => true
+};
+/**
+ * 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 const mediaUploads = (edytor, type, upload) => {
+    const uploads = upload ? fileUploads(edytor) : undefined;
+    if (!uploads || !upload)
+        return undefined;
+    uploads.register({
+        type,
+        accepts: ACCEPTS[type],
+        fallback: type === 'file',
+        upload,
+        data: (file, answer) => {
+            const src = safeMediaSrc(answer);
+            if (!src)
+                return null;
+            return type === 'file'
+                ? { src, name: file.name || fileNameOf(src), size: file.size }
+                : { src };
+        },
+        filled: (data) => safeMediaSrc(data.src) !== null
+    });
+    return uploads.paste;
+};

package/dist/plugins/uploads.svelte.d.ts

@@ -0,0 +1,92 @@
+import type { Edytor } from '../edytor.svelte.js';
+import type { PluginOperations } from '../plugins.js';
+/** What an `upload` may report while it runs. */
+export type UploadReport = {
+    /** The share sent so far, `0` to `1`: the block shows it as a bar. */
+    progress(fraction: number): void;
+};
+/**
+ * Upload a file and answer its URL. `report.progress` (optional to call)
+ * draws the block's bar; without it the bar is indeterminate.
+ */
+export type Uploader = (file: File, report: UploadReport) => Promise<string>;
+/**
+ * A block's upload in this view: running (its preview and progress),
+ * failed, or answered while the block was not shown (`landed`: an undone
+ * paste), its data held until the block shows again.
+ */
+export type FileUpload = {
+    readonly status: 'uploading';
+    /** The file, shown while it uploads (a `blob:` URL; `null` where there is none). */
+    readonly preview: string | null;
+    /** The share sent, `0` to `1`; `null` until `upload` reports one. */
+    readonly progress: number | null;
+} | {
+    readonly status: 'failed';
+} | {
+    readonly status: 'landed';
+    readonly data: Record<string, unknown>;
+};
+/** A kind that takes files: which, through what upload, and the data an upload writes. */
+export type UploadKind = {
+    type: string;
+    /** Whether it takes `file`. */
+    accepts: (file: File) => boolean;
+    /** It takes any file no other kind takes (the file block): asked last. */
+    fallback?: boolean;
+    upload: Uploader;
+    /** The data the answered URL writes (`null`: no source this kind stores). */
+    data: (file: File, answer: string) => Record<string, unknown> | null;
+    /** Whether the block has a source already (a peer's, a link's): its upload then writes nothing. */
+    filled: (data: Record<string, unknown>) => boolean;
+    /** Show the file while it uploads (an image's `blob:` preview). */
+    preview?: boolean;
+};
+/**
+ * The view's uploads of pasted and dropped files (`media.files`), one per
+ * view: session state, never in the document. The kinds given an `upload`
+ * register here; a paste or a drop (a drop replays the paste hooks) of
+ * files the kinds take places one empty block per file, each of the kind
+ * that takes it (`fallback` last), in the clipboard's order, as one paste
+ * (one command, one undo step), and each block shows its upload (`of`).
+ * The data an upload answers fills the block outside the history
+ * (`dispatcher.outside`), so the paste stays the one step that undoes it.
+ * A failed upload, or an answer that is no source, leaves the block empty
+ * with its error until a source is embedded (`clear`). Data answered while
+ * the block is not shown (its paste undone, the block deleted) is held
+ * (`landed`) and written when the block shows again with no source
+ * (`fill`, asked by the empty block's render), so a redo brings it back
+ * whole.
+ */
+export declare class FileUploads {
+    #private;
+    private edytor;
+    constructor(edytor: Edytor);
+    /** Take files for `kind` (the first registration of a type wins, as its definition). */
+    register: (kind: UploadKind) => void;
+    /** The kind that takes `file`, if any. */
+    kindOf: (file: File) => UploadKind | undefined;
+    /** The upload of block `id` in this view (reactive), if any. */
+    of: (id: string) => FileUpload | undefined;
+    /**
+     * The paste hook of every kind that registered (the first one asked
+     * claims for them all): the files a kind takes, unless the HTML beside
+     * them shows text (an office app puts a picture of copied text on the
+     * clipboard).
+     */
+    paste: NonNullable<PluginOperations['onPaste']>;
+    /** Place a block per file at the selection (one paste), then upload each. */
+    insert: (files: readonly File[]) => void;
+    /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
+    clear: (id: string) => void;
+    /**
+     * The block shows again with no source: write the data its upload
+     * answered while it was not shown. Asked by the empty block's render,
+     * never inside a transaction.
+     */
+    fill: (id: string) => boolean | undefined;
+    /** Release every preview. */
+    destroy: () => void;
+}
+/** The view's file uploads (made at the first ask; `undefined` with no view). */
+export declare const fileUploads: (edytor: Edytor | undefined) => FileUploads | undefined;

package/dist/plugins/uploads.svelte.js

@@ -0,0 +1,160 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { pasteFlow } from '../clipboard/insertClipboardFragment.js';
+import { jsonBlockToSpec } from '../utils/json.js';
+import { id as mint } from '../utils.js';
+/**
+ * The view's uploads of pasted and dropped files (`media.files`), one per
+ * view: session state, never in the document. The kinds given an `upload`
+ * register here; a paste or a drop (a drop replays the paste hooks) of
+ * files the kinds take places one empty block per file, each of the kind
+ * that takes it (`fallback` last), in the clipboard's order, as one paste
+ * (one command, one undo step), and each block shows its upload (`of`).
+ * The data an upload answers fills the block outside the history
+ * (`dispatcher.outside`), so the paste stays the one step that undoes it.
+ * A failed upload, or an answer that is no source, leaves the block empty
+ * with its error until a source is embedded (`clear`). Data answered while
+ * the block is not shown (its paste undone, the block deleted) is held
+ * (`landed`) and written when the block shows again with no source
+ * (`fill`, asked by the empty block's render), so a redo brings it back
+ * whole.
+ */
+export class FileUploads {
+    edytor;
+    #kinds = [];
+    #uploads = new SvelteMap();
+    constructor(edytor) {
+        this.edytor = edytor;
+    }
+    /** Take files for `kind` (the first registration of a type wins, as its definition). */
+    register = (kind) => {
+        if (!this.#kinds.some(({ type }) => type === kind.type))
+            this.#kinds.push(kind);
+    };
+    /** The kind that takes `file`, if any. */
+    kindOf = (file) => this.#kinds.find((kind) => !kind.fallback && kind.accepts(file)) ??
+        this.#kinds.find((kind) => kind.fallback && kind.accepts(file));
+    /** The upload of block `id` in this view (reactive), if any. */
+    of = (id) => this.#uploads.get(id);
+    /**
+     * The paste hook of every kind that registered (the first one asked
+     * claims for them all): the files a kind takes, unless the HTML beside
+     * them shows text (an office app puts a picture of copied text on the
+     * clipboard).
+     */
+    paste = ({ e, prevent }) => {
+        if (this.edytor.readonly || !this.#kinds.length)
+            return;
+        const files = Array.from(e.clipboardData?.files ?? []).filter((file) => this.kindOf(file));
+        if (files.length && !showsText(e.clipboardData?.getData('text/html')))
+            prevent(() => this.insert(files));
+    };
+    /** Place a block per file at the selection (one paste), then upload each. */
+    insert = (files) => {
+        const { edytor } = this;
+        const placed = files.flatMap((file) => {
+            const kind = this.kindOf(file);
+            return kind ? [{ file, kind, id: mint('b') }] : [];
+        });
+        if (!placed.length)
+            return;
+        const lines = placed.map(({ kind, id }) => jsonBlockToSpec({ id, type: kind.type, data: {}, content: [] }));
+        edytor.dispatcher.run('insertFromPaste', () => pasteFlow(edytor, { lines }));
+        for (const { file, kind, id } of placed) {
+            // Refused, or placed as no such block (a code line takes plain lines, `flow.lines`).
+            if (!edytor.facade.isVisibleBlock(id) || edytor.facade.blockTypeOf(id) !== kind.type)
+                continue;
+            const preview = kind.preview && typeof URL.createObjectURL === 'function'
+                ? URL.createObjectURL(file)
+                : null;
+            this.#uploads.set(id, { status: 'uploading', preview, progress: null });
+            void this.#send(id, kind, file, preview);
+        }
+    };
+    /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
+    clear = (id) => {
+        const upload = this.#uploads.get(id);
+        if (upload?.status === 'uploading')
+            return;
+        this.#uploads.delete(id);
+    };
+    /**
+     * The block shows again with no source: write the data its upload
+     * answered while it was not shown. Asked by the empty block's render,
+     * never inside a transaction.
+     */
+    fill = (id) => {
+        const upload = this.#uploads.get(id);
+        if (upload?.status !== 'landed')
+            return;
+        const block = this.edytor.idToBlock.get(id);
+        if (!block?.isInTree || this.edytor.destroyed)
+            return;
+        const kind = this.#kinds.find(({ type }) => type === block.type);
+        if (!kind || kind.filled(block.data))
+            return this.#uploads.delete(id);
+        this.#write(id, upload.data);
+    };
+    /** Release every preview. */
+    destroy = () => {
+        for (const upload of this.#uploads.values())
+            if (upload.status === 'uploading' && upload.preview)
+                URL.revokeObjectURL(upload.preview);
+        this.#uploads.clear();
+    };
+    #send = async (id, kind, file, preview) => {
+        const report = {
+            progress: (fraction) => {
+                const upload = this.#uploads.get(id);
+                if (upload?.status !== 'uploading' || !Number.isFinite(fraction))
+                    return;
+                this.#uploads.set(id, { ...upload, progress: Math.min(1, Math.max(0, fraction)) });
+            }
+        };
+        let data;
+        try {
+            data = kind.data(file, await kind.upload(file, report));
+        }
+        catch {
+            data = null;
+        }
+        const { edytor } = this;
+        if (preview)
+            URL.revokeObjectURL(preview);
+        if (edytor.destroyed)
+            return;
+        const block = edytor.idToBlock.get(id);
+        // Given a source meanwhile (a peer, the link field): nothing to fill.
+        if (block?.isInTree && kind.filled(block.data))
+            return this.#uploads.delete(id);
+        if (!data)
+            return this.#uploads.set(id, { status: 'failed' });
+        // Not shown (undone, deleted): held until it shows again (`fill`).
+        if (!block?.isInTree)
+            return this.#uploads.set(id, { status: 'landed', data });
+        this.#write(id, data);
+    };
+    /** The data's write, outside the history; refused (readonly), it is held for the next show. */
+    #write = (id, data) => {
+        const { edytor } = this;
+        const block = edytor.idToBlock.get(id);
+        edytor.dispatcher.outside(() => block.patchData({ ops: Object.entries(data).map(([key, value]) => ({ path: [key], value })) }));
+        if (edytor.dispatcher.last?.status === 'applied')
+            this.#uploads.delete(id);
+        else
+            this.#uploads.set(id, { status: 'landed', data });
+    };
+}
+/** Whether pasted `html` shows text (then it is imported, its files a picture of it). */
+const showsText = (html) => !!html &&
+    typeof DOMParser !== 'undefined' &&
+    !!new DOMParser().parseFromString(html, 'text/html').body.textContent?.trim();
+const views = new WeakMap();
+/** The view's file uploads (made at the first ask; `undefined` with no view). */
+export const fileUploads = (edytor) => {
+    if (!edytor)
+        return undefined;
+    let uploads = views.get(edytor);
+    if (!uploads)
+        views.set(edytor, (uploads = new FileUploads(edytor)));
+    return uploads;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "edytor",
 	"license": "MIT",
-	"version": "0.1.0-next.43",
+	"version": "0.1.0-next.44",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"

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

@@ -1,50 +0,0 @@
-import type { Edytor } from '../../edytor.svelte.js';
-/**
- * An image block's upload in this view: waiting for its URL, failed, or
- * answered while the block was not shown (`landed`: an undone paste), its
- * URL held until the block shows again.
- */
-export type ImageUpload = {
-    readonly status: 'uploading';
-    /** The file, shown while it uploads (a `blob:` URL; `null` where there is none). */
-    readonly preview: string | null;
-} | {
-    readonly status: 'failed';
-} | {
-    readonly status: 'landed';
-    readonly src: string;
-};
-/**
- * The uploads of pasted and dropped image files, one per view: session
- * state, never in the document. `insert` places one empty image block per
- * file at the selection, as a paste places an image line (`flow.apart`, one
- * command, one undo step), and the block shows the file uploading (`of`);
- * the URL `upload` answers fills its `src` outside the history
- * (`dispatcher.outside`), so the paste stays the one step that undoes it. A
- * peer sees the empty block until the URL lands. A failed upload, or an
- * answer that is no image source, leaves the block empty with its error
- * until a source is embedded (`clear`). A URL answered while the block is
- * not shown (its paste undone, the block deleted) is held (`landed`) and
- * written when the block shows again with no source (`fill`, asked by the
- * empty block's render), so a redo brings the image back whole.
- */
-export declare class ImageUploads {
-    #private;
-    private edytor;
-    private upload;
-    constructor(edytor: Edytor, upload: (file: File) => Promise<string>);
-    /** The upload of block `id` in this view (reactive), if any. */
-    of: (id: string) => ImageUpload | undefined;
-    /** Place an image block per file at the selection (one paste), then upload each. */
-    insert: (files: readonly File[]) => void;
-    /** Forget the block's upload (a source was embedded: its error, or a held URL, no longer applies). */
-    clear: (id: string) => void;
-    /**
-     * The block shows again with no source: write the URL its upload
-     * answered while it was not shown. Asked by the empty block's render,
-     * never inside a transaction.
-     */
-    fill: (id: string) => boolean | undefined;
-    /** Release every preview. */
-    destroy: () => void;
-}

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

@@ -1,111 +0,0 @@
-import { SvelteMap } from 'svelte/reactivity';
-import { pasteFlow } from '../../clipboard/insertClipboardFragment.js';
-import { jsonBlockToSpec } from '../../utils/json.js';
-import { id as mint } from '../../utils.js';
-import { safeImageSrc, storableImageSrc } from './image.js';
-/**
- * The uploads of pasted and dropped image files, one per view: session
- * state, never in the document. `insert` places one empty image block per
- * file at the selection, as a paste places an image line (`flow.apart`, one
- * command, one undo step), and the block shows the file uploading (`of`);
- * the URL `upload` answers fills its `src` outside the history
- * (`dispatcher.outside`), so the paste stays the one step that undoes it. A
- * peer sees the empty block until the URL lands. A failed upload, or an
- * answer that is no image source, leaves the block empty with its error
- * until a source is embedded (`clear`). A URL answered while the block is
- * not shown (its paste undone, the block deleted) is held (`landed`) and
- * written when the block shows again with no source (`fill`, asked by the
- * empty block's render), so a redo brings the image back whole.
- */
-export class ImageUploads {
-    edytor;
-    upload;
-    #uploads = new SvelteMap();
-    constructor(edytor, upload) {
-        this.edytor = edytor;
-        this.upload = upload;
-    }
-    /** The upload of block `id` in this view (reactive), if any. */
-    of = (id) => this.#uploads.get(id);
-    /** Place an image block per file at the selection (one paste), then upload each. */
-    insert = (files) => {
-        const { edytor } = this;
-        if (!files.length)
-            return;
-        const lines = files.map(() => jsonBlockToSpec({ id: mint('b'), type: 'image', data: {}, content: [] }));
-        edytor.dispatcher.run('insertFromPaste', () => pasteFlow(edytor, { lines }));
-        files.forEach((file, index) => {
-            const id = lines[index].id;
-            // Refused, or placed as no image (a code line takes plain lines, `flow.lines`).
-            if (!edytor.facade.isVisibleBlock(id) || edytor.facade.blockTypeOf(id) !== 'image')
-                return;
-            const preview = typeof URL.createObjectURL === 'function' ? URL.createObjectURL(file) : null;
-            this.#uploads.set(id, { status: 'uploading', preview });
-            void this.#send(id, file, preview);
-        });
-    };
-    /** Forget the block's upload (a source was embedded: its error, or a held URL, no longer applies). */
-    clear = (id) => {
-        const upload = this.#uploads.get(id);
-        if (upload?.status === 'uploading')
-            return;
-        this.#uploads.delete(id);
-    };
-    /**
-     * The block shows again with no source: write the URL its upload
-     * answered while it was not shown. Asked by the empty block's render,
-     * never inside a transaction.
-     */
-    fill = (id) => {
-        const upload = this.#uploads.get(id);
-        if (upload?.status !== 'landed')
-            return;
-        const block = this.edytor.idToBlock.get(id);
-        if (!block?.isInTree || this.edytor.destroyed)
-            return;
-        if (safeImageSrc(block.data.src))
-            return this.#uploads.delete(id);
-        this.#write(id, upload.src);
-    };
-    /** Release every preview. */
-    destroy = () => {
-        for (const upload of this.#uploads.values())
-            if (upload.status === 'uploading' && upload.preview)
-                URL.revokeObjectURL(upload.preview);
-        this.#uploads.clear();
-    };
-    #send = async (id, file, preview) => {
-        let src;
-        try {
-            src = storableImageSrc(await this.upload(file));
-        }
-        catch {
-            src = null;
-        }
-        const { edytor } = this;
-        if (preview)
-            URL.revokeObjectURL(preview);
-        if (edytor.destroyed)
-            return;
-        const block = edytor.idToBlock.get(id);
-        // Given a source meanwhile (a peer, the link field): nothing to fill.
-        if (block?.isInTree && safeImageSrc(block.data.src))
-            return this.#uploads.delete(id);
-        if (!src)
-            return this.#uploads.set(id, { status: 'failed' });
-        // Not shown (undone, deleted): held until it shows again (`fill`).
-        if (!block?.isInTree)
-            return this.#uploads.set(id, { status: 'landed', src });
-        this.#write(id, src);
-    };
-    /** The URL's write, outside the history; refused (readonly), it is held for the next show. */
-    #write = (id, src) => {
-        const { edytor } = this;
-        const block = edytor.idToBlock.get(id);
-        edytor.dispatcher.outside(() => (block.data.src = src));
-        if (edytor.dispatcher.last?.status === 'applied')
-            this.#uploads.delete(id);
-        else
-            this.#uploads.set(id, { status: 'landed', src });
-    };
-}