@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

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

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

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