@alpaca-editor/core 1.0.3942 → 1.0.3944

package/src/editor/component-designer/TemplateEditor.tsx

@@ -0,0 +1,236 @@
+import { useEditContext } from "../client/editContext";
+
+import { InputText } from "primereact/inputtext";
+import {
+  FieldTypeGroup,
+  TemplateField,
+  TemplateSection,
+  getFieldTypes,
+} from "../services/componentDesignerService";
+import { useEffect, useState } from "react";
+import { Dropdown } from "primereact/dropdown";
+
+export function TemplateEditor() {
+  const context = useEditContext();
+  if (!context) return null;
+
+  const [sections, setSections] = useState<TemplateSection[]>([]);
+  const [fieldTypes, setFieldTypes] = useState<FieldTypeGroup[]>([]);
+
+  useEffect(() => {
+    const newSections = [
+      ...(context.componentDesignerComponent?.template?.sections.map((s) => ({
+        ...s,
+      })) || []),
+    ];
+    if (
+      newSections.length === 0 ||
+      newSections[newSections.length - 1].fields.length > 0
+    )
+      newSections.push({
+        name: "",
+        fields: [],
+        key: Math.random().toString(),
+      });
+    newSections.forEach((section) => {
+      const fields = [...section.fields];
+      if (
+        section.id ||
+        (section.name != "" &&
+          (!fields.length ||
+            fields[fields.length - 1].id ||
+            fields[fields.length - 1].name != ""))
+      ) {
+        fields.push({
+          name: "",
+          type: "",
+          source: "",
+          key: Math.random().toString(),
+        });
+      }
+      section.fields = fields;
+    });
+    setSections(newSections);
+  }, [context.componentDesignerComponent]);
+
+  useEffect(() => {
+    const load = async () => {
+      const types = await getFieldTypes();
+      setFieldTypes(types);
+    };
+    load();
+  }, []);
+
+  const template = context.componentDesignerComponent?.template;
+
+  if (!template) return null;
+
+  const updateComponent = (sections: TemplateSection[]) => {
+    const newSections = sections.filter((x) => x.id || x.name);
+    newSections.forEach((section) => {
+      section.fields = section.fields.filter((x) => x.id || x.name);
+    });
+
+    const newTemplate = {
+      ...template,
+      sections: newSections,
+    };
+
+    const newComponent = {
+      ...context.componentDesignerComponent!,
+      template: newTemplate,
+    };
+
+    console.log("Updating component", newComponent);
+
+    context.setComponentDesignerComponent(newComponent);
+  };
+
+  const update = () => {
+    updateComponent(sections);
+  };
+
+  const removeField = (section: TemplateSection, field: TemplateField) => {
+    section.fields = section.fields.filter((x) => x.id !== field.id);
+    update();
+  };
+
+  const handleDragStart = (
+    event: React.DragEvent,
+    index: number,
+    sectionIndex?: number
+  ) => {
+    event.dataTransfer.setData("text/plain", index.toString());
+    event.dataTransfer.effectAllowed = "move";
+    //event.currentTarget.style.opacity = "0.5";
+    if (sectionIndex === undefined) {
+      event.dataTransfer.setData("isSection", "true");
+    } else {
+      event.dataTransfer.setData("sectionIndex", sectionIndex.toString());
+      event.dataTransfer.setData("isSection", "false");
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+
+  const handleDrop = (
+    event: React.DragEvent,
+    dropIndex: number,
+    sectionIndex?: number
+  ) => {
+    event.preventDefault();
+    const dragIndex = parseInt(event.dataTransfer.getData("text/plain"));
+    const isSectionDrag = event.dataTransfer.getData("isSection") === "true";
+
+    if (isSectionDrag && sectionIndex === undefined) {
+      const newSections = sections;
+      const [removed] = newSections.splice(dragIndex, 1);
+      newSections.splice(dropIndex, 0, removed);
+
+      updateComponent(newSections);
+    } else if (!isSectionDrag) {
+      const sourceSectionIndex = parseInt(
+        event.dataTransfer.getData("sectionIndex")
+      );
+      const sourceSection = sections[sourceSectionIndex];
+      const targetSection = sections[sectionIndex ?? dropIndex];
+
+      const sourceFields = sourceSection.fields;
+      const targetFields = targetSection.fields;
+      const [removed] = sourceFields.splice(dragIndex, 1);
+
+      if (sectionIndex === undefined) {
+        targetFields.push(removed);
+      } else {
+        targetFields.splice(dropIndex, 0, removed);
+      }
+
+      updateComponent(sections);
+    }
+  };
+
+  return (
+    <div className="p-1">
+      {sections.map((section, sectionIndex) => {
+        return (
+          <div key={section.id || section.key} className="mb-4">
+            <div className=" flex gap-1">
+              {dragHandle(sectionIndex)}
+              <InputText
+                className="text-xs"
+                value={section.name}
+                onChange={(e) => {
+                  section.name = e.target.value;
+                  update();
+                }}
+              />
+            </div>
+            {section.fields.map((field, fieldIndex) => {
+              return (
+                <div
+                  key={field.id || field.key}
+                  className="ml-4 flex gap-2 mt-1 items-center"
+                >
+                  {dragHandle(fieldIndex, sectionIndex)}
+                  <InputText
+                    key="name"
+                    className="text-xs flex-1"
+                    value={field.name}
+                    onChange={(e) => {
+                      field.name = e.target.value;
+                      update();
+                    }}
+                  />
+                  <Dropdown
+                    key="type"
+                    filter
+                    options={fieldTypes}
+                    optionGroupLabel="name"
+                    optionGroupChildren="fieldTypes"
+                    className="text-xs flex-1"
+                    value={field.type}
+                    onChange={(e) => {
+                      field.type = e.target.value;
+                      update();
+                    }}
+                  />
+                  <InputText
+                    key="source"
+                    className="text-xs flex-1"
+                    value={field.source}
+                    onChange={(e) => {
+                      field.source = e.target.value;
+                      update();
+                    }}
+                  />
+                  <i
+                    className="pi pi-fw pi-times cursor-pointer"
+                    onClick={() => removeField(section, field)}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  function dragHandle(index: number, sectionIndex?: number) {
+    return (
+      <div
+        draggable
+        onDragStart={(event) => handleDragStart(event, index, sectionIndex)}
+        onDragOver={handleDragOver}
+        onDrop={(event) => handleDrop(event, index, sectionIndex)}
+        // onDragEnd={handleDragEnd}
+        className="cursor-grab text-xs bg-gray-50 text-center p-0.5 border flex justify-center items-center"
+      >
+        <i className="pi pi-ellipsis-v" />
+      </div>
+    );
+  }
+}

package/src/editor/component-designer/aiContext.ts

@@ -0,0 +1,23 @@
+import { AiContext } from "../ai/AiTerminal";
+//import { configuration } from "../config/config";
+import { EditContextType } from "../client/editContext";
+import { getItemDescriptor } from "../utils";
+
+export function createDesignerAiContext({
+  editContext,
+}: {
+  editContext: EditContextType;
+}): AiContext {
+  return {
+    //configuration.services.editorService.baseUrl +
+    endpoint: "/alpaca/ai/designerprompt",
+    callback: () => {
+      editContext.requestRefresh();
+    },
+    promptData: {
+      templateId: editContext.componentDesignerComponent?.templateId,
+      renderingId: editContext.componentDesignerRendering?.id,
+      contextItem: getItemDescriptor(editContext.page?.item!),
+    },
+  };
+}

package/src/editor/componentTreeHelper.tsx

@@ -0,0 +1,116 @@
+import { EditContextType, DragObject } from "./client/editContext";
+import { Component, Page, Placeholder } from "./pageModel";
+
+export function findComponent(
+  id: string,
+  placeholders: Placeholder[],
+): Component | undefined {
+  if (!placeholders) return;
+  for (const p of placeholders) {
+    for (const c of p.components) {
+      if (c.id === id || c.datasourceItem?.id === id) {
+        return c;
+      }
+      if (c.placeholders) {
+        const match = findComponent(id, c.placeholders);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+
+  return;
+}
+
+export function getComponentById(
+  id: string,
+  page: Page,
+): Component | undefined {
+  if (!page) return;
+  if (page.rootComponent.datasourceItem?.id === id) return page.rootComponent;
+  return findComponent(id, page.rootComponent.placeholders);
+}
+
+export function getComponentByIdFromHeadlessLayout(
+  id: string,
+  page: any,
+): Component | undefined {
+  if (!page) return;
+  return findComponent(id, page.placeholders);
+}
+
+export function getSelectedComponents(editContext: EditContextType) {
+  if (!editContext) return [];
+  const page = editContext.page;
+  if (!page) return [];
+  const selectedComponents = editContext.selection
+    .map((x) => getComponentById(x, page))
+    .filter((x) => x);
+  return selectedComponents.length === 0 ? [] : selectedComponents;
+}
+
+export function getComponentByIdWithPlaceholder(
+  id: string,
+  page: Page,
+): { placeholder: Placeholder; component: Component } | null {
+  if (!page) return null;
+  return findComponentWithPlaceholder(id, page.rootComponent.placeholders);
+}
+
+export function findComponentWithPlaceholder(
+  id: string,
+  placeholders: Placeholder[],
+): { placeholder: Placeholder; component: Component } | null {
+  if (!placeholders) return null;
+  for (const p of placeholders) {
+    for (const c of p.components) {
+      if (c.id === id || c.datasourceItem?.id === id) {
+        return { component: c, placeholder: p };
+      }
+      if (c.placeholders) {
+        const match = findComponentWithPlaceholder(id, c.placeholders);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+export function getAllPlaceholders(page: Page) {
+  const placeholders: Placeholder[] = [];
+  const addPlaceholders = (p: Placeholder[]) => {
+    p.forEach((x) => {
+      placeholders.push(x);
+      if (x.components) {
+        x.components.forEach((c) => {
+          addPlaceholders(c.placeholders);
+        });
+      }
+    });
+  };
+  addPlaceholders(page.rootComponent.placeholders);
+  return placeholders;
+}
+
+export const isValidPlaceholder = (
+  placeholder: Placeholder,
+  dragObject: DragObject,
+) => {
+  return (
+    placeholder.insertOptions?.find(
+      (y) =>
+        y.typeId === dragObject.typeId ||
+        y.typeId === dragObject?.templateId ||
+        y.compatibleTypeIds?.find((z) => z == dragObject.typeId) !==
+          undefined ||
+        y.typeId === dragObject.templateId ||
+        y.compatibleTypeIds?.find((z) => z == dragObject.templateId) !==
+          undefined,
+      undefined,
+    ) !== undefined
+  );
+};

package/src/editor/context-menu/CopyMoveMenu.tsx

@@ -0,0 +1,103 @@
+import { useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { MoveCopyItemsCommand } from "../commands/itemCommands";
+import { FullItem, ItemDescriptor } from "../pageModel";
+import { ScrollingContentTree } from "../ScrollingContentTree";
+import { Button } from "primereact/button";
+
+export const CopyMoveMenuTemplate = ({
+  items,
+  command,
+  commandCallback,
+}: {
+  items: FullItem[];
+  commandCallback?: (command: MoveCopyItemsCommand, result: any) => void;
+  command: MoveCopyItemsCommand;
+}) => {
+  const hideTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+  const opRef = useRef<HTMLDivElement>(null);
+  const editContext = useEditContext();
+  const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(
+    items[0]?.descriptor ?? null,
+  );
+  const mode = command.id === "copyItems" ? "copy" : "move";
+  if (!editContext) return null;
+  return (
+    <div
+      className="p-2"
+      style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
+      onMouseEnter={() => {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+        }
+        opRef.current && (opRef.current.style.display = "block");
+      }}
+      onMouseLeave={() => {
+        hideTimeoutRef.current = setTimeout(() => {
+          opRef.current && (opRef.current.style.display = "none");
+        }, 200);
+      }}
+      onClick={(ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+      }}
+    >
+      <i
+        className={`pi ${mode === "copy" ? "pi-copy" : "pi-arrow-right"} mr-2`}
+      ></i>
+      <span className="p-menuitem-text">
+        {mode === "copy" ? "Copy to" : "Move to"}
+      </span>
+      {/* The OverlayPanel will appear on hover or click. */}
+      <div
+        ref={opRef}
+        className="absolute z-50 rounded-md bg-white p-2 shadow-lg"
+        onKeyDownCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        onKeyUpCapture={(ev) => {
+          ev.stopPropagation();
+        }}
+        style={{
+          display: opRef.current ? "block" : "none",
+          top: "-50px",
+          left: "100%",
+          minWidth: "450px",
+          minHeight: "380px",
+          border: "1px solid #ddd",
+        }}
+      >
+        <div className="absolute inset-4 flex flex-col gap-2">
+          <div className="relative flex-1">
+            <ScrollingContentTree
+              selectedItemId={selectedItem?.id}
+              onSelectionChange={(node) => {
+                if (!items[0]) return;
+                if (!node[0]) setSelectedItem(null);
+                else
+                  setSelectedItem({
+                    id: node[0].id,
+                    version: 0,
+                    language: items[0].language,
+                  });
+              }}
+            />
+          </div>
+          <div className="flex justify-end">
+            <Button
+              label={mode === "copy" ? "Copy" : "Move"}
+              onClick={() => {
+                if (!selectedItem) return;
+                const result = editContext?.executeCommand({
+                  command,
+                  data: { items, targetItem: selectedItem, index: -1 },
+                });
+                commandCallback?.(command, result);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};