@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/page-editor-chrome/PageEditorChrome.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { useEditContext } from "../client/editContext";
-import { InlineEditor } from "./InlineEditor";
 import { FieldActionsIndicators } from "./FieldActionIndicators";
 import { PlaceholderDropZones } from "./PlaceholderDropZones";
+import { DragInsertionOverlay } from "./DragInsertionOverlay";
 import { PictureEditorOverlay } from "./PictureEditorOverlay";
-import { useEffect, useState } from "react";
 import { LockedFieldIndicator } from "./LockedFieldIndicator";
 import { FrameMenus } from "./FrameMenus";
 import { FieldEditedIndicators } from "./FieldEditedIndicators";
@@ -12,56 +12,149 @@ import { CommentHighlightings } from "./CommentHighlightings";
 import { SuggestionHighlightings } from "./SuggestionHighlightings";
 import { VersionDiffHighlightings } from "./VersionDiffHighlightings";
 import { useSlotContext } from "../views/editorSlotContext";
-export function PageEditorChrome({ iframe, compareView, pageViewContext, }) {
+import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
+import { BridgeInlineFormatOverlay } from "./BridgeInlineFormatOverlay";
+import { getAllPlaceholders, getComponentById } from "../componentTreeHelper";
+import { measureBridgeComponentRect, measureElementRect, rectEquals, } from "./overlay/geometry";
+import { ComponentOperationBubble } from "./ComponentOperationBubble";
+import { layoutAwareIndex, measureBridgePlaceholderZones, } from "./overlay/placeholderZones";
+// Keeps the "+" dots and the drag insertion line in sync: DragInsertionOverlay
+// publishes the gap it is currently targeting, and PlaceholderDropZones lights
+// up the matching dot. The state lives here (not in PageEditorChrome) so a gap
+// change only re-renders these two siblings, not the whole chrome.
+function PlaceholderInsertionLayer({ pageViewContext, }) {
+    const [activeTargetKey, setActiveTargetKey] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { size: "large", pageViewContext: pageViewContext, activeTargetKey: activeTargetKey }), _jsx(DragInsertionOverlay, { pageViewContext: pageViewContext, onActiveTargetChange: setActiveTargetKey })] }));
+}
+export function PageEditorChrome(props) {
     const editContext = useEditContext();
+    const hasBridgeChromeData = props.pageViewContext.bridgeReady ||
+        !!props.pageViewContext.bridgeGeometry ||
+        !!props.pageViewContext.bridgeStructure;
+    if (!editContext || !hasBridgeChromeData) {
+        return null;
+    }
+    return _jsx(PageEditorChromeContent, { ...props, editContext: editContext });
+}
+function PageEditorChromeContent({ compareView, pageViewContext, editContext, onBridgeRichTextCommand, }) {
     const slotContext = useSlotContext();
-    const [insertingStyle, setInsertingStyle] = useState();
-    if (!editContext || !iframe?.contentDocument)
+    return (_jsxs(_Fragment, { children: [_jsx(FrameMenus, { pageViewContext: pageViewContext, compareView: compareView }), _jsx(BridgeInlineFormatOverlay, { onCommand: onBridgeRichTextCommand, pageViewContext: pageViewContext }), editContext.mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderInsertionLayer, { pageViewContext: pageViewContext }), slotContext?.isActive && (_jsxs(_Fragment, { children: [_jsx(InsertingIndicator, { pageViewContext: pageViewContext }), _jsx(RemovingIndicators, { pageViewContext: pageViewContext })] }))] })), editContext.showComments && (_jsx(CommentHighlightings, { pageViewContext: pageViewContext })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { pageViewContext: pageViewContext })), _jsx(LockedFieldIndicator, { pageViewContext: pageViewContext }), editContext.mode === "edit" && (_jsx(PictureEditorOverlay, { pageViewContext: pageViewContext })), editContext.showVersionDiffHighlighting && (_jsx(VersionDiffHighlightings, { pageViewContext: pageViewContext })), _jsx(FieldActionsIndicators, { pageViewContext: pageViewContext }), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext })] }));
+}
+function InsertingIndicator({ pageViewContext, }) {
+    const editContext = useEditContext();
+    const inserting = editContext?.inserting;
+    const position = useOverlayMeasurement((metrics) => {
+        if (!inserting)
+            return null;
+        if (inserting.position) {
+            return clampInsertionPosition(inserting.position, metrics);
+        }
+        if (inserting.positionElement) {
+            const rect = measureElementRect(inserting.positionElement, metrics);
+            if (!rect)
+                return null;
+            let x = rect.x + rect.width / 2;
+            let y = rect.y;
+            if (inserting.positionAnchor === "bottom") {
+                y = rect.y + rect.height;
+            }
+            else if (inserting.positionAnchor === "left") {
+                x = rect.x;
+                y = rect.y + rect.height / 2;
+            }
+            else if (inserting.positionAnchor === "right") {
+                x = rect.x + rect.width;
+                y = rect.y + rect.height / 2;
+            }
+            return clampInsertionPosition({ x, y }, metrics);
+        }
+        if (!inserting.placeholderKey || typeof inserting.index !== "number") {
+            return null;
+        }
+        const placeholder = pageViewContext.page
+            ? getAllPlaceholders(pageViewContext.page).find((candidate) => candidate.key === inserting.placeholderKey)
+            : undefined;
+        if (!placeholder || !pageViewContext.bridgeGeometry)
+            return null;
+        const zones = measureBridgePlaceholderZones(placeholder, pageViewContext.bridgeGeometry, metrics);
+        const zone = zones.find((candidate) => candidate.index === inserting.index) ??
+            zones.find((candidate) => layoutAwareIndex(placeholder.components, candidate.index) ===
+                inserting.index);
+        return zone ? clampInsertionPosition(zone.position, metrics) : null;
+    }, [inserting, pageViewContext.bridgeGeometry, pageViewContext.page], {
+        initialValue: null,
+        equals: rectEquals,
+        interests: ["viewport", "layout", "adornment-data"],
+    });
+    if (!position)
         return null;
-    useEffect(() => {
-        if (!editContext.inserting)
-            setInsertingStyle(undefined);
-        let insertingPosition;
-        const insertingRect = editContext.inserting
-            ? editContext.inserting.positionElement.getBoundingClientRect()
-            : null;
-        if (insertingRect) {
-            if (editContext.inserting?.positionAnchor === "top")
-                insertingPosition = {
-                    y: insertingRect.y,
-                    x: insertingRect.x + insertingRect.width / 2,
-                };
-            if (editContext.inserting?.positionAnchor === "bottom")
-                insertingPosition = {
-                    y: insertingRect.y + insertingRect.height,
-                    x: insertingRect.x + insertingRect.width / 2,
-                };
-            if (editContext.inserting?.positionAnchor === "left")
-                insertingPosition = {
-                    y: insertingRect.y + insertingRect.height / 2,
-                    x: insertingRect.x,
-                };
-            if (editContext.inserting?.positionAnchor === "right")
-                insertingPosition = {
-                    y: insertingRect.y + insertingRect.height / 2,
-                    x: insertingRect.x + insertingRect.width,
-                };
+    return (_jsx(ComponentOperationBubble, { color: inserting?.color ?? "default", testId: "component-inserting-indicator", style: { top: position.y - 16, left: position.x - 16, zIndex: 1000 } }));
+}
+function RemovingIndicators({ pageViewContext, }) {
+    const editContext = useEditContext();
+    const removingComponentIds = editContext?.removingComponentIds ?? [];
+    const positions = useOverlayMeasurement((metrics) => {
+        if (removingComponentIds.length === 0 ||
+            !pageViewContext.page ||
+            !pageViewContext.bridgeGeometry) {
+            return [];
         }
-        const getInsertingStyle = () => {
-            if (!insertingPosition)
-                return;
-            const scale = pageViewContext.zoom;
-            const x = Math.min(pageViewContext.viewport.width - 20, Math.max(20, insertingPosition.x * (scale || 1)));
-            const y = Math.min(pageViewContext.viewport.height - 20, Math.max(20, insertingPosition.y * (scale || 1)));
+        return removingComponentIds
+            .map((componentId) => {
+            const component = getComponentById(componentId, pageViewContext.page);
+            if (!component)
+                return null;
+            const measurement = measureBridgeComponentRect(pageViewContext.bridgeGeometry, component, metrics);
+            if (!measurement?.rect)
+                return null;
             return {
-                top: y - 16 + "px",
-                left: x - 16 + "px",
-                zIndex: 1000,
+                componentId,
+                position: {
+                    x: measurement.rect.x + measurement.rect.width / 2,
+                    y: measurement.rect.y + measurement.rect.height / 2,
+                },
             };
-        };
-        const insertingStyle = getInsertingStyle();
-        setInsertingStyle(insertingStyle);
-    }, [editContext.inserting, pageViewContext.viewport]);
-    return (_jsxs(_Fragment, { children: [_jsx(FrameMenus, { pageViewContext: pageViewContext, compareView: compareView }), _jsx(InlineEditor, { pageViewContext: pageViewContext, compareView: compareView }), _jsx(LockedFieldIndicator, { iframe: pageViewContext?.editorIframe }), _jsx(FieldActionsIndicators, { pageViewContext: pageViewContext }), editContext.showComments && (_jsx(CommentHighlightings, { iframe: pageViewContext?.editorIframe, scale: 1 })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: pageViewContext?.editorIframe, scale: 1 })), editContext.showVersionDiffHighlighting && !compareView && (_jsx(VersionDiffHighlightings, { iframe: pageViewContext?.editorIframe, scale: 1, pageViewContext: pageViewContext })), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext }), editContext.mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { iframe: pageViewContext?.editorIframe, size: "large", pageViewContext: pageViewContext }), _jsx(PictureEditorOverlay, { pageViewContext: pageViewContext }), insertingStyle && slotContext?.isActive && (_jsxs("div", { className: "absolute flex h-8 w-8", style: insertingStyle, children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" }), _jsx("span", { className: "relative inline-flex h-8 w-8 rounded-full bg-sky-500" })] }))] }))] }));
+        })
+            .filter((position) => position !== null);
+    }, [
+        removingComponentIds,
+        pageViewContext.bridgeGeometry,
+        pageViewContext.page,
+    ], {
+        initialValue: [],
+        equals: componentOperationBubblePositionsEqual,
+        interests: ["viewport", "layout", "adornment-data"],
+    });
+    if (positions.length === 0)
+        return null;
+    return (_jsx(_Fragment, { children: positions.map((position) => (_jsx(ComponentOperationBubble, { testId: "component-removing-indicator", style: {
+                top: position.position.y - 16,
+                left: position.position.x - 16,
+                zIndex: 1000,
+            } }, position.componentId))) }));
+}
+function componentOperationBubblePositionsEqual(previous, next) {
+    if (previous.length !== next.length)
+        return false;
+    for (let i = 0; i < previous.length; i++) {
+        const previousPosition = previous[i];
+        const nextPosition = next[i];
+        if (previousPosition.componentId !== nextPosition.componentId)
+            return false;
+        if (!rectEquals({ ...previousPosition.position, width: 0, height: 0 }, { ...nextPosition.position, width: 0, height: 0 })) {
+            return false;
+        }
+    }
+    return true;
+}
+function clampInsertionPosition(position, metrics) {
+    const maxX = Math.max(20, metrics.scrollWidth * metrics.visualScale - 20);
+    const maxY = Math.max(20, metrics.scrollHeight * metrics.visualScale - 20);
+    return {
+        x: Math.min(maxX, Math.max(20, position.x)),
+        y: Math.min(maxY, Math.max(20, position.y)),
+        width: 0,
+        height: 0,
+    };
 }
 //# sourceMappingURL=PageEditorChrome.js.map

package/dist/editor/page-editor-chrome/PageEditorChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageEditorChrome.js","sourceRoot":"","sources":["../../../src/editor/page-editor-chrome/PageEditorChrome.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageEditorChrome.js","sourceRoot":"","sources":["../../../src/editor/page-editor-chrome/PageEditorChrome.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-editor-chrome/PictureEditorOverlay.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { PictureEditor } from "../PictureEditor";
+import { ImageEditor } from "../ImageEditor";
 import { getComponentById } from "../componentTreeHelper";
 import { showComponentContextMenu } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
+import { measureBridgeFieldRect, rectEquals, } from "./overlay/geometry";
+import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
 export function PictureEditorOverlay({ pageViewContext, }) {
     const editContext = useEditContext();
     const iframe = pageViewContext?.editorIframe;
     const [field, setField] = useState();
     const [variantName, setVariantName] = useState();
-    const [element, setElement] = useState();
-    const [bounds, setBounds] = useState(null);
-    const activeElementRef = useRef(undefined);
+    const [bridgeTarget, setBridgeTarget] = useState();
+    const activeBridgeTargetRef = useRef(undefined);
     const editContextRef = useRef(editContext);
     // Track if a dialog is open (e.g., crop dialog) to prevent overlay from hiding
     const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -23,80 +25,85 @@ export function PictureEditorOverlay({ pageViewContext, }) {
     useEffect(() => {
         editContextRef.current = editContext;
     }, [editContext]);
-    const onMouseEnter = useCallback((e) => {
+    useEffect(() => {
+        activeBridgeTargetRef.current = bridgeTarget;
+    }, [bridgeTarget]);
+    useEffect(() => {
         if (isDialogOpenRef.current)
             return;
-        if (!e.target)
-            return;
-        if (!("closest" in e.target))
+        const interaction = pageViewContext?.bridgeInteraction;
+        if (!interaction || interaction.kind !== "hover")
             return;
-        const target = e.target;
-        const pictureElement = target.closest("picture") || target.closest("img");
-        setElement(pictureElement || undefined);
-    }, [iframe, editContext]);
-    useEffect(() => {
-        activeElementRef.current = element || undefined;
-    }, [element]);
-    // Update bounds when element changes or iframe scrolls
-    useEffect(() => {
-        if (!element || !iframe) {
-            setBounds(null);
+        const target = getBridgePictureTarget(interaction, pageViewContext?.pageItemDescriptor ||
+            editContextRef.current?.currentItemDescriptor);
+        if (!target) {
+            setBridgeTarget(undefined);
+            setField(undefined);
+            setVariantName(undefined);
             return;
         }
-        const updateBounds = () => {
-            if (element) {
-                setBounds(element.getBoundingClientRect());
-            }
-        };
-        updateBounds();
-        const scrollContainer = iframe.contentDocument?.scrollingElement || iframe.contentDocument?.body;
-        const handleScroll = () => {
-            updateBounds();
-        };
-        scrollContainer?.addEventListener("scroll", handleScroll);
-        iframe.contentWindow?.addEventListener("scroll", handleScroll);
-        return () => {
-            scrollContainer?.removeEventListener("scroll", handleScroll);
-            iframe.contentWindow?.removeEventListener("scroll", handleScroll);
-        };
-    }, [element, iframe]);
+        setBridgeTarget((previous) => bridgePictureTargetsEqual(previous, target) ? previous : target);
+    }, [
+        pageViewContext?.bridgeInteraction,
+        pageViewContext?.pageItemDescriptor,
+    ]);
+    const bounds = useOverlayMeasurement((metrics) => {
+        if (!bridgeTarget || !pageViewContext)
+            return null;
+        return measureBridgeFieldRect(pageViewContext.bridgeGeometry, pageViewContext.bridgeStructure, {
+            fieldId: bridgeTarget.fieldId,
+            item: bridgeTarget.item,
+        }, metrics);
+    }, [
+        bridgeTarget,
+        pageViewContext?.bridgeGeometry,
+        pageViewContext?.bridgeStructure,
+    ], {
+        initialValue: null,
+        equals: rectEquals,
+        interests: ["viewport", "layout", "text", "adornment-data"],
+    });
     useEffect(() => {
         const loadField = async () => {
-            if (element) {
-                const itemId = element.getAttribute("data-itemid");
-                const language = element.getAttribute("data-language");
-                const version = element.getAttribute("data-version");
-                const fieldId = element.getAttribute("data-fieldid");
-                if (!itemId ||
-                    !language ||
-                    !version ||
-                    !fieldId ||
-                    !pageViewContext?.page ||
-                    !iframe?.contentWindow)
-                    return;
-                const component = getComponentById(itemId, pageViewContext.page);
-                if (component == null)
-                    return;
-                // Guard: if layout components are hidden, do not show picture editor overlay for layout components
-                if (editContextRef.current?.showLayoutComponents === false &&
-                    component.layoutId) {
-                    setField(undefined);
-                    setVariantName(undefined);
-                    setElement(undefined);
-                    return;
+            if (bridgeTarget) {
+                if (pageViewContext?.page &&
+                    editContextRef.current?.showLayoutComponents === false &&
+                    bridgeTarget.componentId) {
+                    const component = getComponentById(bridgeTarget.componentId, pageViewContext.page);
+                    if (component?.layoutId) {
+                        setField(undefined);
+                        setVariantName(undefined);
+                        setBridgeTarget(undefined);
+                        return;
+                    }
                 }
-                const item = await editContext.itemsRepository.getItem(component.datasourceItem);
-                const pictureField = item?.fields.find((f) => f.id === fieldId);
-                if (!pictureField)
-                    return;
-                setField(pictureField);
+                await loadMediaField(bridgeTarget.fieldId, bridgeTarget.item, bridgeTarget.variantName);
             }
             else {
                 setField(undefined);
+                setVariantName(undefined);
+            }
+        };
+        const loadMediaField = async (fieldId, itemDescriptor, variantHint) => {
+            const item = await editContextRef.current?.itemsRepository.getItem(itemDescriptor);
+            const mediaField = item?.fields.find((f) => f.id === fieldId);
+            if (!mediaField || !isEditableMediaField(mediaField)) {
+                setField(undefined);
+                setVariantName(undefined);
+                return;
+            }
+            setField(mediaField);
+            if (mediaField.type === "picture") {
+                const pictureField = mediaField;
+                setVariantName(variantHint ||
+                    pictureField.value?.variants?.find((variant) => variant.name)?.name);
+            }
+            else {
+                setVariantName(undefined);
             }
         };
         loadField();
-    }, [element, pageViewContext?.page]);
+    }, [bridgeTarget, pageViewContext?.page]);
     // Hide the picture editor overlay when the pointer leaves the iframe area
     // or when interacting elsewhere in the app. This prevents the buttons from
     // staying visible after rapidly exiting the iframe or switching pages.
@@ -104,17 +111,17 @@ export function PictureEditorOverlay({ pageViewContext, }) {
         if (!iframe)
             return;
         const hideOverlay = () => {
-            if (!activeElementRef.current)
+            if (!activeBridgeTargetRef.current)
                 return;
             // Don't hide if a dialog or menu is open
             if (isDialogOpenRef.current)
                 return;
-            setElement(undefined);
+            setBridgeTarget(undefined);
             setField(undefined);
             setVariantName(undefined);
         };
         const handlePointerEvent = (event) => {
-            if (!activeElementRef.current)
+            if (!activeBridgeTargetRef.current)
                 return;
             // Don't hide if a dialog (e.g., crop dialog) is open
             if (isDialogOpenRef.current)
@@ -140,41 +147,9 @@ export function PictureEditorOverlay({ pageViewContext, }) {
             window.removeEventListener("blur", hideOverlay);
         };
     }, [iframe]);
-    useEffect(() => {
-        if (!element || !iframe?.contentWindow)
-            return;
-        const sourceELement = getCurrentPictureSource(element, iframe.contentWindow);
-        if (sourceELement) {
-            const variantName = sourceELement.getAttribute("data-variant");
-            if (variantName) {
-                setVariantName(variantName);
-            }
-        }
-    }, [pageViewContext?.viewport, element]);
-    const handleLoad = useCallback(() => {
-        if (iframe?.contentDocument) {
-            iframe.contentDocument.addEventListener("mouseenter", onMouseEnter, true);
-        }
-    }, [iframe, onMouseEnter]);
-    useEffect(() => {
-        if (iframe) {
-            // If the iframe is already loaded, attach the listener immediately
-            if (iframe.contentDocument?.readyState === "complete" ||
-                iframe.contentDocument?.readyState === "interactive") {
-                handleLoad();
-            }
-            iframe.addEventListener("load", handleLoad);
-            return () => {
-                if (iframe?.contentDocument) {
-                    iframe?.contentDocument.removeEventListener("mouseenter", onMouseEnter, true);
-                }
-                if (iframe) {
-                    iframe.removeEventListener("load", handleLoad);
-                }
-            };
-        }
-    }, [iframe, editContext?.refreshCompletedFlag, handleLoad]);
-    if (!field || !variantName || !element || !bounds)
+    if (!field || !bounds)
+        return null;
+    if (field.type === "picture" && !variantName)
         return null;
     const style = {
         left: bounds.x + "px",
@@ -182,52 +157,97 @@ export function PictureEditorOverlay({ pageViewContext, }) {
         width: bounds.width + "px",
         height: bounds.height + "px",
     };
-    return (_jsx(PictureEditor, { field: field, variantName: variantName, style: style, forwardScrollevents: true, isPageEditor: true, onDialogOpenChange: setIsDialogOpen, onContextMenu: async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!pageViewContext?.page || !editContext)
-                return;
-            // Focus the picture field so Add Comment associates with it
-            try {
-                await editContext.setFocusedField(field.descriptor, false);
-            }
-            catch { }
-            // Determine target components: prefer current selection, fallback to hovered element's component
-            const selectedComponents = (editContext.selection || [])
-                .map((id) => getComponentById(id, pageViewContext.page))
-                .filter((x) => x);
-            const targetComponents = selectedComponents.length
-                ? selectedComponents
-                : (() => {
-                    const itemId = element?.getAttribute("data-itemid");
-                    if (!itemId)
-                        return [];
-                    const comp = getComponentById(itemId, pageViewContext.page);
-                    return comp ? [comp] : [];
-                })();
-            if (editContext.showLayoutComponents === false &&
-                targetComponents.some((c) => c.layoutId)) {
-                return;
-            }
-            const fieldButtons = await loadFieldButtons(field.descriptor);
-            const showMenu = await showComponentContextMenu(targetComponents, editContext, field.descriptor, fieldButtons);
-            if (showMenu)
-                showMenu(e);
-        } }));
-}
-function getCurrentPictureSource(pictureElement, iframeWindow) {
-    if (pictureElement.tagName === "IMG")
-        return pictureElement;
-    const sources = pictureElement.querySelectorAll("source");
-    let currentSrc = null;
-    sources.forEach((source) => {
-        const media = source.getAttribute("media");
-        if (!media)
+    const forwardWheelToBridge = (e) => {
+        return (pageViewContext?.requestBridgeScrollBy?.({
+            x: e.deltaX,
+            y: e.deltaY,
+            behavior: "instant",
+        }) ?? false);
+    };
+    const handleContextMenu = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!pageViewContext?.page || !editContext)
             return;
-        if (media && iframeWindow.matchMedia(media).matches) {
-            currentSrc = source;
+        try {
+            await editContext.setFocusedField(field.descriptor, false);
         }
-    });
-    return currentSrc || pictureElement.querySelector("img") || null;
+        catch { }
+        const selectedComponents = (editContext.selection || [])
+            .map((id) => getComponentById(id, pageViewContext.page))
+            .filter((x) => x);
+        const targetComponents = selectedComponents.length
+            ? selectedComponents
+            : (() => {
+                const targetId = bridgeTarget?.componentId ||
+                    field.descriptor.item.id;
+                const comp = getComponentById(targetId, pageViewContext.page);
+                return comp ? [comp] : [];
+            })();
+        if (editContext.showLayoutComponents === false &&
+            targetComponents.some((c) => c.layoutId)) {
+            return;
+        }
+        const fieldButtons = await loadFieldButtons(field.descriptor);
+        const showMenu = await showComponentContextMenu(targetComponents, editContext, field.descriptor, fieldButtons);
+        if (showMenu)
+            showMenu(e);
+    };
+    if (field.type === "image") {
+        return (_jsx(ImageEditor, { field: field, style: style, forwardScrollevents: true, isPageEditor: true, onDialogOpenChange: setIsDialogOpen, onContextMenu: handleContextMenu, onForwardWheel: forwardWheelToBridge }));
+    }
+    return (_jsx(PictureEditor, { field: field, variantName: variantName, style: style, forwardScrollevents: true, onForwardWheel: forwardWheelToBridge, isPageEditor: true, onDialogOpenChange: setIsDialogOpen, onContextMenu: handleContextMenu }));
+}
+function getBridgePictureTarget(interaction, fallbackItem) {
+    if (!interaction.media || !interaction.fieldId)
+        return undefined;
+    const item = bridgeItemToItemDescriptor(interaction.item, fallbackItem);
+    if (!item)
+        return undefined;
+    return {
+        elementKey: interaction.elementKey || interaction.media.elementKey,
+        fieldId: interaction.fieldId,
+        item,
+        variantName: interaction.media.variantName,
+        componentId: interaction.componentId,
+    };
+}
+function bridgeItemToItemDescriptor(item, fallbackItem) {
+    if (!item?.id)
+        return undefined;
+    const descriptor = {
+        id: item.id,
+        language: item.language || fallbackItem?.language || "en",
+        version: item.version ?? fallbackItem?.version ?? 0,
+    };
+    if (item.name)
+        descriptor.name = item.name;
+    if (item.displayName)
+        descriptor.displayName = item.displayName;
+    if (item.path)
+        descriptor.path = item.path;
+    if (item.database)
+        descriptor.database = item.database;
+    return descriptor;
+}
+function isEditableMediaField(field) {
+    return (!!field &&
+        typeof field === "object" &&
+        "type" in field &&
+        (field.type === "picture" ||
+            field.type === "image"));
+}
+function bridgePictureTargetsEqual(left, right) {
+    if (left === right)
+        return true;
+    if (!left || !right)
+        return false;
+    return (left.elementKey === right.elementKey &&
+        left.fieldId === right.fieldId &&
+        left.item.id === right.item.id &&
+        left.item.language === right.item.language &&
+        left.item.version === right.item.version &&
+        left.variantName === right.variantName &&
+        left.componentId === right.componentId);
 }
 //# sourceMappingURL=PictureEditorOverlay.js.map