edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,14 +1,15 @@
 <script module lang="ts">
+	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 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,
@@ -18,10 +19,10 @@
 		storableImageSrc,
 		type ImageAlign
 	} from './image.js';
-	import { ImageControls } from './controls.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';
 
 	export {
 		MAX_INLINE_IMAGE_BYTES,
@@ -32,42 +33,15 @@
 		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[]>>;
-	};
-
 	/** 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;
-	};
+	/** 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);
 
 	/**
 	 * Notion's image block: an "Add an image" panel until it has a source (a
@@ -75,39 +49,27 @@
 	 * 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 = (): Plugin => {
 		const plugin: Plugin = (edytor) => {
-			imageLabels.claim(edytor, labels);
+			const labels = labelsOf(edytor, 'image', imageEnglish);
 			const own: View = {
-				upload,
-				controls: new ImageControls(edytor, labels),
-				uploads: upload ? fileUploads(edytor) : undefined
+				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);
-				},
 				// The chrome: in the overlay, for the image under the pointer.
 				onEdytorAttached: ({ node }) => {
 					if (!owns()) return;
@@ -116,11 +78,9 @@
 					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 },
@@ -130,12 +90,10 @@
 						controls.measure
 					);
 					return () => {
-						node.removeEventListener('pointerover', over);
-						node.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerleave', leave);
-						offPress();
+						off();
+						off2();
+						off3();
 						unmount();
-						own.uploads?.destroy();
 					};
 				},
 				blocks: {
@@ -143,15 +101,21 @@
 						...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
+						},
 						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'
 							}
 						],
@@ -160,7 +124,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>`;
@@ -179,19 +143,16 @@
 			};
 		};
 
-		imagePlugins.add(plugin);
-		return plugin;
+		return branded('image', plugin);
 	};
-
-	/** The image block, links only. */
-	export const imagePlugin = createImagePlugin();
 </script>
 
+<!-- No whitespace before the caption (one node per block less to walk). -->
+<!-- prettier-ignore -->
 {#snippet image({ block, content }: BlockSnippetPayload<ImageData>)}
 	<!-- 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)}
 	{#if src}
 		<div use:block.void data-edytor-image data-align={imageAlignOf(block.data)}>
 			<img
@@ -203,28 +164,17 @@
 				)}
 			/>
 		</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>
-		</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'}
+				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>
+	{/if}<!--
+	The core renders the kind's <figure> around this markup.
+	--><!-- svelte-ignore a11y_figcaption_parent --><figcaption>{@render content()}</figcaption>
 {/snippet}
 
 <style>
@@ -243,22 +193,4 @@
 	[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,25 +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 = {
-    /**
-     * 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[]>>;
-};
 /** The data an image block reads (all optional). */
 export type ImageData = {
     src?: string;
@@ -27,17 +8,13 @@ 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;
 /**
  * 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: () => 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,5 +1,4 @@
 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 = {
@@ -38,25 +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;
-    /** The dragged image's width at the pointer (view only). */
-    preview: {
-        id: string;
-        width: number;
-    } | 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. */
@@ -70,47 +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;
-    /** An image's width as shown, in px: the drag's preview while a handle drags it, else `data.width`. */
-    width: (id: string | undefined, data: Record<string, unknown> | undefined) => number | undefined;
-    /** The pointer is over `target`: the image block holding it, if any. */
-    hover: (target: EventTarget | null) => void;
-    /** The pointer left for `to`: the chrome stays while it is over the editor's overlay. */
-    leave: (to: EventTarget | null) => void;
-    /** The overlay measure: the target image's box. */
-    measure: (host: HTMLElement, origin: DOMRect) => () => void;
-    /** Measure again in the overlay's next frame. */
-    invalidate: () => void;
-    /** 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;
-    /**
-     * A press anywhere (`onPress`, capture): one outside the alt panel and the
-     * toolbar (whose Alt button toggles it) closes the field, so the chrome
-     * follows the pointer again.
-     */
-    pressed: (event: MouseEvent) => void;
-    /** Focus left the alt field: for somewhere outside its panel, the field closes. */
-    blurred: (event: FocusEvent) => void;
-    /** Close the alt field; with `keys`, the editor takes the keys back. */
-    closeAlt: (keys?: boolean) => void;
-    /**
-     * A `mousedown` on a handle: no native selection starts there; the press
-     * itself when no `pointerdown` came before it (`isLonePress`: WebKit's
-     * first press after a drag), which starts the drag as one would.
-     */
-    mousedown: (event: MouseEvent, side: Drag["side"]) => void;
-    /**
-     * Press on a handle: the drag starts, nothing is written until the
-     * release. A `pointerdown` tracks its pointer (captured, on the document);
-     * a lone `mousedown` tracks the mouse on the window.
-     */
-    start: (event: PointerEvent | MouseEvent, side: Drag["side"]) => void;
-    /** The view turned readonly: a drag in progress ends at once, nothing written. */
-    lock: () => void;
 }
+/** Each view's image chrome (the first image plugin listed claims it). */
+export declare const imageControls: WeakMap<object, ImageControls>;
 export {};