@alpaca-editor/core 1.0.0

package/src/editor/ui/PerfectTree.tsx

@@ -0,0 +1,550 @@
+import React, { useEffect, useMemo, useCallback, memo } from "react";
+import { Spinner } from "./Spinner";
+import { ProgressSpinner } from "primereact/progressspinner";
+export interface TreeNode<T = any> {
+  key: string;
+  label: string;
+  icon?: string;
+  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;
+  /**
+   * 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;
+}
+
+// Local DropZone component to handle drag-over state.
+const DropZone = memo(
+  ({
+    parent,
+    index,
+    isDragging,
+    onDragOverZone,
+    onDrop,
+    onDragEnd,
+    isLast,
+  }: {
+    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;
+  }) => {
+    const [isDragOver, setIsDragOver] = React.useState(false);
+
+    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) 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);
+
+          // Remove the element after drag starts
+          setTimeout(() => {
+            console.log("removing drag preview");
+            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);
+          event.dataTransfer.dropEffect = allowed ? "move" : "none";
+        }
+      },
+      [node, onDragOverZone],
+    );
+
+    const handleDrop = useCallback(
+      (e: React.DragEvent<any>) => {
+        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: "18px", height: "18px", margin: "0 2px" }}
+            className="text-gray-500"
+          />
+        );
+      }
+
+      return (
+        <span
+          onClick={handleToggle}
+          className={`mr-2 inline-block transform cursor-pointer 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"
+        draggable={enableDragAndDrop}
+        onClick={handleSelect}
+        onDragStart={(event) => handleDragStart(event)}
+        onDragEnd={onDragEnd as any}
+        onDragLeave={handleDragLeave}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onDoubleClick={handleDoubleClick}
+        onContextMenu={handleContextMenu}
+      >
+        {/* Render toggle arrow only if the node is expandable */}
+        {node.hasChildren || node.children?.length ? (
+          renderToggle()
+        ) : (
+          <div className="w-6" />
+        )}
+        <div
+          className={`rounded-md border border-transparent p-0.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,
+}: 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],
+  );
+
+  // 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}
+                />
+                <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}
+          />
+        </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>{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:bg-gray-500 hover:border-gray-300",
+          "py-2.5 px-3 border-l-[8px] text-white text-xs cursor-pointer flex justify-between items-center"
+        )}
+        onClick={() => setOpen(!open)}
+      >
+        {title}
+        <i
+          className={classNames(
+            open ? "pi-chevron-up" : "pi-chevron-down",
+            "pi cursor-pointer text-xs"
+          )}
+        ></i>
+      </div>
+      {open && <div className="pt-4 pb-6 px-2 bg-gray-50">{children}</div>}
+    </div>
+  );
+}

package/src/editor/ui/SimpleIconButton.tsx

@@ -0,0 +1,43 @@
+import { classNames } from "primereact/utils";
+import { MouseEventHandler } from "react";
+
+export function SimpleIconButton({
+  onClick,
+  className,
+  icon,
+  label,
+  disabled,
+  size,
+  id,
+  selected,
+}: {
+  onClick: MouseEventHandler;
+  className?: string;
+  icon?: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  id?: string;
+  size?: "large" | "small";
+  selected?: boolean;
+}) {
+  return (
+    <button
+      id={id}
+      disabled={disabled}
+      className={classNames(
+        typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]",
+        "  rounded-full",
+        disabled ? "text-gray-300" : " hover:bg-gray-200  cursor-pointer",
+        className,
+        size === "large" ? "text-lg" : "text-xs",
+        selected ? "bg-gray-200" : ""
+      )}
+      onClick={(ev) => {
+        if (!disabled) onClick(ev);
+      }}
+      title={label}
+    >
+      {typeof icon !== "string" && icon}
+    </button>
+  );
+}

package/src/editor/ui/SimpleMenu.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+
+export type MenuItem = {
+  key: string;
+  label: string;
+  items?: MenuItem[];
+  icon?: ReactNode;
+  command?: () => void;
+};
+
+export function SimpleMenu({
+  items,
+  activeItemKey,
+  onItemClick,
+}: {
+  items: MenuItem[];
+  activeItemKey: string | null;
+  onItemClick: (item: MenuItem) => void;
+}) {
+  return (
+    <div className="flex flex-col p-1 h-full">
+      {items.map((item, index) => (
+        <div key={index} className="p-2 h-full flex flex-col gap-1">
+          <div className="flex flex-row items-center gap-2 border-b border-gray-200 pb-1 pl-2">
+            {item.icon && item.icon}
+            {item.label}
+          </div>
+          {item.items?.map((subItem, subIndex) => (
+            <div
+              key={subIndex}
+              className={`flex flex-col px-4 p-1 cursor-pointer hover:bg-gray-100 ${
+                activeItemKey === subItem.key ? "bg-gray-100" : ""
+              }`}
+              onClick={() => {
+                onItemClick(subItem);
+              }}
+            >
+              <div className="flex flex-row items-center gap-2 text-sm">
+                {subItem.icon && subItem.icon}
+                {subItem.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}