edytor 1.0.0-rc.3 → 1.0.0

package/dist/plugins/image/ImageChrome.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { iconOf } from '../icons.js';
-	import type { ImageAlign } from './image.js';
 	import type { ImageControls } from './controls.svelte.js';
 
 	/**
 	 * The image chrome (`ImageControls`), in the overlay: a resize handle on
-	 * each side of the hovered image (Notion's pill, at mid-height), and a
-	 * toolbar at its top right: the three alignments and the alt text field
-	 * (a `toolbar` snippet replaces both, placed there). A press on the
-	 * toolbar keeps the editor's focus; the alt field takes it. The toolbar's
-	 * role and marks (`bar`) and the alt field's keys and focus (`altField`)
-	 * are the controller's attachments, a custom `toolbar`'s too.
+	 * each side of the hovered image (Notion's pill, at mid-height). The
+	 * toolbar is the image toolbar plugin's.
 	 */
-	let { controls, toolbar }: { controls: ImageControls; toolbar?: Snippet<[ImageControls]> } =
-		$props();
+	let { controls }: { controls: ImageControls } = $props();
 
 	// The view turning readonly mid-drag drops the preview at once.
 	$effect(() => {
@@ -26,13 +18,6 @@
 		controls.invalidate();
 	});
 
-	const labels = $derived(controls.labels);
-	const aligns: { align: ImageAlign; label: string }[] = $derived([
-		{ align: 'left', label: labels.alignLeft },
-		{ align: 'center', label: labels.alignCenter },
-		{ align: 'right', label: labels.alignRight }
-	]);
-	const keep = (event: MouseEvent) => event.preventDefault();
 	/** The handle's hit box: 16px wide, inside the image's edge. */
 	const HANDLE = 16;
 </script>
@@ -50,70 +35,9 @@
 				style:height="{box.height}px"
 				data-dragging={controls.drag ? 'true' : undefined}
 				data-selecting={controls.selecting ? 'true' : undefined}
-				onpointerdown={(event) => controls.start(event, side)}
-				onmousedown={(event) => controls.mousedown(event, side)}
+				{@attach controls.band.press((event) => controls.start(event, side))}
 			></div>
 		{/each}
-		{#if !controls.drag && toolbar}
-			<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 toolbar(controls)}
-			</div>
-		{:else if !controls.drag}
-			<div
-				data-edytor-image-toolbar
-				role="toolbar"
-				aria-label={labels.toolbar}
-				style:left="{box.x + box.width - 6}px"
-				style:top="{box.y + 6}px"
-				data-selecting={controls.selecting ? 'true' : undefined}
-				{@attach controls.bar}
-			>
-				{#each aligns as { align, label } (align)}
-					<button
-						type="button"
-						data-edytor-image-align={align}
-						aria-label={label}
-						title={label}
-						aria-pressed={box.align === align}
-						onmousedown={keep}
-						onclick={() => controls.align(align)}
-						><span aria-hidden="true" style:mask-image={iconOf(`image.align-${align}`)}
-						></span></button
-					>
-				{/each}
-				<button
-					type="button"
-					data-edytor-image-alt-toggle
-					aria-label={labels.alt}
-					title={labels.alt}
-					aria-expanded={controls.editing === box.id}
-					onmousedown={keep}
-					onclick={controls.toggleAlt}
-					><span aria-hidden="true" style:mask-image={iconOf('image.alt')}></span></button
-				>
-			</div>
-			{#if controls.editing === box.id}
-				<div
-					data-edytor-image-alt-panel
-					style:left="{box.x + box.width - 6}px"
-					style:top="{box.y + 40}px"
-				>
-					<input
-						data-edytor-image-alt
-						aria-label={labels.alt}
-						placeholder={labels.altPlaceholder}
-						value={controls.alt}
-						oninput={(event) => controls.setAlt(event.currentTarget.value)}
-						{@attach controls.altField}
-					/>
-				</div>
-			{/if}
-		{/if}
 	{/if}
 </div>
 
@@ -129,7 +53,8 @@
 		pointer-events: none;
 	}
 
-	/* Notion's handle: a dark pill with a light ring, at mid-height, inside the edge. */
+	/* The handle's pill: at mid-height, inside the edge. Painted by a theme
+	 * (`edytor/themes/notion.css`: Notion's dark pill with a light ring). */
 	[data-edytor-image-resize]::after {
 		content: '';
 		position: absolute;
@@ -138,91 +63,5 @@
 		width: 6px;
 		height: min(48px, 50%);
 		transform: translateY(-50%);
-		border-radius: 20px;
-		background: var(--edytor-image-handle-color, rgba(15, 15, 15, 0.6));
-		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
-		opacity: 0.8;
-	}
-
-	[data-edytor-image-resize]:hover::after,
-	[data-edytor-image-resize][data-dragging='true']::after {
-		opacity: 1;
-	}
-
-	/* A custom 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%);
-	}
-
-	[data-edytor-image-toolbar] {
-		position: absolute;
-		display: flex;
-		gap: 2px;
-		/* The layer has no width: size to the buttons, not to it. */
-		width: max-content;
-		padding: 2px;
-		transform: translateX(-100%);
-		border-radius: 6px;
-		background: var(--edytor-image-toolbar-background, #fff);
-		box-shadow:
-			0 0 0 1px rgba(15, 15, 15, 0.05),
-			0 3px 6px rgba(15, 15, 15, 0.1);
-		font-size: 13px;
-	}
-
-	[data-edytor-image-toolbar] button {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 26px;
-		height: 26px;
-		padding: 0;
-		border: 0;
-		border-radius: 4px;
-		background: transparent;
-		color: rgba(55, 53, 47, 0.65);
-		cursor: pointer;
-	}
-
-	[data-edytor-image-toolbar] button:hover,
-	[data-edytor-image-toolbar] button[aria-pressed='true'],
-	[data-edytor-image-toolbar] button[aria-expanded='true'] {
-		background: rgba(55, 53, 47, 0.08);
-		color: rgb(55, 53, 47);
-	}
-
-	[data-edytor-image-toolbar] button span {
-		width: 18px;
-		height: 18px;
-		background: currentColor;
-		mask-size: contain;
-		mask-repeat: no-repeat;
-	}
-
-	[data-edytor-image-alt-panel] {
-		position: absolute;
-		width: 240px;
-		padding: 4px;
-		transform: translateX(-100%);
-		border-radius: 6px;
-		background: var(--edytor-image-toolbar-background, #fff);
-		box-shadow:
-			0 0 0 1px rgba(15, 15, 15, 0.05),
-			0 3px 6px rgba(15, 15, 15, 0.1);
-	}
-
-	[data-edytor-image-alt] {
-		box-sizing: border-box;
-		width: 100%;
-		height: 28px;
-		padding: 0 8px;
-		border: 0;
-		border-radius: 4px;
-		background: rgba(242, 241, 238, 0.6);
-		box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.1);
-		font: inherit;
-		outline: 0;
 	}
 </style>

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

@@ -1,8 +1,6 @@
-import type { Snippet } from 'svelte';
 import type { ImageControls } from './controls.svelte.js';
 type $$ComponentProps = {
     controls: ImageControls;
-    toolbar?: Snippet<[ImageControls]>;
 };
 declare const ImageChrome: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImageChrome = ReturnType<typeof ImageChrome>;

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,15 +1,15 @@
 <script module lang="ts">
-	import type { Snippet } from 'svelte';
+	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,
@@ -19,11 +19,10 @@
 		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';
 
 	export {
 		MAX_INLINE_IMAGE_BYTES,
@@ -34,58 +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[]>>;
-		/**
-		 * 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);
 
 	/**
 	 * Notion's image block: an "Add an image" panel until it has a source (a
@@ -93,40 +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,
-				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);
-				},
 				// The chrome: in the overlay, for the image under the pointer.
 				onEdytorAttached: ({ node }) => {
 					if (!owns()) return;
@@ -135,26 +78,22 @@
 					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();
 					};
 				},
 				blocks: {
@@ -162,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'
 							}
 						],
@@ -179,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>`;
@@ -198,12 +143,8 @@
 			};
 		};
 
-		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). -->
@@ -212,7 +153,6 @@
 	<!-- 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
@@ -224,23 +164,12 @@
 				)}
 			/>
 		</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'}
-				empty={view?.empty}
+				kind="image"
+				viewOf={(edytor) => (edytor ? views.get(edytor) : undefined)}
 			/>
 		</div>
 	{/if}<!--
@@ -264,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,43 +1,6 @@
-import type { Snippet } from 'svelte';
 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 +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,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 {};