@parhelia/core 0.3.12788 → 0.3.12791

package/dist/editor/client/EditorShell.js

@@ -13,7 +13,7 @@ import { showExpandableErrorToast } from "./errorToast";
 import { isRedoStackEntry, reconcileNewHistoryOperation, } from "./editHistoryReconciliation";
 import { isManualShowMeFocusTransfer, isManualShowMeTarget, } from "./manualShowMeFocus";
 import { isAgentTerminalFocusTransfer, nextAgentTerminalInteractionAt, } from "./agentTerminalFocus";
-import { getAvailableSidebarsForWorkspace } from "./sidebarAvailability";
+import { getAvailableSidebarsForWorkspace, parseSidebarUrlValue, sidebarUrlValue, } from "./sidebarAvailability";
 import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, getRunningOperations, reconnectSession, releaseFieldLocks, validateItems, } from "../services/editService";
 import { emitAgentDocumentsChanged } from "../services/agentService";
 import { onSocketReconnect as onAgentSocketReconnect } from "../services/agentSubscriptionRegistry";
@@ -37,6 +37,7 @@ import { EditorFormHintPopover } from "../page-viewer/EditorFormHintPopover";
 import { FieldEditorPopup } from "../FieldEditorPopup";
 import { ConcurrentUserLimitDialog } from "../ConcurrentUserLimitDialog";
 import { SessionExpiredOverlay } from "./SessionExpiredOverlay";
+import { filterRemovedComments } from "../reviews/commentState";
 import { post } from "../services/serviceHelper";
 import { CONTENT_TREE_SIDEBAR_ID } from "../sidebar/contentTreeConstants";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
@@ -89,14 +90,9 @@ function getGlobalHistoryLoadMoreIncrement(filterBySession) {
         ? GLOBAL_SESSION_HISTORY_LOAD_MORE_INCREMENT
         : GLOBAL_HISTORY_LOAD_MORE_INCREMENT;
 }
-// Sentinel written to the `sidebar` URL param when the user has explicitly closed
-// every sidebar. Distinguishes "no preference yet" (param absent) from "user wants
-// nothing open" (param present with this value) so reload can honor the user's intent.
-const SIDEBAR_NONE_SENTINEL = "none";
 const PARHELIA_SETTINGS_ITEM_ID = "a2f3c168bb2841ff9673ee7f3cc624af";
 const PARHELIA_SETTINGS_ITEM_PATH = "/sitecore/system/parhelia/settings";
 const PARHELIA_SHOW_MINIMAP_FIELD_ID = "e75976d2179e4578b4140147b7525fa5";
-const sidebarUrlValue = (ids) => ids.length ? ids.join(",") : SIDEBAR_NONE_SENTINEL;
 // moved to hooks/useQuota
 function isParheliaSettingsSnapshotChange(changes) {
     return changes.some((change) => {
@@ -373,17 +369,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // Sidebar state
     const [openSidebars, setOpenSidebars] = useState(() => {
         const sidebarParam = searchParams.get("sidebar");
-        let sidebars = [];
-        // Presence check (not truthiness) so the sentinel "none" is respected across reloads.
-        if (sidebarParam !== null) {
-            sidebars =
-                sidebarParam === SIDEBAR_NONE_SENTINEL
-                    ? []
-                    : sidebarParam.split(",").filter(Boolean);
-        }
-        else {
-            sidebars = getInitialOpenSidebars(configuration, initialWorkspaceId);
-        }
+        let sidebars = parseSidebarUrlValue(sidebarParam) ??
+            getInitialOpenSidebars(configuration, initialWorkspaceId);
         // If workspace=reviews was requested, ensure reviews sidebar is open
         if (isReviewsSidebarRequest && !sidebars.includes("reviews")) {
             sidebars.push("reviews");
@@ -643,6 +630,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [itemLanguages, setItemLanguages] = useState([]);
     const [itemVersions, setItemVersions] = useState([]);
     const [isLoadingVersions, setIsLoadingVersions] = useState(false);
+    const versionLoadRequestRef = useRef(0);
+    const visibleVersionLoadRef = useRef(0);
+    const versionLoadsInFlightRef = useRef(new Map());
     const [modifiedFields, setModifiedFields] = useState([]);
     useEffect(() => {
         const stores = getFieldModificationStores();
@@ -747,8 +737,16 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [mode, setModeState] = useState("edit");
     const modeRef = useRef("edit");
     modeRef.current = mode;
+    const modeTransitionChainRef = useRef(Promise.resolve());
     const modeChangeParticipantsRef = useRef(new Set());
-    const loadSuggestedEditsRef = useRef(async () => { });
+    const loadSuggestedEditsRef = useRef(async () => undefined);
+    const suggestedEditsLoadRequestRef = useRef(0);
+    const suggestedEditsAppliedRequestRef = useRef(0);
+    const suggestedEditsItemKey = item
+        ? `${item.descriptor.id}:${item.descriptor.language}:${item.descriptor.version}`
+        : undefined;
+    const suggestedEditsItemKeyRef = useRef(suggestedEditsItemKey);
+    suggestedEditsItemKeyRef.current = suggestedEditsItemKey;
     const [modeTransitionRevision, setModeTransitionRevision] = useState(0);
     const [previewDate, setPreviewDate] = useState();
     const [layoutMode, setLayoutMode] = useState("final");
@@ -763,12 +761,23 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         if (nextMode === previousMode)
             return;
         const participants = Array.from(modeChangeParticipantsRef.current);
-        for (const participant of participants) {
-            await participant.beforeModeChange?.(nextMode, previousMode, options);
-        }
-        for (const participant of participants) {
-            participant.clearInlineDedupe?.(nextMode, previousMode, options);
-        }
+        // Start event-time capture while the current mode and its live iframe
+        // editing session still exist. These promises are awaited in the
+        // serialized transition below, but invoking them here prevents the mode
+        // render from making an uncommitted DOM value unreachable.
+        const captureBarriers = participants.map((participant) => {
+            try {
+                return Promise.resolve(participant.captureBeforeModeChange?.(nextMode, previousMode, options));
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        });
+        // Reflect the user's requested mode immediately. Persistence barriers
+        // still drain in order below, but keeping the old mode visible until a
+        // slow host/save round-trip finishes invites duplicate toggle actions
+        // and makes the editor appear unresponsive. Inline edit sessions retain
+        // modeAtStart, so the in-flight value keeps its original routing.
         flushSync(() => {
             modeRef.current = nextMode;
             setModeState(nextMode);
@@ -782,9 +791,22 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 setShowComments(true);
             }
         });
-        if (nextMode === "suggestions") {
-            void loadSuggestedEditsRef.current();
-        }
+        const transition = modeTransitionChainRef.current
+            .catch(() => undefined)
+            .then(async () => {
+            await Promise.all(captureBarriers);
+            for (const participant of participants) {
+                await participant.beforeModeChange?.(nextMode, previousMode, options);
+            }
+            for (const participant of participants) {
+                participant.clearInlineDedupe?.(nextMode, previousMode, options);
+            }
+            if (nextMode === "suggestions" && modeRef.current === nextMode) {
+                await loadSuggestedEditsRef.current();
+            }
+        });
+        modeTransitionChainRef.current = transition;
+        await transition;
     }, []);
     const setMode = useCallback((nextMode) => {
         const resolvedMode = typeof nextMode === "function" ? nextMode(modeRef.current) : nextMode;
@@ -1714,11 +1736,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 }
                 // Handle sidebar changes — clear when absent so state matches the URL
                 const sidebarParam = urlParams.get("sidebar");
-                const newSidebars = sidebarParam === SIDEBAR_NONE_SENTINEL
-                    ? []
-                    : sidebarParam
-                        ? sidebarParam.split(",").filter(Boolean)
-                        : [];
+                const newSidebars = parseSidebarUrlValue(sidebarParam) ?? [];
+                openSidebarsRef.current = newSidebars;
                 setOpenSidebars(newSidebars);
                 // Handle wizard ID changes
                 const wizardId = urlParams.get("wizardid");
@@ -2010,7 +2029,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         if (handleErrorResult(result, ui, state))
             return;
         setComments((x) => {
-            const loadedComments = result.data;
+            const loadedComments = filterRemovedComments(result.data);
             const newComments = x.filter((c) => c.isNew &&
                 c.mainItemId === currentItemDescriptor.id &&
                 c.language === currentItemDescriptor.language &&
@@ -2024,20 +2043,34 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
     // are available in your component context.
     const loadSuggestedEdits = useCallback(async () => {
+        const requestId = ++suggestedEditsLoadRequestRef.current;
         if (!item)
-            return;
+            return undefined;
+        const requestedItemKey = `${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);
+        // Item initialization, navigation, and realtime feedback notifications can
+        // overlap. Accept the first response that can populate the current item,
+        // then prevent older snapshots from replacing a newer one. This preserves
+        // useful data while a second post-subscription refresh is still in flight.
+        if (requestedItemKey !== suggestedEditsItemKeyRef.current)
+            return undefined;
+        if (requestId < suggestedEditsAppliedRequestRef.current) {
+            return suggestedEditsRef.current;
+        }
         if (handleErrorResult(result, ui, state))
-            return;
+            return undefined;
+        suggestedEditsAppliedRequestRef.current = requestId;
         // A refetch can race a locally reverted suggestion's server delete; don't
         // resurrect suggestions the user already removed.
         const edits = (result.data || []).filter((edit) => !isSuggestedEditRemoved(edit.id));
         setSuggestedEdits(edits);
+        return edits;
     }, [item, searchParams]);
-    useEffect(() => {
-        loadSuggestedEditsRef.current = loadSuggestedEdits;
-    }, [loadSuggestedEdits]);
+    // URL-driven mode initialization runs in an earlier effect. Update the ref
+    // during render so entering suggestions on the first committed frame cannot
+    // observe the initial no-op loader.
+    loadSuggestedEditsRef.current = loadSuggestedEdits;
     const loadFavorites = useCallback(async () => {
         try {
             const result = await getAllFavorites();
@@ -2551,15 +2584,22 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             return;
         // The previous item's comments don't speak for the new one.
         setCommentsLoaded(false);
-        // Loading feedback before client-info is acknowledged creates a gap: an
-        // update can arrive after this REST response but before the realtime page
-        // subscription exists. Once acknowledged, the snapshot and event stream
-        // form one continuous view of the server state.
-        if (!isClientInfoAcknowledged)
-            return;
+        // Load an immediate snapshot so an existing comment or suggestion does not
+        // depend on websocket registration latency. The acknowledgement dependency
+        // deliberately runs this effect again after the page topic is subscribed;
+        // that second snapshot closes the gap between the first response and the
+        // realtime event stream.
         loadComments();
         loadSuggestedEdits();
-    }, [currentItemDescriptor, isClientInfoAcknowledged]);
+    }, [
+        currentItemDescriptor?.id,
+        currentItemDescriptor?.language,
+        currentItemDescriptor?.version,
+        isClientInfoAcknowledged,
+        item?.descriptor.id,
+        item?.descriptor.language,
+        item?.descriptor.version,
+    ]);
     // Track the previous history mode to detect mode changes
     const prevHistoryModeRef = useRef(historyMode);
     const historyInitialLoadDoneRef = useRef(false);
@@ -3237,26 +3277,69 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     useEffect(() => {
         loadItemVersions();
     }, [currentItemDescriptor]);
-    const loadItemVersions = useCallback(async () => {
-        if (!currentItemDescriptorRef.current) {
-            setItemVersions([]);
-            setItemLanguages([]);
+    const loadItemVersions = useCallback(async (options) => {
+        const descriptor = options?.descriptor
+            ? getItemDescriptor(options.descriptor)
+            : currentItemDescriptorRef.current
+                ? getItemDescriptor(currentItemDescriptorRef.current)
+                : undefined;
+        if (!descriptor) {
+            if (options?.clearOnMissing !== false) {
+                setItemVersions([]);
+                setItemLanguages([]);
+            }
             setIsLoadingVersions(false);
             return;
         }
+        const descriptorKey = [
+            descriptor.database || "master",
+            descriptor.id,
+            descriptor.language,
+            descriptor.version,
+        ]
+            .join(":")
+            .toLowerCase();
+        const requestId = ++versionLoadRequestRef.current;
+        visibleVersionLoadRef.current = requestId;
         setIsLoadingVersions(true);
         try {
-            const result = await getLanguagesAndVersions(currentItemDescriptorRef.current, {
-                includePublishingRestrictions: true,
-                includePublishingTargets: true,
-            });
-            if (!result?.data) {
-                setItemVersions([]);
-                setItemLanguages([]);
-                showErrorToast({
-                    summary: "Error",
-                    details: "Failed to load item versions",
+            let request = versionLoadsInFlightRef.current.get(descriptorKey);
+            if (!request) {
+                request = getLanguagesAndVersions(descriptor, {
+                    includePublishingRestrictions: true,
+                    includePublishingTargets: true,
                 });
+                versionLoadsInFlightRef.current.set(descriptorKey, request);
+                const releaseRequest = () => {
+                    if (versionLoadsInFlightRef.current.get(descriptorKey) === request) {
+                        versionLoadsInFlightRef.current.delete(descriptorKey);
+                    }
+                };
+                void request.then(releaseRequest, releaseRequest);
+            }
+            const result = await request;
+            const currentDescriptor = currentItemDescriptorRef.current;
+            const currentDescriptorKey = currentDescriptor
+                ? [
+                    currentDescriptor.database || "master",
+                    currentDescriptor.id,
+                    currentDescriptor.language,
+                    currentDescriptor.version,
+                ]
+                    .join(":")
+                    .toLowerCase()
+                : undefined;
+            if (currentDescriptorKey !== descriptorKey)
+                return;
+            if (!result?.data) {
+                if (!options?.preserveOnError) {
+                    setItemVersions([]);
+                    setItemLanguages([]);
+                    showErrorToast({
+                        summary: "Error",
+                        details: "Failed to load item versions",
+                    });
+                }
                 return;
             }
             const v = [...result.data.versions].reverse() || [];
@@ -3264,9 +3347,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setItemLanguages(result.data.languages);
         }
         finally {
-            setIsLoadingVersions(false);
+            // A superseded request must not hide the spinner for the descriptor
+            // that is currently loading. Duplicate calls for the same descriptor
+            // share one network request and settle together.
+            if (visibleVersionLoadRef.current === requestId) {
+                setIsLoadingVersions(false);
+            }
         }
-    }, [currentItemDescriptorRef.current, setItemVersions, setItemLanguages]);
+    }, [setItemVersions, setItemLanguages]);
     const showErrorToast = useCallback((error) => {
         showExpandableErrorToast(error);
     }, []);
@@ -3912,6 +4000,23 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // workspace defaults are applied by the openSidebars state initializer, while
     // explicit sidebar URL state such as sidebar=none is still respected.
     const prevWorkspaceIdForDefaultsRef = useRef(null);
+    // Next can retain this shell while hydrating or navigating within the same
+    // route. Keep explicit sidebar URL state authoritative after the initializer
+    // has run; the availability effect below still removes inaccessible panels.
+    const sidebarParam = searchParams.get("sidebar");
+    useEffect(() => {
+        const requested = parseSidebarUrlValue(sidebarParam);
+        if (requested === undefined)
+            return;
+        const current = openSidebarsRef.current;
+        const unchanged = requested.length === current.length &&
+            requested.every((id, index) => id === current[index]);
+        if (unchanged)
+            return;
+        openSidebarsRef.current = requested;
+        setOpenSidebars(requested);
+        setSidebarStacks((prev) => normalizeSidebarStacks(requested, prev));
+    }, [normalizeSidebarStacks, sidebarParam]);
     useEffect(() => {
         if (!currentWorkspace.supportsSidebars) {
             return;
@@ -3942,6 +4047,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         currentWorkspace,
         getSidebarsForWorkspace,
         normalizeSidebarStacks,
+        sidebarParam,
         updateUrl,
         workspaceId,
     ]);
@@ -4819,8 +4925,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             // the drop target's parent here made the single-selection frame
             // FLIP-animate component -> parent -> component around every drop.
             let op;
-            if (!currentItemDescriptorRef.current)
-                return { committed: false };
+            // A placeholder is rendered from this page model, so its insertion
+            // must target the same item. The shell-level descriptor can briefly
+            // lag while slots or a newly created page settle; using it here could
+            // either discard a valid click or write the component to another page.
+            const dropTargetDescriptor = page.item.descriptor;
             let insertionSequence;
             if ((spotPosition || spotPositionElement) && spotPositionAnchor) {
                 insertionSequence = ++insertingSequenceRef.current;
@@ -4838,10 +4947,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 // can exit cleanly and the editor header updates from "Add Component"
                 // to the actual component name after the operation completes.
                 setSelectedForInsertion("");
-                operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, currentItemDescriptorRef.current, { showIndicator: false });
+                operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
             }
             else if (droppedDragObject?.type == "template") {
-                operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current, { showIndicator: false });
+                operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
             }
             else if (droppedDragObject?.type == "component" ||
                 (droppedDragObject?.type == "items" && droppedDragObject.items)) {