@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/sidebar/ComponentTree2.tsxx

@@ -1,490 +0,0 @@
-"use client";
-
-import { useEditContext, useEditContextRef } from "../client/editContext";
-// import {
-//   Tree,
-//   TreeExpandedKeysType,
-//   TreeMultipleSelectionKeys,
-//   TreeNodeTemplateOptions,
-// } from "primereact/tree";
-
-import { TreeNode } from "primereact/treenode";
-import { useEffect, useRef, useState } from "react";
-import { Tag } from "primereact/tag";
-import { confirmDialog } from "primereact/confirmdialog";
-import { getComponentCommands } from "../commands/componentCommands";
-import { MenuItem, MenuItemCommandEvent } from "primereact/menuitem";
-import { Tooltip } from "primereact/tooltip";
-
-import { Component, Placeholder } from "../pageModel";
-
-type CustomTreeNode = TreeNode & {
-  parent?: CustomTreeNode;
-  componentId?: string;
-  tags?: {
-    value: string;
-    icon: string;
-    severity: "success" | "info" | "warning" | "danger" | null | undefined;
-    onClick?: () => void;
-    color?: string;
-    tooltip?: string;
-    id: string;
-  }[];
-};
-
-export function ComponentTree({}) {
-  const [expandedKeys, setExpandedKeys] = useState<TreeExpandedKeysType>({
-    "0": true,
-  });
-
-  const [selectedKeys, setSelectedKeys] = useState<TreeMultipleSelectionKeys>();
-  const [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
-  const [nodeDictionary, setNodeDictionary] = useState<{
-    [key: string]: CustomTreeNode;
-  }>({});
-
-  let editContextRef = useEditContextRef();
-  const editContext = useEditContext();
-
-  const treeRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (treeRef.current) {
-      const selectedNodeKey = Object.keys(selectedKeys || {})[0];
-
-      const selectedNodeElement = treeRef.current.querySelector(
-        `[data-key="${selectedNodeKey}"]`
-      );
-
-      if (selectedNodeElement) {
-        selectedNodeElement.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-        });
-      }
-    }
-  }, [selectedKeys]);
-
-  const selection = editContext?.selection || [];
-  const page = editContext?.page;
-
-  useEffect(() => {
-    const newSelectedKeys = {} as TreeMultipleSelectionKeys;
-    selection.forEach((id) => {
-      const nodes = findNodesByComponentId(id, nodeDictionary);
-
-      nodes.forEach((nodeId) => {
-        newSelectedKeys[nodeId] = true;
-      });
-    });
-
-    const newExpandedKeys = { ...expandedKeys };
-    Object.keys(newSelectedKeys).forEach((id) => {
-      const node = nodeDictionary[id];
-      if (node) expandParents(node.parent!, newExpandedKeys);
-    });
-
-    if (!hasSameProps(newExpandedKeys, expandedKeys))
-      setExpandedKeys(newExpandedKeys);
-
-    setSelectedKeys(newSelectedKeys);
-  }, [selection, nodeDictionary]);
-
-  function mapPlaceholderNode(
-    p: Placeholder,
-    parent: CustomTreeNode
-  ): CustomTreeNode {
-    const node: CustomTreeNode = {
-      key: p.key,
-      componentId: p.key,
-      label: p.name,
-      data: p,
-      icon: "pi pi-folder",
-      parent: parent,
-      droppable: false,
-    };
-    node.children = p.components.map((c) => mapComponentNode(c, node));
-    return node;
-  }
-
-  function mapPlaceholders(c: Component, parent: CustomTreeNode): TreeNode[] {
-    if (!c?.placeholders) return [];
-    if (c.placeholders.length > 1)
-      return c.placeholders.map((x) => mapPlaceholderNode(x, parent));
-    else if (c.placeholders.length > 0) {
-      return c.placeholders[0].components.map((c) =>
-        mapComponentNode(c, parent)
-      );
-    }
-    return [];
-  }
-
-  function mapComponentNode(
-    c: Component,
-    parent: CustomTreeNode
-  ): CustomTreeNode {
-    const node: CustomTreeNode = {
-      key: c.id,
-      componentId: c.id,
-      label: c.name,
-      icon: "pi pi-stop",
-      data: c,
-      parent: parent,
-      tags: [],
-      droppable: true,
-      className: c.isRemovedFromMasterLanguage ? "a-text-gray-400" : "",
-    };
-
-    // if (c.translations && c.translations.length > 1)
-    //   node.tags!.push({
-    //     severity: "info",
-    //     value: c.translations!.length + " Languages",
-    //     icon: "pi pi-flag",
-    //   });
-
-    if (c.isInheritedFromMasterLanguage) {
-      node.tags!.push({
-        id: "inherited",
-        severity: "info",
-        value:
-          "Inherited " + (c.isRemovedFromMasterLanguage ? " / removed" : ""),
-        tooltip: c.isRemovedFromMasterLanguage
-          ? "Component was removed from master language"
-          : "Component is inherited from master language",
-        icon: "pi pi-caret-right",
-      });
-    }
-
-    if (c.layoutId) {
-      node.tags!.push({
-        id: "layout",
-        severity: "warning",
-        value: "Layout",
-        icon: "",
-        color: "rgb(192 132 252)",
-        tooltip: "Component is inherited from layout. Click to edit layout.",
-        onClick: async () => {
-          if (!editContext || !c.layoutId) return;
-          const hostItem = await editContext.itemsRepository.getItem({
-            id: c.layoutId,
-            language: page!.item.language,
-            version: 0,
-          });
-          confirmDialog({
-            header: "Edit layout",
-            message: "Edit layout " + hostItem.path + "?",
-            accept: () =>
-              editContext.loadItem({
-                id: c.layoutId!,
-                language: page!.item.language,
-                version: 0,
-              }),
-            //window.open(c._editor.hostingPageItem!.editUrl, "_blank"),
-          });
-        },
-      });
-    }
-
-    if (c.datasourceItem && c.datasourceItem?.id !== c.id) {
-      node.tags!.push({
-        id: "linked",
-        severity: "warning",
-        value: "Shared",
-        icon: "",
-        tooltip: "Component is linked to " + c.datasourceItem?.id,
-        color: "rgb(251, 146, 60)",
-      });
-    }
-
-    // if (!c.visible) {
-    //   node.tags!.push({
-    //     id: "hidden",
-    //     severity: "warning",
-    //     value: "Hidden",
-    //     icon: "pi pi-exclamation-triangle",
-    //     color: "rgb(251, 146, 60)",
-    //     tooltip:
-    //       "Component is hidden. " +
-    //       (c.messages ? c.messages.join(", ") : ""),
-    //   });
-    // }
-
-    node.children = mapPlaceholders(c, node);
-
-    if (c.items.length > 0 && c.items[0].id !== c.datasourceItem?.id) {
-      const itemsNode: CustomTreeNode = {
-        key: "items" + c.id,
-        label: "items",
-        icon: "pi pi-circle",
-        parent: node,
-      };
-
-      itemsNode.children = c.items.map((x) => {
-        const itemNode: CustomTreeNode = {
-          key: x.id,
-          label: x.name,
-          icon: "pi pi-file",
-          parent: itemsNode,
-          droppable: false,
-        };
-        return itemNode;
-      });
-
-      node.children.push(itemsNode);
-    }
-
-    return node;
-  }
-
-  useEffect(() => {
-    if (!page) return;
-
-    const treeNodes = mapPlaceholders(page.rootComponent, {});
-    const dict: { [key: string]: CustomTreeNode } = {};
-    createMap(treeNodes, dict);
-
-    const otherNode: CustomTreeNode = {
-      key: "other",
-      label: "Other",
-      icon: "pi pi-file",
-      children: [],
-    };
-
-    // editContext.nonComponentItems.forEach((x) => {
-    //   const parent =
-    //     (x.parentComponentId && dict[x.parentComponentId]) || otherNode;
-
-    //   const node: CustomTreeNode = {
-    //     key: x.id,
-    //     label: x.name,
-    //     icon: "pi pi-file",
-    //     data: x,
-    //     parent: parent,
-    //     droppable: false,
-    //     componentId: x.id,
-    //   };
-    //   if (!parent.children) parent.children = [];
-    //   parent.children.push(node);
-    //   dict[x.id] = node;
-    // });
-
-    if (otherNode.children?.length) treeNodes.push(otherNode);
-
-    const pageNode: CustomTreeNode = {
-      key: "page",
-      label: "Page",
-      icon: "pi pi-home",
-      parent: undefined,
-      componentId: page.item.id,
-    };
-
-    setRootNodes([pageNode, ...treeNodes]);
-    setNodeDictionary(dict);
-  }, [page]);
-
-  useEffect(() => {
-    const container = treeRef.current;
-    if (container) {
-      const handleDragStart = (e: DragEvent) => {
-        console.log("dragstart 232323", e);
-        const target = e.target as HTMLElement;
-        // Ensure the target is what you expect (e.g., it has a data-key attribute)
-        const nodeKey = target.getAttribute("data-key");
-        if (nodeKey && nodeDictionary[nodeKey]) {
-          console.log("dragstart 232323", nodeKey, nodeDictionary[nodeKey]);
-        }
-      };
-
-      // Use the capturing phase to catch the event early
-      container.addEventListener("dragstart", handleDragStart, true);
-      return () => {
-        container.removeEventListener("dragstart", handleDragStart, true);
-      };
-    }
-  }, [treeRef.current, nodeDictionary]);
-
-  if (!page)
-    return (
-      <div className="a-flex a-justify-center a-items-center a-h-full a-text-sm a-text-gray-500"></div>
-    );
-
-  const nodeTemplate = (
-    node: CustomTreeNode,
-    options: TreeNodeTemplateOptions
-  ) => {
-    let label = (
-      <div
-        key={node.key}
-        data-key={node.key}
-        className="a-flex a-items-center"
-        onDragStart={(e) => {
-          console.log("dragstart", e);
-        }}
-      >
-        <span className={node.className}>{node.label}</span>
-        {node.tags?.map((x) => (
-          <div key={"x" + node.key + x.id}>
-            <Tag
-              key={"tag-" + node.key + x.id}
-              id={"id-" + node.key + x.id}
-              icon={x.icon}
-              value={x.value}
-              severity={x.severity}
-              onClick={x.onClick}
-              style={{
-                backgroundColor: x.color,
-                marginLeft: "8px",
-                fontSize: "10px",
-                padding: "1px 4px 2px 2px",
-              }}
-            />
-            <Tooltip
-              key={"tooltip-" + node.key + x.id}
-              target={"#id-" + node.key + x.id}
-              content={x.tooltip}
-              position="bottom"
-            />
-          </div>
-        ))}
-      </div>
-    );
-
-    return (
-      <span className={options.className + " a-flex a-items-center"}>
-        {label}
-      </span>
-    );
-  };
-
-  if (!rootNodes?.length) return null;
-
-  function removeParentReferences(
-    nodes: CustomTreeNode[]
-  ): Omit<CustomTreeNode, "parent">[] {
-    return nodes.map(({ parent, children, ...rest }) => ({
-      ...rest,
-      // Recursively process children if they exist
-      children: children ? removeParentReferences(children) : undefined,
-    }));
-  }
-
-  return (
-    <div className="a-p-1" ref={treeRef}>
-      <Tree
-        value={removeParentReferences(rootNodes)}
-        selectionMode="multiple"
-        selectionKeys={selectedKeys}
-        className="a-w-full alpaca-no-border a-text-xs"
-        onToggle={(e) => setExpandedKeys(e.value)}
-        expandedKeys={expandedKeys}
-        nodeTemplate={nodeTemplate}
-        dragdropScope="component-tree"
-        onSelect={(e) => {
-          const mouseEvent = e.originalEvent as unknown as MouseEvent;
-          const selection = mouseEvent.ctrlKey ? selectedKeys || {} : {};
-          if (e.node.key)
-            selection[e.node.key] = !(selection[e.node.key] ? true : false);
-          const keys = Object.keys(selection);
-
-          const selectedComponentIds = keys
-            .filter((key) => nodeDictionary[key])
-            .map((key) => nodeDictionary[key].componentId) as string[];
-          editContextRef.current?.select(selectedComponentIds);
-
-          if (selectedComponentIds.length === 1)
-            editContextRef.current?.setScrollIntoView(selectedComponentIds[0]);
-        }}
-        onDragDrop={(e) => {
-          console.log(e.dragNode);
-          console.log(e.dropNode);
-          console.log(e.dropIndex);
-        }}
-        onContextMenu={(e) => {
-          const componentId = nodeDictionary[e.node.key as string].componentId;
-
-          let selectedComponentIds = selection;
-
-          if (componentId) {
-            if (selection.indexOf(componentId) < 0) {
-              editContextRef.current?.select([componentId]);
-              selectedComponentIds = [componentId];
-            }
-          }
-
-          let selectedEntities = selectedComponentIds
-            .filter((key) => nodeDictionary[key])
-            .map((key) => nodeDictionary[key].data)
-            .filter((x) => x);
-
-          if (selectedEntities.length === 0) {
-            selectedEntities = [e.node.data];
-          }
-
-          let commands = getComponentCommands(
-            selectedEntities,
-            editContextRef.current!
-          );
-
-          const menu: MenuItem[] = commands.map((x) => ({
-            label: x.label,
-            icon: x.icon,
-            disabled: editContextRef.current?.isCommandDisabled({
-              command: x,
-            }),
-            command: (ev: MenuItemCommandEvent) => {
-              editContextRef.current?.executeCommand({
-                command: x,
-                data: { components: selectedEntities },
-                event: ev.originalEvent,
-              });
-            },
-          }));
-
-          editContextRef.current?.showContextMenu(e.originalEvent, menu);
-        }}
-      />
-    </div>
-  );
-}
-function createMap(
-  treeNodes: CustomTreeNode[],
-  nodeDictionary: { [key: string]: CustomTreeNode }
-) {
-  treeNodes.forEach((n) => {
-    if (n.key) nodeDictionary[n.key] = n;
-    if (n.children) createMap(n.children, nodeDictionary);
-  });
-}
-
-function findNodesByComponentId(
-  id: string,
-  nodesDictionary: { [key: string]: CustomTreeNode }
-): string[] {
-  if (!id) return [];
-  const allNodes = Object.values(nodesDictionary);
-  return allNodes
-    .filter((x) => x.componentId === id)
-    .map((x) => x.key?.toString() || "");
-}
-
-function expandParents(
-  node: CustomTreeNode,
-  newExpandedKeys: TreeExpandedKeysType
-) {
-  if (!node) return;
-  if (node.key) newExpandedKeys[node.key] = true;
-  if (node.parent) expandParents(node.parent, newExpandedKeys);
-}
-
-function hasSameProps(obj1: any, obj2: any) {
-  var obj1Props = Object.keys(obj1),
-    obj2Props = Object.keys(obj2);
-
-  if (obj1Props.length == obj2Props.length) {
-    return obj1Props.every(function (prop) {
-      return obj2Props.indexOf(prop) >= 0;
-    });
-  }
-
-  return false;
-}

package/src/editor/sidebar/Debug.tsx

@@ -1,111 +0,0 @@
-import { TabView, TabPanel } from "primereact/tabview";
-import { CopyToClipboardButton } from "../ui/CopyToClipboardButton";
-import { useEffect, useState } from "react";
-
-import { getComponentByIdFromHeadlessLayout } from "../componentTreeHelper";
-
-import { ObjectInspector, ObjectLabel, ObjectRootLabel } from "react-inspector";
-import { Component } from "../pageModel";
-import { useEditContext } from "../client/editContext";
-
-import { getPageJson } from "../services/contentService";
-
-export function Debug({}: {}) {
-  const [activeTab, setActiveTab] = useState<number>(0);
-  const [pageLayout, setPageLayout] = useState<any>(null);
-
-  const editContext = useEditContext();
-  if (!editContext) return;
-
-  useEffect(() => {
-    const loadLayout = async () => {
-      if (
-        !editContext.contentEditorItem ||
-        !editContext.contentEditorItem.hasLayout
-      )
-        return;
-      const layout = await getPageJson(
-        editContext.contentEditorItem.descriptor,
-      );
-      setPageLayout(layout);
-    };
-    loadLayout();
-  }, [editContext.contentEditorItem, editContext.itemsRepository.revision]);
-
-  const page = pageLayout; // editContext.page;
-  let component = null;
-  if (page) {
-    const selectedComponents = editContext.selection
-      .map((x) => getComponentByIdFromHeadlessLayout(x, page))
-      .filter((x) => x) as Component[];
-    component = selectedComponents.length === 1 ? selectedComponents[0] : null;
-  }
-  if (!component && !page) return;
-  const replacer = function (key: string, value: any) {
-    if (
-      key === "parentComponent" ||
-      key === "placeholderReference" ||
-      key === "_editor"
-    ) {
-      return undefined;
-    }
-    return value;
-  };
-  const tabs = [];
-  const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }: any) => {
-    if (
-      name == "__editor" ||
-      name == "parentComponent" ||
-      name == "placeholderReference"
-    )
-      return null;
-    return depth === 0 ? (
-      <ObjectRootLabel name={name} data={data} />
-    ) : (
-      <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />
-    );
-  };
-  if (component) {
-    tabs.push(
-      <TabPanel header="Component" className="relative h-full" key="component">
-        <div className="relative h-full">
-          <div className="absolute inset-0 overflow-auto p-2">
-            <ObjectInspector
-              data={component}
-              nodeRenderer={defaultNodeRenderer}
-            />
-          </div>
-        </div>
-      </TabPanel>,
-    );
-  }
-  tabs.push(
-    <TabPanel header="Page" className="relative h-full" key="page">
-      <div className="absolute inset-0 overflow-auto p-2">
-        <ObjectInspector data={page} nodeRenderer={defaultNodeRenderer} />
-      </div>
-    </TabPanel>,
-  );
-  return (
-    <div className="relative h-[calc(100%-6px)]">
-      <TabView
-        className="alpaceditor-tabs h-full"
-        onTabChange={(ev) => {
-          setActiveTab(ev.index);
-        }}
-        activeIndex={activeTab}
-      >
-        {tabs}
-      </TabView>
-      <div className="absolute top-2 right-1">
-        <CopyToClipboardButton
-          text={JSON.stringify(
-            activeTab === 0 && component ? component : page,
-            replacer,
-            2,
-          )}
-        />
-      </div>
-    </div>
-  );
-}