@parhelia/core 0.1.12895 → 0.1.12901

package/dist/editor/page-viewer/PageViewerFrame.js

@@ -7,7 +7,7 @@ import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
 import { useBridgeInlineEditing, } from "../page-editor-chrome/useBridgeInlineEditing";
 import { getInlineAiAnchorFromBridgeToolbar, getVisibleBridgeToolbarRect, waitForVisibleBridgeToolbarRect, } from "../page-editor-chrome/bridgeInlineFormatToolbarLayout";
-import { IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, IframeOverlayProvider, } from "../page-editor-chrome/overlay/IframeOverlayProvider";
+import { IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, IframeOverlayProvider, } from "../page-editor-chrome/overlay/IframeOverlayProvider";
 import { DEVICE_CHANGE_EVENT, useViewportChangeSignal, } from "./pageViewContext";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
@@ -22,6 +22,7 @@ import { FieldActionsOverlay, } from "../FieldActionsOverlay";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
+import { FullscreenControls } from "../client/ui/FullscreenControls";
 import { toSitecoreDate } from "../utils/sitecoreDate";
 import { BridgeClient } from "../bridge/BridgeClient";
 import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
@@ -33,6 +34,35 @@ const ZOOM_TRANSITION_MS = 300;
 const BRIDGE_INLINE_EDIT_RELEASE_EVENT = "parhelia:bridge-inline-edit-release";
 const INLINE_AI_CLOSE_EVENT = "inline-ai-close";
 const BRIDGE_INLINE_LINK_OPEN_EVENT = "bridge-inline-link-open";
+const SCROLL_INTO_VIEW_BRIDGE_SOURCE = "scroll-into-view";
+// Suggestions-mode cursor: a text I-beam (the click insertion point) badged with
+// the lucide PenLine icon from the "Suggestions mode" toolbar button. A white
+// halo keeps it visible on any page background; the hotspot is the I-beam centre.
+const SUGGESTIONS_CURSOR_PEN_PATHS = '<path d="M12 20h9"/>' +
+    '<path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/>';
+const SUGGESTIONS_CURSOR_BEAM_PATHS = '<path d="M5 5.5V22.5"/><path d="M2.5 5.5H7.5"/><path d="M2.5 22.5H7.5"/>';
+const SUGGESTIONS_CURSOR_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke-linecap="round" stroke-linejoin="round">' +
+    // White halo, drawn first so the dark ink sits on top of it.
+    '<g stroke="#ffffff">' +
+    '<g stroke-width="4">' +
+    SUGGESTIONS_CURSOR_BEAM_PATHS +
+    "</g>" +
+    '<g transform="translate(11 -1.5) scale(0.7)" stroke-width="5">' +
+    SUGGESTIONS_CURSOR_PEN_PATHS +
+    "</g>" +
+    "</g>" +
+    // Dark ink: the I-beam (text insertion point) plus the pen badge.
+    '<g stroke="#121212">' +
+    '<g stroke-width="2">' +
+    SUGGESTIONS_CURSOR_BEAM_PATHS +
+    "</g>" +
+    '<g transform="translate(11 -1.5) scale(0.7)" stroke-width="2.6">' +
+    SUGGESTIONS_CURSOR_PEN_PATHS +
+    "</g>" +
+    "</g>" +
+    "</svg>";
+const SUGGESTIONS_CURSOR_IMAGE = "data:image/svg+xml," + encodeURIComponent(SUGGESTIONS_CURSOR_SVG);
+const SUGGESTIONS_CURSOR_VALUE = `url("${SUGGESTIONS_CURSOR_IMAGE}") 5 14, default`;
 function dispatchBridgeOverlayScroll(iframe, scroll, scrollScale = 1) {
     iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, {
         detail: {
@@ -117,6 +147,16 @@ function findBridgeFieldDocumentBounds(geometry, descriptor) {
         ? bridgeTargetToDocumentBounds(geometry, target)
         : undefined;
 }
+function findBridgeTextRangeDocumentBounds(geometry, key) {
+    if (!geometry || !key)
+        return undefined;
+    const bounds = geometry.targets
+        .filter((candidate) => candidate.kind === "textRange" &&
+        candidate.key === key &&
+        (candidate.rect.width > 0 || candidate.rect.height > 0))
+        .map((target) => bridgeTargetToDocumentBounds(geometry, target));
+    return unionDocumentBounds(bounds);
+}
 function findBridgeComponentDocumentBounds(geometry, componentId) {
     if (!geometry)
         return undefined;
@@ -130,6 +170,93 @@ function findBridgeComponentDocumentBounds(geometry, componentId) {
         ? bridgeTargetToDocumentBounds(geometry, target)
         : undefined;
 }
+function unionDocumentBounds(bounds) {
+    if (bounds.length === 0)
+        return undefined;
+    let left = Number.POSITIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    bounds.forEach((rect) => {
+        left = Math.min(left, rect.x);
+        top = Math.min(top, rect.y);
+        right = Math.max(right, rect.x + rect.width);
+        bottom = Math.max(bottom, rect.y + rect.height);
+    });
+    if (!Number.isFinite(left) || !Number.isFinite(top))
+        return undefined;
+    return {
+        x: left,
+        y: top,
+        width: Math.max(0, right - left),
+        height: Math.max(0, bottom - top),
+    };
+}
+function findScrollIntoViewDocumentBounds(geometry, target, options = {}) {
+    if (typeof target === "string") {
+        return findBridgeComponentDocumentBounds(geometry, target);
+    }
+    if (target.kind === "component") {
+        return findBridgeComponentDocumentBounds(geometry, target.componentId);
+    }
+    if (target.kind === "field") {
+        return (findBridgeFieldDocumentBounds(geometry, target.field) ??
+            (target.fallbackComponentId
+                ? findBridgeComponentDocumentBounds(geometry, target.fallbackComponentId)
+                : undefined));
+    }
+    const textRangeBounds = findBridgeTextRangeDocumentBounds(geometry, target.key);
+    if (textRangeBounds || !options.includeTextRangeFallback) {
+        return textRangeBounds;
+    }
+    return ((target.fallbackField
+        ? findBridgeFieldDocumentBounds(geometry, target.fallbackField)
+        : undefined) ??
+        (target.fallbackComponentId
+            ? findBridgeComponentDocumentBounds(geometry, target.fallbackComponentId)
+            : undefined));
+}
+function isTextRangeScrollTarget(target) {
+    return typeof target !== "string" && target.kind === "textRange";
+}
+function getScrollIntoViewSignature(target) {
+    if (typeof target === "string")
+        return `component:${target}`;
+    if (target.kind === "component")
+        return `component:${target.componentId}`;
+    if (target.kind === "field") {
+        return [
+            "field",
+            target.field.fieldId,
+            target.field.item.id,
+            target.field.item.language,
+            target.field.item.version,
+        ].join(":");
+    }
+    return [
+        "textRange",
+        target.key,
+        ...(target.textRanges || []).map((range) => [
+            range.key,
+            range.elementKey,
+            range.fieldId,
+            range.item?.id,
+            range.item?.language,
+            range.item?.version,
+            range.start,
+            range.end,
+        ].join(":")),
+    ].join("|");
+}
+function requestScrollTargetGeometry(pageViewContext, target) {
+    const textRanges = target.textRanges?.filter((range) => !!range);
+    if (!textRanges?.length)
+        return false;
+    return (pageViewContext.requestBridgeGeometry?.({
+        source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
+        textRanges,
+    }) ?? false);
+}
 function scrollBridgeBoundsIntoView(pageViewContext, bounds, currentScroll) {
     const geometry = pageViewContext.bridgeGeometry;
     if (!geometry)
@@ -380,6 +507,17 @@ function bridgeFieldMatchesChangedField(bridgeFieldId, changedFieldId, field) {
         bridgeIdsMatch(bridgeFieldId, field.name) ||
         bridgeIdsMatch(bridgeFieldId, field.displayName));
 }
+function findModifiedBridgeField({ modifiedFields, structureField, field, itemDescriptor, dirtyOnly, }) {
+    return modifiedFields?.find((candidate) => {
+        if (dirtyOnly && !candidate.isDirty)
+            return false;
+        if (!bridgeDescriptorMatchesItem(candidate.item, itemDescriptor)) {
+            return false;
+        }
+        return (bridgeIdsMatch(candidate.fieldId, structureField.fieldId) ||
+            fieldIdentifierMatches(field, candidate.fieldId));
+    });
+}
 function findBridgeFieldTargetAtPoint(geometry, clientX, clientY) {
     if (!geometry || typeof clientX !== "number" || typeof clientY !== "number") {
         return undefined;
@@ -448,12 +586,20 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const directOverlayScrollSyncRef = useRef(false);
     const pendingRefreshScrollRef = useRef(undefined);
     const suppressNextSelectionScrollRef = useRef(false);
+    // Timestamp (ms) until which selection auto-scroll is suppressed. Held open for
+    // the whole drag and a short window after, so the drop's re-selection doesn't
+    // jump the page (see the dragObject transition effect that drives it).
+    const suppressSelectionScrollUntilRef = useRef(0);
     // Tracks the selection we last evaluated for auto-scroll. The selection
     // effect also depends on focusedField, so it re-runs when a field blurs
     // (focusedField -> undefined) even though the selection itself did not
     // change. Without this guard that blur re-render would scroll the just
     // clicked component into view after the suppress flag was already consumed.
     const lastScrolledSelectionKeyRef = useRef("");
+    const scrollIntoViewRequestRef = useRef({
+        signature: "",
+        requestedTextRangeGeometry: false,
+    });
     const [showSpinner, setShowSpinner] = useState(false);
     const [iframeSrc, setIframeSrc] = useState();
     const [loadedIframeSrc, setLoadedIframeSrc] = useState();
@@ -1353,6 +1499,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                             editorOrigin: window.location.origin,
                             sessionId: editContextRef.current?.sessionId,
                             mode: editContextRef.current?.mode ?? "edit",
+                            suggestionsCursorActive: editContextRef.current?.mode === "suggestions" ||
+                                !!editContextRef.current?.showSuggestedEdits,
                             selectedComponentIds: editContextRef.current?.selection ?? [],
                             featureFlags: {
                                 crossOriginBridge: true,
@@ -1455,6 +1603,26 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         pageViewContext.setBridgeInteraction(event.payload);
                         void handleBridgeInteraction(event.payload, iframe);
                         break;
+                    case "dragGestureStarted":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "start", ...event.payload },
+                        }));
+                        break;
+                    case "dragGestureMoved":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "move", ...event.payload },
+                        }));
+                        break;
+                    case "dragGestureEnded":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "end", ...event.payload },
+                        }));
+                        break;
+                    case "dragSnapshot":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "snapshot", ...event.payload },
+                        }));
+                        break;
                     case "scrollChanged":
                         latestBridgeScrollRef.current = event.payload.scroll;
                         // With the direct same-origin listener active, this message is a
@@ -1643,6 +1811,17 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 const field = loadedItem.fields.find((candidate) => fieldIdentifierMatches(candidate, structureField.fieldId));
                 if (!field)
                     continue;
+                const showSuggestions = editContext.mode === "suggestions" || editContext.showSuggestedEdits;
+                const dirtyModifiedField = findModifiedBridgeField({
+                    modifiedFields: fieldsContext?.modifiedFields,
+                    structureField,
+                    field,
+                    itemDescriptor: itemDescriptor,
+                    dirtyOnly: true,
+                });
+                if (!showSuggestions && !dirtyModifiedField) {
+                    continue;
+                }
                 const patch = buildBridgeFieldPatch({
                     field,
                     structureField,
@@ -1709,8 +1888,16 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
                 false);
         };
+        const requestBridgePreviewGap = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("previewGap", payload) ?? false);
+        };
+        const requestBridgeCaptureSnapshot = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("captureComponentSnapshot", payload) ?? false);
+        };
         pageViewContext.requestBridgeScrollBy = requestBridgeScrollBy;
         pageViewContext.requestBridgeRichTextCommand = requestBridgeRichTextCommand;
+        pageViewContext.requestBridgePreviewGap = requestBridgePreviewGap;
+        pageViewContext.requestBridgeCaptureSnapshot = requestBridgeCaptureSnapshot;
         return () => {
             if (pageViewContext.requestBridgeGeometry === requestBridgeGeometry) {
                 pageViewContext.requestBridgeGeometry = undefined;
@@ -1718,6 +1905,13 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             if (pageViewContext.requestBridgeScrollBy === requestBridgeScrollBy) {
                 pageViewContext.requestBridgeScrollBy = undefined;
             }
+            if (pageViewContext.requestBridgePreviewGap === requestBridgePreviewGap) {
+                pageViewContext.requestBridgePreviewGap = undefined;
+            }
+            if (pageViewContext.requestBridgeCaptureSnapshot ===
+                requestBridgeCaptureSnapshot) {
+                pageViewContext.requestBridgeCaptureSnapshot = undefined;
+            }
             if (pageViewContext.requestBridgeRichTextCommand ===
                 requestBridgeRichTextCommand) {
                 pageViewContext.requestBridgeRichTextCommand = undefined;
@@ -1913,6 +2107,21 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             }
         }
     }, [fieldsContext?.focusedField]);
+    // Drive the selection-scroll suppression window from the drag lifecycle.
+    // Declared BEFORE the selection-scroll effect so it runs first in the same
+    // commit (when a drop changes both dragObject and selection at once).
+    useEffect(() => {
+        if (editContext.dragObject) {
+            // Suppress for the whole drag.
+            suppressSelectionScrollUntilRef.current = Number.MAX_SAFE_INTEGER;
+        }
+        else if (suppressSelectionScrollUntilRef.current === Number.MAX_SAFE_INTEGER) {
+            // Drag just ended: keep suppressing briefly so the drop's re-selection
+            // (often the target's parent) doesn't scroll the page toward stale
+            // pre-move geometry.
+            suppressSelectionScrollUntilRef.current = Date.now() + 500;
+        }
+    }, [editContext.dragObject]);
     useEffect(() => {
         const selectionKey = editContext.selection.join("|");
         const selectionChanged = selectionKey !== lastScrolledSelectionKeyRef.current;
@@ -1927,6 +2136,11 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             suppressNextSelectionScrollRef.current = false;
             return;
         }
+        // Suppressed during a drag and briefly after it ends. The drag owns
+        // scrolling, and the drop's re-selection must not jump the page away from
+        // where the user dropped (toward stale pre-move geometry).
+        if (Date.now() < suppressSelectionScrollUntilRef.current)
+            return;
         if (!fieldsContext?.focusedField && editContext.selection.length > 0) {
             const lastSelectedComponent = getComponentById(editContext.selection[editContext.selection.length - 1], pageViewContextRef.current.page);
             if (lastSelectedComponent) {
@@ -1940,12 +2154,41 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         const activePageViewContext = pageViewContextRef.current;
         if (!activePageViewContext)
             return;
-        const bounds = findBridgeComponentDocumentBounds(activePageViewContext.bridgeGeometry, editContext.scrollIntoView);
+        const scrollTarget = editContext.scrollIntoView;
+        const requestState = scrollIntoViewRequestRef.current;
+        const signature = getScrollIntoViewSignature(scrollTarget);
+        if (requestState.signature !== signature) {
+            requestState.signature = signature;
+            requestState.requestedTextRangeGeometry = false;
+        }
+        const exactBounds = findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
+        let bounds = exactBounds;
+        if (!bounds &&
+            isTextRangeScrollTarget(scrollTarget) &&
+            !requestState.requestedTextRangeGeometry) {
+            requestState.requestedTextRangeGeometry = true;
+            if (requestScrollTargetGeometry(activePageViewContext, scrollTarget)) {
+                return;
+            }
+        }
+        bounds ??= findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: true });
         if (bounds) {
             scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
         }
+        if (isTextRangeScrollTarget(scrollTarget)) {
+            activePageViewContext.requestBridgeGeometry?.({
+                source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
+                textRanges: [],
+            });
+        }
+        requestState.signature = "";
+        requestState.requestedTextRangeGeometry = false;
         editContext.setScrollIntoView(undefined);
-    }, [editContext.scrollIntoView, pageViewContext.page]);
+    }, [
+        editContext.scrollIntoView,
+        pageViewContext.page,
+        pageViewContext.bridgeGeometry,
+    ]);
     useEffect(() => {
         const handleMessage = (message) => {
             if (message.origin !== window.location.origin)
@@ -2030,8 +2273,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         });
         bridge?.sendCommand("setEditorMode", {
             mode: editContext.mode,
+            suggestionsCursorActive: editContext.mode === "suggestions" || editContext.showSuggestedEdits,
         });
-    }, [editContext.mode]);
+    }, [editContext.mode, editContext.showSuggestedEdits]);
     useEffect(() => {
         bridgeClientRef.current?.sendCommand("setLayoutKind", {
             layoutKind: editContext.layoutMode,
@@ -2084,9 +2328,22 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         : (pageViewContext.deviceWidth || 640) +
             editContext.configuration.outline.width +
             "px";
-    return (_jsxs("div", { className: cn("relative flex h-full w-full flex-col items-center select-none", className, editContext.showAgentsPanel && !editContext.currentWizardId && "pr-0"), children: [!pageViewContext.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), slotCloseButton && (_jsx("div", { className: "absolute top-3 right-3 z-50", children: slotCloseButton })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
+    const fullscreenPageTitle = pageViewContext.page?.item?.displayName?.trim() ||
+        pageViewContext.page?.item?.name?.trim() ||
+        "Page";
+    return (_jsxs("div", { className: cn("relative flex h-full w-full flex-col items-center select-none", className, editContext.showAgentsPanel && !editContext.currentWizardId && "pr-0"), children: [!pageViewContext.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), slotCloseButton && (_jsx("div", { className: "absolute top-3 right-3 z-50", children: slotCloseButton })), pageViewContext.fullscreen && (_jsxs("div", { className: "border-neutral-grey-15 relative z-40 flex h-11 w-full shrink-0 items-center justify-center border-b bg-white px-28 text-center shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "text-neutral-grey-100 max-w-full truncate text-sm font-medium", title: fullscreenPageTitle, "data-testid": "fullscreen-page-title", children: fullscreenPageTitle }), _jsx("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (device) => pageViewContext.setDevice(device), canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false), firstMobileDeviceName: editContext.configuration.devices[0]?.name }) })] })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex min-h-0 flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
                     width: deviceWidth,
-                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsx("iframe", { ref: bindIframeRef, className: "page-iframe h-full w-full bg-white transition-[height] duration-300 ease-in-out motion-reduce:transition-none", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
+                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", onMouseLeave: () => {
+                            if (pageViewContext.bridgeInteraction?.kind === "hover") {
+                                pageViewContext.setBridgeInteraction(undefined);
+                            }
+                        }, children: [_jsx("iframe", { ref: bindIframeRef, className: "page-iframe h-full w-full bg-white transition-[height] duration-300 ease-in-out motion-reduce:transition-none", style: {
+                                    height: deviceHeight,
+                                    cursor: editContext.mode === "suggestions" ||
+                                        editContext.showSuggestedEdits
+                                        ? SUGGESTIONS_CURSOR_VALUE
+                                        : undefined,
+                                }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
                                     const loadedSrc = iframeRef.current?.src;
                                     if (loadedSrc) {
                                         setLoadedIframeSrc(loadedSrc);