@voithos-labs/aragonite 0.10.4 → 0.10.7

package/dist/components/editor-root-menus.js

@@ -0,0 +1,147 @@
+/**
+ * Editor-root menus: the block context menu (a right-click on a block runs its kind's registered
+ * actions; prose and a selection get the clipboard rows, and prose an insert flyout). The open
+ * menu is `$state` in `Editor.svelte`, written through `setMenu`; a menu takes no focus, so
+ * the caret it acts on stays exactly where it is.
+ */
+import { BLOCK_ACTIONS_LABEL } from '../a11y-strings';
+import { blockContextActionsFor } from '../schema/context-actions';
+import { applyPasteTransforms } from '../tree-operations/paste/paste-transforms';
+import { runClipboardAction } from './menu/clipboard-actions';
+import { blockNoun } from './menu/default-context-actions';
+import { isProseLeaf } from '../schema/page-role';
+import { readBlockPath } from '../selection/path-lookup';
+import { documentLineEnding } from '../core/lines';
+export function createRootMenus(deps) {
+    function anchorOn(el, point) {
+        const rect = el.getBoundingClientRect();
+        const dx = point.x - rect.left;
+        const dy = point.y - rect.top;
+        return () => {
+            const now = el.getBoundingClientRect();
+            return { x: now.left + dx, y: now.top + dy };
+        };
+    }
+    /** Where a paste goes: whatever editable element holds focus inside the root. */
+    function focusedEditable() {
+        const active = document.activeElement;
+        return active instanceof HTMLElement &&
+            deps.editorEl?.contains(active) &&
+            active.isContentEditable
+            ? active
+            : null;
+    }
+    function clipboardRows() {
+        const selected = !!focusedEditable() && !(window.getSelection()?.isCollapsed ?? true);
+        return [
+            { id: 'clip.cut', label: 'Cut', icon: 'scissors', disabled: !selected },
+            { id: 'clip.copy', label: 'Copy', icon: 'copy', disabled: !selected },
+            { id: 'clip.paste', label: 'Paste', icon: 'clipboard' },
+            { id: 'clip.paste-plain', label: 'Paste as plain text', icon: 'type' }
+        ];
+    }
+    function runClipboardRow(id) {
+        if (!id.startsWith('clip.'))
+            return false;
+        void runClipboardAction(id.slice('clip.'.length), focusedEditable());
+        return true;
+    }
+    /** `withInsert` adds the "Insert block" flyout, whose rows land below the block the caret was
+     *  just placed in; false leaves the menu to the clipboard rows alone. */
+    function openClipboardMenu(point, anchorEl, withInsert) {
+        const catalogue = deps.insertCatalogue();
+        const insert = !withInsert
+            ? []
+            : [
+                { id: 'sep', label: '', divider: true },
+                {
+                    id: 'insert',
+                    label: 'Insert block',
+                    icon: 'plus',
+                    children: catalogue.map(({ id, label, icon }) => ({ id, label, icon }))
+                }
+            ];
+        deps.setMenu({
+            ...point,
+            anchor: anchorOn(anchorEl, point),
+            items: [...clipboardRows(), ...insert],
+            label: BLOCK_ACTIONS_LABEL,
+            pick: (id) => {
+                deps.setMenu(null);
+                if (runClipboardRow(id))
+                    return;
+                const entry = catalogue.find((e) => e.id === id);
+                if (entry && withInsert)
+                    void deps.insertMarkdown(entry.markdown, { placement: 'below' });
+            }
+        });
+    }
+    function openBlockActions(point, host, path, node) {
+        const noun = blockNoun(node, deps.reading);
+        const actions = blockContextActionsFor(node, path, deps.activation, noun);
+        if (actions.length === 0)
+            return;
+        const index = path[0];
+        const ctx = {
+            node,
+            path,
+            deleteBlock: async () => {
+                await deps.blockEdit.deleteBlock(index, 'keyless');
+            },
+            replaceRaw: (raw) => deps.replaceRaw(index, raw),
+            transformPaste: (text) => applyPasteTransforms(text, deps.activation),
+            lineEnding: documentLineEnding(deps.getDoc())
+        };
+        deps.setMenu({
+            ...point,
+            anchor: anchorOn(host, point),
+            items: actions.map(({ id, label, icon, danger }) => ({
+                id,
+                label,
+                icon: icon,
+                danger
+            })),
+            label: BLOCK_ACTIONS_LABEL,
+            pick: (id) => {
+                deps.setMenu(null);
+                const action = actions.find((a) => a.id === id);
+                if (action)
+                    void action.run(ctx);
+            }
+        });
+    }
+    // A right-click on a block opens its own menu; prose and a selection get the clipboard rows,
+    // and the margin shows nothing.
+    function onRootContextMenu(e) {
+        const root = deps.editorEl;
+        if (e.defaultPrevented || deps.mode === 'reading' || !root)
+            return;
+        const target = e.target instanceof Element ? e.target : null;
+        if (!target || deps.isHostChrome(target))
+            return;
+        e.preventDefault();
+        // The keyboard's contextmenu event (Windows fires it on the ContextMenu key's release)
+        // lands on the item the keydown's own menu already focused: that menu is the answer.
+        if (target.closest('.md-menu'))
+            return;
+        const host = target.closest('.block-host[data-block-path]');
+        const path = readBlockPath(host);
+        if (!host || !path)
+            return;
+        const point = { x: e.clientX, y: e.clientY };
+        const native = window.getSelection();
+        const selected = !!native && !native.isCollapsed && root.contains(native.anchorNode);
+        // A nested block (a fence inside a list item) gets the clipboard rows.
+        const node = path.length === 1 ? deps.getDoc().children[path[0]] : undefined;
+        const prose = !!node && isProseLeaf(node, deps.reading);
+        if (selected || !node || prose) {
+            if (!selected)
+                deps.placeCaretAtPoint(e.clientX, e.clientY);
+            // Top-level prose is where a sibling block makes sense.
+            openClipboardMenu(point, host, !selected && prose);
+            return;
+        }
+        openBlockActions(point, host, path, node);
+    }
+    return { onRootContextMenu };
+}

package/dist/components/editor-root-mode-flip.d.ts

@@ -1,12 +1,10 @@
 /**
- * Editor-root presentation-mode flip: carry the caret across a mode change. The pre phase is
- * the last moment the outgoing mode owns the DOM (past it the mode's render key has rebuilt
- * every block from its own CST bytes), so the caret is captured and the surface blurred there;
- * the post phase drops the geometry the old markers set and re-seats the caret through the
- * reveal road. The two `$effect`s stay in `Editor.svelte` as the mode read plus one call each.
+ * Keeps the caret across a presentation-mode switch. `beforeFlip` captures the caret and blurs
+ * the block while the outgoing mode still owns the DOM; `afterFlip` drops the outgoing markers'
+ * geometry and restores the caret through the shared restore path.
  */
-import type { EdgeAffinityState } from '../cursor/edge-affinity';
-import type { HeightOracle } from '../cursor/height-oracle';
+import type { CaretMemory } from '../cursor/caret-memory';
+import type { LayoutState } from '../reactivity/layout-state.svelte';
 import type { EditorEvents } from '../editor-events';
 import type { BlockElLookup } from '../editor-keys';
 import type { PresentationMode } from '../presentation-mode';
@@ -19,16 +17,23 @@ export interface ModeFlipDeps {
     selection: Pick<SelectionState, 'isCrossBlock' | 'gapCaret' | 'clearGapCaret'>;
     /** The public snapshot, which also answers for a native caret no block reports. */
     getSelection(): EditorSelection | null;
+    /** Sends the current selection to subscribers. */
+    announceSelection(): void;
     getBlockElByPath: BlockElLookup;
     isHostChrome(node: Node | null): boolean;
-    edgeAffinity: Pick<EdgeAffinityState, 'reset'>;
-    heightOracle: Pick<HeightOracle, 'dropMeasured'>;
+    caretMemory: Pick<CaretMemory, 'forget'>;
+    layout: Pick<LayoutState, 'forgetMeasuredHeights'>;
     events: EditorEvents;
-    /** The bare-mount restore road: a flip is a view operation and writes no scrollport. */
+    /** The bare-mount restore path: a mode change only changes the view, so it writes no
+     *  scroll position. */
     restoreCaret(path: number[], offset: number): Promise<unknown>;
+    /** Make the editor's reading answer `mode` (null: the requested mode again), so an edit the
+     *  blur commits lands in the mode it was typed in. */
+    holdOutgoingMode(mode: PresentationMode | null): void;
 }
 export interface ModeFlip {
-    /** The `$effect.pre` half, run untracked: capture and blur while the outgoing mode owns the DOM. */
+    /** The `$effect.pre` half, run untracked: capture and blur while the outgoing mode still
+     *  owns the DOM. */
     beforeFlip(to: PresentationMode): void;
     /** The `$effect` half: reset mode-bound geometry, then restore the caret after the flush. */
     afterFlip(to: PresentationMode): void;

package/dist/components/editor-root-mode-flip.js

@@ -1,22 +1,18 @@
 /**
- * Editor-root presentation-mode flip: carry the caret across a mode change. The pre phase is
- * the last moment the outgoing mode owns the DOM (past it the mode's render key has rebuilt
- * every block from its own CST bytes), so the caret is captured and the surface blurred there;
- * the post phase drops the geometry the old markers set and re-seats the caret through the
- * reveal road. The two `$effect`s stay in `Editor.svelte` as the mode read plus one call each.
+ * Keeps the caret across a presentation-mode switch. `beforeFlip` captures the caret and blurs
+ * the block while the outgoing mode still owns the DOM; `afterFlip` drops the outgoing markers'
+ * geometry and restores the caret through the shared restore path.
  */
 import { tick } from 'svelte';
 import { isTextEntrySurface } from '../active-editor';
-import { ambientLengthOf } from '../ambient/ambient-dom';
-import { toClampedRawOffset } from '../cursor/coordinate-spaces';
-import { domTextOffsetAtNode } from '../cursor/widget-offset';
+import { rawOffsetAt } from '../cursor/widget-offset';
 import { findSurfacePathForElement } from '../selection/path-lookup';
 export function createModeFlip(deps) {
     let flipCaret = null;
     let preFlipSeenMode = deps.mode;
     let lastEffectiveMode = deps.mode;
-    /** The focused leaf's caret as (path, raw offset): the per-backend road while a leaf holds
-     *  focus, else the native range a toggle click leaves behind while chrome takes focus. */
+    /** The focused block's caret as (path, raw offset): the block's own answer while it holds
+     *  focus, else the native range a toggle click leaves behind while the button has focus. */
     function captureCaret() {
         if (deps.selection.isCrossBlock || deps.selection.gapCaret)
             return null;
@@ -34,51 +30,57 @@ export function createModeFlip(deps) {
         const contentEl = deps.getBlockElByPath(path);
         if (!contentEl?.contains(node))
             return null;
-        const offset = toClampedRawOffset(domTextOffsetAtNode(contentEl, node, sel.focusOffset), ambientLengthOf(contentEl));
+        const offset = rawOffsetAt(contentEl, node, sel.focusOffset);
         return { path, offset };
     }
-    // A post-tick focus like every structural op's; the road clamps the saved offset into the
-    // destination mode's landable range. Yielding to a focused text-entry surface keeps the
-    // restore from stealing a host field mid-typing.
+    // The restore path clamps the offset to one the new mode allows; a focused text field is
+    // left alone, so the restore cannot steal a host field mid-typing.
     async function restoreAfterFlush(caret, to) {
         await tick();
         if (deps.mode !== to || isTextEntrySurface(document.activeElement))
             return;
         await deps.restoreCaret(caret.path, caret.offset);
     }
+    // A mode change blurs the block, so revealed markers and a composition close as on any blur;
+    // the host's header is exempt.
+    function blurForFlip() {
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement) || !deps.editorEl?.contains(active))
+            return;
+        if (deps.isHostChrome(active))
+            return;
+        active.blur();
+        // A blur the editor performs announces the selection it drops: the document listener only
+        // reports a range the browser still anchors in the root, and this one is gone.
+        deps.announceSelection();
+    }
     return {
         beforeFlip(to) {
             if (to === preFlipSeenMode)
                 return;
             const from = preFlipSeenMode;
             preFlipSeenMode = to;
-            // Reading keeps its entry snapshot: it has no caret of its own to recapture on the way out.
-            if (from !== 'reading')
-                flipCaret = captureCaret();
-            // A flip is a blur-class event: a live reveal or composition folds through the existing
-            // blur choke point. Host chrome is exempt, or a mode toggle blurs a title field mid-edit.
-            const active = document.activeElement;
-            if (active instanceof HTMLElement &&
-                deps.editorEl?.contains(active) &&
-                !deps.isHostChrome(active)) {
-                active.blur();
-                // A blur the editor performs announces the selection it drops: the document listener
-                // only reports a range the browser still anchors in the root, and this one is gone.
-                deps.events.emit('selectionChange', deps.getSelection());
+            deps.holdOutgoingMode(from);
+            try {
+                // Reading keeps its entry snapshot: it has no caret of its own to recapture on the way out.
+                if (from !== 'reading')
+                    flipCaret = captureCaret();
+                blurForFlip();
+            }
+            finally {
+                deps.holdOutgoingMode(null);
             }
         },
         afterFlip(to) {
             if (to === lastEffectiveMode)
                 return;
             lastEffectiveMode = to;
-            // Which markers paint just changed: a side recorded against the old geometry no longer
-            // names the offset the user meant, and every measured height is the other mode's. Not
-            // paired with a width bump, since the flip has blurred and a rebuild would lose the pin.
-            deps.edgeAffinity.reset();
-            deps.heightOracle.dropMeasured();
+            // The caret memory and measured heights belong to the outgoing mode's markers.
+            deps.caretMemory.forget();
+            deps.layout.forgetMeasuredHeights();
             if (to === 'reading') {
-                // The gap is an editor-owned caret no DOM blur can reach, so the flip clears it
-                // rather than each arrival path.
+                // The gap caret is the editor's own, not the browser's, so no blur reaches it:
+                // the mode change clears it rather than each entry path.
                 deps.selection.clearGapCaret();
             }
             else if (flipCaret) {

package/dist/components/editor-root-scroll-host.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Resolves the one scroller the scroll mode picks, so nothing downstream branches on the mode:
+ * what a drag autoscrolls, what bounds the visible region, what the scroll owner opens as its
+ * port. Host-mode answers are cached on first read, so a host that swaps its scroller must remount.
+ */
+import { type UserScrollport } from '../cursor/scroll-ancestors';
+export interface ScrollHostDeps {
+    /** A getter, never a value: the root binds after construction. */
+    get editorEl(): HTMLElement | undefined;
+    /** Set once: reading it live inside windowing's derived would make the mode a
+     *  dependency of the hottest path. */
+    hostScroll: boolean;
+}
+export interface ScrollHostResolution {
+    /** The root in self mode, the nearest user-scrollable ancestor in host mode. Null only
+     *  before the root mounts. */
+    getScrollHost(): UserScrollport | null;
+    /** Every clipping ancestor; their overlap with the viewport is where a block scrolled into
+     *  view must end up. Empty in self mode. */
+    getClipBounds(): HTMLElement[];
+}
+export declare function createScrollHostResolution(deps: ScrollHostDeps): ScrollHostResolution;

package/dist/components/editor-root-scroll-host.js

@@ -0,0 +1,34 @@
+/**
+ * Resolves the one scroller the scroll mode picks, so nothing downstream branches on the mode:
+ * what a drag autoscrolls, what bounds the visible region, what the scroll owner opens as its
+ * port. Host-mode answers are cached on first read, so a host that swaps its scroller must remount.
+ */
+import { clippingAncestors, userScrollportFor } from '../cursor/scroll-ancestors';
+export function createScrollHostResolution(deps) {
+    let resolvedScrollHost = null;
+    let resolvedClipBounds = [];
+    let hostResolved = false;
+    function resolveHost() {
+        const root = deps.editorEl;
+        if (hostResolved || !root)
+            return;
+        resolvedScrollHost = userScrollportFor(root);
+        resolvedClipBounds = clippingAncestors(root);
+        hostResolved = true;
+    }
+    function getScrollHost() {
+        if (!deps.hostScroll)
+            return deps.editorEl ?? null;
+        resolveHost();
+        return resolvedScrollHost;
+    }
+    return {
+        getScrollHost,
+        getClipBounds() {
+            if (!deps.hostScroll)
+                return [];
+            resolveHost();
+            return resolvedClipBounds;
+        }
+    };
+}

package/dist/components/editor-root-test-surface.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The e2e bridge's shape (`window.__test`, read through `routes/test/editor/test-probes.ts`).
+ * Frozen: every member name and signature is read by the e2e suite, so a change here is a
+ * change to hundreds of specs. Each member answers what no public method can.
+ */
+import type { BlockComponent } from '../block-component';
+import type { Document } from '../core/nodes';
+import type { HeightOracle } from '../cursor/height-oracle';
+import type { ListTree } from '../reactivity/list-tree';
+import type { OperationsLog } from '../debug/operations-log';
+import type { DecorationEngine } from '../decorations/decoration-state.svelte';
+import type { RefSlots } from '../reactivity/publish-ref.svelte';
+import type { GapCaretPosition } from '../selection/gap-caret';
+import type { GrammarView } from '../schema/block-openers';
+import type { UndoManager } from '../undo/types';
+export interface EditorTestSurface {
+    /** The live CST; read-only by contract, since a write bypasses the undo pipeline. */
+    getDocument(): Document;
+    /** The grammar this editor parses with, so a reload check reads the bytes as the editor does. */
+    getGrammar(): GrammarView;
+    /** The only place the `source` prop's reset can be observed; it lives in the root. */
+    getContentVersion(): number;
+    getBlockComponent(path: number[]): BlockComponent | null;
+    getUndoStack(): ReturnType<UndoManager['getStacks']>;
+    getOperationsLog(): OperationsLog;
+    /** The state, not the `data-cross-block` mirror: a deferred `$effect` writes the attribute,
+     *  and an intra-table rectangle keeps one path on both endpoints. */
+    isCrossBlockActive(): boolean;
+    /** The gap caret has no public selection shape and no paint, so arrival is observable
+     *  only here. */
+    getGapCaret(): GapCaretPosition | null;
+    /** The decoration engine, not the `addSource`-only registry: its per-path buckets are the
+     *  only place a stale bucket shows, since jsdom measures every range at zero width. */
+    getDecorationEngine(): DecorationEngine;
+    /** Root-constructed and handed down through context, so its lifetime against a document
+     *  swap cannot be checked headlessly. */
+    getHeightOracle(): HeightOracle;
+    /** The top-level blocks' ids, which no node carries; a container's are its `childIds`. */
+    getBlockIds(): readonly string[];
+    /** Every id the height estimator holds a measurement for. */
+    getMeasuredIds(): string[];
+    /** Every mounted block list, whose height tables no public method reads. */
+    getListTree(): ListTree;
+    /** The one value a block list rebuilds off when no id moved. */
+    getWidthVersion(): number;
+    /** Creates the stale child-ref entry an unmounted block's cleanup can leave behind. */
+    setBlockRefSlot: RefSlots<BlockComponent>['set'];
+}

package/dist/components/editor-root-test-surface.js

@@ -0,0 +1,6 @@
+/**
+ * The e2e bridge's shape (`window.__test`, read through `routes/test/editor/test-probes.ts`).
+ * Frozen: every member name and signature is read by the e2e suite, so a change here is a
+ * change to hundreds of specs. Each member answers what no public method can.
+ */
+export {};

package/dist/components/image/ImageOverlayHost.svelte

@@ -1,77 +1,86 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
-	import type { Document } from '../../core/nodes';
-	import type { PresentationMode } from '../../presentation-mode';
-	import type { UndoController } from '../../editor-actions/deps';
-	import type { GrammarView } from '../../schema/block-openers';
+	import { getContext, untrack } from 'svelte';
+	import type { Document, ImageFields } from '../../core/nodes';
+	import type { InlineRangeCommit } from '../../editor-actions/inline-range-commit';
 	import { EDITOR_DOC_KEY, type EditorDoc } from '../../editor-keys';
 	import type { EditorEvents } from '../../editor-events';
 	import { installWidgetRangePainter } from '../../selection/widget-range-paint';
 	import ImageProperties from './ImageProperties.svelte';
 	import ImageResizeHandles from './ImageResizeHandles.svelte';
 	import { createImageEditCommitter } from './image-edit-commit';
-	import { imageFieldsFromInline } from './image-source-bytes';
-	import {
-		IMAGE_CHROME_SELECTOR,
-		type WidgetSelectionState
-	} from './widget-selection-state.svelte';
+	import { imageFieldsFromInline } from '../../core/inline/image-source-bytes';
+	import type { MenuPresence } from '../menu/menu-presence.svelte';
+	import { pressLeavesImage, type WidgetSelectionState } from './widget-selection-state.svelte';
+	import type { WidgetTarget } from '../../selection/primitives';
 
 	// Mounted unconditionally by Editor: the effects below must observe
 	// widget-selection changes, so the selected-widget {#if} lives here.
 	let {
 		widgetSelection,
-		controller,
+		inlineRange,
 		events,
 		getDoc,
+		getContentVersion,
 		getEditorEl,
 		getSelectionIsCustomRendered,
-		getPresentationMode,
-		grammar,
-		lifetime
+		lifetime,
+		menuPresence
 	}: {
 		widgetSelection: WidgetSelectionState;
-		controller: UndoController;
+		inlineRange: InlineRangeCommit;
 		events: EditorEvents;
 		getDoc: () => Document;
+		getContentVersion: () => number;
 		getEditorEl: () => HTMLElement | null;
 		getSelectionIsCustomRendered: () => boolean;
-		getPresentationMode: () => PresentationMode;
-		grammar?: GrammarView;
+		menuPresence: MenuPresence;
 		lifetime: AbortSignal;
 	} = $props();
 
 	let imageOverlayEl: HTMLDivElement | undefined = $state();
-	// The crop session owns the pointer over the image; the resize grip steps aside meanwhile.
+	// While cropping, the pointer over the image belongs to the crop; the resize handle yields.
 	let cropping = $state(false);
 
-	const linkRef = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.linkRef;
+	const { reading } = getContext<EditorDoc>(EDITOR_DOC_KEY);
 
-	// Props are stable for the editor's lifetime, so capturing once is deliberate —
-	// reactive values already cross as getters.
+	// Captured once: props are stable for the editor's lifetime, and reactive ones are getters.
 	// svelte-ignore state_referenced_locally
 	const imageEdit = createImageEditCommitter({
 		getDoc,
 		getEditorEl,
 		widgetSelection,
-		controller,
+		inlineRange,
 		events,
-		linkRef,
-		grammar
+		reading
 	});
 
 	$effect(() => {
 		const root = getEditorEl();
 		if (!root) return;
 		const handlePointerDown = (e: PointerEvent) => {
-			const target = e.target as Element | null;
-			if (target?.closest(IMAGE_CHROME_SELECTOR)) return;
-			widgetSelection.clear();
+			if (pressLeavesImage(e, root)) widgetSelection.clear();
 		};
 		root.addEventListener('pointerdown', handlePointerDown);
 		return () => root.removeEventListener('pointerdown', handlePointerDown);
 	});
 
 	$effect(() => imageEdit.attachWidgetSelectListener());
+	// On every document change: an image whose bytes moved follows them, and one whose bytes are
+	// gone stops being selected.
+	$effect(() => {
+		getContentVersion();
+		untrack(imageEdit.clearStaleSelection);
+	});
+
+	// The popover's effects and cleanup can run once more after the selection or its image is
+	// gone, before the branch that mounts it tears down, so they read the last live pair.
+	let lastPopover: { target: WidgetTarget; fields: ImageFields } | null = null;
+	const popover = $derived.by(() => {
+		const target = widgetSelection.getSelected();
+		const image = imageEdit.getSelectedImageFields()?.image;
+		if (target && image) lastPopover = { target, fields: imageFieldsFromInline(image) };
+		return lastPopover;
+	});
 
 	$effect(() => {
 		widgetSelection.getSelected(); // re-run + reposition when the selected widget changes
@@ -90,12 +99,11 @@
 	});
 </script>
 
-<!-- Selecting an image stays available in reading mode; the overlay is edit
-	affordances, so reading mode never mounts it. -->
-{#if widgetSelection.getSelected() && getPresentationMode() !== 'reading'}
-	{@const sel = widgetSelection.getSelected()!}
+<!-- Selecting an image stays available in reading mode; the overlay is a set of
+	editing controls, so reading mode never mounts it. -->
+{#if widgetSelection.getSelected() && reading.mode() !== 'reading'}
 	{@const ctx = imageEdit.getSelectedImageFields()}
-	{#if ctx?.widgetEl}
+	{#if ctx?.widgetEl && popover}
 		<div bind:this={imageOverlayEl} class="md-image-overlay" data-image-overlay>
 			{#if !cropping}
 				<ImageResizeHandles
@@ -105,16 +113,17 @@
 					onCommit={imageEdit.commitImageResize}
 				/>
 			{/if}
-			{#key `${sel.paragraphPath.join(',')}@${sel.sourceStart}`}
+			{#key `${popover.target.paragraphPath.join(',')}@${popover.target.sourceStart}`}
 				<ImageProperties
-					target={sel}
-					fields={imageFieldsFromInline(ctx.image)}
+					target={popover.target}
+					fields={popover.fields}
 					getWidgetEl={() => imageEdit.getSelectedImageFields()?.widgetEl ?? null}
 					buildBytes={imageEdit.buildEditBytes}
 					onCommit={imageEdit.commitImageEdit}
 					onRemove={imageEdit.removeImage}
 					onDismiss={imageEdit.dismissImagePopover}
 					maxFrameWidth={imageEdit.getEditorContentWidth}
+					{menuPresence}
 					bind:cropping
 				/>
 			{/key}

package/dist/components/image/ImageOverlayHost.svelte.d.ts

@@ -1,18 +1,17 @@
 import type { Document } from '../../core/nodes';
-import type { PresentationMode } from '../../presentation-mode';
-import type { UndoController } from '../../editor-actions/deps';
-import type { GrammarView } from '../../schema/block-openers';
+import type { InlineRangeCommit } from '../../editor-actions/inline-range-commit';
 import type { EditorEvents } from '../../editor-events';
+import type { MenuPresence } from '../menu/menu-presence.svelte';
 import { type WidgetSelectionState } from './widget-selection-state.svelte';
 type $$ComponentProps = {
     widgetSelection: WidgetSelectionState;
-    controller: UndoController;
+    inlineRange: InlineRangeCommit;
     events: EditorEvents;
     getDoc: () => Document;
+    getContentVersion: () => number;
     getEditorEl: () => HTMLElement | null;
     getSelectionIsCustomRendered: () => boolean;
-    getPresentationMode: () => PresentationMode;
-    grammar?: GrammarView;
+    menuPresence: MenuPresence;
     lifetime: AbortSignal;
 };
 declare const ImageOverlayHost: import("svelte").Component<$$ComponentProps, {}, "">;