@alpaca-editor/core 1.0.4085 → 1.0.4088

package/src/editor/client/EditorShell.tsx

@@ -122,7 +122,10 @@ import { Toaster } from "../../components/ui/sonner";
 import { Tour } from "../../tour/Tour";
 import { usePageViewContext } from "../page-viewer/pageViewContext";
 
-import { getComments } from "../services/reviewsService";
+import {
+  getComments,
+  getAvailableCommentTags,
+} from "../services/reviewsService";
 import { useReviews } from "../reviews/useReviews";
 import uuid from "react-uuid";
 import { flushSync } from "react-dom";
@@ -256,6 +259,10 @@ export function EditorShell({
     }
   });
 
+  // Block editing until the server acknowledges our client-info for the current item
+  const [isClientInfoAcknowledged, setIsClientInfoAcknowledged] =
+    useState(false);
+
   if (typeof window !== "undefined")
     sessionStorage?.setItem("sessionId", sessionId);
 
@@ -305,6 +312,9 @@ export function EditorShell({
   const [suggestedEdits, setSuggestedEdits] = useState<SuggestedEdit[]>([]);
   const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
   const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
+  const [availableCommentTags, setAvailableCommentTags] = useState<
+    { label: string; color: string }[]
+  >([]);
 
   const [showComments, setShowComments] = useState<boolean>(() => {
     const savedShowComments =
@@ -439,6 +449,34 @@ export function EditorShell({
     configuration,
   });
 
+  // Track which items are rendered/used by the current page for targeted refresh
+  const pageItemsSetRef = useRef<Set<string>>(new Set());
+  const makeItemKey = useCallback(
+    (d: ItemDescriptor) => `${d.id}-${d.language}-${d.version}`.toLowerCase(),
+    [],
+  );
+  useEffect(() => {
+    const newSet = new Set<string>();
+    const collect = (component?: Component) => {
+      if (!component) return;
+      if (component.datasourceItem)
+        newSet.add(makeItemKey(component.datasourceItem));
+      component.items?.forEach((i) => newSet.add(makeItemKey(i)));
+      component.placeholders?.forEach((ph) => ph.components?.forEach(collect));
+    };
+    if (pageViewContext?.page) {
+      // Include the page item itself
+      const pageDescriptor = pageViewContext.page.item.descriptor;
+      newSet.add(makeItemKey(pageDescriptor));
+      collect(pageViewContext.page.rootComponent);
+    }
+    pageItemsSetRef.current = newSet;
+  }, [pageViewContext.page?.editRevision]);
+  const isItemUsedInCurrentPage = useCallback(
+    (item: ItemDescriptor) => pageItemsSetRef.current.has(makeItemKey(item)),
+    [makeItemKey],
+  );
+
   const socketMessageListeners = useRef<Set<(data: any) => void>>(new Set());
 
   const addSocketMessageListener = useCallback(
@@ -450,7 +488,7 @@ export function EditorShell({
   );
 
   const reviews = useReviews({
-    currentItemDescriptor: contentEditorItem?.descriptor,
+    currentItemDescriptor,
     addSocketMessageListener: addSocketMessageListener,
   });
 
@@ -488,7 +526,7 @@ export function EditorShell({
     }
   }, [currentView]);
 
-  const sendClientInfo = async () => {
+  const sendClientInfoImmediate = useCallback(async () => {
     const clientInfoMessage = {
       type: "client-info",
       sessionId: sessionId,
@@ -502,15 +540,18 @@ export function EditorShell({
         : null,
     };
 
-    //        const socket = (globalThis as any).editorSocket;
-
-    //if (socket.readyState !== WebSocket.OPEN) {
     const url = "/alpaca/editor/client";
+
     await post(url, clientInfoMessage);
-    //} else {
-    //  socket.send(JSON.stringify(clientInfoMessage));
-    //}
-  };
+  }, [sessionId]);
+
+  const debouncedSendClientInfo = useDebouncedCallback(() => {
+    void sendClientInfoImmediate();
+  }, 100);
+
+  const sendClientInfo = useCallback(() => {
+    debouncedSendClientInfo();
+  }, [debouncedSendClientInfo]);
 
   const startTour = useCallback(() => {
     setIsTourActive(true);
@@ -797,9 +838,26 @@ export function EditorShell({
   }, [currentItemDescriptor, pageViewContext.page?.item.id]);
 
   useEffect(() => {
+    // When the item changes, reset acknowledgment and re-send client info
+    setIsClientInfoAcknowledged(false);
     sendClientInfo();
   }, [currentItemDescriptor]);
 
+  // Detect acknowledgment via presence of our session with matching item in active-sessions
+  useEffect(() => {
+    if (!currentItemDescriptor) return;
+    try {
+      const me = activeSessions.find((s) => s.sessionId === sessionId);
+      const item = me?.item;
+      const acknowledged =
+        !!item &&
+        item.id === currentItemDescriptor.id &&
+        item.language === currentItemDescriptor.language &&
+        item.version === currentItemDescriptor.version;
+      if (acknowledged) setIsClientInfoAcknowledged(true);
+    } catch {}
+  }, [activeSessions, currentItemDescriptor, sessionId]);
+
   const loadComments = useCallback(async () => {
     if (!currentItemDescriptor) return;
     const result = await getComments(
@@ -914,6 +972,31 @@ export function EditorShell({
     loadSuggestedEdits();
   }, [currentItemDescriptor]);
 
+  // Load available comment tags once per current item descriptor
+  useEffect(() => {
+    let cancelled = false;
+    const loadTags = async () => {
+      try {
+        if (!currentItemDescriptor) {
+          if (!cancelled) setAvailableCommentTags([]);
+          return;
+        }
+        const tags = await getAvailableCommentTags(currentItemDescriptor);
+        if (!cancelled) setAvailableCommentTags(tags || []);
+      } catch {
+        if (!cancelled) setAvailableCommentTags([]);
+      }
+    };
+    loadTags();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    currentItemDescriptor?.id,
+    currentItemDescriptor?.language,
+    currentItemDescriptor?.version,
+  ]);
+
   // Load favorites on mount
   useEffect(() => {
     loadFavorites();
@@ -1278,7 +1361,7 @@ export function EditorShell({
 
   const { workboxItems } = useWorkbox({
     page,
-    contentEditorItem,
+    currentItemDescriptor,
     validate,
   });
 
@@ -1301,6 +1384,7 @@ export function EditorShell({
     loadHistory,
     addRecentEdit,
     socketMessageListeners,
+    isItemUsedInCurrentPage,
   });
 
   const { socketRef: socketInstanceRef } = useEditorWebSocket({
@@ -1444,7 +1528,9 @@ export function EditorShell({
     !contentEditorItem ||
     !contentEditorItem.canWriteItem ||
     !contentEditorItem.canWriteLanguage ||
-    !contentEditorItem.canWriteWorkflow;
+    !contentEditorItem.canWriteWorkflow ||
+    // Block editing until server acknowledges client-info for the current item
+    (currentItemDescriptor ? !isClientInfoAcknowledged : false);
 
   const updateUrl = useCallback(
     (params: Record<string, string | undefined>) => {
@@ -1711,18 +1797,31 @@ export function EditorShell({
         }
 
         if (actionButton.action) {
-          setActiveFieldActions((prevFieldActions) => [
-            ...prevFieldActions.filter(
-              (x) =>
-                !(
-                  x.field.fieldId == fieldDescriptor.fieldId &&
-                  x.field.item.id == fieldItem.id &&
-                  x.field.item.language == fieldItem.language &&
-                  x.field.item.version == fieldItem.version
-                ),
-            ),
-            op,
-          ]);
+          setActiveFieldActions((prevFieldActions) => {
+            const isSameField = (x: FieldAction) =>
+              x.field.fieldId == fieldDescriptor.fieldId &&
+              x.field.item.id == fieldItem.id &&
+              x.field.item.language == fieldItem.language &&
+              x.field.item.version == fieldItem.version;
+
+            const existing = prevFieldActions.find(isSameField);
+
+            // Preserve any existing state/message (e.g., an early websocket error)
+            // to avoid overwriting it with a stale "running" state
+            const mergedOp: FieldAction = existing
+              ? {
+                  ...op,
+                  state: existing.state,
+                  message: existing.message,
+                  label: existing.label ?? op.label,
+                }
+              : op;
+
+            return [
+              ...prevFieldActions.filter((x) => !isSameField(x)),
+              mergedOp,
+            ];
+          });
           await executeFieldServerAction(
             fieldDescriptor.item,
             fieldDescriptor.fieldId,
@@ -1741,7 +1840,10 @@ export function EditorShell({
 
           itemsRepository.refreshItems([fieldDescriptor.item]);
 
-          op.state = "success";
+          // Only mark as success if no websocket error has been reported
+          if (op.state === "running") {
+            op.state = "success";
+          }
           requestRefresh("immediate");
         }
       },
@@ -1853,6 +1955,7 @@ export function EditorShell({
       selectedComment,
       setSelectedComment,
       comments,
+      availableCommentTags,
       loadComments,
       setComments,
       showComments,

package/src/editor/client/editContext.ts

@@ -136,6 +136,7 @@ export type EditContextType = {
   comments: Comment[];
   suggestedEdits: SuggestedEdit[];
   setSuggestedEdits: React.Dispatch<React.SetStateAction<SuggestedEdit[]>>;
+  availableCommentTags: { label: string; color: string }[];
   loadComments: () => void;
   setComments: React.Dispatch<React.SetStateAction<Comment[]>>;
   selectedComment: Comment | undefined;

package/src/editor/client/hooks/useSocketMessageHandler.ts

@@ -48,6 +48,7 @@ export function useSocketMessageHandler(deps: {
   loadHistory: (item: ItemDescriptor) => void;
   addRecentEdit: (edit: any) => void;
   socketMessageListeners: React.MutableRefObject<Set<(data: any) => void>>;
+  isItemUsedInCurrentPage: (item: ItemDescriptor) => boolean;
 }) {
   const {
     sessionId,
@@ -67,6 +68,7 @@ export function useSocketMessageHandler(deps: {
     loadHistory,
     addRecentEdit,
     socketMessageListeners,
+    isItemUsedInCurrentPage,
   } = deps;
 
   const messageHandler = useCallback(
@@ -114,23 +116,37 @@ export function useSocketMessageHandler(deps: {
         } catch {}
       }
 
-      if (message.type === "item-deleted") {
-        itemsRepository.onItemsDeleted([
-          { item: message.payload.item, parentId: message.payload.parentId },
-        ]);
-        if (message.payload.item.id === currentItemDescriptor?.id) {
-          loadItem({
-            id: message.payload.parentId,
-            language: currentItemDescriptor?.language ?? "en",
-            version: 0,
-          });
-        }
-      }
-
       if (message.type === "item-changed") {
-        await itemsRepository.refreshItems([message.payload.item]);
-        if (message.payload.item.id === currentItemDescriptor?.id)
-          await loadItemVersions();
+        if (message.payload.action === "delete") {
+          const parentId =
+            message.payload?.parentId ?? message.payload?.changes?.parentId;
+          itemsRepository.onItemsDeleted([
+            { item: message.payload.item, parentId },
+          ]);
+          if (
+            message.payload.item.id === currentItemDescriptor?.id &&
+            parentId
+          ) {
+            loadItem({
+              id: parentId,
+              language: currentItemDescriptor?.language ?? "en",
+              version: 0,
+            });
+          }
+        } else {
+          await itemsRepository.refreshItems(
+            [message.payload.item],
+            message.payload.changes,
+          );
+          const changes = message?.payload?.changes;
+          const isPropertiesChange = changes?.properties !== false; // default true
+          if (
+            isPropertiesChange &&
+            message.payload.item.id === currentItemDescriptor?.id
+          ) {
+            await loadItemVersions();
+          }
+        }
       }
 
       if (message.type === "item-version-added") {
@@ -242,10 +258,32 @@ export function useSocketMessageHandler(deps: {
               field.type !== "multi-line text" &&
               field.type !== "rich text")
           ) {
-            itemsRepository.refreshItems([
-              { ...editFieldOperation.mainItem, id: editFieldOperation.itemId },
-            ]);
-            requestRefresh("immediate");
+            itemsRepository.refreshItems(
+              [
+                {
+                  ...editFieldOperation.mainItem,
+                  id: editFieldOperation.itemId,
+                },
+              ],
+              { properties: true },
+            );
+            // Only refresh the page if it is affected
+            const pageDescriptor: ItemDescriptor | undefined =
+              currentItemRef.current?.descriptor;
+            const isSamePage =
+              !!pageDescriptor &&
+              !!op.mainItem &&
+              op.mainItem.id === pageDescriptor.id &&
+              op.mainItem.language === pageDescriptor.language &&
+              op.mainItem.version === pageDescriptor.version;
+            const targetItem: ItemDescriptor = {
+              id: editFieldOperation.itemId,
+              language: editFieldOperation.mainItem?.language,
+              version: editFieldOperation.mainItem?.version,
+            };
+            if (isSamePage || isItemUsedInCurrentPage(targetItem)) {
+              requestRefresh("immediate");
+            }
           } else {
             itemsRepository.updateFieldValue(
               {
@@ -263,7 +301,18 @@ export function useSocketMessageHandler(deps: {
             );
           }
         } else {
-          requestRefresh("immediate");
+          // For non-field operations, refresh only if the current page matches the operation's main item
+          const pageDescriptor: ItemDescriptor | undefined =
+            currentItemRef.current?.descriptor;
+          const shouldRefresh =
+            !!pageDescriptor &&
+            !!op.mainItem &&
+            op.mainItem.id === pageDescriptor.id &&
+            op.mainItem.language === pageDescriptor.language &&
+            op.mainItem.version === pageDescriptor.version;
+          if (shouldRefresh) {
+            requestRefresh("immediate");
+          }
         }
         if (
           op.mainItem &&

package/src/editor/client/hooks/useWorkbox.ts

@@ -7,10 +7,10 @@ import type { WorkboxItem } from "../../../types";
 
 export function useWorkbox(params: {
   page: any;
-  contentEditorItem?: any;
+  currentItemDescriptor?: ItemDescriptor;
   validate: (items: ItemDescriptor[]) => void;
 }) {
-  const { page, contentEditorItem, validate } = params;
+  const { page, currentItemDescriptor, validate } = params;
   const [workboxItems, setWorkboxItems] = useState<WorkboxItem[]>([]);
 
   useEffect(() => {
@@ -45,11 +45,11 @@ export function useWorkbox(params: {
 
   useEffect(() => {
     const items: ItemDescriptor[] = [];
-    if (contentEditorItem) items.push(contentEditorItem.descriptor);
+    if (currentItemDescriptor) items.push(currentItemDescriptor);
     if (page) collectAllItems(page.rootComponent, items);
     loadWorkboxDebounced(items.filter(Boolean));
     return () => loadWorkboxDebounced.cancel();
-  }, [page, contentEditorItem, loadWorkboxDebounced]);
+  }, [page, currentItemDescriptor, loadWorkboxDebounced]);
 
   function collectAllItems(component: Component, items: ItemDescriptor[]) {
     component.placeholders.forEach((x) => {

package/src/editor/client/itemsRepository.ts

@@ -18,6 +18,14 @@ export type ItemChange = {
   item: ItemDescriptor;
   action: "add" | "delete" | "update";
   parentId?: string;
+  changes: {
+    fields?: string[];
+    children?: boolean;
+    properties?: boolean;
+    parentId?: string;
+    name?: string;
+    templateId?: string;
+  };
 };
 export type DeletedItem = { item: ItemDescriptor; parentId: string };
 
@@ -34,7 +42,10 @@ export type ItemsRepository = {
     rawValue?: string | null,
   ) => Promise<number>;
 
-  refreshItems: (items: ItemDescriptor[]) => Promise<void>;
+  refreshItems: (
+    items: ItemDescriptor[],
+    changes?: { properties?: boolean; children?: boolean; fields?: string[] },
+  ) => Promise<void>;
   revision: number;
   onFieldSaved: (
     field: FieldDescriptor,
@@ -62,32 +73,14 @@ const isTemplateChange = async (
   getItem: (descriptor: ItemDescriptor) => Promise<FullItem | undefined>,
 ): Promise<boolean> => {
   try {
-    const item = await getItem(change.item);
-    if (!item) return false;
-
     // Check if the item is under the /sitecore/templates path
     if (
-      item.path &&
-      item.path.toLowerCase().startsWith("/sitecore/templates")
+      change.item?.path &&
+      change.item.path.toLowerCase().startsWith("/sitecore/templates")
     ) {
       return true;
     }
 
-    // Check if the item's templateId indicates it's a template-related item
-    const templateId = item.templateId?.toLowerCase();
-    if (
-      templateId === TEMPLATE_TEMPLATE_ID.toLowerCase() ||
-      templateId === TEMPLATE_FIELD_TEMPLATE_ID.toLowerCase() ||
-      templateId === TEMPLATE_SECTION_TEMPLATE_ID.toLowerCase()
-    ) {
-      return true;
-    }
-
-    // Check if the item is under the templates root using the configured templates root ID
-    if (item.path && item.path.includes(templatesRootItemId)) {
-      return true;
-    }
-
     return false;
   } catch (error) {
     console.error("Error checking if item change is template-related:", error);
@@ -215,8 +208,10 @@ export function useItemsRepository(
         descriptor: x,
       }));
 
+      // Always refetch version 0 ("latest") to avoid stale caches after new versions are created
       const itemsMissing = keys.filter(
-        (item) => !itemsMap.current.has(item.key),
+        (entry) =>
+          entry.descriptor.version === 0 || !itemsMap.current.has(entry.key),
       );
       const map = itemsMap;
 
@@ -306,6 +301,12 @@ export function useItemsRepository(
       const itemsToFetch: ItemDescriptor[] = [];
 
       for (const { key, descriptor } of keys) {
+        // Always refetch version 0 ("latest") stubs to avoid stale cache
+        if (descriptor.version === 0) {
+          itemsToFetch.push(descriptor);
+          continue;
+        }
+
         // If we have the full item, use it
         const fullItem = itemsMap.current.get(key);
         if (fullItem) {
@@ -442,7 +443,26 @@ export function useItemsRepository(
   );
 
   const refreshItems = useCallback(
-    async (items: ItemDescriptor[]) => {
+    async (
+      items: ItemDescriptor[],
+      changes?: { properties?: boolean; children?: boolean; fields?: string[] },
+    ) => {
+      // If only children changed and no properties changed, avoid fetching items.
+      // Still notify listeners so UIs like ContentTree can reload children lists.
+      const onlyChildrenChanged =
+        changes?.children === true && changes?.fields === undefined;
+
+      if (onlyChildrenChanged) {
+        triggerItemsChangedEvent(
+          items.map((x) => ({
+            item: x,
+            action: "update",
+            changes: changes ?? {},
+          })),
+        );
+        return;
+      }
+
       // Filter to only include items that are already cached
       const itemsToFetch = items.filter((item) =>
         itemsMap.current.has(generateKey(item)),
@@ -530,7 +550,11 @@ export function useItemsRepository(
         setRevision((prev) => prev + 1);
       }
       triggerItemsChangedEvent(
-        items.map((x) => ({ item: x, action: "update" })),
+        items.map((x) => ({
+          item: x,
+          action: "update",
+          changes: changes ?? {},
+        })),
       );
     },
     [setRevision, fetchItemsFromServer, setModifiedFields],
@@ -575,7 +599,13 @@ export function useItemsRepository(
       if (dependencies) {
         refreshItems(dependencies);
       }
-      triggerItemsChangedEvent([{ item: field.item, action: "update" }]);
+      triggerItemsChangedEvent([
+        {
+          item: field.item,
+          action: "update",
+          changes: { fields: [field.fieldId] },
+        },
+      ]);
     },
     [setModifiedFields, refreshItems],
   );
@@ -593,6 +623,7 @@ export function useItemsRepository(
           item: x.item,
           action: "delete",
           parentId: x.parentId,
+          changes: {},
         })),
       );
       setRevision((prev) => prev + 1);

package/src/editor/client/pageModelBuilder.ts

@@ -213,7 +213,7 @@ export function usePageModel(
 
   useEffect(() => {
     updatePageModel();
-  }, [pageSkeleton, itemsRepository, insertOptions]);
+  }, [pageSkeleton, insertOptions]);
 
   return {
     setPageSkeleton,

package/src/editor/control-center/Setup.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useEditContext } from "../client/editContext";
+import { DbSetupStep } from "./setup-steps/DbSetupStep";
+import { SettingsSetupStep } from "./setup-steps/SettingsSetupStep";
+import { AiSetupStep } from "./setup-steps/AiSetupStep";
+import { IndexSetupStep } from "./setup-steps/IndexSetupStep";
+
+export function Setup() {
+  const editContext = useEditContext();
+  const configuredSteps = editContext?.configuration?.setup?.steps;
+  const steps = React.useMemo(() => {
+    if (configuredSteps && configuredSteps.length > 0) return configuredSteps;
+    return [DbSetupStep, SettingsSetupStep, AiSetupStep, IndexSetupStep];
+  }, [configuredSteps]);
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="mb-4 text-lg font-semibold text-gray-800">Setup</div>
+      <div className="grid grid-cols-1 gap-4">
+        {steps.map((Step, idx) => (
+          <Step key={idx} />
+        ))}
+      </div>
+    </div>
+  );
+}