edytor 1.0.0 → 3.0.0

package/dist/plugins/fileDrop.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 drag is Pragmatic's external adapter's (`dnd/external.ts`), the same
+ * pipeline as the block and table drags: the host is its drop target, which
+ * takes a drag of files in an editable view. 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`). With or without the block handles.
+ *
+ * While they are dragged the browser shows each file's MIME type, not the
+ * file (the adapter's items carry it, a vendored change, `UPSTREAM.md`): the
+ * kinds are the ones the uploads would place those files as, so the line
+ * shows only where they land; none (a PDF with only an image uploader): no
+ * line, and the drop inserts nothing. Where the engine hides the types (no
+ * item, or an empty type), every kind the uploads take. The drop resolves
+ * again with the files themselves.
+ * Its listeners are the window's, capturing, so the drop target's `onDrop`
+ * runs before the host's own `drop` listener (`events/onDrop.ts`), which
+ * takes the placement (`ViewUploads.drop.take`) and runs the drop's
+ * occurrence (the uploads' paste hook places one block per file there, one
+ * command). 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';
+/** What the drag asks of the view's uploads. */
+export type DropUploads = {
+    /** The kind that takes `file`, if any. */
+    kindOf(file: File): string | undefined;
+    /** Every kind that takes files. */
+    readonly types: readonly string[];
+};
+export declare class FileDrag {
+    #private;
+    private readonly edytor;
+    private readonly uploads;
+    constructor(edytor: Edytor, uploads: DropUploads);
+    /** The host takes drags of files from outside while it is editable; the answer releases it. */
+    attach(host: HTMLElement): () => void;
+    /** The placement the last drop of files landed at, once (the host's `drop` takes it). */
+    take(): DropAt | null;
+}

package/dist/plugins/fileDrop.js

@@ -0,0 +1,122 @@
+import { canPlaceNew } from '../session/moves.js';
+import { autoScrollFor } from '../dnd/autoScroll.js';
+import { DropIndicator } from '../dnd/dropIndicator.js';
+import { containsFiles, dropTargetForExternal, externalScrollers, getFiles } from '../dnd/external.js';
+import { DropResolver, isDropTarget } from '../dnd/placement.js';
+import { isKindControl } from '../events/nativeInteractiveControl.js';
+export class FileDrag {
+    edytor;
+    uploads;
+    #indicator;
+    #resolver;
+    #scrolling = null;
+    #dropped = null;
+    #begun = false;
+    #kinds = [];
+    constructor(edytor, uploads) {
+        this.edytor = edytor;
+        this.uploads = uploads;
+        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 host takes drags of files from outside while it is editable; the answer releases it. */
+    attach(host) {
+        const release = dropTargetForExternal({
+            element: host,
+            canDrop: ({ source }) => !this.edytor.readonly && containsFiles({ source }) && this.uploads.types.length > 0,
+            onDragEnter: ({ source, location }) => {
+                this.#kinds = this.#draggedKinds(source.items);
+                this.#dropped = null;
+                this.#scrolling ??= autoScrollFor(host, externalScrollers(() => !this.edytor.readonly));
+                this.#over(this.#kinds, location.current.input);
+            },
+            onDrag: ({ location }) => this.#over(this.#kinds, location.current.input),
+            onDragLeave: () => this.#end(),
+            onDrop: ({ source, location }) => {
+                const kinds = new Set(getFiles({ source }).flatMap((file) => this.uploads.kindOf(file) ?? []));
+                const placement = kinds.size ? this.#over([...kinds], location.current.input) : null;
+                this.#end();
+                this.#dropped = placement && { block: placement.target.id, position: placement.position };
+            }
+        });
+        return () => {
+            release();
+            this.#end();
+        };
+    }
+    /** The placement the last drop of files landed at, once (the host's `drop` takes it). */
+    take() {
+        const dropped = this.#dropped;
+        this.#dropped = null;
+        return dropped;
+    }
+    /** The kinds the dragged files would be, by their types; hidden types: every kind that takes files. */
+    #draggedKinds(items) {
+        const files = items.filter((item) => item.kind === 'file');
+        if (!files.length || files.some((item) => !item.type))
+            return this.uploads.types;
+        const kinds = new Set();
+        for (const { type } of files) {
+            const kind = this.uploads.kindOf(new File([], 'file', { type }));
+            if (kind)
+                kinds.add(kind);
+        }
+        return [...kinds];
+    }
+    /** 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'; on
+     * a kind's own control, none.
+     */
+    #over(kinds, input) {
+        const host = this.edytor.node;
+        const document = host?.ownerDocument;
+        if (!document)
+            return null;
+        if (!this.#begun) {
+            this.#begun = true;
+            this.#indicator.begin(document);
+        }
+        const at = document.elementsFromPoint?.(input.clientX, input.clientY)[0] ?? null;
+        const control = at !== null && isKindControl(host, at);
+        const drag = this.#drag(kinds);
+        const node = control ? null : this.#resolver.hitAt(input);
+        const placement = control
+            ? null
+            : 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, nothing scrolls. */
+    #end() {
+        this.#scrolling?.();
+        this.#scrolling = null;
+        this.#begun = false;
+        this.#indicator.end();
+    }
+}

package/dist/plugins/find/FindController.svelte.d.ts

@@ -14,6 +14,11 @@ export type ReplaceMatches = Commands['replaceMatches'];
 export declare class FindController {
     #private;
     private edytor;
+    /**
+     * Where the bar stands (`ChromeAnchor`): the editor, whose top right
+     * your `bar` places itself in.
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
     isOpen: boolean;
     /** The replacement text. */
     replacement: string;

package/dist/plugins/find/FindController.svelte.js

@@ -4,6 +4,8 @@ import { showText } from '../planned.js';
 import { findMatches } from './search.js';
 import { listen } from '../../utils/listen.js';
 import { takeKeys } from '../../events/onFocus.js';
+import { keysOf } from '../list.svelte.js';
+import { virtualAnchor } from '../chrome.js';
 /**
  * The find bar's state and actions (`plugins/find`): the query, the matches
  * in reading order, the current one and the replacements. It reads the
@@ -12,6 +14,11 @@ import { takeKeys } from '../../events/onFocus.js';
  */
 export class FindController {
     edytor;
+    /**
+     * Where the bar stands (`ChromeAnchor`): the editor, whose top right
+     * your `bar` places itself in.
+     */
+    anchor = virtualAnchor(() => this.edytor.node?.getBoundingClientRect(), () => this.edytor.node);
     isOpen = $state(false);
     /** The replacement text. */
     replacement = $state('');
@@ -151,20 +158,13 @@ export class FindController {
      * closes, Mod+F selects the query.
      */
     #keys = (node, query) => {
-        const keydown = (event) => {
-            if (event.isComposing)
-                return;
-            const mod = this.edytor.keymap.isMac ? event.metaKey : event.ctrlKey;
-            if (event.key === 'Enter')
-                (query ? (event.shiftKey ? this.previous : this.next) : this.replace)();
-            else if (event.key === 'Escape')
-                this.close();
-            else if (query && mod && event.key.toLowerCase() === 'f')
-                node.select();
-            else
-                return;
-            event.preventDefault();
-        };
+        const select = (event) => query && (this.edytor.keymap.isMac ? event.metaKey : event.ctrlKey) && node.select();
+        const keydown = keysOf({
+            Enter: (event) => (query ? (event.shiftKey ? this.previous : this.next) : this.replace)(),
+            Escape: () => this.close(),
+            f: select,
+            F: select
+        });
         return listen(node, 'keydown', keydown);
     };
     /** Stop following the document (the editor is going away). */

package/dist/plugins/find/findPlugin.js

@@ -8,19 +8,6 @@ const controllers = new WeakMap();
 const MAX_HIGHLIGHTS = 1000;
 /** The find plugin's controller of `edytor`; `undefined` when the plugin is not listed. */
 export const findController = (edytor) => controllers.get(edytor);
-/** At the editor's top right, inside the viewport; measured in the overlay's frame. */
-const place = (edytor, find) => (host) => {
-    const editor = edytor.node;
-    const view = editor?.ownerDocument.defaultView;
-    if (!editor || !view || !find.isOpen)
-        return;
-    const rect = editor.getBoundingClientRect();
-    const width = host.firstElementChild?.getBoundingClientRect().width || 420;
-    const right = Math.min(rect.right, view.innerWidth - 8);
-    const left = `${Math.max(8, right - width)}px`;
-    const top = `${Math.max(8, rect.top + 8)}px`;
-    return () => Object.assign(host.style, { left, top });
-};
 /**
  * Find and replace (Notion's find in page), opt-in: Mod+F opens a bar over
  * the editor's top right. It searches the document's text in reading order,
@@ -63,8 +50,7 @@ export const createFindPlugin = (options = {}) => (edytor) => {
             });
             const unmountBar = mountChrome(edytor, options.bar, find, () => find.isOpen, {
                 name: 'edytor-find-host',
-                zIndex: 55,
-                measure: place(edytor, find)
+                zIndex: 55
             });
             return () => {
                 find.destroy();

package/dist/plugins/image/ImageChrome.svelte

@@ -3,8 +3,9 @@
 
 	/**
 	 * The image chrome (`ImageControls`), in the overlay: a resize handle on
-	 * each side of the hovered image (Notion's pill, at mid-height). The
-	 * toolbar is the image toolbar plugin's.
+	 * each side of the hovered image (Notion's pill, at mid-height), and the
+	 * image toolbar plugin's toolbar (the app's markup, which places itself
+	 * by the toolbar's `anchor`), while no handle drags.
 	 */
 	let { controls }: { controls: ImageControls } = $props();
 
@@ -38,6 +39,11 @@
 				{@attach controls.band.press((event) => controls.start(event, side))}
 			></div>
 		{/each}
+		{#if controls.toolbar && !controls.drag}
+			<div data-edytor-image-toolbar-slot data-selecting={controls.selecting ? 'true' : undefined}>
+				{@render controls.toolbar.snippet(controls.toolbar)}
+			</div>
+		{/if}
 	{/if}
 </div>
 

package/dist/plugins/image/ImagePlugin.svelte

@@ -1,16 +1,15 @@
 <script module lang="ts">
-	import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+	import { imageForms } from '../../export/forms.js';
+	import './image.css';
+
 	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';
-	import { imageKinds } from '../../crdt/semantics.js';
+
 	import {
 		imageAlignOf,
 		imageAltOf,
 		imageWidthOf,
-		imgData,
 		isImageFile,
 		MAX_INLINE_IMAGE_BYTES,
 		MIN_IMAGE_WIDTH,
@@ -20,9 +19,12 @@
 		type ImageAlign
 	} from './image.js';
 	import { ImageControls, imageControls } from './controls.svelte.js';
-	import { MEDIA_ICONS, type EmptyView } from '../media/empty.svelte.js';
+	import { MEDIA_ICONS } 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,
@@ -38,10 +40,16 @@
 
 	const px = (width: number | undefined) => (width === undefined ? undefined : `${width}px`);
 
-	/** 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>();
+	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
@@ -49,31 +57,23 @@
 	 * 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 own: View = {
-				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);
-				imageControls.set(edytor, own.controls);
-			}
-			const owns = () => views.get(edytor) === own;
+			const uploads = uploadHooks(edytor, upload);
+			// The view's image state (its source rule, the chrome): the first image
+			// plugin of a view owns it, as its kind's definition (first wins). The
+			// records read with no view (`plugin(undefined)`) keep no state.
+			const controls = new ImageControls(edytor);
+			if (edytor && !imageControls.has(edytor)) imageControls.set(edytor, controls);
+			const owns = () => imageControls.get(edytor) === controls;
 			return {
+				onPaste: uploads.onPaste,
 				// The chrome: in the overlay, for the image under the pointer.
-				onEdytorAttached: ({ node }) => {
-					if (!owns()) return;
-					const { controls } = own;
+				onEdytorAttached: (view) => {
+					const release = uploads.onEdytorAttached?.(view);
+					if (!owns()) return release;
+					const { node } = view;
 					const over = (event: PointerEvent) => controls.hover(event.target);
 					const leave = (event: PointerEvent) =>
 						!controls.drag && controls.leave(event.relatedTarget);
@@ -94,23 +94,26 @@
 						off2();
 						off3();
 						unmount();
+						if (typeof release === 'function') release();
 					};
 				},
 				blocks: {
 					image: {
-						...imageKinds.image,
+						...imageForms().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,
@@ -118,32 +121,13 @@
 								keywords: keywordsOf(edytor, 'block.image', ['picture', 'photo', 'img']),
 								group: 'Media'
 							}
-						],
-						html: (block, caption) => {
-							const src = safeImageSrc(block.data?.src);
-							const width = imageWidthOf(block.data);
-							const align = imageAlignOf(block.data);
-							const img = src
-								? `<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>`;
-						},
-						// A `figure` holding an `img`, or a bare `img`, with an accepted
-						// source; a pasted inline image over the cap is not imported.
-						parse: (el) => {
-							if (el.localName === 'img') return imgData(el) ?? undefined;
-							const data = el.localName === 'figure' && imgData(el.querySelector('img'));
-							if (!data) return undefined;
-							const align = el.getAttribute('data-align');
-							return align === 'left' || align === 'right' ? { ...data, align } : data;
-						}
+						]
 					}
 				}
 			};
 		};
 
-		return branded('image', plugin);
+		return plugin;
 	};
 </script>
 
@@ -151,8 +135,9 @@
 <!-- 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 controls = block.handle ? imageControls.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
@@ -160,37 +145,24 @@
 				alt={imageAltOf(block.data)}
 				draggable="false"
 				style:width={px(
-					view ? view.controls.width(block.id, block.data) : imageWidthOf(block.data)
+					controls ? controls.width(block.id, block.data) : imageWidthOf(block.data)
 				)}
 			/>
 		</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
 				block={block.handle}
 				kind="image"
-				viewOf={(edytor) => (edytor ? views.get(edytor) : undefined)}
+				viewOf={(edytor) => (edytor ? imageControls.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%;
-	}
-</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/controls.svelte.js

@@ -1,6 +1,6 @@
 import { BandDrag } from '../bands.svelte.js';
 import { layerBox, pin, sameValues } from '../../surface/overlay.js';
-import { imageAlignOf, imageWidthOf, MIN_IMAGE_WIDTH } from './image.js';
+import { imageAlignOf, imageWidthOf, MIN_IMAGE_WIDTH, oversizedInlineImage, safeImageSrc } from './image.js';
 /** The image element of a shown image block (none while it uploads); an image holds no block. */
 const imageOf = (node) => node?.querySelector('[data-edytor-image] > img') ?? null;
 /**
@@ -29,13 +29,27 @@ export class ImageControls {
     /** The handles' gesture (a resize band's: press, view-only preview, one write). @internal */
     band;
     /** The view's image toolbar, when its plugin is listed. @internal */
-    toolbar;
+    toolbar = $state();
     constructor(
     /** @internal */
     edytor) {
         this.edytor = edytor;
         this.band = new BandDrag(edytor);
     }
+    /**
+     * Store a link or an upload's answer on `block` (an empty image's): an
+     * accepted source; an inline image over the cap is never stored.
+     * @internal
+     */
+    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 handle being dragged. */
     get drag() {
         return this.band.drag;

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/image/toolbar.svelte.d.ts

@@ -11,7 +11,6 @@ import type { Attachment } from 'svelte/attachments';
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import { type ImageAlign } from './image.js';
-import { type ImageControls } from './controls.svelte.js';
 /**
  * What a `toolbar` snippet receives: the image the chrome is on (`box`),
  * its alignment (`align`) and alt text (`alt`, `setAlt`), the alt field's
@@ -20,9 +19,11 @@ import { type ImageControls } from './controls.svelte.js';
  */
 export declare class ImageToolbar {
     #private;
-    constructor(
-    /** @internal */
-    controls: ImageControls);
+    /**
+     * Where the toolbar stands (`ChromeAnchor`): the image the chrome is
+     * on, whose top right your `toolbar` places itself in.
+     */
+    readonly anchor: import("../chrome.js").ChromeAnchor;
     /** The measured image the toolbar is on (`null`: none). */
     get box(): import("./controls.svelte.js").ImageBox | null;
     /** The view is readonly (reactive). */