@alpaca-editor/core 1.0.3942 → 1.0.3944

package/src/editor/ui/PerfectTree.tsx

@@ -0,0 +1,676 @@
+import React, { useEffect, useMemo, useCallback, memo, useRef } from "react";
+import { Spinner } from "./Spinner";
+import { ProgressSpinner } from "primereact/progressspinner";
+export interface TreeNode<T = any> {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  data?: T;
+  /** Indicates if the node is expandable (has or can have children) */
+  hasChildren?: boolean;
+  /**
+   * If present, contains the node's children.
+   * Use undefined to signal that children have not yet been loaded.
+   * Use null to signal that children are currently loading.
+   */
+  children?: TreeNode<T>[] | null;
+}
+
+export interface TreeProps<T = any> {
+  /** Array of tree nodes */
+  nodes: TreeNode<T>[];
+  /** Keys of currently selected nodes */
+  selectedKeys?: string[];
+  /** Keys of expanded nodes */
+  expandedKeys?: string[];
+  /** Callback to render a single node (template) */
+  renderNode: (node: TreeNode<T>) => React.ReactNode;
+  /** Called when a node's expand/collapse toggle is activated */
+  onToggleExpand?: (key: string) => void;
+  /** Called when a node is clicked for selection */
+  onSelect?: (key: string, event: React.MouseEvent) => void;
+  /**
+   * Called during a drag over a drop zone between nodes.
+   * @param parent The parent node of the current list (null for root level)
+   * @param index The position where a new node would be inserted (0 = before first node)
+   */
+  onDragOverZone?: (
+    parent: TreeNode<T> | null,
+    index: number,
+    event: React.DragEvent,
+  ) => boolean;
+  isValidDropZone?: (parent: TreeNode<T> | null, index: number) => boolean;
+  /**
+   * Called when an item is dropped into a drop zone between nodes.
+   * @param parent The parent node of the current list (null for root level)
+   * @param index The position where a new node should be inserted (0 = before first node)
+   */
+  onDrop?: (
+    parent: TreeNode<T> | null,
+    index: number,
+    event: React.DragEvent,
+  ) => void;
+  isDragging?: boolean;
+  onStartDrag?: (data: {
+    node: TreeNode<T>;
+    event: React.DragEvent<any>;
+    isMultiSelect: boolean;
+  }) => void;
+  onDragEnd?: (event: React.DragEvent | null) => void;
+  enableDragAndDrop?: boolean;
+
+  /**
+   * Callback that notifies when a lazy load should occur.
+   * When a node is toggled and its children haven't been loaded yet (i.e. undefined),
+   * this callback is invoked so you can load the children asynchronously and update your tree model.
+   */
+  onLazyLoad?: (node: TreeNode<T>) => void;
+  onDoubleClick?: (node: TreeNode<T>) => void;
+  onContextMenu?: (node: TreeNode<T>, event: React.MouseEvent) => void;
+  /** Whether to automatically scroll to the first selected node when selection changes */
+  scrollToSelected?: boolean;
+}
+
+// Local DropZone component to handle drag-over state.
+const DropZone = memo(
+  ({
+    parent,
+    index,
+    isDragging,
+    onDragOverZone,
+    onDrop,
+    onDragEnd,
+    isLast,
+    isValidDropZone,
+  }: {
+    parent: TreeNode<any> | null;
+    index: number;
+    isDragging: boolean;
+    onDragOverZone?: (
+      parent: TreeNode<any> | null,
+      index: number,
+      e: React.DragEvent,
+    ) => boolean;
+    onDrop?: (
+      parent: TreeNode<any> | null,
+      index: number,
+      e: React.DragEvent,
+    ) => void;
+    onDragEnd?: (event: React.DragEvent | null) => void;
+    isLast?: boolean;
+    isValidDropZone?: (parent: TreeNode<any> | null, index: number) => boolean;
+  }) => {
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const [isValidDrop, setIsValidDrop] = React.useState(true);
+
+    useEffect(() => {
+      if (isDragging) {
+        if (isValidDropZone) {
+          const isValid = isValidDropZone(parent, index);
+          setIsValidDrop(isValid);
+        } else {
+          setIsValidDrop(true);
+        }
+      }
+    }, [isValidDropZone, parent, index, isDragging]);
+
+    const handleDragEnter = useCallback(
+      (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDragOverZone) {
+          const allowed = onDragOverZone(parent, index, e);
+          setIsDragOver(allowed);
+          //   e.dataTransfer.dropEffect = allowed ? "move" : "none";
+        }
+      },
+      [onDragOverZone, parent, index],
+    );
+
+    const handleDragLeave = useCallback(
+      (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+      },
+      [],
+    );
+
+    const handleDragOver = useCallback(
+      (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDragOverZone) {
+          const allowed = onDragOverZone(parent, index, e);
+          setIsDragOver(allowed);
+        }
+      },
+      [onDragOverZone, parent, index],
+    );
+
+    const handleDrop = useCallback(
+      (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (onDrop) {
+          onDrop(parent, index, e);
+        }
+      },
+      [onDrop, parent, index],
+    );
+
+    if (!isDragging || !isValidDrop) return null;
+
+    return (
+      <div className={`relative ${isLast ? "h-3" : ""}`}>
+        <div
+          className={`drop-zone absolute top-[-5px] right-0 left-[45px] z-1000 h-3 rounded-md transition-colors duration-100 ${
+            isDragOver ? "bg-sky-200" : ""
+          }`}
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          onDragLeave={handleDragLeave}
+        />
+      </div>
+    );
+  },
+);
+
+// NodeContent component extracted and memoized
+const NodeContent = memo(
+  ({
+    node,
+    isExpanded,
+    isSelected,
+    onSelect,
+    onToggleNode,
+    onStartDrag,
+    onDragEnd,
+    onDragOverZone,
+    onDrop,
+    onDoubleClick,
+    renderNode,
+    onContextMenu,
+    enableDragAndDrop = false,
+    selectedKeys,
+    isDragging,
+  }: {
+    node: TreeNode<any>;
+    isExpanded: boolean;
+    isSelected: boolean;
+    onSelect: (nodeKey: string, e: React.MouseEvent) => void;
+    onToggleNode: (node: TreeNode<any>) => void;
+    onStartDrag?: (data: {
+      node: TreeNode<any>;
+      event: React.DragEvent<any>;
+      isMultiSelect: boolean;
+    }) => void;
+    onDragEnd?: (event: React.DragEvent<any>) => void;
+    onDragOverZone?: (
+      parent: TreeNode<any> | null,
+      index: number,
+      e: React.DragEvent<any>,
+    ) => boolean;
+    onDrop?: (
+      parent: TreeNode<any> | null,
+      index: number,
+      e: React.DragEvent<any>,
+    ) => void;
+    onDoubleClick?: (node: TreeNode<any>) => void;
+    onContextMenu?: (node: TreeNode<any>, event: React.MouseEvent) => void;
+    renderNode: (node: TreeNode<any>) => React.ReactNode;
+    enableDragAndDrop?: boolean;
+    selectedKeys?: string[];
+    isDragging: boolean;
+  }) => {
+    const [isDragOver, setIsDragOver] = React.useState(false);
+
+    useEffect(() => {
+      if (!isDragging) {
+        setIsDragOver(false);
+      }
+    }, [isDragging]);
+
+    const handleDragStart = useCallback(
+      (event: React.DragEvent<any>) => {
+        const isMultiSelect =
+          isSelected && selectedKeys && selectedKeys.length > 1;
+
+        // Set drag preview for multiple items if applicable
+        if (isMultiSelect) {
+          // Create custom drag image showing count of selected items
+          const dragPreview = document.createElement("div");
+          dragPreview.className =
+            "bg-white shadow-md rounded-md border border-gray-300 px-2 py-1 text-sm max-w-24 absolute top-[-1000px] left-[-1000px]";
+          dragPreview.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${selectedKeys.length}</span> items</div>`;
+          document.body.appendChild(dragPreview);
+
+          // Set custom drag image
+          event.dataTransfer.setDragImage(dragPreview, 15, 15);
+          event.dataTransfer.dropEffect = "move";
+
+          // Remove the element after drag starts
+          setTimeout(() => {
+            document.body.removeChild(dragPreview);
+          }, 0);
+        }
+        if (onStartDrag) {
+          onStartDrag({ node, event, isMultiSelect: isMultiSelect ?? false });
+        }
+      },
+      [node, onStartDrag],
+    );
+
+    const handleDragLeave = useCallback((event: React.DragEvent<any>) => {
+      event.preventDefault();
+      setIsDragOver(false);
+    }, []);
+
+    const handleDragEnter = useCallback(
+      (event: React.DragEvent<any>) => {
+        event.preventDefault();
+        if (onDragOverZone) {
+          const allowed = onDragOverZone(node, -1, event);
+          setIsDragOver(allowed);
+        }
+      },
+      [node, onDragOverZone],
+    );
+
+    const handleDragOver = useCallback(
+      (event: React.DragEvent<any>) => {
+        event.preventDefault();
+        if (onDragOverZone) {
+          const allowed = onDragOverZone(node, -1, event);
+          setIsDragOver(allowed);
+          if (!allowed) {
+            event.dataTransfer.dropEffect = "none";
+          }
+        }
+      },
+      [node, onDragOverZone],
+    );
+
+    const handleDrop = useCallback(
+      (e: React.DragEvent<any>) => {
+        console.log("Dropping", node, -1, e);
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDrop) {
+          onDrop(node, -1, e);
+        }
+      },
+      [node, onDrop],
+    );
+
+    const handleDoubleClick = useCallback(
+      (e: React.MouseEvent<any>) => {
+        e.stopPropagation();
+        onDoubleClick?.(node);
+      },
+      [node, onDoubleClick],
+    );
+
+    const handleSelect = useCallback(
+      (e: React.MouseEvent<any>) => {
+        e.stopPropagation();
+        onSelect(node.key, e);
+      },
+      [node.key, onSelect],
+    );
+
+    const handleToggle = useCallback(
+      (e: React.MouseEvent<any>) => {
+        e.stopPropagation();
+        onToggleNode(node);
+      },
+      [node, onToggleNode],
+    );
+
+    const renderToggle = () => {
+      if (node.hasChildren && node.children === null) {
+        return (
+          <ProgressSpinner
+            style={{ width: "16px", height: "16px" }}
+            className="text-gray-500"
+          />
+        );
+      }
+
+      return (
+        <span
+          onClick={handleToggle}
+          className={`ml-0.5 inline-block transform cursor-pointer text-gray-500 transition duration-150 select-none ${
+            isExpanded ? "rotate-90" : "rotate-0"
+          }`}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            data-pc-section="togglericon"
+          >
+            <path
+              d="M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </span>
+      );
+    };
+
+    const handleContextMenu = useCallback(
+      (e: React.MouseEvent<any>) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onContextMenu?.(node, e);
+      },
+      [node, onContextMenu],
+    );
+
+    return (
+      <div
+        className="tree-node mb-0.5 flex cursor-pointer items-center gap-0.5"
+        draggable={enableDragAndDrop}
+        onClick={handleSelect}
+        onDragStart={(event) => handleDragStart(event)}
+        onDragEnd={onDragEnd as any}
+        onDragLeave={handleDragLeave}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onDoubleClick={handleDoubleClick}
+        onContextMenu={handleContextMenu}
+        data-node-key={node.key}
+        data-selected={isSelected}
+      >
+        {/* Render toggle arrow only if the node is expandable */}
+        {node.hasChildren || node.children?.length ? (
+          renderToggle()
+        ) : (
+          <div className="w-[16px]" />
+        )}
+        <div
+          className={`flex-1 rounded-md border border-transparent p-0.5 pr-1.5 hover:border-gray-300 ${
+            isDragOver ? "bg-sky-200" : isSelected ? "bg-blue-100" : ""
+          }`}
+          onClick={handleSelect}
+        >
+          {renderNode(node)}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const PerfectTree = <T,>({
+  nodes,
+  selectedKeys = [],
+  expandedKeys = [],
+  renderNode,
+  onToggleExpand,
+  onSelect,
+  onDragOverZone,
+  onDrop,
+  isDragging = false,
+  onStartDrag,
+  onDragEnd,
+  onLazyLoad,
+  onDoubleClick,
+  onContextMenu,
+  enableDragAndDrop = false,
+  isValidDropZone,
+  scrollToSelected = false,
+}: TreeProps<T>) => {
+  // When toggling a node, notify parent and trigger external lazy load if needed.
+  const handleToggle = useCallback(
+    (node: TreeNode<T>) => {
+      if (onToggleExpand) {
+        onToggleExpand(node.key);
+      }
+      // If the node is expandable and its children haven't been loaded,
+      // call onLazyLoad (external async loading should update the node to `null` while loading)
+      if (node.hasChildren && node.children === undefined && onLazyLoad) {
+        onLazyLoad(node);
+      }
+    },
+    [onToggleExpand, onLazyLoad],
+  );
+
+  const handleSelect = useCallback(
+    (nodeKey: string, event: React.MouseEvent) => {
+      if (onSelect) {
+        onSelect(nodeKey, event);
+      }
+    },
+    [onSelect],
+  );
+
+  // Global drag end handler.
+  const isDraggingRef = React.useRef(false);
+  useEffect(() => {
+    const handleGlobalDragEnd = (event: DragEvent) => {
+      if (isDraggingRef.current && onDragEnd) {
+        onDragEnd(event as unknown as React.DragEvent);
+        isDraggingRef.current = false;
+      }
+    };
+
+    document.addEventListener("dragend", handleGlobalDragEnd);
+    return () => {
+      document.removeEventListener("dragend", handleGlobalDragEnd);
+    };
+  }, [onDragEnd]);
+
+  const handleDragEnd = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      isDraggingRef.current = false;
+      if (onDragEnd) {
+        onDragEnd(event);
+      }
+    },
+    [onDragEnd],
+  );
+
+  // Scroll to selected node when scrollToSelected is enabled and selectedKeys change
+  const treeRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollToSelected && selectedKeys.length > 0 && treeRef.current) {
+      const timeoutId = setTimeout(() => {
+        const treeContainer = treeRef.current;
+        if (!treeContainer) return;
+
+        // Try multiple selection strategies
+        let selectedNode: HTMLElement | null = null;
+
+        // Strategy 1: Use data-selected attribute
+        selectedNode = treeContainer.querySelector(
+          '[data-selected="true"]',
+        ) as HTMLElement;
+
+        // Strategy 2: Use bg-blue-100 class
+        if (!selectedNode) {
+          selectedNode = treeContainer.querySelector(
+            ".bg-blue-100",
+          ) as HTMLElement;
+        }
+
+        // Strategy 3: Use data-node-key attribute
+        if (!selectedNode && selectedKeys.length > 0) {
+          const nodeKey = selectedKeys[0];
+          if (nodeKey) {
+            selectedNode = treeContainer.querySelector(
+              `[data-node-key="${nodeKey}"]`,
+            ) as HTMLElement;
+
+            // Fallback: CSS.escape for special characters
+            if (!selectedNode) {
+              try {
+                const escapedKey = CSS.escape(nodeKey);
+                selectedNode = treeContainer.querySelector(
+                  `[data-node-key="${escapedKey}"]`,
+                ) as HTMLElement;
+              } catch (e) {
+                // Silently fail if CSS.escape doesn't work
+              }
+            }
+          }
+        }
+
+        if (selectedNode) {
+          // Find the scrollable parent container
+          let scrollContainer = selectedNode.closest(
+            ".overflow-auto",
+          ) as HTMLElement;
+
+          if (!scrollContainer) {
+            scrollContainer = selectedNode.closest(
+              '[style*="overflow"]',
+            ) as HTMLElement;
+          }
+
+          if (!scrollContainer) {
+            scrollContainer = treeContainer.parentElement as HTMLElement;
+          }
+
+          if (scrollContainer) {
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const nodeRect = selectedNode.getBoundingClientRect();
+
+            // Check if the node is already visible
+            const isVisible =
+              nodeRect.top >= containerRect.top &&
+              nodeRect.bottom <= containerRect.bottom;
+
+            if (!isVisible) {
+              const scrollTop = scrollContainer.scrollTop;
+              const containerTop = containerRect.top;
+              const nodeTop = nodeRect.top;
+              const offset = nodeTop - containerTop;
+
+              const newScrollTop =
+                scrollTop +
+                offset -
+                containerRect.height / 2 +
+                nodeRect.height / 2;
+
+              scrollContainer.scrollTo({
+                top: newScrollTop,
+                behavior: "smooth",
+              });
+            }
+          } else {
+            selectedNode.scrollIntoView({
+              behavior: "smooth",
+              block: "nearest",
+            });
+          }
+        }
+      }, 300);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [scrollToSelected, selectedKeys, nodes]);
+
+  // Recursive function to render tree nodes along with drop zones.
+  const renderTreeList = useCallback(
+    (
+      nodes: TreeNode<T>[],
+      depth: number,
+      parent: TreeNode<T> | null = null,
+    ) => {
+      return (
+        <div className="flex flex-col">
+          {nodes.map((node, index) => {
+            const children = node.children;
+            const isExpanded = expandedKeys.includes(node.key);
+            const isSelected = selectedKeys.includes(node.key);
+
+            return (
+              <React.Fragment key={node.key}>
+                <DropZone
+                  parent={parent}
+                  index={index}
+                  isDragging={isDragging}
+                  onDragOverZone={onDragOverZone}
+                  onDrop={onDrop}
+                  onDragEnd={onDragEnd}
+                  isValidDropZone={isValidDropZone}
+                />
+                <div
+                  style={{
+                    marginLeft: depth > 0 ? "21px" : undefined,
+                  }}
+                  className="flex flex-col"
+                >
+                  <NodeContent
+                    node={node}
+                    isExpanded={isExpanded}
+                    isSelected={isSelected}
+                    onSelect={handleSelect}
+                    onToggleNode={handleToggle}
+                    onStartDrag={onStartDrag}
+                    onDragEnd={handleDragEnd}
+                    onDragOverZone={onDragOverZone}
+                    onDrop={onDrop}
+                    onDoubleClick={onDoubleClick}
+                    onContextMenu={onContextMenu}
+                    renderNode={renderNode}
+                    enableDragAndDrop={enableDragAndDrop}
+                    selectedKeys={selectedKeys}
+                    isDragging={isDragging}
+                  />
+                  {isExpanded && (
+                    <>
+                      {children && children.length > 0 ? (
+                        <div>{renderTreeList(children, depth + 1, node)}</div>
+                      ) : null}
+                    </>
+                  )}
+                </div>
+              </React.Fragment>
+            );
+          })}
+          <DropZone
+            parent={parent}
+            index={nodes.length}
+            isDragging={isDragging}
+            onDragOverZone={onDragOverZone}
+            onDrop={onDrop}
+            onDragEnd={onDragEnd}
+            isLast={true}
+            isValidDropZone={isValidDropZone}
+          />
+        </div>
+      );
+    },
+    [
+      expandedKeys,
+      selectedKeys,
+      isDragging,
+      onDragOverZone,
+      onDrop,
+      onDragEnd,
+      onStartDrag,
+      onDoubleClick,
+      handleSelect,
+      handleToggle,
+      renderNode,
+    ],
+  );
+
+  // Memoize the tree structure
+  const treeContent = useMemo(
+    () => renderTreeList(nodes, 0),
+    [nodes, renderTreeList],
+  );
+
+  return <div ref={treeRef}>{treeContent}</div>;
+};
+
+export default memo(PerfectTree);

package/src/editor/ui/Section.tsx

@@ -0,0 +1,35 @@
+import { classNames } from "primereact/utils";
+import { useLocalStorage } from "../utils";
+
+export function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useLocalStorage("editor.showSection-" + title, true);
+
+  return (
+    <div>
+      <div
+        className={classNames(
+          open
+            ? "border-blue-500 bg-gray-600"
+            : "border-gray-400 bg-gray-400 hover:border-gray-300 hover:bg-gray-500",
+          "flex cursor-pointer items-center justify-between border-l-[8px] px-3 py-2 text-xs text-white",
+        )}
+        onClick={() => setOpen(!open)}
+      >
+        {title}
+        <i
+          className={classNames(
+            open ? "pi-chevron-up" : "pi-chevron-down",
+            "pi cursor-pointer text-xs",
+          )}
+        ></i>
+      </div>
+      {open && <div className="bg-gray-50 px-2 pt-4 pb-6">{children}</div>}
+    </div>
+  );
+}