@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/page-wizard/steps/schema.ts

@@ -0,0 +1,180 @@
+import {
+  WizardSchemaComponent,
+  PageSchema,
+  SchemaComponent,
+  WizardSchemaField,
+} from "../PageWizard";
+type WizardSchemaComponentAccumulator = {
+  name: string;
+  type: string;
+  fields: WizardSchemaField[];
+  validParentPlaceholders: Set<string>;
+  validChildComponentTypes: Set<string>;
+  allowedOnRoot: boolean;
+};
+
+export function convertPageSchemaToWizardComponents(
+  pageSchema: PageSchema,
+  whitelist: string[]
+): WizardSchemaComponent[] {
+  const componentMap = new Map<string, WizardSchemaComponentAccumulator>();
+
+  /**
+   * Recursively processes a SchemaComponent.
+   *
+   * @param component - The current SchemaComponent to process.
+   * @param parentPlaceholder - The name of the placeholder where the component appears.
+   * @param isRoot - True if the component is at the root level.
+   * @param parentAccumulator - The accumulator of the parent component (if the parent is allowed).
+   */
+  function processComponent(
+    component: SchemaComponent,
+    parentPlaceholder: string,
+    isRoot: boolean,
+    parentAccumulator?: WizardSchemaComponentAccumulator
+  ): void {
+    const isAllowed = whitelist.includes(component.type);
+    let currentAccumulator: WizardSchemaComponentAccumulator | undefined =
+      undefined;
+
+    if (isAllowed) {
+      // If a parent accumulator exists (and is allowed), record the child's type as a valid child type.
+      if (parentAccumulator) {
+        parentAccumulator.validChildComponentTypes.add(component.type);
+      }
+
+      if (componentMap.has(component.typeId)) {
+        currentAccumulator = componentMap.get(component.typeId)!;
+        currentAccumulator.validParentPlaceholders.add(parentPlaceholder);
+        // Mark as allowed on root if encountered at the root level in any instance.
+        if (isRoot) {
+          currentAccumulator.allowedOnRoot = true;
+        }
+      } else {
+        currentAccumulator = {
+          name: component.typeId, // using typeId as the wizard component name
+          type: component.type,
+          fields: component.fields.map((field) => ({
+            name: field.name,
+            type: field.type,
+          })),
+          validParentPlaceholders: new Set([parentPlaceholder]),
+          validChildComponentTypes: new Set<string>(),
+          allowedOnRoot: isRoot,
+        };
+        componentMap.set(component.typeId, currentAccumulator);
+      }
+    }
+    // Process child components regardless of whether the current component is allowed.
+    for (const placeholder of component.placeholders) {
+      for (const child of placeholder.components) {
+        processComponent(child, placeholder.name, false, currentAccumulator);
+      }
+    }
+  }
+
+  // Process each top-level component in the PageSchema.
+  for (const placeholder of pageSchema) {
+    for (const component of placeholder.components) {
+      processComponent(component, placeholder.name, true);
+    }
+  }
+
+  // Convert accumulators to final WizardSchemaComponent objects.
+  const wizardComponents: WizardSchemaComponent[] = [];
+  for (const acc of componentMap.values()) {
+    const wizardComponent: WizardSchemaComponent = {
+      type: acc.type,
+      fields: acc.fields,
+      allowedChildrenComponentTypes: Array.from(acc.validChildComponentTypes),
+      allowedOnRoot: acc.allowedOnRoot,
+    };
+    // Only include validParentPlaceholders if there is more than one.
+    if (acc.validParentPlaceholders.size > 1) {
+      wizardComponent.availableParentPlaceholders = Array.from(
+        acc.validParentPlaceholders
+      );
+    }
+    wizardComponents.push(wizardComponent);
+  }
+
+  return wizardComponents;
+}
+
+/**
+ * Finds a placeholder (by its name) where a child component of type `childComponentType`
+ * can be placed inside a parent of type `parentComponentType`. For a parentComponentType
+ * equal to "root" (case‑insensitive), the function searches among top‑level placeholders.
+ *
+ * @param schema - The PageSchema (an array of SchemaPlaceholders).
+ * @param parentComponentType - The type of the parent component, or "root" to indicate top‑level.
+ * @param childComponentType - The type of the child component to place.
+ * @returns The name of a valid placeholder or undefined if none is found.
+ */
+export function getPlaceholder(
+  schema: PageSchema,
+  parentComponentType: string,
+  childComponentType: string
+): string | undefined {
+  // Check for the special case where we want to place at the root level.
+  if (parentComponentType.toLowerCase() === "root") {
+    // First, look for a top-level placeholder that already contains a component
+    // of the given childComponentType.
+    for (const topPlaceholder of schema) {
+      if (
+        topPlaceholder.components.some((c) => c.type === childComponentType)
+      ) {
+        return topPlaceholder.name;
+      }
+    }
+    // If not found, return the first top-level placeholder that is empty.
+    for (const topPlaceholder of schema) {
+      if (topPlaceholder.components.length === 0) {
+        return topPlaceholder.name;
+      }
+    }
+    return undefined;
+  }
+
+  // Recursive helper to search through nested SchemaComponents.
+  function searchComponents(components: SchemaComponent[]): string | undefined {
+    for (const component of components) {
+      // If this component matches the desired parent type, check its placeholders.
+      if (component.type === parentComponentType) {
+        // First, try to find a placeholder that already has a child of the desired type.
+        for (const placeholder of component.placeholders) {
+          if (
+            placeholder.components.some(
+              (child) => child.type === childComponentType
+            )
+          ) {
+            return placeholder.name;
+          }
+        }
+        // Otherwise, pick an empty placeholder.
+        for (const placeholder of component.placeholders) {
+          if (placeholder.components.length === 0) {
+            return placeholder.name;
+          }
+        }
+      }
+      // Recurse into any placeholders in the current component.
+      for (const placeholder of component.placeholders) {
+        const result = searchComponents(placeholder.components);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  // Search through all top-level placeholders' components.
+  for (const topPlaceholder of schema) {
+    const result = searchComponents(topPlaceholder.components);
+    if (result) {
+      return result;
+    }
+  }
+  return undefined;
+}

package/src/page-wizard/steps/usePageCreator.ts

@@ -0,0 +1,325 @@
+import { Dispatch, SetStateAction, useMemo } from "react";
+import {
+  SchemaComponent,
+  Wizard,
+  WizardPageComponent,
+  WizardPageModel,
+  WizardField,
+  SchemaField,
+} from "../PageWizard";
+import { useEditContextRef } from "../../editor/client/editContext";
+import { useEditContext } from "../../editor/client/editContext";
+import { getComponentById } from "../../editor/componentTreeHelper";
+import { getPlaceholder } from "./schema";
+import { getItemDescriptor, normalizeGuid } from "../../editor/utils";
+import { ItemDescriptor } from "../../editor/pageModel";
+import { generateImage } from "../../editor/services/aiService";
+
+export function usePageCreator(
+  pageItem: ItemDescriptor | undefined,
+  wizard: Wizard,
+  setPageModel: Dispatch<SetStateAction<WizardPageModel>>,
+) {
+  const editContext = useEditContext();
+  const editContextRef = useEditContextRef();
+
+  // Function to build a map of all components from wizard schema
+  const buildComponentTypeMap = () => {
+    const componentMap = new Map<string, string>();
+    const fieldsMap = new Map<string, SchemaField>();
+    const placeholderMap = new Map<string, string>();
+
+    const processComponentsRecursively = (components: SchemaComponent[]) => {
+      for (const component of components) {
+        // Store the mapping from component type to typeId
+        componentMap.set(component.type, component.typeId);
+        placeholderMap.set(component.typeId, component.type);
+
+        // Process nested components in placeholders
+        if (component.placeholders && component.placeholders.length > 0) {
+          for (const placeholder of component.placeholders) {
+            if (placeholder.components && placeholder.components.length > 0) {
+              processComponentsRecursively(placeholder.components);
+            }
+          }
+        }
+        if (component.fields && component.fields.length > 0) {
+          for (const field of component.fields) {
+            fieldsMap.set(component.typeId + "_" + field.name, field);
+          }
+        }
+      }
+    };
+
+    // Start processing from the root level of the schema
+    if (wizard.schema && wizard.schema.length > 0) {
+      for (const placeholder of wizard.schema) {
+        if (placeholder.components && placeholder.components.length > 0) {
+          processComponentsRecursively(placeholder.components);
+        }
+      }
+    }
+
+    return { componentMap, fieldsMap };
+  };
+
+  // Build the component type to typeId map
+  const mappings = useMemo(() => buildComponentTypeMap(), [wizard.schema]);
+
+  const createNewComponent = async (
+    component: WizardPageComponent,
+    parentComponentType: string,
+    index: number,
+    parentComponentId?: string,
+  ): Promise<ItemDescriptor | undefined> => {
+    if (!editContext) return undefined;
+    const { componentMap } = mappings;
+    // Get the typeId from the map using the component type
+    const typeId = componentMap.get(component.type) || component.type;
+
+    if (!typeId) return undefined;
+
+    // 1. Add the component to the placeholder
+    console.log(
+      `! Adding component ${component.type} (typeId: ${typeId}) to placeholder ${parentComponentId} at index ${index}. Name: ${component.name}`,
+    );
+
+    const placeholderKey =
+      component.placeholder ||
+      getPlaceholder(wizard.schema, parentComponentType, component.type);
+
+    const placeholderId = parentComponentId
+      ? placeholderKey + "_" + normalizeGuid(parentComponentId)
+      : placeholderKey;
+
+    if (!placeholderId) {
+      console.error("Placeholder ID not found", component);
+      return undefined;
+    }
+
+    const addComponentOp = await editContext.operations.addComponent(
+      typeId, // Use typeId instead of just type
+      placeholderId,
+      index,
+      getItemDescriptor(pageItem!),
+    );
+
+    if (!addComponentOp?.componentId) {
+      console.warn(
+        "Failed to add component",
+        component,
+        "Result Op:",
+        addComponentOp,
+      );
+      return undefined;
+    }
+
+    // Wait for the component to be created
+    const componentId = addComponentOp.componentId;
+    console.log("! Waiting for component to be created", componentId);
+
+    let createdComponent;
+    let attempts = 0;
+    const maxAttempts = 10;
+
+    while (!createdComponent && attempts < maxAttempts) {
+      if (editContextRef.current?.page) {
+        createdComponent = getComponentById(
+          componentId,
+          editContextRef.current?.page,
+        );
+        if (createdComponent) {
+          break;
+        }
+      }
+      if (createdComponent) break;
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 100ms between attempts
+      console.log("! Waiting for component to be created", componentId);
+      attempts++;
+    }
+
+    if (!createdComponent) {
+      console.error(
+        "Timeout waiting for component to appear in page model",
+        componentId,
+      );
+    }
+
+    const componentDescriptor = {
+      ...addComponentOp.mainItem,
+      id: addComponentOp.componentId,
+    };
+
+    console.log("! Component created:", componentDescriptor);
+
+    return componentDescriptor;
+  };
+
+  const findComponent = (components: WizardPageComponent[], path: number[]) => {
+    const child = components[path[0]!];
+    if (!child) return null;
+    if (path.length === 1) return child;
+    return findComponent(child.children || [], path.slice(1));
+  };
+
+  // Function to recursively create components from the page model
+  const createComponentsRecursively = async (
+    components: WizardPageComponent[],
+    parentComponentType: string,
+    parentComponentId?: string,
+    parentPath?: number[],
+  ) => {
+    if (!editContext || !pageItem) return;
+
+    const { componentMap, fieldsMap } = mappings;
+
+    // Process each component in the array
+    for (let i = 0; i < components.length; i++) {
+      //console.log("Processing component", i);
+      const component = components[i];
+      const componentPath = [...(parentPath || []), i];
+
+      if (!component?.id) {
+        if (!component?.type || !component?.fields) {
+          continue;
+        }
+
+        const descriptor = await createNewComponent(
+          component,
+          parentComponentType,
+          i,
+          parentComponentId,
+        );
+        if (!descriptor) continue;
+        component.id = descriptor.id;
+        setPageModel((prev) => {
+          const component = findComponent(prev.components, componentPath);
+          if (component) {
+            component.id = descriptor.id;
+          }
+          return {
+            ...prev,
+          };
+        });
+      }
+
+      if (component.fields && component.fields.length > 0) {
+        const typeId = componentMap.get(component.type) || component.type;
+
+        // 2. Edit fields of the component
+        for (const field of component.fields) {
+          if (
+            !field.name ||
+            !field.value ||
+            field.value + field.type === field.writtenValue
+          ) {
+            continue;
+          }
+
+          const schemaField = fieldsMap.get(typeId + "_" + field.name);
+
+          if (!schemaField) {
+            console.warn(
+              "Field not found",
+              field,
+              typeId,
+              component.type,
+              componentMap,
+            );
+            continue;
+          }
+
+          const fieldDescriptor = {
+            fieldId: schemaField.id.toLowerCase().replace(/[{}]/g, ""),
+            item: {
+              id: component.id,
+              language: pageItem.language,
+              version: pageItem.version,
+            },
+          };
+
+          let rawValue = field.value;
+          let value = field.value as any;
+
+          // console.log("##Processing field: ", field, schemaField, rawValue);
+
+          if (
+            schemaField.type === "Picture" ||
+            schemaField.type === "picture"
+          ) {
+            console.log("##Processing picture field: ", field, schemaField);
+            if (rawValue.indexOf("[...]") >= 0) continue;
+
+            if (
+              rawValue.startsWith("generate:") ||
+              rawValue.startsWith("id:generate:")
+            ) {
+              console.log("##Generating image");
+              rawValue = rawValue.slice(9);
+              const image = await generateImage({
+                ...fieldDescriptor,
+                prompt: rawValue,
+                sessionId: editContext.sessionId,
+                pageItem: getItemDescriptor(pageItem),
+              });
+            } else {
+              if (rawValue.startsWith("id:")) {
+                console.log("##Processing image id");
+                const imageId = rawValue.slice(3);
+                if (imageId) {
+                  value = {
+                    Variants: [{ Name: "Landscape", MediaId: imageId }],
+                  };
+                }
+
+                await editContext.operations.editField({
+                  field: fieldDescriptor,
+                  rawValue: JSON.stringify(value),
+                  refresh: "none",
+                });
+              } else
+                console.log(
+                  "##Do not know how to process picture value: ",
+                  rawValue,
+                );
+            }
+          } else {
+            await editContext.operations.editField({
+              field: fieldDescriptor,
+              value: value,
+              rawValue: rawValue,
+              refresh: "none",
+            });
+          }
+
+          setPageModel((prev) => {
+            const component = findComponent(prev.components, componentPath);
+            if (component) {
+              const prevField: WizardField | undefined = component.fields.find(
+                (f: WizardField) => f.name === field.name,
+              );
+              if (prevField) {
+                prevField.writtenValue = field.value + field.type;
+              }
+            }
+            return {
+              ...prev,
+            };
+          });
+        }
+      }
+
+      // 3. Recursively process placeholders
+      if (component.children && component.children.length > 0) {
+        await createComponentsRecursively(
+          component.children,
+          component.type,
+          component.id,
+          componentPath,
+        );
+      }
+    }
+  };
+  return { createComponentsRecursively };
+}

package/src/page-wizard/usePageWizard.ts

@@ -0,0 +1,79 @@
+import React, { useMemo, useState, useRef } from "react";
+import { Wizard, WizardData, WizardPageModel } from "./PageWizard";
+import { ItemDescriptor } from "../editor/pageModel";
+
+export const usePageWizard = () => {
+  const [wizard, setWizard] = useState<Wizard | undefined>(undefined);
+  const [parentItem, setParentItem] = useState<ItemDescriptor | undefined>(
+    undefined,
+  );
+
+  // Wizard step state that should persist across re-renders
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [data, setData] = useState<WizardData>({});
+  const [pageModel, setPageModel] = useState<WizardPageModel>({
+    components: [],
+    name: "",
+    metaDescription: "",
+    metaKeywords: "",
+  });
+  const [internalState, setInternalState] = useState<any>({});
+  const [stepCompleted, setStepCompleted] = useState(-1);
+  const [pageItem, setPageItem] = useState<ItemDescriptor>();
+  const beforeNextCallbackRef = useRef<(() => Promise<boolean>) | null>(null);
+
+  // Reset wizard step state when wizard changes
+  const setWizardWithReset = (
+    value: React.SetStateAction<Wizard | undefined>,
+  ) => {
+    const newWizard = typeof value === "function" ? value(wizard) : value;
+    if (newWizard !== wizard) {
+      setCurrentStepIndex(0);
+      setData({});
+      setPageModel({
+        components: [],
+        name: "",
+        metaDescription: "",
+        metaKeywords: "",
+      });
+      setInternalState({});
+      setStepCompleted(-1);
+      setPageItem(undefined);
+      beforeNextCallbackRef.current = null;
+    }
+    setWizard(newWizard);
+  };
+
+  return useMemo(
+    () => ({
+      wizard,
+      setWizard: setWizardWithReset,
+      parentItem,
+      setParentItem,
+      // Wizard step state
+      currentStepIndex,
+      setCurrentStepIndex,
+      data,
+      setData,
+      pageModel,
+      setPageModel,
+      internalState,
+      setInternalState,
+      stepCompleted,
+      setStepCompleted,
+      pageItem,
+      setPageItem,
+      beforeNextCallbackRef,
+    }),
+    [
+      wizard,
+      parentItem,
+      currentStepIndex,
+      data,
+      pageModel,
+      internalState,
+      stepCompleted,
+      pageItem,
+    ],
+  );
+};

package/src/revision.ts

@@ -0,0 +1,2 @@
+export const version = "1.0.3943";
+export const buildDate = "2025-06-09 13:59:22";