@parhelia/core 0.1.12901 → 0.1.12903

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

@@ -19,6 +19,7 @@ import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "../client/navigation";
 import { EditorWarnings } from "../EditorWarnings";
 import { FieldActionsOverlay, } from "../FieldActionsOverlay";
+import { alignLoopbackHostToEditor, alignXmCloudManagedEditingHostToEditor, applyParheliaRenderContext, getEditorQueryParam, } from "./renderUrl";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
@@ -27,6 +28,7 @@ import { toSitecoreDate } from "../utils/sitecoreDate";
 import { BridgeClient } from "../bridge/BridgeClient";
 import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
 import { buildBridgeFieldPatchPayload, getBridgeFieldPatchValue, } from "./bridgeFieldPatch";
+import { createKeyboardEventFromBridgeInteraction } from "./bridgeKeyboardShortcuts";
 const ZOOM_MIN = 0.25;
 const ZOOM_MAX = 2;
 const ZOOM_STEP = 0.25;
@@ -63,6 +65,27 @@ const SUGGESTIONS_CURSOR_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="2
     "</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 getSelectedRangeInlineEditInteraction(range) {
+    if (!range?.text?.trim() || !range.elementKey || !range.fieldId) {
+        return undefined;
+    }
+    const item = range.itemId && range.language && typeof range.version === "number"
+        ? {
+            id: range.itemId,
+            language: range.language,
+            version: range.version,
+        }
+        : undefined;
+    return {
+        kind: "click",
+        elementKey: range.elementKey,
+        fieldId: range.fieldId,
+        item,
+        selectedText: range.text,
+        selectionStartOffset: range.startOffset,
+        selectionEndOffset: range.endOffset,
+    };
+}
 function dispatchBridgeOverlayScroll(iframe, scroll, scrollScale = 1) {
     iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, {
         detail: {
@@ -299,7 +322,7 @@ function getIframeWindowScroll(iframe) {
         return undefined;
     }
 }
-function restoreIframeWindowScroll(iframe, targetScroll) {
+function restoreIframeWindowScroll(iframe, targetScroll, options = {}) {
     if (!targetScroll)
         return false;
     try {
@@ -307,20 +330,41 @@ function restoreIframeWindowScroll(iframe, targetScroll) {
         if (!win)
             return false;
         let attempts = 0;
+        let completed = false;
+        const maxAttempts = options.maxAttempts ?? 8;
+        const finish = (settled) => {
+            if (completed)
+                return;
+            completed = true;
+            if (settled) {
+                options.onSettled?.();
+            }
+            else {
+                options.onExpired?.();
+            }
+        };
         const apply = () => {
             try {
                 attempts += 1;
                 win.scrollTo(targetScroll.x, targetScroll.y);
                 const settled = Math.abs((win.scrollX || 0) - targetScroll.x) <= 1 &&
                     Math.abs((win.scrollY || 0) - targetScroll.y) <= 1;
-                if (!settled && attempts < 8) {
+                if (settled) {
+                    finish(true);
+                    return;
+                }
+                if (attempts < maxAttempts) {
                     window.requestAnimationFrame(apply);
                 }
+                else {
+                    finish(false);
+                }
             }
             catch {
                 // Cross-origin preview frames expose a WindowProxy, but reading named
                 // properties such as scrollTo/scrollX can throw. In that case the
                 // bridge-side scroll restoration is responsible for preserving scroll.
+                finish(false);
             }
         };
         window.requestAnimationFrame(apply);
@@ -336,28 +380,6 @@ function applyIframeZoom(_iframe, _zoom, _location) {
 function clampEditorZoom(value) {
     return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
 }
-function isLoopbackHost(hostname) {
-    return hostname === "localhost" || hostname === "127.0.0.1";
-}
-function alignLoopbackHostToEditor(url) {
-    if (isLoopbackHost(window.location.hostname) &&
-        isLoopbackHost(url.hostname)) {
-        // Sitecore auth cookies are host-scoped, so localhost and 127.0.0.1 are
-        // different origins even when they point at the same machine.
-        url.hostname = window.location.hostname;
-    }
-}
-function isXmCloudManagedEditingHost(url) {
-    return url.hostname.endsWith("-eh.sitecorecloud.io");
-}
-function alignXmCloudManagedEditingHostToEditor(url) {
-    if (window.location.hostname.endsWith(".sitecorecloud.io") &&
-        isXmCloudManagedEditingHost(url)) {
-        url.protocol = window.location.protocol;
-        url.hostname = window.location.hostname;
-        url.port = window.location.port;
-    }
-}
 function getUrlOrigin(url) {
     if (!url)
         return undefined;
@@ -371,61 +393,6 @@ function getUrlOrigin(url) {
         return undefined;
     }
 }
-function getEditorQueryParam(name) {
-    try {
-        return new URLSearchParams(window.location.search).get(name) || undefined;
-    }
-    catch {
-        return undefined;
-    }
-}
-function inferRoutePathFromSitecoreItemPath(itemPath) {
-    const segments = (itemPath || "")
-        .split("/")
-        .map((segment) => segment.trim())
-        .filter(Boolean);
-    const homeIndex = segments
-        .map((segment) => segment.toLowerCase())
-        .lastIndexOf("home");
-    if (homeIndex < 0)
-        return undefined;
-    const routeSegments = segments.slice(homeIndex + 1);
-    if (routeSegments.length === 0)
-        return "/";
-    return `/${routeSegments.map(encodeURIComponent).join("/")}`;
-}
-function isRootRenderPath(pathname) {
-    return !pathname || pathname === "/";
-}
-function applyParheliaRenderContext(renderUrl, pageItemDescriptor, siteName) {
-    if (siteName) {
-        if (!renderUrl.searchParams.has("site")) {
-            renderUrl.searchParams.set("site", siteName);
-        }
-        // Same-origin Sitecore fallback URLs use sc_site for site resolution and can
-        // canonical-redirect to the public site host before the editor iframe loads.
-        if (renderUrl.origin !== window.location.origin &&
-            !renderUrl.searchParams.has("sc_site")) {
-            renderUrl.searchParams.set("sc_site", siteName);
-        }
-    }
-    if (!renderUrl.searchParams.has("sc_itemid")) {
-        renderUrl.searchParams.set("sc_itemid", pageItemDescriptor.id);
-    }
-    if (!renderUrl.searchParams.has("sc_lang")) {
-        renderUrl.searchParams.set("sc_lang", pageItemDescriptor.language);
-    }
-    if (!renderUrl.searchParams.has("sc_version")) {
-        renderUrl.searchParams.set("sc_version", String(pageItemDescriptor.version));
-    }
-    const routePath = inferRoutePathFromSitecoreItemPath(pageItemDescriptor.path);
-    if (!routePath || !isRootRenderPath(renderUrl.pathname))
-        return;
-    renderUrl.pathname = routePath;
-    if (!renderUrl.searchParams.has("route")) {
-        renderUrl.searchParams.set("route", routePath);
-    }
-}
 function resolveBridgeComponentId(rawId, page) {
     if (!rawId)
         return undefined;
@@ -582,9 +549,38 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const bridgePatchSignatureRef = useRef(new Map());
     const bridgeTextRangeSourcesRef = useRef(new Map());
     const activeBridgeInlineEditRef = useRef(null);
+    const previousBridgeInlineEditModeRef = useRef(editContext.mode);
     const latestBridgeScrollRef = useRef(undefined);
     const directOverlayScrollSyncRef = useRef(false);
     const pendingRefreshScrollRef = useRef(undefined);
+    const restorePendingRefreshScroll = useCallback((iframe, targetScroll, observedScroll) => {
+        if (!targetScroll)
+            return;
+        const clearPendingTarget = () => {
+            if (pendingRefreshScrollRef.current === targetScroll) {
+                pendingRefreshScrollRef.current = undefined;
+            }
+        };
+        const restoreStarted = restoreIframeWindowScroll(iframe, targetScroll, {
+            maxAttempts: 150,
+            onSettled: clearPendingTarget,
+            onExpired: clearPendingTarget,
+        });
+        if (!restoreStarted) {
+            clearPendingTarget();
+        }
+        const currentScroll = observedScroll ??
+            getIframeWindowScroll(iframe) ?? { x: 0, y: 0 };
+        const deltaX = targetScroll.x - currentScroll.x;
+        const deltaY = targetScroll.y - currentScroll.y;
+        if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
+            bridgeClientRef.current?.sendCommand("scrollBy", {
+                x: deltaX,
+                y: deltaY,
+                behavior: "instant",
+            });
+        }
+    }, []);
     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
@@ -694,6 +690,14 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         return (bridgeClientRef.current?.sendCommand("beginInlineEdit", payload) ??
             false);
     }, []);
+    const sendCancelInlineEdit = useCallback((payload) => {
+        return (bridgeClientRef.current?.sendCommand("cancelInlineEdit", payload) ??
+            false);
+    }, []);
+    const sendApplyFieldPatchCommand = useCallback((payload) => {
+        return (bridgeClientRef.current?.sendCommand("applyFieldPatch", payload) ??
+            false);
+    }, []);
     const sendApplyRichTextCommand = useCallback((payload) => {
         return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
             false);
@@ -703,6 +707,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         activeBridgeInlineEditRef,
         blockIframeBlurUntil,
         sendBeginInlineEdit,
+        sendCancelInlineEdit,
+        sendApplyFieldPatch: sendApplyFieldPatchCommand,
     });
     const beginTrackedBridgeInlineEdit = useCallback(async (interaction) => {
         activeBridgeInlineEditRef.current = null;
@@ -757,7 +763,11 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     }, []);
     useEffect(() => {
         return editContext.registerModeChangeParticipant({
-            beforeModeChange: () => {
+            beforeModeChange: (nextMode) => {
+                if (nextMode === "suggestions" &&
+                    getSelectedRangeInlineEditInteraction(editContextRef.current?.selectedRange)) {
+                    return;
+                }
                 editContext.operations.onFieldBlur?.();
                 void fieldsContextRef.current?.setFocusedField(undefined, false);
                 endBridgeFieldFocus();
@@ -769,6 +779,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     }, [
         clearBridgeInlineDedupe,
         editContext,
+        editContextRef,
         endBridgeFieldFocus,
         fieldsContextRef,
     ]);
@@ -1163,6 +1174,11 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     cancelable: true,
                     detail: caretAnchor ? { anchor: caretAnchor } : undefined,
                 }));
+                return;
+            }
+            const keyboardEvent = createKeyboardEventFromBridgeInteraction(interaction);
+            if (keyboardEvent) {
+                void editContextRef.current?.handleKeyDown(keyboardEvent);
             }
             return;
         }
@@ -1511,6 +1527,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         bridge.sendCommand("setZoom", {
                             zoom: pageViewContextRef.current?.zoom ?? 1,
                         });
+                        if (pendingRefreshScrollRef.current) {
+                            restorePendingRefreshScroll(iframe, pendingRefreshScrollRef.current);
+                        }
                         break;
                     case "structureUpdated":
                         pageViewContext.setBridgeStructure(event.payload.structure);
@@ -1574,17 +1593,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                 x: 0,
                                 y: 0,
                             };
-                            const deltaX = targetScroll.x - observedScroll.x;
-                            const deltaY = targetScroll.y - observedScroll.y;
-                            pendingRefreshScrollRef.current = undefined;
-                            if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
-                                restoreIframeWindowScroll(iframe, targetScroll);
-                                bridgeClientRef.current?.sendCommand("scrollBy", {
-                                    x: deltaX,
-                                    y: deltaY,
-                                    behavior: "instant",
-                                });
-                            }
+                            restorePendingRefreshScroll(iframe, targetScroll, observedScroll);
                         }
                         setShowSpinner(false);
                         break;
@@ -1669,6 +1678,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         scheduleBridgeDomRevision,
         scheduleBridgeGeometryRevision,
         shouldTrackMinimapScroll,
+        restorePendingRefreshScroll,
     ]);
     useEffect(() => {
         const repository = editContext.itemsRepository;
@@ -2276,6 +2286,23 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             suggestionsCursorActive: editContext.mode === "suggestions" || editContext.showSuggestedEdits,
         });
     }, [editContext.mode, editContext.showSuggestedEdits]);
+    useEffect(() => {
+        const previousMode = previousBridgeInlineEditModeRef.current;
+        previousBridgeInlineEditModeRef.current = editContext.mode;
+        if (previousMode === editContext.mode ||
+            editContext.mode !== "suggestions") {
+            return;
+        }
+        const interaction = getSelectedRangeInlineEditInteraction(editContextRef.current?.selectedRange);
+        if (!interaction)
+            return;
+        void beginTrackedBridgeInlineEdit(interaction);
+    }, [
+        beginTrackedBridgeInlineEdit,
+        editContext.mode,
+        editContext.modeTransitionRevision,
+        editContextRef,
+    ]);
     useEffect(() => {
         bridgeClientRef.current?.sendCommand("setLayoutKind", {
             layoutKind: editContext.layoutMode,
@@ -2360,15 +2387,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                         setShowSpinner(false);
                                         applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:onLoad-zoom");
                                         if (pendingRefreshScrollRef.current) {
-                                            const targetScroll = pendingRefreshScrollRef.current;
-                                            pendingRefreshScrollRef.current = undefined;
-                                            restoreIframeWindowScroll(iframeRef.current, targetScroll);
-                                            const observedScroll = getIframeWindowScroll(iframeRef.current) ?? { x: 0, y: 0 };
-                                            bridgeClientRef.current?.sendCommand("scrollBy", {
-                                                x: targetScroll.x - observedScroll.x,
-                                                y: targetScroll.y - observedScroll.y,
-                                                behavior: "instant",
-                                            });
+                                            restorePendingRefreshScroll(iframeRef.current, pendingRefreshScrollRef.current);
                                         }
                                     }
                                 } }), iframeElement && (_jsx(IframeOverlayProvider, { iframe: iframeElement, mode: "scrolling", scrollScale: 1, visualScale: 1, invalidationKey: `${zoom}:${bridgeGeometryRevision}`, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50, children: _jsx(PageEditorChrome, { iframe: iframeElement, compareView: compareView, pageViewContext: pageViewContext, onBridgeRichTextCommand: sendApplyRichTextCommand }) })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), !pageViewContext.fullscreen &&