@alpaca-editor/core 1.0.4009 → 1.0.4011

package/src/page-wizard/PageWizard.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../editor/client/editContext";
 import { getWizards } from "./service";
 
 import { WizardSteps } from "./WizardSteps";
 import { Thumbnail } from "../editor/services/contentService";
+import { Spinner } from "../editor/ui/Spinner";
 
 export type Wizard = {
   id: string;
@@ -92,108 +93,83 @@ export type WizardField = {
 
 export function PageWizard() {
   const editContext = useEditContext();
-  const hasProcessedUrl = useRef(false);
-  const isLoadingFromUrl = useRef(false);
-  const urlWizardId = useRef<string | null>(null);
+  const [wizard, setWizard] = useState<Wizard | null>(null);
+  const [parentItem, setParentItem] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
-  const { wizard, parentItem } = editContext?.pageWizard || {};
-
-  // Load all wizards and check URL param on mount
   useEffect(() => {
-    if (!editContext?.currentItemDescriptor || hasProcessedUrl.current) return;
-
-    const params = new URLSearchParams(window.location.search);
-    const wizardId = params.get("wizardId");
-    urlWizardId.current = wizardId;
-
-    if (wizardId && !wizard) {
-      isLoadingFromUrl.current = true;
-
-      getWizards(editContext.currentItemDescriptor)
-        .then((availableWizards) => {
-          // Find wizard by ID from the loaded wizards
-          const foundWizard = availableWizards.find((w) => w.id === wizardId);
-
-          if (foundWizard) {
-            editContext.pageWizard.setWizard(foundWizard);
-            editContext.pageWizard.setParentItem(
-              editContext.currentItemDescriptor,
-            );
-          } else {
-            // Remove invalid wizardId from URL
-            const newParams = new URLSearchParams(window.location.search);
-            newParams.delete("wizardId");
-            const newUrl = newParams.toString()
-              ? `${window.location.pathname}?${newParams.toString()}`
-              : window.location.pathname;
-            window.history.pushState({}, "", newUrl);
-          }
-
-          isLoadingFromUrl.current = false;
-          hasProcessedUrl.current = true;
-        })
-        .catch((error) => {
-          console.error("PageWizard: Error loading wizards:", error);
-          isLoadingFromUrl.current = false;
-          hasProcessedUrl.current = true;
-        });
-    } else {
-      hasProcessedUrl.current = true;
-    }
-  }, [editContext?.currentItemDescriptor]);
-
-  // Update URL when wizard is set programmatically (not from URL)
-  useEffect(() => {
-    // Don't update URL if we're loading from URL or haven't processed URL yet
-    if (isLoadingFromUrl.current || !hasProcessedUrl.current) {
-      return;
-    }
+    const wizardId = editContext?.currentWizardId;
+
+    async function loadWizard() {
+      if (wizard) return;
+      if (!wizardId) {
+        // If no wizard ID, we can't proceed
+        console.log("PageWizard - No wizard ID, cannot load wizard");
+        setIsLoading(false);
+        return;
+      }
 
-    const params = new URLSearchParams(window.location.search);
-    const currentWizardParam = params.get("wizardId");
+      // If no content editor item yet, keep waiting (don't give up)
+      if (!editContext?.contentEditorItem) {
+        setIsLoading(true);
+        return;
+      }
 
-    if (wizard && currentWizardParam !== wizard.id) {
-      // Add wizard to URL (only if it wasn't the original URL wizard)
-      if (urlWizardId.current !== wizard.id) {
-        params.set("wizardId", wizard.id);
-        const newUrl = `${window.location.pathname}?${params.toString()}`;
-        window.history.pushState({}, "", newUrl);
+      setIsLoading(true);
+      try {
+        const availableWizards = await getWizards(
+          editContext.contentEditorItem.descriptor,
+        );
+        const foundWizard = availableWizards.find((w) => w.id === wizardId);
+        if (foundWizard) {
+          setWizard(foundWizard);
+          setParentItem(editContext.contentEditorItem.descriptor);
+        } else {
+          console.log("PageWizard - Wizard not found:", wizardId);
+          // Only switch away if we actually looked for the wizard and didn't find it
+          editContext?.switchView("content-editor", { skipConfirmation: true });
+        }
+      } catch (error) {
+        console.error("PageWizard: Error loading wizards:", error);
+        editContext?.switchView("content-editor", { skipConfirmation: true });
+      } finally {
+        setIsLoading(false);
       }
-    } else if (
-      !wizard &&
-      currentWizardParam &&
-      urlWizardId.current !== currentWizardParam
-    ) {
-      // Only remove wizard from URL if it's different from the original URL wizard
-      params.delete("wizardId");
-      const newUrl = params.toString()
-        ? `${window.location.pathname}?${params.toString()}`
-        : window.location.pathname;
-      window.history.pushState({}, "", newUrl);
     }
-  }, [wizard]);
 
-  if (!editContext?.currentItemDescriptor) {
-    return <div>Loading...</div>;
+    loadWizard();
+  }, [editContext?.contentEditorItem, editContext?.currentWizardId]);
+
+  // Show loading spinner while waiting for item to load or wizard to load
+  if (
+    isLoading ||
+    (!editContext?.contentEditorItem && editContext?.currentWizardId)
+  ) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
   }
 
-  // Check if we're loading from URL - don't switch back to content-editor in that case
-  const params = new URLSearchParams(window.location.search);
-  const currentUrlWizardId = params.get("wizardId");
-
-  if (!parentItem || !wizard) {
-    // If we have a wizardId in URL but wizard hasn't loaded yet, show loading
-    if (currentUrlWizardId && !wizard) {
-      return (
-        <div className="flex h-full items-center justify-center">
-          Loading wizard...
-        </div>
-      );
-    }
-    // Otherwise switch back to content-editor
-    editContext.switchView("content-editor", { skipConfirmation: true });
+  // Only switch away if we have no wizard AND no wizard ID (i.e., we're not supposed to be here)
+  if (!wizard && !editContext?.currentWizardId) {
+    console.log(
+      "PageWizard - No wizard and no wizard ID, switching to content-editor",
+    );
+    editContext?.switchView("content-editor", { skipConfirmation: true });
     return null;
   }
 
-  return <WizardSteps wizard={wizard} parentItem={parentItem} />;
+  // If we have a wizard, render it
+  if (wizard && parentItem) {
+    return <WizardSteps wizard={wizard} parentItem={parentItem} />;
+  }
+
+  // Still waiting for wizard to load
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Spinner />
+    </div>
+  );
 }

package/src/page-wizard/WizardSteps.tsx

@@ -4,14 +4,13 @@ import { Wizard, WizardData, WizardPageModel, WizardStep } from "./PageWizard";
 import { ItemDescriptor } from "../editor/pageModel";
 import { Logo } from "../editor/ui/Icons";
 
-import { flushSync } from "react-dom";
 import { useEditContext } from "../editor/client/editContext";
 import { classNames } from "primereact/utils";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
 
 import { Button } from "../components/ui/button";
 import { cn } from "../lib/utils";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 
 interface WizardStepsProps {
   wizard: Wizard;
@@ -318,6 +317,21 @@ function MobileNavigationButtons({
 }
 
 export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
+  // Local state management instead of pageWizard context
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [data, setData] = useState<WizardData>({});
+  const [pageModel, setPageModel] = useState<WizardPageModel>({
+    components: [],
+    name: "",
+    metaDescription: "",
+    metaKeywords: "",
+    fields: [],
+  });
+  const [internalState, setInternalState] = useState<any>({});
+  const [stepCompleted, setStepCompleted] = useState(-1);
+
+  const beforeNextCallbackRef = useRef<(() => Promise<boolean>) | null>(null);
+
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
       e.preventDefault();
@@ -332,36 +346,10 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   }, []);
 
   const editContext = useEditContext();
-  const pageWizard = editContext?.pageWizard;
-
-  // Use state from pageWizard context instead of local state
-  const currentStepIndex = pageWizard?.currentStepIndex ?? 0;
-  const setCurrentStepIndex = pageWizard?.setCurrentStepIndex ?? (() => {});
-  const data = pageWizard?.data ?? {};
-  const setData = pageWizard?.setData ?? (() => {});
-  const pageModel = pageWizard?.pageModel ?? {
-    components: [],
-    name: "",
-    metaDescription: "",
-    metaKeywords: "",
-    fields: [],
-  };
-  const setPageModel = pageWizard?.setPageModel ?? (() => {});
-  const internalState = pageWizard?.internalState ?? {};
-  const setInternalState = pageWizard?.setInternalState ?? (() => {});
-  const stepCompleted = pageWizard?.stepCompleted ?? -1;
-  const setStepCompleted = pageWizard?.setStepCompleted ?? (() => {});
-
-  const beforeNextCallbackRef = pageWizard?.beforeNextCallbackRef ?? {
-    current: null,
-  };
-
   const isMobile = editContext?.isMobile ?? false;
 
   const setBeforeNextCallback = (callback: (() => Promise<boolean>) | null) => {
-    if (beforeNextCallbackRef) {
-      beforeNextCallbackRef.current = callback;
-    }
+    beforeNextCallbackRef.current = callback;
   };
 
   const getCurrentStep = () => {
@@ -393,7 +381,9 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
           wizard={wizard}
           setStepCompleted={(completed) => {
             if (completed) {
-              setStepCompleted((prev) => Math.max(prev, currentStepIndex));
+              setStepCompleted((prev: number) =>
+                Math.max(prev, currentStepIndex),
+              );
             } else {
               setStepCompleted(currentStepIndex - 1);
             }
@@ -410,18 +400,14 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   };
 
   const switchStep = (index: number) => {
+    beforeNextCallbackRef.current = null; // Clear callback when switching steps
+
     if (typeof document.startViewTransition === "function") {
       document.startViewTransition(() => {
-        flushSync(() => {
-          setCurrentStepIndex(index);
-          beforeNextCallbackRef.current = null; // Clear callback when switching steps
-        });
-      });
-    } else {
-      flushSync(() => {
         setCurrentStepIndex(index);
-        beforeNextCallbackRef.current = null; // Clear callback when switching steps
       });
+    } else {
+      setCurrentStepIndex(index);
     }
   };
 
@@ -447,6 +433,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   };
 
   const handleClose = () => {
+    editContext?.setCurrentWizardId(null);
     editContext?.switchView("content-editor");
   };
 

package/src/page-wizard/startPageWizardCommand.ts

@@ -13,10 +13,9 @@ export const startPageWizardCommand = {
 
     await context.editContext.loadItem(context.data.item);
 
-    // Add wizard name to URL
+    // Set wizard state (URL will be synced automatically)
     if (context.data?.wizard) {
-      context.editContext.pageWizard.setWizard(context.data.wizard);
-      context.editContext.pageWizard.setParentItem(context.data.item);
+      context.editContext.setCurrentWizardId(context.data.wizard.id);
       context.editContext.switchView("page-wizard");
     }
   },

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4009";
-export const buildDate = "2025-07-21 01:46:16";
+export const version = "1.0.4011";
+export const buildDate = "2025-07-22 15:34:03";