edytor 1.0.0-rc.3 → 2.0.0

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

@@ -1,5 +1,7 @@
 import type { Edytor } from '../edytor.svelte.js';
-import type { PluginOperations } from '../plugins.js';
+import type { PluginDefinitions, PluginOperations } from '../plugins.js';
+import type { DropAt } from '../session/attempt.js';
+import { type FileDropPort, type ViewUploads } from '../session/uploads.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. */
@@ -17,8 +19,14 @@ export type Uploader = (file: File, report: UploadReport) => Promise<string>;
  */
 export type FileUpload = {
     readonly status: 'uploading';
-    /** The file, shown while it uploads (a `blob:` URL; `null` where there is none). */
+    /**
+     * The file, shown while it uploads: its object URL (`blob:`), this
+     * view's only, never stored; `null` where there is none.
+     */
     readonly preview: string | null;
+    /** The file's name and size in bytes, shown at once. */
+    readonly name: string;
+    readonly size: number;
     /** The share sent, `0` to `1`; `null` until `upload` reports one. */
     readonly progress: number | null;
 } | {
@@ -27,28 +35,33 @@ export type FileUpload = {
     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;
+/**
+ * What files a kind takes (its record's `upload`, `BlockDefinition`): which,
+ * who sends them (`send`, its plugin's `upload` option) and the data an
+ * upload's answer writes. A kind without it takes no files.
+ */
+export type KindUpload = {
+    /** Upload a file of this kind and answer its URL (its plugin's `upload`). */
+    send: Uploader;
     /** 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 view's uploads (`media.files`), one per view, claimed by the first
+ * media plugin listed with an `upload`: the uploads of pasted, dropped and
+ * picked files (an empty block's Upload), session state, never in the
+ * document. A kind takes files by its record's `upload`, and sends them
+ * with its `send` (its plugin's uploader); 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
@@ -58,25 +71,36 @@ export type UploadKind = {
  * (`fill`, asked by the empty block's render), so a redo brings it back
  * whole.
  */
-export declare class FileUploads {
+export declare class FileUploads implements ViewUploads {
     #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;
+    kindOf: (file: File) => string | undefined;
+    /** Files dragged from outside: the drop indicator and the placement (`fileDrop.ts`). */
+    readonly drop: FileDropPort;
     /** 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
+     * The paste hook: 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;
+    /**
+     * Place a block per file at the selection (one paste), or at a drop's
+     * placement (`at`: beside, before, after or inside a block, one command),
+     * then upload each.
+     */
+    insert: (files: readonly File[], at?: DropAt) => void;
+    /**
+     * Upload `file`, picked on the empty block `id` (its Upload), with its
+     * kind's uploader, the block showing it meanwhile, and hand the answer to
+     * `land` before the preview goes (so the block never shows nothing
+     * between them): `false` when it failed (the block then shows no
+     * upload; the caller says why).
+     */
+    pick: (id: string, file: File, land: (answer: string) => void) => Promise<boolean>;
     /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
     clear: (id: string) => void;
     /**
@@ -88,5 +112,12 @@ export declare class FileUploads {
     /** Release every preview. */
     destroy: () => void;
 }
-/** The view's file uploads (made at the first ask; `undefined` with no view). */
+/** The view's uploads, when a media plugin with an `upload` is listed. */
 export declare const fileUploads: (edytor: Edytor | undefined) => FileUploads | undefined;
+/**
+ * The hooks of a media plugin given an `upload` (its kind's record carries
+ * it, `KindUpload.send`): the first such plugin listed in a view claims the
+ * view's one `FileUploads` and runs its paste hook (a drop replays it) and
+ * teardown; the others add none.
+ */
+export declare const uploadHooks: (edytor: Edytor | undefined, upload: Uploader | undefined) => PluginOperations & PluginDefinitions;

package/dist/plugins/uploads.svelte.js

@@ -2,13 +2,19 @@ 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 { placeNew } from '../session/moves.js';
+import { claimUploads, viewUploads } from '../session/uploads.js';
+import { fileDragEnd, fileDragOver, fileDropAt } from './fileDrop.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 view's uploads (`media.files`), one per view, claimed by the first
+ * media plugin listed with an `upload`: the uploads of pasted, dropped and
+ * picked files (an empty block's Upload), session state, never in the
+ * document. A kind takes files by its record's `upload`, and sends them
+ * with its `send` (its plugin's uploader); 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
@@ -20,54 +26,85 @@ import { id as mint } from '../utils.js';
  */
 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 kinds that take files (their records' `upload`), in registration order. */
+    get #kinds() {
+        return [...this.edytor.blocks].flatMap(([type, { upload }]) => upload ? [{ type, ...upload }] : []);
+    }
     /** The kind that takes `file`, if any. */
-    kindOf = (file) => this.#kinds.find((kind) => !kind.fallback && kind.accepts(file)) ??
+    #kindOf = (file) => this.#kinds.find((kind) => !kind.fallback && kind.accepts(file)) ??
         this.#kinds.find((kind) => kind.fallback && kind.accepts(file));
+    /** The kind that takes `file`, if any. */
+    kindOf = (file) => this.#kindOf(file)?.type;
+    /** Files dragged from outside: the drop indicator and the placement (`fileDrop.ts`). */
+    drop = {
+        over: (event) => fileDragOver(this.edytor, event) !== null,
+        at: (event) => fileDropAt(this.edytor, event),
+        end: () => fileDragEnd(this.edytor)
+    };
     /** 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
+     * The paste hook: 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)
+    paste = ({ e, prevent, at }) => {
+        if (this.edytor.readonly)
             return;
-        const files = Array.from(e.clipboardData?.files ?? []).filter((file) => this.kindOf(file));
+        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));
+            prevent(() => this.insert(files, at));
     };
-    /** Place a block per file at the selection (one paste), then upload each. */
-    insert = (files) => {
+    /**
+     * Place a block per file at the selection (one paste), or at a drop's
+     * placement (`at`: beside, before, after or inside a block, one command),
+     * then upload each.
+     */
+    insert = (files, at) => {
         const { edytor } = this;
         const placed = files.flatMap((file) => {
-            const kind = this.kindOf(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 }));
+        const target = at && edytor.idToBlock.get(at.block);
+        if (at && target)
+            edytor.dispatcher.run('insertFromDrop', () => placeNew(edytor, placed.map(({ kind, id }) => ({ id, type: kind.type })), target, at.position));
+        else
+            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);
+            void this.#send(id, kind, file);
+        }
+    };
+    /**
+     * Upload `file`, picked on the empty block `id` (its Upload), with its
+     * kind's uploader, the block showing it meanwhile, and hand the answer to
+     * `land` before the preview goes (so the block never shows nothing
+     * between them): `false` when it failed (the block then shows no
+     * upload; the caller says why).
+     */
+    pick = async (id, file, land) => {
+        const kind = this.edytor.idToBlock.get(id)?.definition.upload;
+        if (!kind)
+            return false;
+        try {
+            land(await this.#run(id, kind, file));
+            return true;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            this.#settle(id);
         }
     };
     /** Forget the block's upload (a source was embedded: its error, or held data, no longer applies). */
@@ -89,7 +126,7 @@ export class FileUploads {
         const block = this.edytor.idToBlock.get(id);
         if (!block?.isInTree || this.edytor.destroyed)
             return;
-        const kind = this.#kinds.find(({ type }) => type === block.type);
+        const kind = block.definition.upload;
         if (!kind || kind.filled(block.data))
             return this.#uploads.delete(id);
         this.#write(id, upload.data);
@@ -101,7 +138,21 @@ export class FileUploads {
                 URL.revokeObjectURL(upload.preview);
         this.#uploads.clear();
     };
-    #send = async (id, kind, file, preview) => {
+    /**
+     * Send `file` with the kind's uploader, block `id` showing it meanwhile
+     * (`uploading`: its object URL, name, size and progress): the answer.
+     * The object URL stays until `#settle` (after the answer is stored, so
+     * the block never shows nothing between them).
+     */
+    #run = (id, kind, file) => {
+        const preview = typeof URL.createObjectURL === 'function' ? URL.createObjectURL(file) : null;
+        this.#uploads.set(id, {
+            status: 'uploading',
+            preview,
+            name: file.name,
+            size: file.size,
+            progress: null
+        });
         const report = {
             progress: (fraction) => {
                 const upload = this.#uploads.get(id);
@@ -110,34 +161,48 @@ export class FileUploads {
                 this.#uploads.set(id, { ...upload, progress: Math.min(1, Math.max(0, fraction)) });
             }
         };
+        return kind.send(file, report);
+    };
+    /** The upload of `id` ended: revoke its object URL and forget it, if it still runs. */
+    #settle = (id) => {
+        const upload = this.#uploads.get(id);
+        if (upload?.status !== 'uploading')
+            return;
+        if (upload.preview)
+            URL.revokeObjectURL(upload.preview);
+        this.#uploads.delete(id);
+    };
+    #send = async (id, kind, file) => {
         let data;
         try {
-            data = kind.data(file, await kind.upload(file, report));
+            data = kind.data(file, await this.#run(id, kind, file));
         }
         catch {
             data = null;
         }
         const { edytor } = this;
-        if (preview)
-            URL.revokeObjectURL(preview);
         if (edytor.destroyed)
             return;
         const block = edytor.idToBlock.get(id);
+        const upload = this.#uploads.get(id);
+        const preview = upload?.status === 'uploading' ? upload.preview : null;
         // 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' });
+            this.#uploads.delete(id);
+        else if (!data)
+            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);
+        else if (!block?.isInTree)
+            this.#uploads.set(id, { status: 'landed', data });
+        else
+            this.#write(id, data);
+        if (preview)
+            URL.revokeObjectURL(preview);
     };
     /** 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 })) }));
+        edytor.dispatcher.outside(() => edytor.patchData(id, Object.entries(data).map(([key, value]) => ({ path: [key], value }))));
         if (edytor.dispatcher.last?.status === 'applied')
             this.#uploads.delete(id);
         else
@@ -148,13 +213,21 @@ export class FileUploads {
 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). */
+/** The view's uploads, when a media plugin with an `upload` is listed. */
 export const fileUploads = (edytor) => {
-    if (!edytor)
-        return undefined;
-    let uploads = views.get(edytor);
-    if (!uploads)
-        views.set(edytor, (uploads = new FileUploads(edytor)));
-    return uploads;
+    const uploads = viewUploads(edytor);
+    return uploads instanceof FileUploads ? uploads : undefined;
+};
+/**
+ * The hooks of a media plugin given an `upload` (its kind's record carries
+ * it, `KindUpload.send`): the first such plugin listed in a view claims the
+ * view's one `FileUploads` and runs its paste hook (a drop replays it) and
+ * teardown; the others add none.
+ */
+export const uploadHooks = (edytor, upload) => {
+    if (!edytor || !upload || viewUploads(edytor))
+        return {};
+    const uploads = new FileUploads(edytor);
+    claimUploads(edytor, uploads);
+    return { onPaste: uploads.paste, onEdytorAttached: () => uploads.destroy };
 };