@parhelia/core 0.1.12808 → 0.1.12838

package/dist/editor/client/EditorShell.js

@@ -13,6 +13,7 @@ import { executeFieldAction as executeFieldServerAction, connectSocket, getEditH
 import { emitAgentDocumentsChanged } from "../services/agentService";
 import { onSocketReconnect as onAgentSocketReconnect } from "../services/agentSubscriptionRegistry";
 import { useEditorWebSocket } from "./hooks/useEditorWebSocket";
+import { getEditorRealtime } from "./realtime/realtimeTransport";
 import { createEditorSocketDiagnostics, } from "./socketDiagnostics";
 import { localStorageService } from "../services/localStorageService";
 import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
@@ -20,6 +21,7 @@ import "react-json-view-lite/dist/index.css";
 import { MediaSelector, } from "../media-selector/MediaSelector";
 import { getComponentCommands } from "../commands/componentCommands";
 import { getLanguagesAndVersions, } from "../services/contentService";
+import { getAllFavorites } from "../services/favouritesService";
 import ConfirmationDialog from "../ConfirmationDialog";
 import { getItemDescriptor } from "../utils";
 import { EditContextMenu } from "../ContextMenu";
@@ -27,6 +29,7 @@ import { InlineAiTrigger } from "../ai/InlineAiTrigger";
 import { EditorFormHintPopover } from "../page-viewer/EditorFormHintPopover";
 import { FieldEditorPopup } from "../FieldEditorPopup";
 import { ConcurrentUserLimitDialog } from "../ConcurrentUserLimitDialog";
+import { SessionExpiredOverlay } from "./SessionExpiredOverlay";
 import { post } from "../services/serviceHelper";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
 import { useItemsRepository } from "./itemsRepository";
@@ -177,6 +180,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             return [];
         }
     });
+    const [remoteCarets, setRemoteCarets] = useState({});
     // Block editing until the server acknowledges our client-info for the current item
     const [isClientInfoAcknowledged, setIsClientInfoAcknowledged] = useState(false);
     if (typeof window !== "undefined")
@@ -413,7 +417,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         (typeof result.summary === "string" && result.summary.trim()) ||
                         "";
                     toast.error("Reconnect failed", {
-                        description: serverDetail || "Could not claim this browser session. Try again.",
+                        description: serverDetail ||
+                            "Could not claim this browser session. Try again.",
                     });
                 },
             },
@@ -751,7 +756,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const isEditorFormHiddenForSlot = useCallback((slotId) => {
         if (!slotId)
             return editorFormHiddenDefault;
-        return slotSettingsById[slotId]?.editorFormHidden ?? editorFormHiddenDefault;
+        return (slotSettingsById[slotId]?.editorFormHidden ?? editorFormHiddenDefault);
     }, [editorFormHiddenDefault, slotSettingsById]);
     // Sync global compareMode from the active slot's compareMode for URL syncing
     useEffect(() => {
@@ -807,6 +812,57 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         socketMessageListeners.current.add(callback);
         return () => socketMessageListeners.current.delete(callback);
     }, []);
+    useEffect(() => {
+        const removeListener = addSocketMessageListener((message) => {
+            if (message.type !== "caret-position")
+                return;
+            const payload = message.payload;
+            const sessionIdValue = payload?.sessionId?.trim();
+            if (!sessionIdValue || sessionIdValue === sessionId)
+                return;
+            setRemoteCarets((current) => {
+                if (payload?.offset == null) {
+                    if (!current[sessionIdValue])
+                        return current;
+                    const next = { ...current };
+                    delete next[sessionIdValue];
+                    return next;
+                }
+                return {
+                    ...current,
+                    [sessionIdValue]: {
+                        sessionId: sessionIdValue,
+                        fieldId: payload.fieldId,
+                        item: payload.item,
+                        offset: payload.offset,
+                        value: payload.value,
+                    },
+                };
+            });
+        });
+        return () => {
+            try {
+                removeListener();
+            }
+            catch { }
+        };
+    }, [addSocketMessageListener, sessionId]);
+    useEffect(() => {
+        const activeSessionIds = new Set(activeSessions.map((s) => s.sessionId));
+        setRemoteCarets((current) => {
+            let changed = false;
+            const next = {};
+            Object.entries(current).forEach(([caretSessionId, caret]) => {
+                if (activeSessionIds.has(caretSessionId)) {
+                    next[caretSessionId] = caret;
+                }
+                else {
+                    changed = true;
+                }
+            });
+            return changed ? next : current;
+        });
+    }, [activeSessions]);
     // Listen for batch completion notifications
     useEffect(() => {
         const removeListener = addSocketMessageListener((message) => {
@@ -1243,7 +1299,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 // Force a reconnect to refresh presence after several failed nudges
                 console.warn("Session presence did not recover after retries. Forcing reconnect.");
                 try {
-                    globalThis.editorSocket?.close(4000, "recover-presence");
+                    getEditorRealtime().reconnect("recover-presence");
                 }
                 catch { }
             }
@@ -1292,7 +1348,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     }));
                 }
             })
-                .catch((error) => console.error("Keep Alive error:", error));
+                .catch((error) => {
+                if (error instanceof TypeError &&
+                    error.message === "Failed to fetch") {
+                    return;
+                }
+                console.error("Keep Alive error:", error);
+            });
         };
         const keepaliveIntervalMs = (() => {
             const param = new URLSearchParams(window.location.search).get("keepaliveIntervalMs");
@@ -1349,9 +1411,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 if (helpParam) {
                     setHelpTerminalActiveTab("manual");
                     setShowHelpTerminal(true);
-                    setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true"
-                        ? null
-                        : helpParam);
+                    setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true" ? null : helpParam);
                 }
                 else {
                     handleSetShowHelpTerminal(false);
@@ -1630,15 +1690,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const loadSuggestedEdits = useCallback(async () => {
         if (!item)
             return;
-        const result = await getSuggestedEdits(item.descriptor.id, item.descriptor.language, item.descriptor.version);
+        const reviewId = searchParams.get("reviewId");
+        const result = await getSuggestedEdits(item.descriptor.id, item.descriptor.language, item.descriptor.version, reviewId ?? undefined);
         if (handleErrorResult(result, ui, state))
             return;
         const edits = result.data || [];
         setSuggestedEdits(edits);
-    }, [item]);
+    }, [item, searchParams]);
     const loadFavorites = useCallback(async () => {
         try {
-            const { getAllFavorites } = await import("../services/favouritesService");
             const result = await getAllFavorites();
             if (result.data) {
                 setFavorites(result.data);
@@ -2262,6 +2322,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             current.delete("ccpanel");
             current.delete("providerId");
             current.delete("modelId");
+            current.delete("projectTemplateId");
+        }
+        if (viewName !== "taskboard") {
+            current.delete("tbView");
+            current.delete("tbProjectId");
+            current.delete("tbTaskId");
+            current.delete("tbWizard");
         }
         // Preserve reviewId parameter if it exists (for review links)
         // This ensures review links don't lose the reviewId when URL is synced
@@ -2653,6 +2720,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [fullscreen, configuration.forceFullscreen, searchParams, isMobile]);
     const state = {
         page,
+        currentItemDescriptor,
         configuration,
         selection,
         setSelection,
@@ -2774,10 +2842,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : op.canUndo;
                 const mergedCanRedo = isUndoUpdate
                     ? true
-                    : op.canRedo ?? existingOp.canRedo;
+                    : (op.canRedo ?? existingOp.canRedo);
                 const mergedUndone = isUndoUpdate
                     ? true
-                    : op.undone ?? existingOp.undone;
+                    : (op.undone ?? existingOp.undone);
                 const mergedOp = {
                     ...existingOp,
                     ...op,
@@ -2837,7 +2905,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         onOperationExecuted,
     };
     // moved to useMediaSelector
-    const { workboxItems } = useWorkbox({
+    const { workboxItems, isWorkboxLoading } = useWorkbox({
         page,
         currentItemDescriptor,
         validate,
@@ -2874,16 +2942,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     concurrentUserLimitErrorRef.current = concurrentUserLimitError;
     const handleRetryConnection = useCallback(() => {
         setConcurrentUserLimitError(null);
-        // Force reconnection by triggering a new connection attempt
-        // The useEditorWebSocket hook will check availability again
-        const socket = globalThis.editorSocket;
-        if (socket) {
-            socket.close();
-            delete globalThis.editorSocket;
-        }
-        // The hook will automatically attempt to reconnect
+        // Force reconnection by triggering a new connection attempt. Works for either transport:
+        // WebSocket close lets the hook's reconnect loop pick up; SSE re-opens via the reconnect handler.
+        getEditorRealtime().reconnect("retry-connection");
     }, []);
-    const { socketRef: socketInstanceRef } = useEditorWebSocket({
+    useEditorWebSocket({
         sessionId,
         onMessage: messageHandler,
         onOpen: async () => {
@@ -2919,14 +2982,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         requestQuota: requestQuotaAndUpdate,
         sendClientInfo,
         setSocketDiagnostics,
+        enableWebSocketTransport: parheliaSettings?.enableWebSocketTransport ?? true,
+        enableSseFallback: parheliaSettings?.enableSseFallback ?? true,
     });
     useEffect(() => {
         const hasMySession = activeSessions.some((s) => s.sessionId === sessionId);
-        if (hasMySession &&
-            socketInstanceRef.current?.readyState === WebSocket.OPEN) {
+        if (hasMySession && getEditorRealtime().isOpen()) {
             toast.dismiss("session-revoked");
         }
-    }, [activeSessions, sessionId, socketConnectionVersion, socketInstanceRef]);
+    }, [activeSessions, sessionId, socketConnectionVersion]);
     useEffect(() => {
         const handleRevoked = (event) => {
             const customEvent = event;
@@ -2937,37 +3001,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             window.removeEventListener("parhelia:session-revoked", handleRevoked);
         };
     }, [promptSessionReconnect]);
-    // Show a single "session expired" toast with a Login action when any
-    // service call (or the keepalive check) detects that the user is no
-    // longer authenticated. Using a stable toast id coalesces the toast so a
-    // burst of failing calls does not spam the UI with duplicate toasts.
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const handleExpired = () => {
-            toast.error("Your session has expired", {
-                id: "session-expired",
-                description: "Please login again to continue editing.",
-                action: {
-                    label: "Login",
-                    onClick: () => {
-                        window.location.href = "/sitecore/login";
-                    },
-                },
-                duration: Infinity,
-            });
-        };
-        window.addEventListener("parhelia:session-expired", handleExpired);
-        return () => {
-            window.removeEventListener("parhelia:session-expired", handleExpired);
-        };
-    }, []);
     const sendSocketMessage = useCallback((message) => {
-        if (socketInstanceRef.current &&
-            socketInstanceRef.current.readyState === WebSocket.OPEN) {
-            socketInstanceRef.current.send(JSON.stringify(message));
-        }
-    }, [socketInstanceRef]);
+        // Routes over whichever transport is active (WebSocket preferred, SSE fallback).
+        getEditorRealtime().send(message);
+    }, []);
     // URL update helper - defined early so it can be used by workspace/sidebar functions
     const updateUrl = useCallback((params) => {
         // Use the actual browser pathname (including any basePath like /parhelia)
@@ -3022,9 +3059,18 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     version: currentDescriptor.version.toString(),
                 }
                 : {};
+            const taskboardUrlParams = targetWorkspaceId === "taskboard"
+                ? {}
+                : {
+                    tbView: undefined,
+                    tbProjectId: undefined,
+                    tbTaskId: undefined,
+                    tbWizard: undefined,
+                };
             updateUrl({
                 workspace: targetWorkspaceId,
                 ...currentItemUrlParams,
+                ...taskboardUrlParams,
                 ...options?.urlParams,
             });
             if (typeof document.startViewTransition === "function") {
@@ -3752,8 +3798,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setNavigationHistory,
     ]);
     useEffect(() => {
-        if (typeof window === "undefined" ||
-            process.env.PARHELIA_DEV_MODE !== "true") {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const exposeViewportTestApi = process.env.PARHELIA_DEV_MODE === "true" ||
+            window.localStorage?.getItem("__parheliaViewportTestApi") === "true";
+        if (!exposeViewportTestApi) {
             return;
         }
         window.__parheliaQuickSwitcherTestApi = {
@@ -4010,6 +4060,19 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             activePageViewContext.setFullscreen(isFullscreen);
         }
     }, [searchParams, isInitialLoad, activePageViewContext]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            process.env.PARHELIA_DEV_MODE !== "true") {
+            return;
+        }
+        window.__parheliaViewportTestApi = {
+            setZoom: (zoom) => activePageViewContext.setZoom(zoom),
+            getZoom: () => activePageViewContext.zoom,
+        };
+        return () => {
+            delete window.__parheliaViewportTestApi;
+        };
+    }, [activePageViewContext]);
     // Simple registry for per-view context factories (e.g., GraphQL context)
     // Stored outside the EditContext object via ref to avoid re-renders
     if (!globalThis.__editorContextFactoriesRef) {
@@ -4078,6 +4141,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         clipboard,
         setClipboard,
         workboxItems,
+        isWorkboxLoading,
         requestRefresh,
         refreshCompletedFlag,
         openCreatePageDialog: () => {
@@ -4368,6 +4432,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         refreshHistory,
         isRefreshing,
         activeSessions,
+        remoteCarets,
         unlockField: async () => {
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
@@ -4648,6 +4713,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         dragObject,
         clipboard,
         workboxItems,
+        isWorkboxLoading,
         requestRefresh,
         refreshCompletedFlag,
         searchParams,
@@ -4717,6 +4783,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         handleQuickSwitcherSelect,
         webSocketMessages,
         socketDiagnostics,
+        remoteCarets,
         factoriesRef,
         user,
         statusMessage,
@@ -5029,7 +5096,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     setTimeout(() => {
                         setShowFullscreenHint(false);
                     }, 600);
-                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full bg-black/60 px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "mx-1 rounded bg-white/20 px-1.5 py-0.5 text-xs font-semibold", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId }), isTourActive && (_jsx(Tour, { tourStopCallback: () => {
+                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "bg-neutral-grey-100/60 fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "badge-pad-sm mx-1 rounded bg-white/20 text-xs font-semibold", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId }), isTourActive && (_jsx(Tour, { tourStopCallback: () => {
                     setIsTourActive(false);
                     // Remove tour state from URL
                     // Use history.replaceState instead of router.replace to avoid triggering React navigation
@@ -5041,13 +5108,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : window.location.pathname;
                     window.history.replaceState(getCurrentHistoryState(), "", newUrl);
                 }, configuration: configuration, restoredFromUrl: tourRestoredRef.current })), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(GuidanceOverlay, {}) }), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(AgentDialogHandler, {}) })] }));
-    return (_jsx(LicenseProvider, { initialLicenseStatus: initialLicenseStatus, initialStatusLoaded: initialLicenseStatusLoaded, children: _jsx("div", { className: `editor h-full w-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsx(EditContextProvider, { value: editContext, children: _jsxs(SplashScreenAgentProvider, { children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && (_jsx(EditorLoadingOverlay, {})), editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
+    return (_jsx(LicenseProvider, { initialLicenseStatus: initialLicenseStatus, initialStatusLoaded: initialLicenseStatusLoaded, children: _jsx("div", { className: `editor h-full w-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsx(EditContextProvider, { value: editContext, children: _jsxs(SplashScreenAgentProvider, { children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && _jsx(EditorLoadingOverlay, {}), editContext.isRefreshing && (_jsx("div", { className: "text-neutral-grey-50 pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
                                     currentWorkspace.id === "taskboard" ||
                                     currentWorkspace.id === "translation-management") &&
                                     showAgentsWorkspaceEditor && (_jsx(AgentsSlotContextBridgeHost, { slots: editorSlots })), startupChecks.state !== "loading" && (children || editorUi), startupChecks.state !== "loading" && dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConcurrentUserLimitDialog, { open: concurrentUserLimitError !== null, onOpenChange: (open) => {
                                         if (!open) {
                                             setConcurrentUserLimitError(null);
                                         }
-                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {})] }) }) }) }) }) }));
+                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {}), _jsx(SessionExpiredOverlay, {})] }) }) }) }) }) }));
 }
 //# sourceMappingURL=EditorShell.js.map