@alpaca-editor/core 1.0.3953 → 1.0.3955

package/src/editor/utils.ts

@@ -73,6 +73,13 @@ export const useLocalStorage = <T>(
   return [value, setValue];
 };
 
+export const extractItemIdFromItemUri = (uri: string): string => {
+  const match = uri.match(/\{[A-F0-9-]+\}/i);
+  return match
+    ? match[0].replace(/[{}]/g, "").toLowerCase()
+    : uri.toLowerCase();
+};
+
 export function isFieldActionExecuting(
   field: Field,
   editContext: EditContextType,
@@ -422,6 +429,10 @@ export const getAbsolutePosition = (
 
 export function findParentComponentId(element: HTMLElement) {
   while (element && element !== document.documentElement) {
+    if (element.getAttribute("sc_item")) {
+      return extractItemIdFromItemUri(element.getAttribute("sc_item")!);
+    }
+
     const startElement = findStartElement(element);
 
     if (startElement) {
@@ -436,7 +447,10 @@ function findStartElement(element: HTMLElement) {
   let prev: Element | null = element;
   while (prev) {
     prev = prev.previousElementSibling;
-    if (prev?.getAttribute("data-component-start")) {
+    if (
+      prev?.getAttribute("data-component-start") &&
+      !prev.hasAttribute("data-skip-component")
+    ) {
       return prev;
     }
   }

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3953";
-export const buildDate = "2025-06-17 01:48:27";
+export const version = "1.0.3955";
+export const buildDate = "2025-06-19 14:51:54";

package/src/splash-screen/NewPage.tsx

@@ -275,6 +275,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                       )}
                       <div className="mt-4">
                         <ActionButton
+                          id="create-new-page-button"
                           onClick={handleOk}
                           disabled={!isValid}
                           isLoading={false}

package/src/splash-screen/SplashScreen.tsx

@@ -149,7 +149,8 @@ export function SplashScreen() {
               system. It allows you to create and manage your content in a
               simple and intuitive way.
               <div className="flex flex-col gap-4">
-                <ActionButton
+                <ActionButton 
+                  id="create-new-page-button"
                   onClick={() => editContext?.switchView("new-page")}
                 >
                   Create new page
@@ -159,9 +160,9 @@ export function SplashScreen() {
                 >
                   Open existing page
                 </ActionButton>
-                {/* <ActionButton onClick={() => editContext?.startTour()}>
+                <ActionButton onClick={() => editContext?.startTour()}>
                   Take tour <MagicEditIcon />
-                </ActionButton> */}
+                </ActionButton>
                 <ActionButton
                   onClick={() => {
                     window.open(

package/src/tour/default-tour.tsx

@@ -7,7 +7,6 @@ export function getDefaultTourSteps(
     stopTour,
     waitForElement,
     waitForElementToDisappear,
-    setFocusRect,
     delay,
     waitForInput,
     simulateTyping,
@@ -60,43 +59,23 @@ export function getDefaultTourSteps(
           Click on the <b>New Page</b> tab to create a new page
         </>
       ),
-      focusElement: "#new-page-tab",
+      focusElement: "#create-new-page-button",
+      bubblePosition: "top-right",
       waitForUserInput: async () => {
-        await waitForElement("#new-page-tab.active-tab");
+        await waitForElement(".tour-pick-location");
       },
       nextStep: "pick-location",
     },
     "pick-location": {
       description: (
         <>
-          Select the <b>Playground</b> folder as the parent for your new page
+          Open up a folder for your page
         </>
       ),
-      focusElement: ".tour-pick-location",
+      focusElement: ".tree-container",
+      bubblePosition: "bottom",
       waitForUserInput: async () => {
-        await new Promise<void>((resolve) => {
-          const checkForElement = () => {
-            const elements = document.querySelectorAll(".p-highlight");
-            for (const element of elements) {
-              if (element.textContent?.trim() === "Playground") {
-                setFocusRect(element.getBoundingClientRect());
-                resolve();
-                return;
-              }
-            }
-            requestAnimationFrame(checkForElement);
-          };
-          checkForElement();
-        });
-      },
-      getPointTo: () => {
-        const elements = document.querySelectorAll(".p-treenode-label");
-        for (const element of elements) {
-          if (element.textContent?.trim() === "Playground") {
-            return element.getBoundingClientRect();
-          }
-        }
-        return undefined;
+        await waitForElement(".bg-theme-secondary-light");
       },
       nextStep: "choose-template",
     },
@@ -104,7 +83,7 @@ export function getDefaultTourSteps(
       description: "Select a template for your page",
       focusElement: ".tour-choose-template",
       waitForUserInput: async () => {
-        await waitForElement(".tour-selected-template");
+        await waitForElement(".bg-theme-secondary-light");
       },
       bubblePosition: "left",
       nextStep: "enter-name",
@@ -114,15 +93,24 @@ export function getDefaultTourSteps(
       focusElement: "#new-page-name",
       bubblePosition: "left",
       waitForUserInput: async () => {
-        await waitForElement("#create-new-page-button:not(.p-disabled)");
+        await waitForElement("#create-new-page-button:not([disabled])");
       },
       nextStep: "create-page",
     },
     "create-page": {
       description: "Click the Create button",
       focusElement: "#create-new-page-button",
+      bubblePosition: "bottom",
       waitForUserInput: async () => {
-        await waitForElement("#insert-component-button");
+        // wait for loading spinner
+        await waitForElement(".pi-cog");
+      },
+      nextStep: "loading",
+    },
+    "loading": {
+      description: "Waiting for your new page...",
+      waitForUserInput: async () => {
+        await waitForElementToDisappear(".pi-cog");
       },
       nextStep: "ready-to-add-component",
     },
@@ -132,16 +120,23 @@ export function getDefaultTourSteps(
         {
           label: (
             <>
-              <i className="pi pi-arrow-right" /> I'm ready, lets go!
+              <i className="pi pi-arrow-right" /> I&#39;m ready, lets go!
             </>
           ),
-          onClick: () => nextStep("insert-component"),
+          onClick: () => {
+            if (document.querySelector("#insert-component-button")) {
+              nextStep("insert-component");
+            } else {
+              nextStep("drag-component");
+            }
+          },
         },
       ],
     },
     "insert-component": {
       description: "Excellent, click on the plus button to insert a component.",
       focusElement: "#insert-component-button",
+      bubblePosition: "bottom",
       waitForUserInput: async () => {
         await waitForElement(".tour-component-palette");
       },
@@ -150,6 +145,7 @@ export function getDefaultTourSteps(
     "drag-component": {
       description: `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
       focusElement: `#insert-component-${config.firstComponentTemplateId}`,
+      bubblePosition: "bottom",
       waitForUserInput: async () => {
         await waitForElement(".tour-placeholder-dropzone");
       },
@@ -231,7 +227,7 @@ export function getDefaultTourSteps(
       description: "Click on the AI sidebar to open the AI chat.",
       focusElement: `[data-sidebarview-name='ai']`,
       nextStep: "ai-terminal",
-      waitForElement: "[data-sidebarview-name='ai'].a-active",
+      waitForElement: "[data-sidebarview-name='ai'].active",
     },
     "ai-terminal": {
       description: