@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/client/pageModelBuilder.ts

@@ -1,219 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,424 +0,0 @@
-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(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(editContext: EditContextType): ComponentCommand {
-  return {
-    id: "ai",
-    icon: <Sparkles size={defaultIconSize} />,
-    label: "AI",
-    disabled: () => false,
-
-    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>) => {
-      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

@@ -1,33 +0,0 @@
-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,
-  });
-}