@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ContentTree.tsx

@@ -1,727 +0,0 @@
-"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 { getAbsoluteIconUrl } from "./utils";
-import { FullItem, ItemDescriptor } from "./pageModel";
-import { ItemCommand } from "./commands/itemCommands";
-import { Spinner } from "./ui/Spinner";
-
-import { PerfectTree, TreeNode } from "./ui/PerfectTree";
-import { loadInsertOptions } from "./services/editService";
-
-// 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;
-
-  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 [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 editContextRef = useEditContextRef();
-  const lastSelectedItemId = useRef<string | undefined>(undefined);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  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, 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, treeNodes],
-  );
-
-  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;
-          node.hasChildren = children.length > 0;
-        }
-        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) {
-        // Update node properties directly without changing parent relationship
-        const customNode = node as CustomTreeNode;
-        customNode.label = item.name;
-        customNode.iconUrl = getAbsoluteIconUrl(item.icon);
-        customNode.isDraggable =
-          isDraggable &&
-          isDraggable({
-            ...item,
-            isComponent: !item.hasLayout,
-            thumbUrl: "",
-            previewUrl: "",
-          });
-        customNode.selectable = !selectPagesOnly || item.hasLayout;
-        customNode.data = item;
-        customNode.hasChildren = item.hasChildren;
-        // Preserve existing parent relationship - don't update it
-      }
-
-      node.children = tempNode.children;
-    },
-    [
-      editContext?.itemsRepository,
-      expandedKeys,
-      doPreloadNodes,
-      isDraggable,
-      selectPagesOnly,
-    ],
-  );
-
-  // Handle root items or language changes
-  useEffect(() => {
-    setIsInitialized(true);
-    const load = async () => {
-      await preLoadNodes(expandedKeys || [], true);
-    };
-
-    load();
-  }, [language, rootItemId, rootItemIds]);
-
-  // Handle expanded keys changes without forcing reload
-  useEffect(() => {
-    if (isInitialized) {
-      preLoadNodes(expandedKeys || [], false);
-    }
-  }, [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, expandedKeys, rootItemId]);
-
-  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)
-          .filter(Boolean)
-      : [data.node.data];
-
-    setTimeout(() => {
-      editContextRef.current?.dragStart({
-        type: "items",
-        typeId: data.node.data.templateId,
-        items: items,
-      });
-    }, 10);
-    //dragStart?.(data.node.data);
-    data.event.stopPropagation();
-  }
-
-  async function handleDrop(
-    parent: CustomTreeNode,
-    index: number,
-    event: React.DragEvent,
-  ): Promise<void> {
-    const object = editContextRef.current?.dragObject;
-    if (!object) return;
-
-    if (object.type === "items" && object.items) {
-      // Check insert options for validation
-      try {
-        const insertOptions = await loadInsertOptions({
-          id: parent.data.id,
-          language: parent.data.language || language,
-          version: parent.data.version || 0,
-        });
-
-        // Check if any of the dragged items have compatible insert options
-        const hasValidInsertOptions = object.items.some((item) =>
-          insertOptions.some(
-            (option) =>
-              option.id === (item as ItemTreeNodeData).templateId ||
-              option.id === object.typeId,
-          ),
-        );
-
-        if (!hasValidInsertOptions) {
-          const confirmed = await new Promise<boolean>((resolve) => {
-            editContext?.confirm({
-              message: (
-                <div>
-                  The selected items may not be compatible with this location.
-                  No matching insert options were found. Do you want to proceed
-                  anyway?
-                </div>
-              ),
-              header: "Insert Options Warning",
-              icon: "pi pi-exclamation-triangle",
-              acceptLabel: "Proceed Anyway",
-              rejectLabel: "Cancel",
-              accept: () => resolve(true),
-              reject: () => resolve(false),
-            });
-          });
-
-          if (!confirmed) {
-            return;
-          }
-        }
-
-        // Proceed with the original drop logic
-        if (event.ctrlKey) {
-          editContext?.executeCommand({
-            command: editContext.configuration.commands.copyItems,
-            data: {
-              items: object.items as FullItem[],
-              targetItem: parent.data,
-              index,
-            },
-          });
-        } else {
-          editContext?.executeCommand({
-            command: editContext.configuration.commands.moveItems,
-            data: {
-              items: object.items as FullItem[],
-              targetItem: parent.data,
-              index,
-            },
-          });
-        }
-      } catch (error) {
-        console.error("Error validating insert options:", error);
-        editContext?.showToast({
-          severity: "error",
-          summary: "Validation Error",
-          detail: "Unable to validate insert options. Please try again.",
-          life: 5000,
-        });
-        return;
-      }
-    }
-    event.stopPropagation();
-  }
-
-  function handleDragEnd(): void {
-    editContextRef.current?.dragEnd();
-    if (dragEnd) dragEnd();
-  }
-
-  useEffect(() => {
-    setSelectedKeys(selectedItemIds || []);
-  }, [selectedItemIds]);
-
-  const itemCommands =
-    editContext?.configuration.commands.allItemCommands || [];
-
-  const onContextMenu = useCallback(
-    async (node: CustomTreeNode, originalEvent: React.MouseEvent) => {
-      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,
-        })),
-      );
-
-      if (!items || items.length === 0) return;
-
-      const menuItems =
-        await editContext?.configuration.editor.contentTree.contextMenu.factory(
-          {
-            items: items,
-            editContext: editContext,
-            commandCallback: (command: ItemCommand, result: any) => {
-              cm.current?.hide(originalEvent);
-              if (command.id === "insertItem") {
-                const item = result as ItemDescriptor;
-                if (item) {
-                  setExpandedKeys((keys) => [...keys, item.id]);
-                  onItemInserted?.(item);
-                }
-              }
-            },
-          },
-        );
-
-      if (menuItems) setMenu(menuItems);
-
-      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?.(node.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;
-        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) => {
-      event.dataTransfer.dropEffect = event.ctrlKey ? "copy" : "move";
-      return true;
-    },
-    [],
-  );
-  if (!memoizedTreeNodes.length)
-    return (
-      <div className="flex h-full items-center justify-center gap-2 bg-gray-50 text-xs text-gray-500">
-        <Spinner size="2xl" /> Loading...
-      </div>
-    );
-
-  return (
-    <>
-      <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) => {
-            handleDrop(parent as CustomTreeNode, index, event);
-          }}
-        />
-      </div>
-    </>
-  );
-}