@alpaca-editor/core 1.0.0

package/src/editor/sidebar/ComponentTree2.tsxx

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

@@ -0,0 +1,105 @@
+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.currentItemDescriptor) return;
+      const layout = await getPageJson(editContext.currentItemDescriptor);
+      setPageLayout(layout);
+    };
+    loadLayout();
+  }, [editContext.currentItemDescriptor, 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>
+  );
+}