edytor 1.0.0 → 2.0.0

package/dist/plugins/columns/ColumnResize.svelte

@@ -3,8 +3,9 @@
 
 	/**
 	 * The resize bands of the hovered layout and the guide of a drag
-	 * (`ColumnResize`), in the overlay: each band the gap's left part, above
-	 * the block handles (their `+` and grip together right of it, `gaps.ts`);
+	 * (`ColumnResize`), in the overlay: each band centered in its gap, above
+	 * the block handles (their `+` and grip flush with the
+	 * column, `gaps.ts`);
 	 * hovered, it shows a gray guide in its middle: where the guide shows, a
 	 * press resizes. A band is a focusable separator: its arrows resize
 	 * (`resize.key`), focused it shows its guide in the resize color.

package/dist/plugins/columns/ColumnsPlugin.svelte

@@ -165,7 +165,7 @@
 							ColumnResizeStrips,
 							{ resize },
 							'edytor-column-resizers',
-							// Above the block handles (5): the band is the gap's left part at every height.
+							// Above the block handles (5): the band centered in the gap at every height.
 							6,
 							resize.measure
 						)

package/dist/plugins/columns/gaps.d.ts

@@ -19,11 +19,13 @@ export type Gap = {
  */
 export declare const gapBefore: (column: Block) => Gap | null;
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
 export declare const bandOf: ({ left, right }: Gap) => {
     left: number;

package/dist/plugins/columns/gaps.js

@@ -27,13 +27,18 @@ export const gapBefore = (column) => {
     return null;
 };
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
-export const bandOf = ({ left, right }) => ({ left, width: Math.min(BAND, right - left) });
+export const bandOf = ({ left, right }) => {
+    const width = Math.min(BAND, right - left);
+    return { left: left + (right - left - width) / 2, width };
+};
 /** The width a column block's handle spans in `gap`: from the band's right edge to the block at `blockLeft`. */
 export const handleSpan = (gap, blockLeft) => {
     const band = bandOf(gap);

package/dist/plugins/columns/resize.svelte.d.ts

@@ -40,9 +40,9 @@ type Drag = {
 /**
  * The column resize (`docs/columns-plan.md`, "Resize"), chrome in the
  * overlay: while the pointer is over a layout (not readonly, not stacked),
- * a band in each gap between two shown columns (`bandOf`: the gap's left
- * `BAND` px, the layout's height), above the block handles, whose `+` and
- * grip sit together right of it, flush with the block (`gaps.ts`, one
+ * a band in each gap between two shown columns (`bandOf`: `BAND` px centered
+ * in the gap, the layout's height), above the block handles,
+ * whose `+` and grip sit together flush with the block (`gaps.ts`, one
  * measurement):
  * wherever its gray guide shows (`--edytor-columns-resize-color`, Notion's,
  * at any height, block rows included), a press resizes. Dragging one

package/dist/plugins/columns/resize.svelte.js

@@ -1,7 +1,7 @@
 import { pin } from '../../surface/overlay.js';
 import { BandDrag, bandKey } from '../bands.svelte.js';
 import { bandOf, gapBefore } from './gaps.js';
-import { stacks } from './stacking.js';
+import { stacks } from '../../dnd/stacking.js';
 import { columnsEnglish, labelsOf } from '../../labels.js';
 /** The guide line's width (the hover guide's and the drag's). */
 export const GUIDE = 2;
@@ -10,12 +10,17 @@ export const weightOf = (data) => {
     const width = data?.width;
     return typeof width === 'number' && Number.isFinite(width) && width > 0 ? width : 1;
 };
+/** The band's middle in a gap `width` px wide, from the gap's left. */
+const middleOf = (width) => {
+    const band = bandOf({ left: 0, right: width });
+    return band.left + band.width / 2;
+};
 /**
  * The column resize (`docs/columns-plan.md`, "Resize"), chrome in the
  * overlay: while the pointer is over a layout (not readonly, not stacked),
- * a band in each gap between two shown columns (`bandOf`: the gap's left
- * `BAND` px, the layout's height), above the block handles, whose `+` and
- * grip sit together right of it, flush with the block (`gaps.ts`, one
+ * a band in each gap between two shown columns (`bandOf`: `BAND` px centered
+ * in the gap, the layout's height), above the block handles,
+ * whose `+` and grip sit together flush with the block (`gaps.ts`, one
  * measurement):
  * wherever its gray guide shows (`--edytor-columns-resize-color`, Notion's,
  * at any height, block rows included), a press resizes. Dragging one
@@ -119,12 +124,8 @@ export class ColumnResize {
         const strips = this.shown ? this.#gaps(origin) : [];
         const drag = this.band.drag;
         const guide = drag && {
-            // Where the hover guide showed: the band's middle, never the gap's (it would jump onto the `+`).
-            x: drag.start +
-                this.#widthAt(drag) +
-                bandOf({ left: 0, right: drag.gap }).width / 2 -
-                GUIDE / 2 -
-                origin.left,
+            // Where the hover guide showed: the band's middle, the gap's (`bandOf`).
+            x: drag.start + this.#widthAt(drag) + middleOf(drag.gap) - GUIDE / 2 - origin.left,
             top: drag.top - origin.top,
             height: drag.height
         };

package/dist/plugins/equation/EquationPlugin.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import './equation.css';
 	import type {
 		BlockSnippetPayload,
 		InlineBlockSnippetPayload,
@@ -273,11 +274,3 @@
 		role="presentation"><EquationView expression={expressionOf(block.data)} display={false} /></span
 	>
 {/snippet}
-
-<style>
-	/* A wide equation scrolls in its block; its look is a theme's. */
-	[data-edytor-equation] {
-		overflow-x: auto;
-		overflow-y: hidden;
-	}
-</style>

package/dist/plugins/equation/EquationPlugin.svelte.d.ts

@@ -1,3 +1,4 @@
+import './equation.css';
 import type { Plugin } from '../../plugins.js';
 import { EquationEditor, type EquationData, type EquationErrorPayload, type EquationPlaceholderPayload, type EquationPluginOptions, type EquationTarget, type KatexLike, type KatexLoader } from './equation.svelte.js';
 export type { EquationData, EquationEditor, EquationErrorPayload, EquationPlaceholderPayload, EquationPluginOptions, EquationTarget, KatexLike, KatexLoader };

package/dist/plugins/equation/equation.css

@@ -0,0 +1,7 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* A wide equation scrolls in its block; its look is a theme's. */
+[data-edytor-equation] {
+	overflow-x: auto;
+	overflow-y: hidden;
+}

package/dist/plugins/fileDrop.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Files dragged from outside over a view (Notion): the drop indicator a
+ * block drag shows, where the files land, and that placement for the drop
+ * (the core's `onDrop.ts` asks the view's uploads, `ViewUploads.drop`, and passes it to the occurrence; the view's uploads place one
+ * block per file there, one command). The placement is the block drag's
+ * own resolution (`DropResolver`) for a drag that moves no block, whose
+ * places are the ones the document takes new blocks of the files' kinds
+ * at (`canPlaceNew`). Shown only in an editable view whose uploads take
+ * one of the files (`viewUploads`); with or without the block handles.
+ * Plugin-owned: the view's `FileUploads` (the first media plugin listed with
+ * an `upload`) installs it, so a view without one ships none of it.
+ */
+import type { Edytor } from '../edytor.svelte.js';
+import type { DropAt } from '../session/attempt.js';
+import type { DropPlacement } from '../dnd/geometry.js';
+/**
+ * A `dragover` of files from outside: where they land, shown (Notion's
+ * indicator), `null` where none (a read-only view, no uploads taking them,
+ * no place the document takes them at).
+ */
+export declare const fileDragOver: (edytor: Edytor, event: DragEvent) => DropPlacement | null;
+/**
+ * A drop of files from outside: the placement shown (re-resolved at the
+ * drop point), in block terms, and nothing shows any more.
+ */
+export declare const fileDropAt: (edytor: Edytor, event: DragEvent) => DropAt | null;
+/** The files' drag left the view (or ended): the indicator goes. */
+export declare const fileDragEnd: (edytor: Edytor) => void | undefined;

package/dist/plugins/fileDrop.js

@@ -0,0 +1,116 @@
+import { canPlaceNew } from '../session/moves.js';
+import { viewUploads } from '../session/uploads.js';
+import { DropIndicator } from '../dnd/dropIndicator.js';
+import { DropResolver, isDropTarget } from '../dnd/placement.js';
+/** The kinds the files of a drag would be, by their types (a `dragover` sees no file, only its type). */
+const kindsOf = (edytor, dataTransfer) => {
+    const uploads = viewUploads(edytor);
+    if (!uploads || !dataTransfer)
+        return [];
+    const kinds = new Set();
+    for (const item of Array.from(dataTransfer.items ?? []))
+        if (item.kind === 'file') {
+            const file = item.getAsFile() ?? new File([], 'file', { type: item.type });
+            const kind = uploads.kindOf(file);
+            if (kind)
+                kinds.add(kind);
+        }
+    // An engine that lists no item for a file (WebKit before the drop): its files themselves.
+    if (!kinds.size)
+        for (const file of Array.from(dataTransfer.files ?? [])) {
+            const kind = uploads.kindOf(file);
+            if (kind)
+                kinds.add(kind);
+        }
+    return [...kinds];
+};
+class FileDrag {
+    edytor;
+    indicator;
+    resolver;
+    #begun = false;
+    constructor(edytor) {
+        this.edytor = edytor;
+        this.indicator = new DropIndicator(edytor, {
+            group: () => [],
+            besideOf: (block) => this.resolver.besideOf(block),
+            layoutOf: (outer) => this.resolver.layoutOf(outer)
+        });
+        this.resolver = new DropResolver(edytor, {
+            targetOf: (node) => {
+                const block = edytor.idToBlock.get(node.dataset.edytorId ?? '');
+                return block?.node === node && isDropTarget(edytor, block) ? block : undefined;
+            },
+            handle: () => null,
+            indicator: this.indicator
+        });
+    }
+    /** The drag of files of `kinds`: no block moves; a place takes them all. */
+    #drag(kinds) {
+        return {
+            group: [],
+            fits: ({ target, position }) => canPlaceNew(this.edytor, kinds, target, position)
+        };
+    }
+    /**
+     * The placement at the pointer, shown (`null`: none, and nothing shows):
+     * over a drop target, its row's; elsewhere in the host, its margins'.
+     */
+    over(kinds, input) {
+        const document = this.edytor.node?.ownerDocument;
+        if (!document)
+            return null;
+        if (!this.#begun) {
+            this.#begun = true;
+            this.indicator.begin(document);
+        }
+        const drag = this.#drag(kinds);
+        const node = this.resolver.hitAt(input);
+        const placement = node
+            ? this.resolver.over(drag, node, input)
+            : this.resolver.margin(drag, input);
+        if (!placement) {
+            this.indicator.clear();
+            return null;
+        }
+        // A margin's placement shows as the block drag's page target does (its reorder holds).
+        this.indicator.show(node ?? document.body, placement);
+        return placement;
+    }
+    /** The drag left the view, or dropped: nothing shows. */
+    end() {
+        this.#begun = false;
+        this.indicator.end();
+    }
+}
+const drags = new WeakMap();
+const dragOf = (edytor) => {
+    let drag = drags.get(edytor);
+    if (!drag)
+        drags.set(edytor, (drag = new FileDrag(edytor)));
+    return drag;
+};
+/**
+ * A `dragover` of files from outside: where they land, shown (Notion's
+ * indicator), `null` where none (a read-only view, no uploads taking them,
+ * no place the document takes them at).
+ */
+export const fileDragOver = (edytor, event) => {
+    const kinds = edytor.readonly ? [] : kindsOf(edytor, event.dataTransfer);
+    if (!kinds.length) {
+        drags.get(edytor)?.end();
+        return null;
+    }
+    return dragOf(edytor).over(kinds, event);
+};
+/**
+ * A drop of files from outside: the placement shown (re-resolved at the
+ * drop point), in block terms, and nothing shows any more.
+ */
+export const fileDropAt = (edytor, event) => {
+    const placement = fileDragOver(edytor, event);
+    fileDragEnd(edytor);
+    return placement && { block: placement.target.id, position: placement.position };
+};
+/** The files' drag left the view (or ended): the indicator goes. */
+export const fileDragEnd = (edytor) => drags.get(edytor)?.end();

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
+	import './image.css';
 	import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import { branded } from '../brand.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import EmptySlot from '../media/EmptySlot.svelte';
 	import ImageChrome from './ImageChrome.svelte';
@@ -23,6 +23,9 @@
 	import { MEDIA_ICONS, type EmptyView } from '../media/empty.svelte.js';
 	import { imageEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import { listen } from '../../utils/listen.js';
+	import { fileUploads, uploadHooks, type Uploader } from '../uploads.svelte.js';
+	import { emptyHosts } from '../media/EmptySlot.svelte';
+	import UploadPreview from '../media/UploadPreview.svelte';
 
 	export {
 		MAX_INLINE_IMAGE_BYTES,
@@ -43,15 +46,27 @@
 	/** By view; the first image plugin of a view owns it, as its kind's definition (first wins). */
 	const views = new WeakMap<Edytor, View>();
 
+	export type ImagePluginOptions = {
+		/**
+		 * Upload an image file and answer its URL: an empty image's Upload,
+		 * and the pasted and dropped image files, each placed as an image at
+		 * once (one undo step), showing the file while it uploads, then filled
+		 * with the URL this answers. Without it, images are only linked. The
+		 * first image plugin listed in a view gives it.
+		 */
+		upload?: Uploader;
+	};
+
 	/**
 	 * 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
 	 * an editable caption, its alt text, width and alignment set from the
 	 * chrome the plugin shows over it. Void: its only text is the caption.
 	 */
-	export const createImagePlugin = (): Plugin => {
+	export const createImagePlugin = ({ upload }: ImagePluginOptions = {}): Plugin => {
 		const plugin: Plugin = (edytor) => {
 			const labels = labelsOf(edytor, 'image', imageEnglish);
+			const uploads = uploadHooks(edytor, upload);
 			const own: View = {
 				controls: new ImageControls(edytor),
 				// An accepted source; an inline image over the cap is never stored.
@@ -70,9 +85,12 @@
 			}
 			const owns = () => views.get(edytor) === own;
 			return {
+				onPaste: uploads.onPaste,
 				// The chrome: in the overlay, for the image under the pointer.
-				onEdytorAttached: ({ node }) => {
-					if (!owns()) return;
+				onEdytorAttached: (view) => {
+					const release = uploads.onEdytorAttached?.(view);
+					if (!owns()) return release;
+					const { node } = view;
 					const { controls } = own;
 					const over = (event: PointerEvent) => controls.hover(event.target);
 					const leave = (event: PointerEvent) =>
@@ -94,6 +112,7 @@
 						off2();
 						off3();
 						unmount();
+						if (typeof release === 'function') release();
 					};
 				},
 				blocks: {
@@ -101,16 +120,18 @@
 						...imageKinds.image,
 						snippet: image,
 						element: 'figure',
-						// Image files: with the uploads plugin, an Upload and pasted or dropped files.
-						upload: {
-							accepts: isImageFile,
-							data: (_file, answer) => {
-								const src = storableImageSrc(answer);
-								return src ? { src } : null;
-							},
-							filled: (data) => safeImageSrc(data.src) !== null,
-							preview: true
-						},
+						// Image files, with an `upload`: an Upload and pasted or dropped files.
+						...(upload && {
+							upload: {
+								send: upload,
+								accepts: isImageFile,
+								data: (_file, answer) => {
+									const src = storableImageSrc(answer);
+									return src ? { src } : null;
+								},
+								filled: (data) => safeImageSrc(data.src) !== null
+							}
+						}),
 						presets: [
 							{
 								label: labels.image,
@@ -143,7 +164,7 @@
 			};
 		};
 
-		return branded('image', plugin);
+		return plugin;
 	};
 </script>
 
@@ -153,6 +174,7 @@
 	<!-- A suggestion's preview (no handle) reads only its data. -->
 	{@const view = block.handle ? views.get(block.handle.edytor) : undefined}
 	{@const src = safeImageSrc(block.data.src)}
+	{@const pending = block.handle && !src ? fileUploads(block.handle.edytor)?.of(block.id) : undefined}
 	{#if src}
 		<div use:block.void data-edytor-image data-align={imageAlignOf(block.data)}>
 			<img
@@ -164,6 +186,11 @@
 				)}
 			/>
 		</div>
+	{:else if pending?.status === 'uploading' && !emptyHosts.has(block.handle!.edytor)}
+		<!-- An upload with no empty markup to draw it: the file at once, its progress over it. -->
+		<div use:block.void data-edytor-image-empty>
+			<UploadPreview upload={pending} image />
+		</div>
 	{:else}
 		<div use:block.void data-edytor-image-empty>
 			<EmptySlot
@@ -176,21 +203,3 @@
 	The core renders the kind's <figure> around this markup.
 	--><!-- svelte-ignore a11y_figcaption_parent --><figcaption>{@render content()}</figcaption>
 {/snippet}
-
-<style>
-	/* Where an image narrower than its block sits (Notion's alignment). */
-	[data-edytor-image] {
-		display: flex;
-		position: relative;
-		justify-content: center;
-	}
-	[data-edytor-image][data-align='left'] {
-		justify-content: flex-start;
-	}
-	[data-edytor-image][data-align='right'] {
-		justify-content: flex-end;
-	}
-	[data-edytor-image] img {
-		max-width: 100%;
-	}
-</style>

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

@@ -1,5 +1,7 @@
+import './image.css';
 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';
 export { MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, oversizedInlineImage, safeImageSrc, storableImageSrc, type ImageAlign };
 /** The data an image block reads (all optional). */
 export type ImageData = {
@@ -8,13 +10,23 @@ export type ImageData = {
     width?: number;
     align?: ImageAlign;
 };
+export type ImagePluginOptions = {
+    /**
+     * Upload an image file and answer its URL: an empty image's Upload,
+     * and the pasted and dropped image files, each placed as an image at
+     * once (one undo step), showing the file while it uploads, then filled
+     * with the URL this answers. Without it, images are only linked. The
+     * first image plugin listed in a view gives it.
+     */
+    upload?: Uploader;
+};
 /**
  * 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
  * an editable caption, its alt text, width and alignment set from the
  * chrome the plugin shows over it. Void: its only text is the caption.
  */
-export declare const createImagePlugin: () => Plugin;
+export declare const createImagePlugin: ({ upload }?: ImagePluginOptions) => 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/image/image.css

@@ -0,0 +1,17 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* Where an image narrower than its block sits (Notion's alignment). */
+[data-edytor-image] {
+	display: flex;
+	position: relative;
+	justify-content: center;
+}
+[data-edytor-image][data-align='left'] {
+	justify-content: flex-start;
+}
+[data-edytor-image][data-align='right'] {
+	justify-content: flex-end;
+}
+[data-edytor-image] img {
+	max-width: 100%;
+}

package/dist/plugins/index.d.ts

@@ -1,6 +1,5 @@
 export { createRichTextPlugin, richTextOperations, richTextPlaceholder, type RichTextPluginOptions, type TodoCheckboxPayload, type CalloutIconPayload, type EmptyBodyPayload } from './richtext/RichTextPlugin.svelte';
 export { CALLOUT_ICONS, createCalloutIconsPlugin, type CalloutIconPicker, type CalloutIconsOptions } from './richtext/calloutIcons.svelte.js';
-export { createUploadsPlugin, type UploadsOptions } from './uploads.svelte.js';
 export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
 export type { MenuItemPayload } from './chrome.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT, type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
@@ -21,12 +20,12 @@ export { createBlockMenuPlugin } from './blockMenu/blockMenuPlugin.js';
 export { createSuggestionsPlugin, type SuggestionBarOptions, type SuggestionBarPayload } from './suggestions/suggestionsPlugin.js';
 export { createSuggestionBarPlugin } from './suggestions/SuggestionBars.svelte';
 export type { BlockMenuOptions, BlockMenuController, BlockMenuAction, BlockMenuColor } from './blockMenu/BlockMenuController.svelte.js';
-export { createImagePlugin, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
+export { createImagePlugin, type ImagePluginOptions, safeImageSrc, storableImageSrc, oversizedInlineImage, MAX_INLINE_IMAGE_BYTES, MIN_IMAGE_WIDTH, type ImageData, type ImageAlign } from './image/ImagePlugin.svelte';
 export { createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions, type EmbedFallbackPayload } from './media/EmbedPlugin.svelte';
 export { createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview, type BookmarkCardPayload } from './media/BookmarkPlugin.svelte';
 export { createFilePlugin, type FilePluginOptions, type FileRowPayload } from './media/FilePlugin.svelte';
-export { createVideoPlugin } from './media/VideoPlugin.svelte';
-export { createAudioPlugin } from './media/AudioPlugin.svelte';
+export { createVideoPlugin, type VideoPluginOptions } from './media/VideoPlugin.svelte';
+export { createAudioPlugin, type AudioPluginOptions } from './media/AudioPlugin.svelte';
 export { safeWebUrl, safeMediaSrc, type MediaKind } from './media/media.js';
 export type { MediaEmptyController, MediaEmptyFailure } from './media/empty.svelte.js';
 export { createMediaEmptyPlugin, type MediaEmptyOptions } from './media/MediaEmpty.svelte';

package/dist/plugins/index.js

@@ -1,6 +1,5 @@
 export { createRichTextPlugin, richTextOperations, richTextPlaceholder } from './richtext/RichTextPlugin.svelte';
 export { CALLOUT_ICONS, createCalloutIconsPlugin } from './richtext/calloutIcons.svelte.js';
-export { createUploadsPlugin } from './uploads.svelte.js';
 export { createArrowMovePlugin } from './arrowMove/arrowMove.js';
 export { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
 export { createBlockHandlesPlugin } from './blockHandles/blockHandlesPlugin.js';

package/dist/plugins/markdownShortcuts.js

@@ -91,12 +91,12 @@ export const createMarkdownShortcutsPlugin = () => (edytor) => {
             if (!text)
                 return false;
             const { id } = block;
-            // The segment's start, in block offsets: the caret, less the text before it.
-            const at = to - before.length + found.start;
+            // The segment's start, in block offsets: the caret (after the typed text), less the text before it.
+            const at = to - match.input.length + found.start;
             const { facade, dispatcher } = edytor;
-            const plan = () => facade.compose(facade.prepare.formatRange(id, at + found.open, found.content, { [found.mark]: true }), ...(found.closing
-                ? [facade.prepare.deleteText(id, at + found.open + found.content, found.closing)]
-                : []), facade.prepare.deleteText(id, at, found.open));
+            const plan = () => facade.compose(facade.prepare.formatRange(id, at + found.open, found.content, { [found.mark]: true }), 
+            // The closing marker, the typed character with it.
+            facade.prepare.deleteText(id, at + found.open + found.content, found.closing + typed.length), facade.prepare.deleteText(id, at, found.open));
             const payload = { value: typed, start: before.length, end: before.length };
             const result = dispatcher.plan('inlineMarkdown', payload, plan, block, text);
             if (result.status !== 'applied')

package/dist/plugins/media/AudioPlugin.svelte

@@ -1,11 +1,23 @@
 <script module lang="ts">
 	import type { Plugin } from '../../plugins.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
+	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 const createAudioPlugin = (): Plugin => sourcePlugin('audio', ['sound', 'music', 'mp3']);
+	export const createAudioPlugin = ({ upload }: AudioPluginOptions = {}): Plugin =>
+		sourcePlugin('audio', ['sound', 'music', 'mp3'], undefined, {}, upload);
 </script>

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

@@ -1,10 +1,20 @@
 import type { Plugin } from '../../plugins.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: () => 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/FilePlugin.svelte

@@ -3,6 +3,7 @@
 	import type { Plugin } from '../../plugins.js';
 	import { escapeHtml, fileNameOf, safeMediaSrc, type FileRowPayload } from './media.js';
 	import { sourcePlugin } from './SourceBlock.svelte';
+	import type { Uploader } from '../uploads.svelte.js';
 
 	export type { FileRowPayload };
 
@@ -13,6 +14,14 @@
 		 * downloads the file. The first file plugin listed in a view gives its row.
 		 */
 		row?: Snippet<[FileRowPayload]>;
+		/**
+		 * Upload a file and answer its URL: an empty file block's Upload, and
+		 * the pasted and dropped files no other kind takes, each placed as a
+		 * file block at once (one undo step), its row showing the file's name,
+		 * size and progress, then filled with the URL this answers. Without
+		 * it, files are only linked.
+		 */
+		upload?: Uploader;
 	};
 
 	/**
@@ -42,6 +51,7 @@
 					return src ? { src, name: name || fileNameOf(src) } : undefined;
 				}
 			},
-			{ row: options.row }
+			{ row: options.row },
+			options.upload
 		);
 </script>