@alpaca-editor/core 1.0.3974 → 1.0.3978

package/src/editor/reviews/Comment.tsx

@@ -10,7 +10,11 @@ import {
 import { Button } from "../../components/ui/button";
 import { formatDate } from "../utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { useDebouncedCallback } from "use-debounce";
 import { ActionButton } from "../../components/ActionButton";
@@ -20,6 +24,8 @@ export function Comment({ comment }: { comment: CommentType }) {
   const [commentText, setCommentText] = useState(comment.text);
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [deletePopoverOpen, setDeletePopoverOpen] = useState(false);
+  const [resolvePopoverOpen, setResolvePopoverOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -90,8 +96,6 @@ export function Comment({ comment }: { comment: CommentType }) {
   };
 
   const renderHeader = () => {
-    const overlayPanelRef = useRef<OverlayPanel>(null);
-    const deleteOverlayPanelRef = useRef<OverlayPanel>(null);
     return (
       <>
         <div className="mb-3 flex items-start justify-between">
@@ -115,25 +119,29 @@ export function Comment({ comment }: { comment: CommentType }) {
               />
             )}
             {canDelete && (
-              <SimpleIconButton
-                icon="pi pi-trash"
-                label="Delete"
-                onClick={(e) => {
-                  deleteOverlayPanelRef.current?.toggle(e);
-                }}
-              />
-            )}
-            <OverlayPanel ref={deleteOverlayPanelRef}>
-              <Button
-                className="m-2"
-                variant="outline"
-                onClick={async () => {
-                  await deleteComment(comment);
-                }}
+              <Popover
+                open={deletePopoverOpen}
+                onOpenChange={setDeletePopoverOpen}
               >
-                Delete
-              </Button>
-            </OverlayPanel>
+                <PopoverTrigger asChild>
+                  <button
+                    className="pi pi-trash hover:bg-gray-5 cursor-pointer rounded-full p-[6px] text-xs"
+                    title="Delete"
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-2" align="end">
+                  <Button
+                    variant="outline"
+                    onClick={async () => {
+                      await deleteComment(comment);
+                      setDeletePopoverOpen(false);
+                    }}
+                  >
+                    Delete
+                  </Button>
+                </PopoverContent>
+              </Popover>
+            )}
             {canResolve && !comment.isResolved && (
               <SimpleIconButton
                 icon="pi pi-check"
@@ -144,35 +152,35 @@ export function Comment({ comment }: { comment: CommentType }) {
               />
             )}
             {comment.isResolved && (
-              <>
-                <i
-                  className="pi pi-check cursor-pointer px-1 text-xs text-green-500"
-                  style={{ fontWeight: "bold" }}
-                  title={
-                    "Resolved by " +
-                    comment.resolvedBy +
-                    " (" +
-                    formatDate(new Date(comment.resolvedDate!)) +
-                    ")"
-                  }
-                  onClick={(e) => {
-                    if (canResolve) {
-                      overlayPanelRef.current?.toggle(e);
+              <Popover
+                open={resolvePopoverOpen}
+                onOpenChange={setResolvePopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <i
+                    className="pi pi-check cursor-pointer px-1 text-xs text-green-500"
+                    style={{ fontWeight: "bold" }}
+                    title={
+                      "Resolved by " +
+                      comment.resolvedBy +
+                      " (" +
+                      formatDate(new Date(comment.resolvedDate!)) +
+                      ")"
                     }
-                  }}
-                ></i>
-                <OverlayPanel ref={overlayPanelRef}>
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-2" align="end">
                   <Button
-                    className="m-2"
                     variant="outline"
                     onClick={async () => {
                       await unresolveComment(comment);
+                      setResolvePopoverOpen(false);
                     }}
                   >
                     Unresolve
                   </Button>
-                </OverlayPanel>
-              </>
+                </PopoverContent>
+              </Popover>
             )}
             {canResolve && !comment.isResolved && (
               <SimpleIconButton
@@ -249,7 +257,7 @@ export function Comment({ comment }: { comment: CommentType }) {
         autoFocus
       />
       {isSaving && (
-        <div className="mt-1 flex justify-end gap-2">
+        <div className="flex-wra mt-1 flex justify-end gap-2">
           <div className="flex items-center gap-2 text-xs text-gray-500">
             <ProgressSpinner className="h-4 w-4" />
             Saving...
@@ -257,7 +265,7 @@ export function Comment({ comment }: { comment: CommentType }) {
         </div>
       )}
       {!isSaving && (
-        <div className="mt-1 flex justify-end gap-2">
+        <div className="mt-1 flex flex-wrap justify-end gap-2">
           <ActionButton
             variant="outline"
             onClick={() => {

package/src/editor/reviews/SuggestedEdit.tsx

@@ -8,7 +8,11 @@ import {
 import { Button } from "../../components/ui/button";
 import { formatDate } from "../utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 import { DiffView } from "./DiffView";
 // Import lucide icons (adjust names as needed)
 import { Trash2, GalleryVertical, Check, Brush, XCircle } from "lucide-react";
@@ -19,9 +23,9 @@ import { cn } from "../../lib/utils";
 export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
   const editContext = useEditContext();
   const ref = useRef<HTMLDivElement>(null);
-  const overlayPanelRef = useRef<OverlayPanel>(null);
   const [item, setItem] = useState<any>(null);
   const [patchPossible, setPatchPossible] = useState<boolean>(true);
+  const [deletePopoverOpen, setDeletePopoverOpen] = useState(false);
 
   const [patchWarning, setPatchWarning] = useState<string>("");
   const [applied, setApplied] = useState<boolean>(false);
@@ -151,24 +155,31 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
             ></i>
           )}
           {canDelete && (
-            <SimpleIconButton
-              className="text-gray-500"
-              icon={<Trash2 size={14} />}
-              label="Delete"
-              onClick={(e: any) => overlayPanelRef.current?.toggle(e)}
-            />
-          )}
-          <OverlayPanel ref={overlayPanelRef}>
-            <Button
-              className="m-2"
-              variant="outline"
-              onClick={async () => {
-                await deleteSuggestedEdit(edit);
-              }}
+            <Popover
+              open={deletePopoverOpen}
+              onOpenChange={setDeletePopoverOpen}
             >
-              Delete
-            </Button>
-          </OverlayPanel>
+              <PopoverTrigger asChild>
+                <button
+                  className="cursor-pointer rounded-full p-1 text-gray-500 hover:bg-gray-100"
+                  title="Delete"
+                >
+                  <Trash2 size={14} />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-2" align="end">
+                <Button
+                  variant="outline"
+                  onClick={async () => {
+                    await deleteSuggestedEdit(edit);
+                    setDeletePopoverOpen(false);
+                  }}
+                >
+                  Delete
+                </Button>
+              </PopoverContent>
+            </Popover>
+          )}
         </div>
       </div>
     );

package/src/editor/services/contentService.ts

@@ -10,7 +10,19 @@ import {
 } from "../../types";
 import { FullItem, ItemDescriptor, ItemStub } from "../pageModel";
 
-export type ItemTreeNodeData = {
+export type Thumbnail = {
+  id: string;
+  name: string;
+  thumbUrl: string;
+  previewUrl: string;
+  size?: number;
+  width?: number;
+  height?: number;
+  updated?: string;
+  updatedBy?: string;
+};
+
+export type ItemTreeNodeData = Thumbnail & {
   id: string;
   name: string;
   displayName?: string;

package/src/editor/sidebar/SidebarView.tsx

@@ -3,6 +3,8 @@ import { classNames } from "primereact/utils";
 import { Sidebar } from "../../config/types";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
 import { cn } from "../../lib/utils";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { X } from "lucide-react";
 
 export function SidebarView({
   sidebar,
@@ -39,12 +41,12 @@ export function SidebarView({
 
         {/* Close button - only show on the first panel */}
         {index === 0 && (
-          <button
+          <SimpleIconButton
             onClick={onClose}
-            className="hover:bg-gray-5 ml-2 flex h-6 w-6 items-center justify-center rounded"
-          >
-            <i className="pi pi-times text-sm"></i>
-          </button>
+            icon={<X className="size-4" />}
+            label="Close"
+            className="ml-2"
+          />
         )}
       </div>
     );
@@ -66,7 +68,7 @@ export function SidebarView({
         <div
           className={cn(
             "flex h-full flex-col bg-white",
-            detached ? "border-gray-3 rounded-xl border" : "",
+            detached ? "border-gray-3 rounded-md border" : "",
           )}
         >
           {getHeader(panel, 0)}

package/src/editor/ui/PerfectTree.tsx

@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, useCallback, memo, useRef } from "react";
+import React, {
+  useEffect,
+  useMemo,
+  useCallback,
+  memo,
+  useRef,
+  useState,
+} from "react";
 
 import { ProgressSpinner } from "primereact/progressspinner";
 import { ChevronRight } from "lucide-react";
@@ -25,7 +32,7 @@ export interface TreeProps<T = any> {
   /** Keys of expanded nodes */
   expandedKeys?: string[];
   /** Callback to render a single node (template) */
-  renderNode: (node: TreeNode<T>) => React.ReactNode;
+  renderNode: (node: TreeNode<T>, searchTerm?: string) => React.ReactNode;
   /** Called when a node's expand/collapse toggle is activated */
   onToggleExpand?: (key: string) => void;
   /** Called when a node is clicked for selection */
@@ -70,8 +77,35 @@ export interface TreeProps<T = any> {
   onContextMenu?: (node: TreeNode<T>, event: React.MouseEvent) => void;
   /** Whether to automatically scroll to the first selected node when selection changes */
   scrollToSelected?: boolean;
+  /** Whether to enable keyboard search functionality */
+  enableKeyboardSearch?: boolean;
+  /** Time in ms before search is cleared (default: 1500) */
+  searchClearDelay?: number;
 }
 
+/**
+ * Usage example with keyboard search:
+ *
+ * ```tsx
+ * import { PerfectTree } from './PerfectTree';
+ *
+ * <PerfectTree
+ *   nodes={treeNodes}
+ *   enableKeyboardSearch={true}
+ *   renderNode={(node) => (
+ *     <div>
+ *       {node.icon}
+ *       {node.label}
+ *     </div>
+ *   )}
+ *   // ... other props
+ * />
+ * ```
+ *
+ * Note: Text highlighting is applied automatically when enableKeyboardSearch is true.
+ * The highlightText helper function is still available for manual highlighting if needed.
+ */
+
 // Local DropZone component to handle drag-over state.
 const DropZone = memo(
   ({
@@ -179,6 +213,132 @@ const DropZone = memo(
   },
 );
 
+// Helper function to highlight matching text
+export const highlightText = (
+  text: string,
+  searchTerm: string,
+): React.ReactNode => {
+  if (!searchTerm.trim()) return text;
+
+  const regex = new RegExp(
+    `(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi",
+  );
+  const parts = text.split(regex);
+
+  return parts.map((part, index) => {
+    if (regex.test(part)) {
+      return (
+        <span key={index} className="bg-yellow-200 underline">
+          {part}
+        </span>
+      );
+    }
+    return part;
+  });
+};
+
+// Helper function to highlight text within React elements
+const highlightReactElement = (
+  element: React.ReactElement,
+  searchTerm: string,
+  nodeLabel: string,
+): React.ReactElement => {
+  try {
+    // If searchTerm doesn't match the node label, return as-is
+    if (!nodeLabel.toLowerCase().includes(searchTerm.toLowerCase())) {
+      return element;
+    }
+
+    const processChildren = (children: React.ReactNode): React.ReactNode => {
+      return React.Children.map(children, (child) => {
+        if (typeof child === "string") {
+          // If it's a string and contains the search term, highlight it
+          if (child.toLowerCase().includes(searchTerm.toLowerCase())) {
+            return highlightText(child, searchTerm);
+          }
+          return child;
+        }
+
+        if (React.isValidElement(child)) {
+          // Recursively process React elements
+          const childProps = (child as any).props;
+          if (childProps && childProps.children) {
+            return React.cloneElement(child as any, {
+              ...childProps,
+              children: processChildren(childProps.children),
+            });
+          }
+        }
+
+        return child;
+      });
+    };
+
+    // Clone the element with processed children
+    const elementProps = (element as any).props;
+    if (elementProps && elementProps.children) {
+      return React.cloneElement(element as any, {
+        ...elementProps,
+        children: processChildren(elementProps.children),
+      });
+    }
+  } catch (error) {
+    // If any error occurs, return the original element
+    console.warn("Error highlighting React element:", error);
+  }
+
+  return element;
+};
+
+// Helper function to check if a node matches the search term
+const nodeMatchesSearch = (
+  node: TreeNode<any>,
+  searchTerm: string,
+): boolean => {
+  if (!searchTerm.trim()) return true;
+  return node.label.toLowerCase().includes(searchTerm.toLowerCase());
+};
+
+// Helper function to filter tree nodes based on search term
+const filterTreeNodes = (
+  nodes: TreeNode<any>[],
+  searchTerm: string,
+  expandedKeys: string[],
+): TreeNode<any>[] => {
+  if (!searchTerm.trim()) return nodes;
+
+  const filterNode = (node: TreeNode<any>): TreeNode<any> | null => {
+    const nodeMatches = nodeMatchesSearch(node, searchTerm);
+    const isExpanded = expandedKeys.includes(node.key);
+
+    // Process children only if the node is expanded
+    let filteredChildren: TreeNode<any>[] = [];
+    let hasMatchingChildren = false;
+
+    if (isExpanded && node.children && Array.isArray(node.children)) {
+      filteredChildren = node.children
+        .map((child) => filterNode(child))
+        .filter((child): child is TreeNode<any> => child !== null);
+      hasMatchingChildren = filteredChildren.length > 0;
+    }
+
+    // Include node if it matches or has matching children
+    if (nodeMatches || hasMatchingChildren) {
+      return {
+        ...node,
+        children: isExpanded ? filteredChildren : node.children,
+      };
+    }
+
+    return null;
+  };
+
+  return nodes
+    .map((node) => filterNode(node))
+    .filter((node): node is TreeNode<any> => node !== null);
+};
+
 // NodeContent component extracted and memoized
 const NodeContent = memo(
   ({
@@ -197,6 +357,7 @@ const NodeContent = memo(
     enableDragAndDrop = false,
     selectedKeys,
     isDragging,
+    searchTerm = "",
   }: {
     node: TreeNode<any>;
     isExpanded: boolean;
@@ -221,10 +382,11 @@ const NodeContent = memo(
     ) => void;
     onDoubleClick?: (node: TreeNode<any>) => void;
     onContextMenu?: (node: TreeNode<any>, event: React.MouseEvent) => void;
-    renderNode: (node: TreeNode<any>) => React.ReactNode;
+    renderNode: (node: TreeNode<any>, searchTerm?: string) => React.ReactNode;
     enableDragAndDrop?: boolean;
     selectedKeys?: string[];
     isDragging: boolean;
+    searchTerm?: string;
   }) => {
     const [isDragOver, setIsDragOver] = React.useState(false);
 
@@ -391,7 +553,7 @@ const NodeContent = memo(
           }`}
           onClick={handleSelect}
         >
-          {renderNode(node)}
+          {renderNode(node, searchTerm)}
         </div>
       </div>
     );
@@ -416,7 +578,13 @@ export const PerfectTree = <T,>({
   enableDragAndDrop = false,
   isValidDropZone,
   scrollToSelected = false,
+  enableKeyboardSearch = false,
+  searchClearDelay = 1500,
 }: TreeProps<T>) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
   // When toggling a node, notify parent and trigger external lazy load if needed.
   const handleToggle = useCallback(
     (node: TreeNode<T>) => {
@@ -584,6 +752,42 @@ export const PerfectTree = <T,>({
     prevSelectedKeysRef.current = [...selectedKeys];
   }, [scrollToSelected, selectedKeys]);
 
+  // Enhanced renderNode function that handles highlighting
+  const enhancedRenderNode = useCallback(
+    (node: TreeNode<T>, searchTermForNode = searchTerm) => {
+      // Get the original content from renderNode
+      const originalContent = renderNode(node, searchTermForNode);
+
+      // If there's no search term, return original content
+      if (!searchTermForNode?.trim()) {
+        return originalContent;
+      }
+
+      // Auto-highlight if the content is simple text
+      if (typeof originalContent === "string") {
+        return highlightText(originalContent, searchTermForNode);
+      }
+
+      // For React elements, try to find and highlight text content
+      if (React.isValidElement(originalContent)) {
+        return highlightReactElement(
+          originalContent,
+          searchTermForNode,
+          node.label,
+        );
+      }
+
+      // Fallback: if we can't process the content, return original
+      return originalContent;
+    },
+    [renderNode, searchTerm],
+  );
+
+  // Filter nodes based on search term
+  const filteredNodes = useMemo(() => {
+    return filterTreeNodes(nodes, searchTerm, expandedKeys);
+  }, [nodes, searchTerm, expandedKeys]);
+
   // Recursive function to render tree nodes along with drop zones.
   const renderTreeList = useCallback(
     (
@@ -627,10 +831,11 @@ export const PerfectTree = <T,>({
                     onDrop={onDrop}
                     onDoubleClick={onDoubleClick}
                     onContextMenu={onContextMenu}
-                    renderNode={renderNode}
+                    renderNode={enhancedRenderNode}
                     enableDragAndDrop={enableDragAndDrop}
                     selectedKeys={selectedKeys}
                     isDragging={isDragging}
+                    searchTerm={searchTerm}
                   />
                   {isExpanded && (
                     <>
@@ -667,17 +872,108 @@ export const PerfectTree = <T,>({
       onDoubleClick,
       handleSelect,
       handleToggle,
-      renderNode,
+      enhancedRenderNode,
+      searchTerm,
     ],
   );
 
   // Memoize the tree structure
   const treeContent = useMemo(
-    () => renderTreeList(nodes, 0),
-    [nodes, renderTreeList],
+    () => renderTreeList(filteredNodes, 0),
+    [filteredNodes, renderTreeList],
   );
 
-  return <div ref={treeRef}>{treeContent}</div>;
+  // Keyboard search functionality
+  useEffect(() => {
+    if (!enableKeyboardSearch || !isFocused) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Ignore if user is typing in an input, textarea, or contenteditable element
+      const target = event.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.contentEditable === "true" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      // Handle different key types
+      if (event.key === "Escape") {
+        // Clear search on Escape
+        setSearchTerm("");
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+          searchTimeoutRef.current = null;
+        }
+        event.preventDefault();
+      } else if (event.key === "Backspace") {
+        // Remove last character on Backspace
+        if (searchTerm.length > 0) {
+          setSearchTerm((prev) => prev.slice(0, -1));
+          resetSearchTimeout();
+          event.preventDefault();
+        }
+      } else if (
+        event.key.length === 1 &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey
+      ) {
+        // Add character for printable keys (letters, numbers, symbols)
+        setSearchTerm((prev) => prev + event.key);
+        resetSearchTimeout();
+        event.preventDefault();
+      }
+    };
+
+    const resetSearchTimeout = () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = setTimeout(() => {
+        setSearchTerm("");
+        searchTimeoutRef.current = null;
+      }, searchClearDelay);
+    };
+
+    // Add event listener to document
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [enableKeyboardSearch, isFocused, searchTerm, searchClearDelay]);
+
+  return (
+    <div
+      ref={treeRef}
+      className="perfect-tree focus:outline-none"
+      tabIndex={0}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => {
+        setIsFocused(false);
+        setSearchTerm("");
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+          searchTimeoutRef.current = null;
+        }
+      }}
+    >
+      {enableKeyboardSearch && searchTerm && (
+        <div className="mb-2 flex items-center px-2 py-1 text-xs">
+          <span className="text-gray-2">Filter:</span>
+          <span className="ml-1">{searchTerm}</span>
+          <span className="text-gray-2 ml-1">(ESC to clear)</span>
+        </div>
+      )}
+      {treeContent}
+    </div>
+  );
 };
 
 export default memo(PerfectTree);