edytor 2.0.0 → 3.0.0

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

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
+export { TEX, expressionOf, parseEquation, sourceMathml, type EquationData } from './tex.js';
 /** The part of KaTeX the plugin uses: `katex.renderToString`. */
 export type KatexLike = {
     renderToString: (tex: string, options?: Record<string, unknown>) => string;
@@ -66,20 +67,12 @@ export type EquationErrorPayload = {
     /** The view's word for it (`equation.invalid`). */
     label: string;
 };
-/** The data of a block equation and of an inline one: its TeX source. */
-export type EquationData = {
-    expression?: string;
-};
 /** What drawing an equation gives: KaTeX's markup, its error, or nothing yet (the source shows). */
 export type Drawn = {
     html: string;
 } | {
     error: string;
 } | null;
-/** The MathML annotation that carries an equation's TeX source. */
-export declare const TEX = "application/x-tex";
-/** An equation's TeX source: its `expression`, a string. */
-export declare const expressionOf: (data: unknown) => string;
 /**
  * KaTeX for one plugin: loaded once, the first time an equation is drawn in
  * a browser, and reactive (an equation drawn before it loads shows its
@@ -104,13 +97,6 @@ export declare class EquationRenderer {
     mathml: (tex: string, display: boolean) => string;
     private options;
 }
-/**
- * HTML import: the TeX source an equation's element carries — a `<math>`'s
- * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
- * markup (`.katex`, `.katex-display`) — when the element is an equation of
- * the display asked (`display="block"`: a block), else `undefined`.
- */
-export declare const parseEquation: (element: HTMLElement, display: boolean) => EquationData | undefined;
 /** The equation being edited: a block equation, or an inline one (`atom`) in block `block`. */
 export type EquationTarget = {
     block: string;
@@ -141,6 +127,12 @@ export declare class EquationEditor {
     target: EquationTarget | null;
     /** The view is readonly (reactive): the editor closes. */
     get readonly(): boolean;
+    /**
+     * Where the panel stands: the edited equation (`ChromeAnchor`; Notion
+     * centers it under a block equation, `display`, and starts it under an
+     * inline one).
+     */
+    get anchor(): import("../chrome.js").ChromeAnchor;
     /** A block equation is edited (a field of several lines). */
     get display(): boolean;
     /** The edited equation's TeX source (reactive through its block's cell). */

package/dist/plugins/equation/equation.svelte.js

@@ -3,15 +3,10 @@ import { blockSelection } from '../../session/selection.js';
 import { InlineBlock } from '../../block/inlineBlock.svelte.js';
 import { takeKeys } from '../../events/onFocus.js';
 import { Anchored } from '../anchored.svelte.js';
-import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+import { expressionOf, sourceMathml } from './tex.js';
+export { TEX, expressionOf, parseEquation, sourceMathml } from './tex.js';
 import { all, listen } from '../../utils/listen.js';
-/** The MathML annotation that carries an equation's TeX source. */
-export const TEX = 'application/x-tex';
-/** An equation's TeX source: its `expression`, a string. */
-export const expressionOf = (data) => {
-    const value = data?.expression;
-    return typeof value === 'string' ? value : '';
-};
+import { keysOf } from '../list.svelte.js';
 /** The cap of the drawings each renderer keeps. */
 const CACHE = 256;
 /**
@@ -73,9 +68,7 @@ export class EquationRenderer {
                 // TeX KaTeX cannot read: the source as text, below.
             }
         }
-        const source = escapeHtml(tex);
-        return (`<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"${display ? ' display="block"' : ''}>` +
-            `<semantics><mrow><mtext>${source}</mtext></mrow><annotation encoding="${TEX}">${source}</annotation></semantics></math></span>`);
+        return sourceMathml(tex, display);
     };
     options = (display, output) => ({
         displayMode: display,
@@ -97,29 +90,6 @@ export class EquationRenderer {
         }, (error) => console.error('[edytor] KaTeX failed to load', error));
     };
 }
-/**
- * HTML import: the TeX source an equation's element carries — a `<math>`'s
- * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
- * markup (`.katex`, `.katex-display`) — when the element is an equation of
- * the display asked (`display="block"`: a block), else `undefined`.
- */
-export const parseEquation = (element, display) => {
-    const own = element.localName === 'math';
-    const wrapper = element.classList.contains('katex') ||
-        element.classList.contains('katex-display') ||
-        element.hasAttribute('data-edytor-equation');
-    if (!own && !wrapper)
-        return undefined;
-    const math = own ? element : element.querySelector('math');
-    if (!math)
-        return undefined;
-    const block = math.getAttribute('display') === 'block' || element.classList.contains('katex-display');
-    if (block !== display)
-        return undefined;
-    const tex = math.querySelector(`annotation[encoding="${TEX}"]`)?.textContent ??
-        math.getAttribute('alttext');
-    return tex?.trim() ? { expression: tex.trim() } : undefined;
-};
 /**
  * One view's equation editor (Notion's): a click on an equation of an
  * editable view (Enter on a selected one, or a new empty one) opens its
@@ -161,12 +131,12 @@ export class EquationEditor {
         return this.edytor.readonly;
     }
     /**
-     * Where the panel stands: under the edited equation (a block one's
-     * middle, an inline one's start), layer-relative.
-     * @internal
+     * Where the panel stands: the edited equation (`ChromeAnchor`; Notion
+     * centers it under a block equation, `display`, and starts it under an
+     * inline one).
      */
-    get place() {
-        return this.target && this.panel.place(6, this.display);
+    get anchor() {
+        return this.panel.anchor;
     }
     /** A block equation is edited (a field of several lines). */
     get display() {
@@ -216,7 +186,6 @@ export class EquationEditor {
         if (!target)
             return;
         this.target = null;
-        this.panel.box = null;
         this.edytor.overlay.invalidate();
         const block = this.#block(target);
         if (!block)
@@ -248,16 +217,10 @@ export class EquationEditor {
      * them. Focus leaving the panel for somewhere else closes it.
      */
     field = (node) => untrack(() => {
-        const keydown = (event) => {
-            if (event.isComposing)
-                return;
-            const enter = event.key === 'Enter' && !(event.shiftKey && this.display);
-            if (!enter && event.key !== 'Escape')
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        };
+        const keydown = keysOf({
+            Enter: (event) => !(event.shiftKey && this.display) && this.close(),
+            Escape: () => this.close()
+        }, true);
         const element = node;
         const off = listen(element, 'keydown', keydown);
         const off2 = listen(element, 'focusout', this.panel.blurred);

package/dist/plugins/equation/tex.d.ts

@@ -0,0 +1,17 @@
+/** The data of a block equation and of an inline one: its TeX source. */
+export type EquationData = {
+    expression?: string;
+};
+/** The MathML annotation that carries an equation's TeX source. */
+export declare const TEX = "application/x-tex";
+/** An equation's TeX source: its `expression`, a string. */
+export declare const expressionOf: (data: unknown) => string;
+/** MathML whose `application/x-tex` annotation is `tex`, the source as its text, in KaTeX's `katex` class. */
+export declare const sourceMathml: (tex: string, display: boolean) => string;
+/**
+ * HTML import: the TeX source an equation's element carries — a `<math>`'s
+ * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
+ * markup (`.katex`, `.katex-display`) — when the element is an equation of
+ * the display asked (`display="block"`: a block), else `undefined`.
+ */
+export declare const parseEquation: (element: HTMLElement, display: boolean) => EquationData | undefined;

package/dist/plugins/equation/tex.js

@@ -0,0 +1,42 @@
+/**
+ * An equation's pure forms: its data, its TeX source, the MathML that
+ * carries the source (`sourceMathml`, the clipboard's form before KaTeX
+ * loads and the export's on a server) and its HTML import. No Svelte.
+ */
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+/** The MathML annotation that carries an equation's TeX source. */
+export const TEX = 'application/x-tex';
+/** An equation's TeX source: its `expression`, a string. */
+export const expressionOf = (data) => {
+    const value = data?.expression;
+    return typeof value === 'string' ? value : '';
+};
+/** MathML whose `application/x-tex` annotation is `tex`, the source as its text, in KaTeX's `katex` class. */
+export const sourceMathml = (tex, display) => {
+    const source = escapeHtml(tex);
+    return (`<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"${display ? ' display="block"' : ''}>` +
+        `<semantics><mrow><mtext>${source}</mtext></mrow><annotation encoding="${TEX}">${source}</annotation></semantics></math></span>`);
+};
+/**
+ * HTML import: the TeX source an equation's element carries — a `<math>`'s
+ * `application/x-tex` annotation (or its `alttext`), alone or in KaTeX's
+ * markup (`.katex`, `.katex-display`) — when the element is an equation of
+ * the display asked (`display="block"`: a block), else `undefined`.
+ */
+export const parseEquation = (element, display) => {
+    const own = element.localName === 'math';
+    const wrapper = element.classList.contains('katex') ||
+        element.classList.contains('katex-display') ||
+        element.hasAttribute('data-edytor-equation');
+    if (!own && !wrapper)
+        return undefined;
+    const math = own ? element : element.querySelector('math');
+    if (!math)
+        return undefined;
+    const block = math.getAttribute('display') === 'block' || element.classList.contains('katex-display');
+    if (block !== display)
+        return undefined;
+    const tex = math.querySelector(`annotation[encoding="${TEX}"]`)?.textContent ??
+        math.getAttribute('alttext');
+    return tex?.trim() ? { expression: tex.trim() } : undefined;
+};

package/dist/plugins/fileDrop.d.ts

@@ -1,28 +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 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.
+ * 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';
-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;
+/** 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

@@ -1,49 +1,78 @@
 import { canPlaceNew } from '../session/moves.js';
-import { viewUploads } from '../session/uploads.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';
-/** 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 {
+import { isKindControl } from '../events/nativeInteractiveControl.js';
+export class FileDrag {
     edytor;
-    indicator;
-    resolver;
+    uploads;
+    #indicator;
+    #resolver;
+    #scrolling = null;
+    #dropped = null;
     #begun = false;
-    constructor(edytor) {
+    #kinds = [];
+    constructor(edytor, uploads) {
         this.edytor = edytor;
-        this.indicator = new DropIndicator(edytor, {
+        this.uploads = uploads;
+        this.#indicator = new DropIndicator(edytor, {
             group: () => [],
-            besideOf: (block) => this.resolver.besideOf(block),
-            layoutOf: (outer) => this.resolver.layoutOf(outer)
+            besideOf: (block) => this.#resolver.besideOf(block),
+            layoutOf: (outer) => this.#resolver.layoutOf(outer)
         });
-        this.resolver = new DropResolver(edytor, {
+        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
+            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) {
@@ -54,63 +83,40 @@ class FileDrag {
     }
     /**
      * 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 a drop target, its row's; elsewhere in the host, its margins'; on
+     * a kind's own control, none.
      */
-    over(kinds, input) {
-        const document = this.edytor.node?.ownerDocument;
+    #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);
+            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 = this.resolver.hitAt(input);
-        const placement = node
-            ? this.resolver.over(drag, node, input)
-            : this.resolver.margin(drag, input);
+        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();
+            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);
+        this.#indicator.show(node ?? document.body, placement);
         return placement;
     }
-    /** The drag left the view, or dropped: nothing shows. */
-    end() {
+    /** The drag left the view, or dropped: nothing shows, nothing scrolls. */
+    #end() {
+        this.#scrolling?.();
+        this.#scrolling = null;
         this.#begun = false;
-        this.indicator.end();
+        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/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>