@alpaca-editor/core 1.0.0

package/src/editor/client/pageModelBuilder.ts

@@ -0,0 +1,182 @@
+import { useEffect, 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[]>([]);
+
+  useEffect(() => {
+    setPage(undefined);
+    setPageSkeleton(undefined);
+  }, [pageItemDescriptor]);
+
+  useEffect(() => {
+    const loadInsertOptions = async () => {
+      if (!pageSkeleton) return;
+      
+      const collectPlaceholderKeys = (skeleton: PageSkeleton): string[] => {
+        const keys: string[] = [];
+        const collectFromComponent = (component: ComponentSkeleton) => {
+          component.placeholders.forEach(placeholder => {
+            keys.push(placeholder.key);
+            placeholder.components.forEach(c => collectFromComponent(c));
+          });
+        };
+        collectFromComponent(skeleton.rootComponent);
+        return keys;
+      };
+
+      const placeholderKeys = collectPlaceholderKeys(pageSkeleton);
+      const options = await loadPlaceholderInsertOptions(pageSkeleton.item, placeholderKeys);
+      setInsertOptions(options);
+    };
+    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 fullItems = await itemsRepository.getItems(itemsToFetch);
+
+    const getItem = (descriptor: ItemDescriptor) =>
+      fullItems.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,
+        datasourceItem,
+        items,
+        placeholders,
+        isShared: skeleton.id !== skeleton.datasourceItem?.id,
+        parentPlaceholder        
+      };
+
+
+      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,23 @@
+import { OpenDialog } from "../client/DialogContext";
+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,408 @@
+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";
+
+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;
+
+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 function getComponentCommands(
+  entities: (Placeholder | Component)[],
+  editContext: EditContextType
+): ComponentCommand[] {
+  const components = entities.filter(
+    (x) => x && !isPlaceholder(x)
+  ) as Component[];
+
+  const commands = [
+    getCreateCommentCommand(),
+    getInsertCommand(components, editContext),
+    getDeleteCommand(components, editContext),
+    getDuplicateCommand(components, editContext),
+    getSyncCommand(entities, editContext),
+    getAiCommand(editContext),
+    getDesignCommand(components, editContext),
+    getLinkToMasterCommand(components, editContext),
+    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: "pi pi-plus",
+    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: "pi pi-copy",
+    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),
+      });
+      context.event?.stopPropagation();
+      context.event?.preventDefault();
+    },
+  };
+}
+
+function getAiCommand(editContext: EditContextType): ComponentCommand {
+  return {
+    id: "ai",
+    icon: "pi pi-sparkles",
+    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"],
+  };
+}
+
+function getDesignCommand(
+  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.datasourceItem?.fields) return null;
+  if (
+    !Object.values(item.datasourceItem.fields).find(
+      (x) => x.section === "Design"
+    )
+  )
+    return null;
+
+  return {
+    id: "design",
+    icon: "pi pi-palette",
+    label: "Design",
+    disabled: () => false,
+    execute: async (context: CommandContext<any>) => {
+      editContext.showFieldEditorPopup(
+        item.datasourceItem?.fields || [],
+        ["Design", "Rendering"],
+        context.event!
+      );
+    },
+    visibilityScopes: ["editFrame", "contextMenu"],
+  };
+}
+
+function getLinkToMasterCommand(
+  components: Component[],
+  editContext: EditContextType
+): 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"
+  );
+}
+
+function getCheckboxCommand(
+  components: Component[],
+  editContext: EditContextType,
+  fieldName: string,
+  label: string
+): ComponentCommand | null {
+  const someLinked = components.find(
+    (x) =>
+      x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue ===
+      "1"
+  );
+  const allLinked = !components.find(
+    (x) =>
+      x.datasourceItem?.fields.find((x) => x.name === fieldName)?.rawValue !==
+      "1"
+  );
+
+  return {
+    id: fieldName,
+    icon:
+      "pi pi-" +
+      (allLinked ? "check-square" : someLinked ? "stop-circle" : "stop"),
+    label,
+    disabled: () => false,
+    execute: async () => {
+      components.forEach((c) => {
+        const field = c.datasourceItem?.fields.find(
+          (x) => x.name === fieldName
+        );
+        if (!field) return;
+        editContext.operations.editField({
+          field: field.descriptor,
+          rawValue: allLinked ? "" : "1",
+          refresh: "immediate",
+        });
+      });
+    },
+    visibilityScopes: ["menu", "contextMenu"],
+  };
+}
+
+function getInheritChildrenFromMasterCommand(
+  components: Component[],
+  editContext: EditContextType
+): 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: "pi pi-fw pi-trash",
+    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: "pi pi-fw pi-sync",
+    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: "pi pi-exclamation-triangle",
+    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(): ComponentCommand | null {
+  // if (components.length !== 1 || isPlaceholder(components[0])) return null;
+
+  return {
+    id: "addComment",
+    label: "Add Comment",
+    icon: "pi pi-comment",
+    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,
+  });
+}