@alpaca-editor/core 1.0.0

package/src/editor/ContentTree.tsx

@@ -0,0 +1,654 @@
+"use client";
+
+import { useEditContext, useEditContextRef } from "./client/editContext";
+
+import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react";
+
+import { ItemTreeNodeData, getChildren } from "./services/contentService";
+import { ContextMenu } from "primereact/contextmenu";
+import { MenuItem } from "primereact/menuitem";
+
+import { ItemNameDialogHandle, ItemNameDialog } from "./ui/ItemNameDialog";
+
+import { getAbsoluteIconUrl } from "./utils";
+import { FullItem, ItemDescriptor } from "./pageModel";
+import { ItemCommand } from "./commands/itemCommands";
+import { Spinner } from "./ui/Spinner";
+
+import { PerfectTree, TreeNode } from "./ui/PerfectTree";
+// Create a memoized version of PerfectTree
+const MemoizedPerfectTree = memo(PerfectTree);
+
+type CustomTreeNode = TreeNode & {
+  isDraggable?: boolean;
+  iconUrl?: string;
+  url?: string;
+  loading?: boolean;
+  parent?: CustomTreeNode;
+  selectable?: boolean;
+  className?: string;
+};
+
+export default function ContentTree({
+  isDraggable,
+  dragStart,
+  dragEnd,
+  expandIdPath,
+  selectionMode,
+  selectedItemIds,
+  rootItemId,
+  rootItemIds,
+  onSelectionChange,
+  filter,
+  templateIds,
+  className,
+  includeEmbeddedItems,
+  onDoubleClick,
+  selectPagesOnly,
+  renderNode,
+  onItemInserted,
+  language,
+  includeItemPath,
+}: {
+  isDraggable?: (item: ItemTreeNodeData) => boolean;
+  dragStart?: (item: ItemTreeNodeData) => void;
+  dragEnd?: () => void;
+  expandIdPath?: string;
+  selectionMode?: "single" | "multiple" | "none";
+  rootItemId?: string;
+  rootItemIds?: string[];
+  selectedItemIds?: string[];
+  onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
+  onNodeClick?: (item: ItemTreeNodeData) => void;
+  filter?: (items: ItemTreeNodeData[]) => ItemTreeNodeData[];
+  templateIds?: string[];
+  className?: string;
+  includeEmbeddedItems?: boolean;
+  onDoubleClick?: (item: ItemTreeNodeData) => void;
+  selectPagesOnly?: boolean;
+  onItemInserted?: (item: ItemDescriptor) => void;
+  renderNode?: (
+    node: CustomTreeNode,
+    defaultRenderer: (node: CustomTreeNode) => React.ReactNode,
+  ) => React.ReactNode;
+  language: string;
+  includeItemPath?: boolean;
+}) {
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [selectedNodeElement, setSelectedNodeElement] =
+    useState<HTMLElement | null>(null);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const treeContainerRef = useRef<HTMLDivElement>(null);
+  const editContext = useEditContext();
+
+  const nodeDictionary = useRef<{ [key: string]: CustomTreeNode }>({});
+  const cm = useRef<ContextMenu>(null);
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const itemNameDialogRef = useRef<ItemNameDialogHandle>(null);
+  const editContextRef = useEditContextRef();
+  const lastSelectedItemId = useRef<string | undefined>(undefined);
+
+  const loadNodeChildren = useCallback(
+    async (node: CustomTreeNode): Promise<CustomTreeNode[]> => {
+      if (!editContext) return [];
+
+      let children = await getChildren(
+        node.key as string,
+        editContext.sessionId,
+        templateIds,
+        includeEmbeddedItems ?? false,
+        language,
+        includeItemPath ? "path,idPath" : undefined,
+      );
+
+      if (filter) children = filter(children);
+
+      return children.map((x) => ({
+        key: x.id,
+        label: x.name,
+        iconUrl: getAbsoluteIconUrl(x.icon),
+        isDraggable: isDraggable && isDraggable(x),
+        selectable: !selectPagesOnly || x.hasLayout,
+        data: x,
+        hasChildren: x.hasChildren,
+        parent: node,
+      }));
+    },
+    [
+      editContext,
+      filter,
+      includeEmbeddedItems,
+      isDraggable,
+      language,
+      selectPagesOnly,
+      templateIds,
+      includeItemPath,
+    ],
+  );
+
+  const updateCorrespondingNode = useCallback(
+    (x: FullItem, parent: CustomTreeNode) => {
+      const node = nodeDictionary.current[x.id];
+      if (!node) return;
+      node.label = x.name;
+      node.iconUrl = getAbsoluteIconUrl(x.icon);
+      node.isDraggable =
+        isDraggable &&
+        isDraggable({
+          ...x,
+          isComponent: !x.hasLayout,
+          thumbUrl: "",
+          previewUrl: "",
+        });
+      node.selectable = !selectPagesOnly || x.hasLayout;
+      node.data = x;
+      node.hasChildren = x.hasChildren;
+      node.parent = parent;
+    },
+    [isDraggable, selectPagesOnly],
+  );
+
+  const loadNode = useCallback(
+    async (descriptor: ItemDescriptor) => {
+      const item = await editContext?.itemsRepository.getItem(descriptor);
+      if (!item) return;
+      return {
+        key: item.id,
+        label: item.name,
+        iconUrl: getAbsoluteIconUrl(item.icon),
+        isDraggable:
+          isDraggable &&
+          isDraggable({
+            ...item,
+            isComponent: !item.hasLayout,
+            thumbUrl: "",
+            previewUrl: "",
+          }),
+        selectable: !selectPagesOnly || item.hasLayout,
+        data: item,
+        hasChildren: item.hasChildren,
+      };
+    },
+    [editContext?.itemsRepository, isDraggable, selectPagesOnly],
+  );
+
+  const loadRootNodes = useCallback(
+    async (force: boolean = false) => {
+      if (!force && treeNodes.length > 0) return treeNodes;
+
+      if (rootItemId)
+        return await loadNodeChildren({ key: rootItemId, label: "" });
+
+      return await Promise.all(
+        rootItemIds
+          ?.map((rootItemId) =>
+            loadNode({
+              id: rootItemId,
+              language,
+              version: 0,
+            }),
+          )
+          .filter((x) => x) || [],
+      );
+    },
+    [loadNode, loadNodeChildren, rootItemId, rootItemIds, language],
+  );
+
+  const doPreloadNodes = useCallback(
+    async (expandedKeys: string[], treeNodes: TreeNode[]) => {
+      for (let i = 0; i < treeNodes.length; i++) {
+        const node = treeNodes[i];
+        if (!node) continue;
+        let children = node.children;
+        if (expandedKeys.includes(node.key as string) && !children) {
+          children = node.data.hasChildren ? await loadNodeChildren(node) : [];
+
+          node.children = children;
+        }
+        if (
+          expandedKeys.includes(node.key!) &&
+          children &&
+          children.length > 0
+        ) {
+          await doPreloadNodes(expandedKeys, children);
+        }
+      }
+    },
+    [loadNodeChildren],
+  );
+
+  const preLoadNodes = useCallback(
+    async (expandedKeys: string[], force: boolean) => {
+      const rootNodes = await loadRootNodes(force);
+      await doPreloadNodes(expandedKeys, rootNodes as TreeNode[]);
+
+      setTreeNodes([...(rootNodes.filter((x) => x) as TreeNode[])]);
+    },
+    [doPreloadNodes, loadRootNodes],
+  );
+
+  const refreshNode = useCallback(
+    async (node: TreeNode) => {
+      const tempNode = { ...node };
+
+      tempNode.children = undefined;
+
+      await doPreloadNodes(expandedKeys || [], [tempNode as CustomTreeNode]);
+
+      const item = await editContext?.itemsRepository.getItem(
+        node.data as ItemDescriptor,
+      );
+
+      if (item) updateCorrespondingNode(item, node);
+
+      node.children = tempNode.children;
+    },
+    [
+      editContext?.itemsRepository,
+      expandedKeys,
+      doPreloadNodes,
+      updateCorrespondingNode,
+    ],
+  );
+
+  useEffect(() => {
+    preLoadNodes(expandedKeys || [], false);
+  }, [language, preLoadNodes, expandedKeys]);
+
+  useEffect(() => {
+    if (!editContext?.itemsRepository) return;
+    const unsubscribe = editContext.itemsRepository.subscribeItemsChanged(
+      async (items) => {
+        const nodes = items
+          .map((x) =>
+            x.action === "delete" && x.parentId
+              ? nodeDictionary.current[x.parentId]
+              : nodeDictionary.current[x.item.id],
+          )
+          .filter((x) => x);
+
+        if (nodes.length === 0) return;
+
+        await Promise.all(
+          nodes.map(async (x) => {
+            if (x) await refreshNode(x);
+          }),
+        );
+
+        setTreeNodes((prev) => [...prev]);
+      },
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, [editContext?.itemsRepository, refreshNode]);
+
+  function getExpandedKeys() {
+    const newExpandedKeys: string[] = [];
+
+    if (rootItemId)
+      newExpandedKeys.push(rootItemId.toLowerCase().replace(/[{}]/g, ""));
+
+    if (!expandIdPath) return newExpandedKeys;
+
+    const idPathArray = expandIdPath.toLowerCase().split("/");
+    idPathArray.forEach((x) => {
+      if (x !== "") newExpandedKeys.push(x.substring(1, x.length - 1));
+    });
+    return newExpandedKeys;
+  }
+
+  useEffect(() => {
+    const newExpandedKeys = getExpandedKeys();
+
+    const hasNewKeys = newExpandedKeys.some(
+      (key) => !expandedKeys.includes(key),
+    );
+
+    if (hasNewKeys) {
+      setExpandedKeys([...new Set([...expandedKeys, ...newExpandedKeys])]);
+    }
+  }, [expandIdPath, preLoadNodes]);
+
+  useEffect(() => {
+    const newNodeDictionary: { [key: string]: CustomTreeNode } = {};
+    createMap(treeNodes, newNodeDictionary);
+    nodeDictionary.current = newNodeDictionary;
+  }, [treeNodes]);
+
+  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);
+    });
+  }
+
+  const nodeTemplate = useCallback((node: CustomTreeNode) => {
+    let label = <span>{node.label}</span>;
+
+    if (node.url) {
+      label = (
+        <a
+          onDragStart={(e) => e.preventDefault()}
+          href={node.url}
+          className="text-primary font-semibold hover:underline"
+        >
+          {node.label}
+        </a>
+      );
+    }
+
+    const getNodeCursor = (node: CustomTreeNode) => {
+      if (node.isDraggable) return "cursor-grab";
+      return "";
+    };
+
+    return (
+      <span
+        // onDragStart={(event: React.DragEvent<HTMLDivElement>) => {
+        //   handleDragStart(node, event);
+        // }}
+        // onDragEnd={handleDragEnd}
+        // draggable={node.isDraggable}
+        className={`flex items-center gap-2 text-xs ${getNodeCursor(node)} ${
+          node.className
+        }`}
+      >
+        <img
+          src={node.iconUrl}
+          style={{ height: "16px" }}
+          width="16"
+          height="16"
+          onDragStart={(e) => e.preventDefault()}
+        ></img>
+        {label}
+      </span>
+    );
+  }, []);
+
+  function handleDragStart(data: {
+    node: CustomTreeNode;
+    event: React.DragEvent;
+    isMultiSelect: boolean;
+  }): void {
+    const items = data.isMultiSelect
+      ? selectedItemIds?.map((x) => nodeDictionary.current[x]?.data)
+      : [data.node.data];
+
+    setTimeout(() => {
+      editContextRef.current?.dragStart({
+        type: "items",
+        typeId: data.node.data.templateId,
+        items: items,
+      });
+    }, 10);
+    //dragStart?.(data.node.data);
+    data.event.stopPropagation();
+  }
+
+  function handleDrop(
+    parent: CustomTreeNode,
+    index: number,
+    event: React.DragEvent,
+  ): void {
+    const object = editContextRef.current?.dragObject;
+    if (!object) return;
+    if (object.type === "items" && object.items) {
+      editContextRef.current?.operations.moveItems(
+        object.items,
+        parent.data,
+        index,
+      );
+    }
+    event.stopPropagation();
+  }
+
+  function handleDragEnd(): void {
+    editContextRef.current?.dragEnd();
+    if (dragEnd) dragEnd();
+  }
+
+  useEffect(() => {
+    if (!selectedNodeElement) return;
+
+    const container = treeContainerRef.current;
+    if (!container) return;
+
+    if (!treeContainerRef.current) return;
+
+    const containerRect = treeContainerRef.current.getBoundingClientRect();
+    const nodeRect = selectedNodeElement.getBoundingClientRect();
+
+    if (
+      nodeRect.top < containerRect.top ||
+      nodeRect.top > containerRect.bottom
+    ) {
+      selectedNodeElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }
+  }, [selectedNodeElement]);
+
+  useEffect(() => {
+    setSelectedKeys(selectedItemIds || []);
+  }, [selectedItemIds]);
+
+  const itemCommands =
+    editContext?.configuration.commands.allItemCommands || [];
+
+  const onContextMenu = useCallback(
+    async (node: CustomTreeNode, originalEvent: React.MouseEvent) => {
+      console.log("CONTEXT MENU", node);
+      const key = node.key;
+      let itemIds = selectedItemIds;
+
+      if (!itemIds || !itemIds.includes(key as string)) {
+        if (onSelectionChange && selectionMode == "single") {
+          onSelectionChange([node.data as ItemTreeNodeData]);
+        }
+        itemIds = [key as string];
+      }
+
+      const items = await editContext?.itemsRepository.getItems(
+        itemIds.map((x) => ({
+          id: x,
+          language: editContext.contentEditorItem?.language || "en",
+          version: 0,
+        })),
+      );
+
+      console.log("ITEMS", items);
+
+      if (!items || items.length === 0) return;
+
+      const menuItems =
+        await editContext?.configuration.editor.contentTree.contextMenu.factory(
+          {
+            items: items,
+            editContext: editContext,
+            commandCallback: (command: ItemCommand, result: any) => {
+              if (command.id === "insertItem") {
+                const item = result as ItemDescriptor;
+                if (item) {
+                  setExpandedKeys((keys) => [...keys, item.id]);
+                  onItemInserted?.(item);
+                }
+              }
+            },
+          },
+        );
+
+      if (menuItems) setMenu(menuItems);
+
+      console.log("SHOWING CONTEXT MENU", originalEvent);
+      cm.current?.show(originalEvent);
+    },
+    [
+      itemCommands,
+      editContext,
+      selectedItemIds,
+      onSelectionChange,
+      selectionMode,
+      onItemInserted,
+    ],
+  );
+
+  // Memoize the toggle expand handler
+  const handleToggleExpand = useCallback((nodeKey: string) => {
+    setExpandedKeys((value) => {
+      if (value.includes(nodeKey)) return value.filter((x) => x !== nodeKey);
+      else return [...value, nodeKey];
+    });
+  }, []);
+
+  // Memoize the node selection handler
+  const handleNodeSelect = useCallback(
+    (nodeKey: string, ev: any) => {
+      let newSelection = [...selectedKeys];
+
+      if (
+        selectionMode == "multiple" &&
+        ev.shiftKey &&
+        lastSelectedItemId.current
+      ) {
+        // Get the nodes
+        const lastNode = nodeDictionary.current[lastSelectedItemId.current];
+        const currentNode = nodeDictionary.current[nodeKey];
+
+        // Check if both nodes exist and have the same parent
+        if (
+          lastNode &&
+          currentNode &&
+          lastNode.parent?.key === currentNode.parent?.key
+        ) {
+          const parentNode = lastNode.parent;
+
+          // Get all children of the parent
+          const siblings = parentNode?.children || [];
+
+          // Find indices of selected nodes
+          const siblingKeys = siblings.map((node) => node.key as string);
+          const lastNodeIndex = siblingKeys.indexOf(lastSelectedItemId.current);
+          const currentNodeIndex = siblingKeys.indexOf(nodeKey);
+
+          // Determine start and end indices
+          const startIdx = Math.min(lastNodeIndex, currentNodeIndex);
+          const endIdx = Math.max(lastNodeIndex, currentNodeIndex);
+
+          // Get all nodes between (inclusive)
+          const nodesToSelect = siblingKeys.slice(startIdx, endIdx + 1);
+
+          // Combine with existing selection
+          newSelection = [...new Set([...newSelection, ...nodesToSelect])];
+        } else {
+          // If not on same level, just select the current node
+          newSelection = [nodeKey];
+        }
+      } else if (selectionMode === "multiple" && ev.ctrlKey) {
+        newSelection = selectedKeys.includes(nodeKey)
+          ? selectedKeys.filter((x) => x !== nodeKey)
+          : [...selectedKeys, nodeKey];
+      } else {
+        lastSelectedItemId.current = nodeKey;
+        newSelection = [nodeKey];
+      }
+
+      setSelectedKeys(newSelection);
+      if (onSelectionChange) {
+        const selectedNodes = newSelection
+          .filter((key) => nodeDictionary.current[key])
+          .map((key) => nodeDictionary.current[key]);
+        onSelectionChange(selectedNodes.map((x) => x?.data));
+      }
+    },
+    [onSelectionChange, selectionMode, selectedKeys],
+  );
+
+  // Memoize the renderNode function
+  const memoizedRenderNode = useMemo(() => {
+    if (renderNode) {
+      return (node: CustomTreeNode) => renderNode(node, (n) => nodeTemplate(n));
+    }
+    return nodeTemplate;
+  }, [renderNode, nodeTemplate]);
+
+  // Memoize the double click handler
+  const handleDoubleClick = useCallback(
+    (node: CustomTreeNode) => {
+      onDoubleClick?.(nodeDictionary.current[node.key]?.data);
+    },
+    [onDoubleClick],
+  );
+
+  // Memoize treeNodes to prevent unnecessary re-renders
+  const memoizedTreeNodes = useMemo(() => treeNodes, [treeNodes]);
+
+  const loadChildren = useCallback(
+    async (node: CustomTreeNode, forceReload = false) => {
+      if (!node.children || forceReload) {
+        const nodes = await loadNodeChildren(node);
+        node.children = nodes;
+        console.log("LOAD CHILDREN COMPLETED", node.key, nodes);
+        setTreeNodes((prev) => [...prev]);
+      }
+    },
+    [loadNodeChildren],
+  );
+
+  const loadOnExpand = useCallback(
+    async (node: CustomTreeNode) => {
+      node.children = null;
+      setTreeNodes([...treeNodes]);
+      await loadChildren(node);
+    },
+    [loadChildren, treeNodes],
+  );
+
+  const handleDragOverZone = useCallback(
+    (node: CustomTreeNode | null, index: number, event: React.DragEvent) => {
+      return true;
+    },
+    [],
+  );
+  if (!memoizedTreeNodes.length)
+    return (
+      <div className="flex h-full items-center justify-center gap-2 bg-gray-50 text-sm text-gray-500">
+        <Spinner size="3xl" /> Loading...
+      </div>
+    );
+
+  return (
+    <>
+      <ItemNameDialog ref={itemNameDialogRef} />
+      <ContextMenu model={menu} ref={cm} className="text-sm" />
+      <div className={className} ref={treeContainerRef}>
+        <MemoizedPerfectTree
+          nodes={memoizedTreeNodes}
+          expandedKeys={expandedKeys}
+          onToggleExpand={handleToggleExpand}
+          renderNode={memoizedRenderNode}
+          onLazyLoad={loadOnExpand}
+          onDoubleClick={handleDoubleClick}
+          onSelect={handleNodeSelect}
+          selectedKeys={selectedKeys}
+          onContextMenu={onContextMenu}
+          enableDragAndDrop={true}
+          onStartDrag={handleDragStart}
+          onDragOverZone={handleDragOverZone}
+          onDragEnd={handleDragEnd}
+          isDragging={editContext?.dragObject !== undefined}
+          onDrop={(parent, index, event) => {
+            console.log("DROP", parent, index, event);
+            handleDrop(parent as CustomTreeNode, index, event);
+          }}
+        />
+      </div>
+    </>
+  );
+}