@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/client/pageModelBuilder.ts

@@ -0,0 +1,219 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Component,
+  ComponentSkeleton,
+  ItemDescriptor,
+  Page,
+  PageSkeleton,
+  Placeholder,
+  RenderedItem,
+  RenderedItemSkeleton,
+} from "../pageModel";
+
+import { ItemsRepository } from "./itemsRepository";
+import {
+  loadPlaceholderInsertOptions,
+  PlaceholderInsertOptions,
+} from "../services/editService";
+
+export function usePageModel(
+  itemsRepository: ItemsRepository | undefined,
+  pageItemDescriptor?: ItemDescriptor,
+) {
+  const [page, setPage] = useState<Page>();
+  const [pageSkeleton, setPageSkeleton] = useState<PageSkeleton>();
+  const [insertOptions, setInsertOptions] = useState<
+    PlaceholderInsertOptions[]
+  >([]);
+
+  const insertOptionsCache = useRef<Record<string, PlaceholderInsertOptions>>(
+    {},
+  );
+
+  // 2) whenever the descriptor changes, reset skeleton, page and clear cache
+  useEffect(() => {
+    setPage(undefined);
+    setPageSkeleton(undefined);
+    insertOptionsCache.current = {};
+    setInsertOptions([]);
+  }, [pageItemDescriptor]);
+
+  // 3) collect all placeholder-keys in a skeleton
+  const collectPlaceholderKeys = (skeleton: PageSkeleton): string[] => {
+    const keys: string[] = [];
+    const collect = (c: ComponentSkeleton) => {
+      c.placeholders.forEach((ph) => {
+        keys.push(ph.key);
+        ph.components.forEach(collect);
+      });
+    };
+    collect(skeleton.rootComponent);
+    return keys;
+  };
+
+  // 4) load only missing insertOptions
+  useEffect(() => {
+    const loadInsertOptions = async () => {
+      if (!pageSkeleton) return;
+
+      const allKeys = collectPlaceholderKeys(pageSkeleton);
+      // find which keys we haven’t cached yet
+      const missingKeys = allKeys.filter(
+        (k) => !(k in insertOptionsCache.current),
+      );
+
+      if (missingKeys.length) {
+        const newlyFetched = await loadPlaceholderInsertOptions(
+          pageSkeleton.item,
+          missingKeys,
+        );
+        // stash them in our cache
+        newlyFetched.forEach((opt) => {
+          insertOptionsCache.current[opt.key] = opt;
+        });
+      }
+
+      // now build the full list in the original placeholder order
+      const optionsInOrder = allKeys
+        .map((k) => insertOptionsCache.current[k])
+        .filter((opt): opt is PlaceholderInsertOptions => !!opt);
+
+      setInsertOptions(optionsInOrder);
+    };
+
+    loadInsertOptions();
+  }, [pageSkeleton]);
+
+  const updatePageModel = async () => {
+    if (!itemsRepository) return;
+
+    //const start = performance.now();
+    const itemsToFetch: ItemDescriptor[] = [];
+    if (!pageSkeleton) {
+      setPage(undefined);
+      return;
+    }
+
+    itemsToFetch.push(pageSkeleton.item);
+
+    const collectItems = (component: ComponentSkeleton) => {
+      if (component.datasourceItem)
+        itemsToFetch.push({
+          id: component.datasourceItem.id,
+          language: component.datasourceItem.language,
+          version: component.datasourceItem.version,
+        });
+      component.placeholders
+        .flatMap((x) => x.components)
+        .forEach((c) => collectItems(c));
+      component.items.forEach((i) => itemsToFetch.push(i));
+    };
+
+    collectItems(pageSkeleton.rootComponent);
+
+    const itemStubs = await itemsRepository.getItemsStubs(itemsToFetch);
+
+    const getItem = (descriptor: ItemDescriptor) =>
+      itemStubs.find(
+        (x) =>
+          x.id === descriptor.id &&
+          x.language === descriptor.language &&
+          x.version === descriptor.version,
+      );
+
+    const pageItem = await itemsRepository.getItem(pageSkeleton.item);
+
+    if (!pageItem) {
+      setPage(undefined);
+      return;
+    }
+
+    const buildModel = (
+      skeleton: ComponentSkeleton,
+      parentPlaceholder?: Placeholder,
+    ): Component | undefined => {
+      const datasourceItemTemp = skeleton.datasourceItem
+        ? getItem(skeleton.datasourceItem)
+        : undefined;
+
+      const datasourceItem =
+        skeleton.datasourceItem && datasourceItemTemp
+          ? { ...skeleton.datasourceItem, ...datasourceItemTemp }
+          : undefined;
+
+      let name =
+        skeleton.name || datasourceItem?.name || skeleton.type || "unknown";
+
+      const mapItem = (x: RenderedItemSkeleton): RenderedItem | null => {
+        const item = getItem(x);
+        if (!item) return null;
+        return { ...x, ...item };
+      };
+
+      const items = skeleton.items.map(mapItem).filter((x) => x !== null);
+
+      const placeholders: Placeholder[] = [];
+
+      const component: Component = {
+        ...skeleton,
+        name,
+        icon: datasourceItem?.icon,
+        datasourceItem,
+        items,
+        placeholders,
+        isShared: !(datasourceItem?.path.startsWith(pageItem.path) || true),
+        parentPlaceholder,
+        type: datasourceItem?.templateName || "", // TODO: We need the name for AI page wizard - we should not use the template name
+        typeId: skeleton.typeId || datasourceItem?.templateId || "",
+        canBeMoved:
+          !datasourceItem ||
+          datasourceItem?.id !== parentPlaceholder?.parentComponent?.id,
+      };
+
+      component.placeholders = skeleton.placeholders.map((x) => {
+        const insOpts =
+          insertOptions.find((y) => y.key === x.key)?.insertOptions ?? [];
+
+        const placeholder: Placeholder = {
+          ...x,
+          components: [],
+          canSynchronize: false,
+          parentComponent: component,
+          insertOptions: insOpts,
+        };
+        placeholder.components = x.components
+          .map((y) => buildModel(y, placeholder))
+          .filter((x) => x !== undefined);
+
+        return placeholder;
+      });
+
+      return component;
+    };
+
+    const rootComponent = buildModel(pageSkeleton.rootComponent);
+
+    if (!rootComponent) {
+      setPage(undefined);
+      return;
+    }
+    const page: Page = {
+      item: pageItem,
+      rootComponent,
+      //    revision: itemsRepository.revision,
+      editRevision: pageSkeleton.editRevision,
+    };
+
+    //console.log("Page model updated", performance.now() - start);
+    setPage(page);
+  };
+
+  useEffect(() => {
+    updatePageModel();
+  }, [pageSkeleton, itemsRepository, insertOptions]);
+
+  return {
+    setPageSkeleton,
+    page,
+  };
+}

package/src/editor/commands/commands.ts

@@ -0,0 +1,22 @@
+import { OpenDialog } from "../client/editContext";
+import { EditContextType } from "../client/editContext";
+
+export type CommandContext<T> = {
+  editContext: EditContextType;
+  openDialog: OpenDialog;
+  event?: React.SyntheticEvent;
+  searchParams?: URLSearchParams;
+  pathname?: string;
+  data?: T;
+};
+
+export type Command<T extends CommandData> = {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  execute(context: CommandContext<T>): Promise<any>;
+  disabled: (context: CommandContext<T>) => boolean;
+  keyBinding?: string;
+};
+
+export type CommandData = {};

package/src/editor/commands/componentCommands.tsx

@@ -0,0 +1,431 @@
+import { EditContextType } from "../client/editContext";
+import uuid from "react-uuid";
+import { Command, CommandContext, CommandData } from "./commands";
+
+import { getComponentById } from "../componentTreeHelper";
+import {
+  PlaceholderToSynchronize,
+  RemoveComponentOperation,
+  SynchronizeComponentsOperation,
+} from "../../types";
+
+import { Component, ItemDescriptor, Placeholder } from "../pageModel";
+import {
+  Check,
+  Copy,
+  MessageCircleMore,
+  Palette,
+  Plus,
+  RefreshCcw,
+  Sparkles,
+  Square,
+  StopCircle,
+  Trash2,
+  TriangleAlert,
+} from "lucide-react";
+
+export type ComponentCommandData = CommandData & {
+  components: Component[];
+};
+
+export type ComponentCommandContext = CommandContext<ComponentCommandData>;
+
+export type ComponentCommandVisibilityScope =
+  | "editFrame"
+  | "menu"
+  | "contextMenu";
+
+export type ComponentCommand = Command<ComponentCommandData> & {
+  visibilityScopes: ComponentCommandVisibilityScope[];
+};
+
+const isPlaceholder = (x: any): x is Placeholder => x.components !== undefined;
+const defaultIconSize = 16;
+
+// export function getSelectedComponentCommands(editContext: EditContextType) {
+//   const selection = editContext.selection;
+
+//   const selectedComponents = selection
+//     .map((x) => getComponentById(x, editContext.page!))
+//     .filter((x) => x) as Component[];
+
+//   const componentCommands = getComponentCommands(
+//     selectedComponents,
+//     editContext,
+//   );
+
+//   const componentCommandMenuItems = componentCommands.filter(
+//     (x) => x.visibilityScopes.indexOf("menu") >= 0,
+//   );
+
+//   return componentCommandMenuItems;
+// }
+
+export async function getComponentCommands(
+  entities: (Placeholder | Component)[],
+  editContext: EditContextType,
+): Promise<ComponentCommand[]> {
+  const components = entities.filter(
+    (x) => x && !isPlaceholder(x),
+  ) as Component[];
+
+  const commands = [
+    await getCreateCommentCommand(components),
+    await getInsertCommand(components, editContext),
+    await getDeleteCommand(components, editContext),
+    await getDuplicateCommand(components, editContext),
+    await getSyncCommand(entities, editContext),
+    await getAiCommand(components, editContext),
+    await getDesignCommand(components, editContext),
+    await getLinkToMasterCommand(components, editContext),
+    await getInheritChildrenFromMasterCommand(components, editContext),
+  ];
+
+  return commands.filter((x) => x !== null);
+}
+
+function getInsertCommand(
+  components: Component[],
+  editContext: EditContextType,
+): ComponentCommand | null {
+  if (components.length !== 1 || isPlaceholder(components[0])) return null;
+  const item = components[0];
+  if (!item) return null;
+  if (!item.placeholders || item.placeholders.length === 0) return null;
+  return {
+    id: "insert",
+    icon: <Plus size={defaultIconSize} />,
+    label: "Insert component",
+    disabled: (context) => !context.editContext.page?.item.canWriteItem,
+    visibilityScopes: ["editFrame", "contextMenu"],
+    execute: async () => {
+      editContext.setSelectedForInsertion(item.id);
+    },
+  };
+}
+
+function getDuplicateCommand(
+  components: Component[],
+  editContext: EditContextType,
+): ComponentCommand | null {
+  if (components.length !== 1) return null;
+
+  return {
+    id: "duplicate",
+    icon: <Copy size={defaultIconSize} />,
+    label: "Duplicate",
+    visibilityScopes: ["contextMenu", "menu"],
+    disabled: (c) => !(c.editContext.page?.item.canWriteItem || false),
+    execute: async (context: CommandContext<any>) => {
+      // if (!components[0].parentPlaceholder?.parentComponent.datasourceItem)
+      //   return;
+
+      editContext.operations.duplicateComponents({
+        componentIds: components.map((x) => x.id),
+      });
+    },
+  };
+}
+
+function getAiCommand(
+  components: Component[],
+  editContext: EditContextType,
+): ComponentCommand {
+  return {
+    id: "ai",
+    icon: <Sparkles size={defaultIconSize} />,
+    label: "AI",
+    disabled: (c) => components.length !== 1,
+
+    execute: async (context: CommandContext<any>) => {
+      const event = context.event!;
+      editContext.showAiPopup(event as any);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    visibilityScopes: ["editFrame", "contextMenu"],
+  };
+}
+
+async function getDesignCommand(
+  components: Component[],
+  editContext: EditContextType,
+): Promise<ComponentCommand | null> {
+  if (components.length !== 1 || isPlaceholder(components[0])) return null;
+  const component = components[0];
+  if (!component || !component.datasourceItem) return null;
+  const item = await editContext.itemsRepository.getItem(
+    component.datasourceItem,
+  );
+  if (!item) return null;
+  if (!Object.values(item.fields).find((x) => x.section === "Design"))
+    return null;
+
+  return {
+    id: "design",
+    icon: <Palette size={defaultIconSize} />,
+    label: "Design",
+    disabled: () => false,
+    execute: async (context: CommandContext<any>) => {
+      if (!context.event) {
+        console.warn("Design command executed without event context");
+        return;
+      }
+      editContext.showFieldEditorPopup(
+        item.fields || [],
+        ["Design", "Rendering"],
+        context.event,
+      );
+    },
+    visibilityScopes: ["editFrame", "contextMenu"],
+  };
+}
+
+async function getLinkToMasterCommand(
+  components: Component[],
+  editContext: EditContextType,
+): Promise<ComponentCommand | null> {
+  if (!components.length) return null;
+  if (editContext.page?.item?.masterLanguages?.length === 0) return null;
+
+  return getCheckboxCommand(
+    components,
+    editContext,
+    "componentLinkedToMasterLanguage",
+    "Linked To Master Language",
+  );
+}
+
+async function getCheckboxCommand(
+  components: Component[],
+  editContext: EditContextType,
+  fieldName: string,
+  label: string,
+): Promise<ComponentCommand | null> {
+  const items = await editContext.itemsRepository.getItems(
+    components.filter((x) => x.datasourceItem).map((x) => x.datasourceItem!),
+  );
+
+  const someLinked = items.find(
+    (y) => y.fields.find((z) => z.name === fieldName)?.rawValue === "1",
+  );
+
+  const allLinked = !items.find(
+    (y) => y.fields.find((z) => z.name === fieldName)?.rawValue !== "1",
+  );
+
+  return {
+    id: fieldName,
+    icon: allLinked ? (
+      <Check size={defaultIconSize} />
+    ) : someLinked ? (
+      <StopCircle size={defaultIconSize} />
+    ) : (
+      <Square size={defaultIconSize} />
+    ),
+    label,
+    disabled: () => false,
+    execute: async () => {
+      items.forEach((c) => {
+        const field = c.fields.find((x) => x.name === fieldName);
+        if (!field) return;
+        editContext.operations.editField({
+          field: field.descriptor,
+          rawValue: allLinked ? "" : "1",
+          refresh: "immediate",
+        });
+      });
+    },
+    visibilityScopes: ["menu", "contextMenu"],
+  };
+}
+
+async function getInheritChildrenFromMasterCommand(
+  components: Component[],
+  editContext: EditContextType,
+): Promise<ComponentCommand | null> {
+  if (!components.length) return null;
+  if (editContext.page?.item?.masterLanguages?.length === 0) return null;
+  if (components.find((x) => !x.placeholders || x.placeholders.length === 0))
+    return null;
+
+  return getCheckboxCommand(
+    components,
+    editContext,
+    "inheritChildrenFromMasterLanguage",
+    "Inherit Children From Master",
+  );
+}
+
+function isLocked(c: Component, editContext: EditContextType): boolean {
+  if (
+    editContext.activeSessions.find(
+      (x) =>
+        x.fieldLock?.item.id === c.id &&
+        x.fieldLock.item.language == c.datasourceItem?.language &&
+        x.fieldLock.item.version === c.datasourceItem?.version &&
+        x.sessionId !== editContext.sessionId,
+    ) !== undefined
+  ) {
+    return true;
+  } else
+    return (
+      c.placeholders?.find(
+        (x) =>
+          x.components.find((child) => isLocked(child, editContext)) !==
+          undefined,
+      ) !== undefined
+    );
+}
+
+function getDeleteCommand(
+  components: Component[],
+  editContext: EditContextType,
+): ComponentCommand | null {
+  const applicableComponents = components.filter(
+    (c) =>
+      ((!isPlaceholder(c) && !c.layoutId) ||
+        c.layoutId === editContext.page?.item.id) &&
+      !isLocked(c, editContext) &&
+      editContext.page?.item.canWriteItem,
+  );
+
+  if (applicableComponents.length === 0) return null;
+
+  return {
+    id: "delete",
+    label: "Delete",
+    icon: <Trash2 size={14} />,
+    execute: async (context: CommandContext<any>) =>
+      deleteComponents(applicableComponents, context.editContext),
+    disabled: () =>
+      applicableComponents.length === 0 ||
+      applicableComponents.length !== components.length,
+
+    visibilityScopes: ["editFrame", "menu", "contextMenu"],
+  };
+}
+
+function canSynchronize(placeholderData: Placeholder) {
+  if (placeholderData.canSynchronize) return true;
+  placeholderData.components.forEach((c) => {
+    if (c.placeholders?.find((x) => canSynchronize(x))) return true;
+  });
+  return false;
+}
+
+function getSyncCommand(
+  components: (Placeholder | Component)[],
+  editContext: EditContextType,
+): ComponentCommand {
+  const placeholders: PlaceholderToSynchronize[] = [];
+
+  for (const component of components) {
+    if (isPlaceholder(component) && canSynchronize(component)) {
+      placeholders.push({
+        item: component.parentComponent
+          ? getItemDescriptor(component.parentComponent, editContext)
+          : undefined,
+      });
+    } else {
+      if (
+        (component as Component).placeholders?.find((x) => canSynchronize(x))
+      ) {
+        placeholders.push({
+          item: getItemDescriptor(component as Component, editContext),
+        });
+      }
+    }
+  }
+
+  const canSync =
+    placeholders.length > 0 ||
+    (components.length === 0 &&
+      editContext.page?.rootComponent.placeholders.find((x) =>
+        canSynchronize(x),
+      ));
+
+  return {
+    id: "synchronize",
+    label: "Synchronize",
+    icon: <RefreshCcw size={14} />,
+    disabled: () => !canSync,
+    visibilityScopes: ["menu", "editFrame", "contextMenu"],
+    execute: async () => {
+      const op: SynchronizeComponentsOperation = {
+        mainItem: editContext.page!.item.descriptor,
+        type: "synchronize-components",
+        date: new Date().toISOString(),
+        delete: false,
+        id: uuid(),
+        placeholders: placeholders,
+
+        description: "Synchronize components",
+      };
+      editContext.operations.executeEditOperation(op);
+    },
+  };
+}
+
+function deleteComponents(
+  components: Component[],
+  editContext: EditContextType,
+) {
+  if (!components.length) return;
+
+  editContext.confirm({
+    showCancel: true,
+    message:
+      (components.length > 1
+        ? "Are you sure you want to remove these components? "
+        : "Are you sure you want to remove this component? ") +
+      components.map((x) => x.name).join(", "),
+    header: components.length > 1 ? "Remove components" : "Remove component",
+    icon: <TriangleAlert size={14} />,
+    accept: () => {
+      if (!editContext.page?.item.descriptor) return;
+      console.log("Remove components", components);
+      const op: RemoveComponentOperation = {
+        type: "remove-component",
+        date: new Date().toISOString(),
+        id: uuid(),
+        componentIds: components.map((x) => x.id),
+        mainItem: editContext.page.item.descriptor,
+        description:
+          "Remove components: " + components.map((x) => x.name).join(", "),
+      };
+      editContext.operations.executeEditOperation(op);
+    },
+  });
+}
+
+function getCreateCommentCommand(
+  components: Component[],
+): ComponentCommand | null {
+  if (components.length !== 1 || isPlaceholder(components[0])) return null;
+
+  return {
+    id: "addComment",
+    label: "Add Comment",
+    icon: <MessageCircleMore size={14} />,
+    disabled: () => false,
+    visibilityScopes: ["contextMenu"],
+    execute: async (context: CommandContext<any>) => {
+      context.editContext.addComment();
+      context.editContext.switchView("reviews");
+    },
+  };
+}
+
+function getItemDescriptor(
+  component: Component,
+  editContext: EditContextType,
+): ItemDescriptor | null {
+  return {
+    id: component.id,
+    language:
+      component.datasourceItem?.language || editContext.page!.item.language,
+    version:
+      component.datasourceItem?.version || editContext.page!.item.version,
+  };
+}

package/src/editor/commands/createVersionCommand.ts

@@ -0,0 +1,33 @@
+import { createVersion } from "../services/editService";
+import { getItemDescriptor } from "../utils";
+import { Command, CommandContext } from "./commands";
+
+export function getCreateAndSwitchToNewVersionCommand({
+  language,
+}: {
+  language?: string;
+}): Command<CommandContext<any>> {
+  return {
+    id: "createAndSwitchToNewVersion",
+    execute: (context) => execute(context, language),
+    label: "Add Version",
+    icon: "pi pi-fw pi-plus",
+    disabled: (context: CommandContext<any>) =>
+      !context.editContext.item?.canLock,
+  };
+}
+
+async function execute(
+  context: CommandContext<any>,
+  language?: string
+): Promise<void> {
+  if (!context.editContext.item) return;
+  const descriptor = getItemDescriptor(context.editContext.item);
+  if (language) descriptor.language = language;
+  await createVersion(descriptor, context.editContext.sessionId);
+
+  context.editContext.loadItem({
+    ...descriptor,
+    version: 0,
+  });
+}