edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,15 +1,15 @@
 <script module lang="ts">
-	import type { Snippet } from 'svelte';
+	import './image.css';
+	import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import ImageEmpty from './ImageEmpty.svelte';
+	import EmptySlot from '../media/EmptySlot.svelte';
 	import ImageChrome from './ImageChrome.svelte';
 	import { imageKinds } from '../../crdt/semantics.js';
 	import {
 		imageAlignOf,
 		imageAltOf,
 		imageWidthOf,
-		imageLabels,
 		imgData,
 		isImageFile,
 		MAX_INLINE_IMAGE_BYTES,
@@ -19,11 +19,13 @@
 		storableImageSrc,
 		type ImageAlign
 	} from './image.js';
-	import { ImageControls } from './controls.svelte.js';
-	import type { ImageEmptyController } from './empty.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';
+	import { ImageControls, imageControls } from './controls.svelte.js';
+	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,
@@ -34,58 +36,26 @@
 		type ImageAlign
 	};
 
-	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 (the block shows the progress it reports). Without it only
-		 * links are embedded.
-		 */
-		upload?: Uploader;
-		/** The words the block, its empty panel and its chrome show, over the English ones. */
-		labels?: PartialLabels<'image'>;
-		/**
-		 * The slash menu's keywords of the image command (`block.image`), which
-		 * replace its own.
-		 */
-		keywords?: Partial<Record<string, string[]>>;
-		/**
-		 * Replace the toolbar over the hovered image (the alignments and the alt
-		 * field); it renders while `controls.shown` and no handle drags, at the
-		 * image's top right (`controls.box`). The resize handles stay the
-		 * plugin's. Keep its behaviour with `{@attach controls.bar}` on the
-		 * toolbar and `{@attach controls.altField}` on the alt field.
-		 */
-		toolbar?: Snippet<[ImageControls]>;
-		/**
-		 * Replace an empty image's markup (Notion's "Add an image" and its link
-		 * panel, or the placeholder of a readonly view): it receives the
-		 * block's `ImageEmptyController` (`open`, `draft`, `failed`, `embed`,
-		 * `upload`, `readonly`).
-		 */
-		empty?: Snippet<[ImageEmptyController]>;
-	};
-
 	/** The data an image block reads (all optional). */
 	export type ImageData = { src?: string; alt?: string; width?: number; align?: ImageAlign };
 
-	const escape = (value: string) => value.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
 	const px = (width: number | undefined) => (width === undefined ? undefined : `${width}px`);
 
-	/** One view's image state: its plugin's `upload`, the chrome, the uploads in flight. */
-	type View = {
-		upload?: Uploader;
-		controls: ImageControls;
-		uploads?: FileUploads;
-		empty?: Snippet<[ImageEmptyController]>;
-	};
+	/** One view's image state: its source rule, the chrome. */
+	type View = EmptyView & { controls: ImageControls };
 	/** By view; the first image plugin of a view owns it, as its kind's definition (first wins). */
 	const views = new WeakMap<Edytor, View>();
-	const imagePlugins = new WeakSet<Plugin>();
 
-	/** Recognize any image plugin instance (the component's default yields to yours). */
-	export const isImagePlugin = (plugin: Plugin) => imagePlugins.has(plugin);
+	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
@@ -93,68 +63,56 @@
 	 * 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 = (pluginOptions: ImagePluginOptions = {}): Plugin => {
-		const { upload } = pluginOptions;
-		const labels = labelsWith('image', pluginOptions.labels);
+	export const createImagePlugin = ({ upload }: ImagePluginOptions = {}): Plugin => {
 		const plugin: Plugin = (edytor) => {
-			imageLabels.claim(edytor, labels);
+			const labels = labelsOf(edytor, 'image', imageEnglish);
+			const uploads = uploadHooks(edytor, upload);
 			const own: View = {
-				upload,
-				controls: new ImageControls(edytor, labels),
-				uploads: upload ? fileUploads(edytor) : undefined,
-				empty: pluginOptions.empty
+				controls: new ImageControls(edytor),
+				// An accepted source; an inline image over the cap is never stored.
+				store: (block, value) => {
+					const src = safeImageSrc(value);
+					if (!src) return 'invalid';
+					if (oversizedInlineImage(src)) return 'inline';
+					block.edytor.patchData(block.id, [{ path: ['src'], value: src }]);
+					return null;
+				}
 			};
 			// The records read with no view (`plugin(undefined)`) keep no state.
 			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
-					});
+				imageControls.set(edytor, own.controls);
 			}
 			const owns = () => views.get(edytor) === own;
 			return {
-				// 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);
-				},
+				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) =>
 						!controls.drag && controls.leave(event.relatedTarget);
 					const layer = edytor.overlay.layer;
-					// A press outside the alt panel closes it (WebKit's lone `mousedown` too).
-					const offPress = onPress(edytor, node.ownerDocument, controls.pressed, true);
-					node.addEventListener('pointerover', over);
-					node.addEventListener('pointerleave', leave);
-					layer?.addEventListener('pointerleave', leave);
+					const off = listen(node, 'pointerover', over);
+					const off2 = listen(node, 'pointerleave', leave);
+					const off3 = listen(layer, 'pointerleave', leave);
 					const unmount = edytor.overlay.mount(
 						ImageChrome,
-						{ controls, toolbar: pluginOptions.toolbar },
+						{ controls },
 						'edytor-image-chrome',
 						// Above the block handles (5) and the column bands (6): it sits on the image.
 						7,
 						controls.measure
 					);
 					return () => {
-						node.removeEventListener('pointerover', over);
-						node.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerleave', leave);
-						offPress();
+						off();
+						off2();
+						off3();
 						unmount();
-						own.uploads?.destroy();
+						if (typeof release === 'function') release();
 					};
 				},
 				blocks: {
@@ -162,15 +120,23 @@
 						...imageKinds.image,
 						snippet: image,
 						element: 'figure',
+						// 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,
-								icon: '🖼',
-								keywords: keywordsOf(
-									'block.image',
-									['picture', 'photo', 'img'],
-									pluginOptions.keywords
-								),
+								icon: MEDIA_ICONS.image,
+								keywords: keywordsOf(edytor, 'block.image', ['picture', 'photo', 'img']),
 								group: 'Media'
 							}
 						],
@@ -179,7 +145,7 @@
 							const width = imageWidthOf(block.data);
 							const align = imageAlignOf(block.data);
 							const img = src
-								? `<img src="${escape(src)}" alt="${escape(imageAltOf(block.data))}"${width ? ` width="${Math.round(width)}"` : ''}>`
+								? `<img src="${escapeHtml(src)}" alt="${escapeHtml(imageAltOf(block.data))}"${width ? ` width="${Math.round(width)}"` : ''}>`
 								: '';
 							const at = align === 'center' ? '' : ` data-align="${align}"`;
 							return `<figure${at}>${img}<figcaption>${caption}</figcaption></figure>`;
@@ -198,12 +164,8 @@
 			};
 		};
 
-		imagePlugins.add(plugin);
 		return plugin;
 	};
-
-	/** The image block, links only. */
-	export const imagePlugin = createImagePlugin();
 </script>
 
 <!-- No whitespace before the caption (one node per block less to walk). -->
@@ -212,7 +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 upload = src ? undefined : view?.uploads?.of(block.id)}
+	{@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
@@ -224,62 +186,20 @@
 				)}
 			/>
 		</div>
-	{: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">
-				<progress value={upload.progress ?? undefined} max="1"></progress>
-				{imageLabels.of(block.handle?.edytor).uploading}
-			</span>
+	{: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>
-			<ImageEmpty
+			<EmptySlot
 				block={block.handle}
-				upload={view?.upload}
-				uploads={view?.uploads}
-				error={upload?.status === 'failed' ? 'upload' : null}
-				landed={upload?.status === 'landed'}
-				empty={view?.empty}
+				kind="image"
+				viewOf={(edytor) => (edytor ? views.get(edytor) : undefined)}
 			/>
 		</div>
 	{/if}<!--
 	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%;
-	}
-	[data-edytor-image-uploading] {
-		min-height: 48px;
-		border-radius: 4px;
-		background: rgba(55, 53, 47, 0.04);
-	}
-	[data-edytor-image-uploading] img {
-		opacity: 0.5;
-	}
-	[data-edytor-image-progress] {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		padding: 2px 8px;
-		border-radius: 4px;
-		background: rgba(15, 15, 15, 0.6);
-		color: #fff;
-		font-size: 12px;
-	}
-</style>

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

@@ -1,43 +1,8 @@
-import type { Snippet } from 'svelte';
+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 { ImageControls } from './controls.svelte.js';
-import type { ImageEmptyController } from './empty.svelte.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 = {
-    /**
-     * 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 (the block shows the progress it reports). Without it only
-     * links are embedded.
-     */
-    upload?: Uploader;
-    /** The words the block, its empty panel and its chrome show, over the English ones. */
-    labels?: PartialLabels<'image'>;
-    /**
-     * The slash menu's keywords of the image command (`block.image`), which
-     * replace its own.
-     */
-    keywords?: Partial<Record<string, string[]>>;
-    /**
-     * Replace the toolbar over the hovered image (the alignments and the alt
-     * field); it renders while `controls.shown` and no handle drags, at the
-     * image's top right (`controls.box`). The resize handles stay the
-     * plugin's. Keep its behaviour with `{@attach controls.bar}` on the
-     * toolbar and `{@attach controls.altField}` on the alt field.
-     */
-    toolbar?: Snippet<[ImageControls]>;
-    /**
-     * Replace an empty image's markup (Notion's "Add an image" and its link
-     * panel, or the placeholder of a readonly view): it receives the
-     * block's `ImageEmptyController` (`open`, `draft`, `failed`, `embed`,
-     * `upload`, `readonly`).
-     */
-    empty?: Snippet<[ImageEmptyController]>;
-};
 /** The data an image block reads (all optional). */
 export type ImageData = {
     src?: string;
@@ -45,17 +10,23 @@ export type ImageData = {
     width?: number;
     align?: ImageAlign;
 };
-/** Recognize any image plugin instance (the component's default yields to yours). */
-export declare const isImagePlugin: (plugin: Plugin) => boolean;
+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: (pluginOptions?: ImagePluginOptions) => Plugin;
-/** The image block, links only. */
-export declare const imagePlugin: 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/ImageToolbarHost.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ImageToolbar } from './toolbar.svelte.js';
+
+	/**
+	 * The image toolbar's place: the app's `toolbar` at the top right of the
+	 * image the chrome is on, while it shows and no handle drags.
+	 */
+	let { toolbar, snippet }: { toolbar: ImageToolbar; snippet: Snippet<[ImageToolbar]> } = $props();
+	const controls = $derived(toolbar.controls);
+</script>
+
+{#if controls.shown && controls.box && !controls.drag}
+	{@const box = controls.box}
+	<div
+		data-edytor-image-toolbar-slot
+		style:left="{box.x + box.width - 6}px"
+		style:top="{box.y + 6}px"
+		data-selecting={controls.selecting ? 'true' : undefined}
+	>
+		{@render snippet(toolbar)}
+	</div>
+{/if}
+
+<style>
+	/* The toolbar's place: the image's top right, sized to its markup. */
+	[data-edytor-image-toolbar-slot] {
+		position: absolute;
+		width: max-content;
+		transform: translateX(-100%);
+	}
+
+	/* A text selection in progress: the chrome takes no pointer. */
+	[data-selecting='true'] {
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ImageToolbar } from './toolbar.svelte.js';
+type $$ComponentProps = {
+    toolbar: ImageToolbar;
+    snippet: Snippet<[ImageToolbar]>;
+};
+declare const ImageToolbarHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageToolbarHost = ReturnType<typeof ImageToolbarHost>;
+export default ImageToolbarHost;

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

@@ -1,6 +1,4 @@
-import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
-import { type ImageLabels } from '../../labels.js';
 import { type ImageAlign } from './image.js';
 /** The hovered image, layer-relative: the `img` box, and its frame's width (the most it may take). */
 export type ImageBox = {
@@ -39,20 +37,15 @@ type Drag = {
  */
 export declare class ImageControls {
     #private;
-    private edytor;
-    /** The words the chrome shows (the plugin's `labels`). */
-    readonly labels: ImageLabels;
     /** The image block under the pointer. */
     hovered: string | null;
-    /** The image whose alt field is open: the chrome stays on it. */
-    editing: string | null;
     /** The measured box of the image the chrome is on. */
     box: ImageBox | null;
+    constructor(
+    /** @internal */
+    edytor: Edytor);
     /** The handle being dragged. */
-    drag: Drag | null;
-    constructor(edytor: Edytor, 
-    /** The words the chrome shows (the plugin's `labels`). */
-    labels?: ImageLabels);
+    get drag(): Drag | null;
     /** The view is readonly (reactive). */
     get readonly(): boolean;
     /** A text selection is in progress: the chrome takes no pointer. */
@@ -66,30 +59,7 @@ export declare class ImageControls {
     get target(): string | null;
     /** Whether the chrome shows: over an image of an editable view, or while a handle drags. */
     get shown(): boolean;
-    /** Set the target image's alignment: one `patchData` command. */
-    align: (align: ImageAlign) => void;
-    /** The target image's alt text. */
-    get alt(): string;
-    /** Write the alt text as it is typed: the dispatcher groups the keystrokes into one step. */
-    setAlt: (alt: string) => void;
-    /** Open (or close) the alt field of the target image. */
-    toggleAlt: () => void;
-    /**
-     * The image's toolbar (`{@attach controls.bar}`): its `toolbar` role and
-     * name unless it has its own, the mark a press outside the alt field
-     * reads (a press on the toolbar keeps the field open, so its Alt button
-     * toggles it), and presses that keep the editor's focus.
-     */
-    bar: Attachment<HTMLElement>;
-    /**
-     * The alt text field (`{@attach controls.altField}`): focused when it
-     * opens; Enter or Escape closes it and gives the editor its keys back,
-     * focus moving out of it (or of the element marked
-     * `data-edytor-image-alt-panel` around it) closes it, and a press on it
-     * keeps it open. Write its value with `setAlt`.
-     */
-    altField: Attachment<HTMLInputElement>;
-    /** Close the alt field; with `keys`, the editor takes the keys back. */
-    closeAlt: (keys?: boolean) => void;
 }
+/** Each view's image chrome (the first image plugin listed claims it). */
+export declare const imageControls: WeakMap<object, ImageControls>;
 export {};