@alpaca-editor/core 1.0.4187 → 1.0.4190

package/src/components/ui/PlaceholderInput.tsx

@@ -0,0 +1,290 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { X } from "lucide-react";
+import { placeholderInputTypeRegistry } from "./PlaceholderInputTypes";
+
+/**
+ * PlaceholderInput component for AI Agent quick actions.
+ * 
+ * Allows users to fill in placeholders in text templates with tab navigation.
+ * 
+ * Example usage for AI Agents:
+ * ```json
+ * {
+ *   "label": "Create Component",
+ *   "prompt": "Create a {component_type} component named {component_name}",
+ *   "behavior": "submit"
+ * }
+ * ```
+ * 
+ * Supported placeholder formats:
+ * - Curly braces: {placeholder_name} or {0}, {1}, {2}
+ * - Angle brackets: <placeholder_name> or <0>, <1>, <2>
+ * 
+ * Keyboard navigation:
+ * - Tab: Move to next placeholder (wraps to first)
+ * - Shift+Tab: Move to previous placeholder (wraps to last)
+ * - Enter: Submit with filled values
+ * - Escape: Cancel
+ */
+
+export type Placeholder = {
+  name: string; // Display label
+  type: string; // "text", "item", "date", etc.
+  parameters: Record<string, string>; // Parsed key=value pairs
+  index: number;
+  startPos: number;
+  endPos: number;
+};
+
+type PlaceholderInputProps = {
+  text: string;
+  onComplete: (filledText: string) => void;
+  onCancel?: () => void;
+  className?: string;
+  showButtons?: boolean;
+};
+
+function parsePlaceholders(text: string): Placeholder[] {
+  const placeholders: Placeholder[] = [];
+  // Match both {placeholder} and <placeholder> formats
+  const regex = /\{([^}]+)\}|<([^>]+)>/g;
+  let match;
+  let index = 0;
+
+  while ((match = regex.exec(text)) !== null) {
+    // match[1] is for {placeholder}, match[2] is for <placeholder>
+    const placeholderContent = match[1] || match[2];
+    if (placeholderContent) {
+      // Parse the content: {label|type|param=value|param2=value2}
+      const parts = placeholderContent.split("|");
+      const label = parts[0]?.trim() || "";
+      const type = parts[1]?.trim() || "text"; // Default to "text" type
+      
+      // Parse parameters from remaining parts (format: key=value)
+      const parameters: Record<string, string> = {};
+      for (let i = 2; i < parts.length; i++) {
+        const part = parts[i]?.trim() || "";
+        if (!part) continue;
+        const eqIndex = part.indexOf("=");
+        if (eqIndex !== -1) {
+          const key = part.substring(0, eqIndex).trim();
+          const value = part.substring(eqIndex + 1).trim();
+          if (key) {
+            parameters[key] = value;
+          }
+        }
+      }
+
+      placeholders.push({
+        name: label,
+        type,
+        parameters,
+        index: index++,
+        startPos: match.index,
+        endPos: match.index + match[0].length,
+      });
+    }
+  }
+
+  return placeholders;
+}
+
+export function PlaceholderInput({
+  text,
+  onComplete,
+  onCancel,
+  className,
+  showButtons = true,
+}: PlaceholderInputProps) {
+  const placeholders = React.useMemo(() => parsePlaceholders(text), [text]);
+  const [values, setValues] = React.useState<{ [key: number]: string }>({});
+  
+  // Create refs for each placeholder using useRef to avoid the null issue
+  const inputRefs = React.useRef<{ [key: number]: HTMLInputElement | HTMLTextAreaElement | null }>({});
+
+  // Auto-focus first placeholder on mount
+  React.useEffect(() => {
+    if (placeholders.length > 0) {
+      const firstInput = inputRefs.current[0];
+      if (firstInput) {
+        setTimeout(() => firstInput.focus(), 0);
+      }
+    }
+  }, [placeholders.length]);
+
+  const handleValueChange = (index: number, value: string) => {
+    setValues((prev) => ({ ...prev, [index]: value }));
+  };
+
+  const handleKeyDown = (
+    e: React.KeyboardEvent,
+    index: number,
+  ) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      if (e.shiftKey) {
+        // Shift+Tab: go to previous input (wrap to last if at first)
+        const prevIndex = index - 1;
+        if (prevIndex >= 0) {
+          inputRefs.current[prevIndex]?.focus();
+        } else {
+          // Wrap to last placeholder
+          inputRefs.current[placeholders.length - 1]?.focus();
+        }
+      } else {
+        // Tab: go to next input (wrap to first if at last)
+        const nextIndex = index + 1;
+        if (nextIndex < placeholders.length) {
+          inputRefs.current[nextIndex]?.focus();
+        } else {
+          // Wrap to first placeholder
+          inputRefs.current[0]?.focus();
+        }
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel?.();
+    }
+  };
+
+  const handleSubmit = () => {
+    // Build the filled text by replacing placeholders with values
+    let filledText = text;
+    // Replace in reverse order to maintain correct positions
+    for (let i = placeholders.length - 1; i >= 0; i--) {
+      const placeholder = placeholders[i];
+      if (!placeholder) continue;
+      const value = values[i] || "";
+      
+      // Format the value based on placeholder type and parameters
+      let formattedValue = value;
+      
+      if (placeholder.type === "item" && value.includes("|")) {
+        // Parse item value format: "id|path"
+        const parts = value.split("|");
+        const id = parts[0] || "";
+        const path = parts[1] || "";
+        const name = path.split("/").pop() || "";
+        // For item placeholders, output both ID and name
+        formattedValue = `{${id}} (${name})`;
+      }
+      
+      filledText =
+        filledText.substring(0, placeholder.startPos) +
+        formattedValue +
+        filledText.substring(placeholder.endPos);
+    }
+    onComplete(filledText);
+  };
+
+  if (placeholders.length === 0) {
+    // No placeholders, just display text
+    return <div className={cn("text-xs", className)}>{text}</div>;
+  }
+
+  // Build segments: text and placeholder inputs
+  const segments: React.ReactNode[] = [];
+  let lastPos = 0;
+
+  placeholders.forEach((placeholder, idx) => {
+    // Add text before this placeholder
+    if (placeholder.startPos > lastPos) {
+      segments.push(
+        <span key={`text-${idx}`} className="whitespace-pre-wrap">
+          {text.substring(lastPos, placeholder.startPos)}
+        </span>,
+      );
+    }
+
+    // Add input for this placeholder
+    // Look up the component for this placeholder type
+    const typeConfig = placeholderInputTypeRegistry.get(placeholder.type);
+    const InputComponent = typeConfig?.component;
+    
+    if (InputComponent) {
+      segments.push(
+        <InputComponent
+          key={`input-${idx}`}
+          placeholder={placeholder}
+          value={values[idx] || ""}
+          onChange={(value) => handleValueChange(idx, value)}
+          onKeyDown={(e) => handleKeyDown(e, idx)}
+          inputRef={(el) => {
+            inputRefs.current[idx] = el;
+          }}
+          autoFocus={idx === 0}
+        />,
+      );
+    }
+
+    lastPos = placeholder.endPos;
+  });
+
+  // Add remaining text after last placeholder
+  if (lastPos < text.length) {
+    segments.push(
+      <span key="text-end" className="whitespace-pre-wrap">
+        {text.substring(lastPos)}
+      </span>,
+    );
+  }
+
+  const allFilled = placeholders.every((_, idx) => {
+    const value = values[idx];
+    return value !== undefined && value.trim() !== "";
+  });
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className={cn(
+        "relative flex flex-wrap items-center gap-1 rounded-lg border border-blue-200 bg-blue-50/50 p-3 text-xs h-[80px] overflow-y-auto",
+        onCancel && "pr-8"
+      )}>
+        {segments}
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            className="absolute right-2 top-2 rounded p-0.5 text-gray-400 hover:bg-blue-100 hover:text-gray-600 transition-colors"
+            title="Cancel (Esc)"
+            aria-label="Cancel"
+          >
+            <X size={14} strokeWidth={2} />
+          </button>
+        )}
+      </div>
+      {showButtons && (
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            onClick={handleSubmit}
+            disabled={!allFilled}
+            className="h-7"
+          >
+            Submit
+          </Button>
+          {onCancel && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onCancel}
+              className="h-7"
+            >
+              Cancel
+            </Button>
+          )}
+          {!allFilled && (
+            <span className="text-xs text-gray-500">
+              Fill all fields (use Tab to navigate)
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/ui/PlaceholderInputTypes.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Placeholder } from "./PlaceholderInput";
+
+/**
+ * Props interface that all placeholder input type components must implement
+ */
+export interface PlaceholderInputComponentProps {
+  placeholder: Placeholder;
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  inputRef: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+  autoFocus?: boolean;
+}
+
+/**
+ * Configuration for a placeholder input type
+ */
+export interface PlaceholderInputTypeConfig {
+  type: string;
+  component: React.ComponentType<PlaceholderInputComponentProps>;
+  validator?: (value: string) => boolean;
+}
+
+/**
+ * Registry for placeholder input types
+ */
+class PlaceholderInputTypeRegistry {
+  private types: Map<string, PlaceholderInputTypeConfig> = new Map();
+
+  /**
+   * Register a new placeholder input type
+   */
+  register(config: PlaceholderInputTypeConfig) {
+    this.types.set(config.type.toLowerCase(), config);
+  }
+
+  /**
+   * Get a registered placeholder input type configuration
+   */
+  get(type: string): PlaceholderInputTypeConfig | undefined {
+    return this.types.get(type.toLowerCase());
+  }
+
+  /**
+   * Check if a type is registered
+   */
+  has(type: string): boolean {
+    return this.types.has(type.toLowerCase());
+  }
+}
+
+// Create singleton instance
+export const placeholderInputTypeRegistry = new PlaceholderInputTypeRegistry();
+
+/**
+ * Default text input component for placeholders
+ */
+const TextInput: React.FC<PlaceholderInputComponentProps> = ({
+  placeholder,
+  value,
+  onChange,
+  onKeyDown,
+  inputRef,
+  autoFocus,
+}) => {
+  return (
+    <input
+      ref={inputRef as React.Ref<HTMLInputElement>}
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder.name}
+      autoFocus={autoFocus}
+      className="inline-flex min-w-[80px] max-w-[200px] rounded border border-blue-400 bg-blue-50 px-2 py-0.5 text-xs outline-none transition-all focus:border-blue-600 focus:bg-blue-100 focus:ring-2 focus:ring-blue-500/30 placeholder:text-blue-400"
+      style={{
+        width: `${Math.max(80, (value?.length || placeholder.name.length) * 7 + 20)}px`,
+      }}
+    />
+  );
+};
+
+// Register default text type
+placeholderInputTypeRegistry.register({
+  type: "text",
+  component: TextInput,
+});
+
+// Import and register item selector (dynamic import to avoid circular dependencies)
+import("./PlaceholderItemSelector").then((module) => {
+  placeholderInputTypeRegistry.register({
+    type: "item",
+    component: module.PlaceholderItemSelector,
+  });
+});
+

package/src/components/ui/PlaceholderItemSelector.tsx

@@ -0,0 +1,253 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { PlaceholderInputComponentProps } from "./PlaceholderInputTypes";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { ItemSearch, ResultItem } from "../../editor/ui/ItemSearch";
+import ContentTree from "../../editor/ContentTree";
+import { useEditContext } from "../../editor/client/editContext";
+import { X, ChevronDown } from "lucide-react";
+import { ItemTreeNodeData } from "../../editor/services/contentService";
+import { ItemDescriptor } from "../../editor/pageModel";
+import { Splitter } from "../../editor/ui/Splitter";
+
+/**
+ * Item selector component for placeholder inputs
+ * Allows selecting a Sitecore item via search or tree browsing
+ */
+export const PlaceholderItemSelector: React.FC<PlaceholderInputComponentProps> = ({
+  placeholder,
+  value,
+  onChange,
+  onKeyDown,
+  inputRef,
+  autoFocus,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState<ResultItem | null>(null);
+  const [rootItemId, setRootItemId] = React.useState<string | null>(null);
+  const [isLoadingRoot, setIsLoadingRoot] = React.useState(false);
+  const editContext = useEditContext();
+  
+  // Parse root parameter from placeholder.parameters
+  const rootPathOrId = placeholder.parameters.root || "/sitecore/content";
+  
+  // Helper to check if a string is a GUID
+  const isGuid = (str: string): boolean => {
+    const guidPattern = /^[{]?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}[}]?$/;
+    return guidPattern.test(str);
+  };
+  
+  // Resolve root path/ID to an item ID on mount
+  React.useEffect(() => {
+    const resolveRootItem = async () => {
+      if (!editContext) return;
+      
+      // If it's already a GUID, use it directly
+      if (isGuid(rootPathOrId)) {
+        setRootItemId(rootPathOrId.replace(/[{}]/g, ""));
+        return;
+      }
+      
+      // Otherwise, resolve the path to an ID
+      setIsLoadingRoot(true);
+      try {
+        const item = await editContext.itemsRepository.getItem({
+          id: rootPathOrId, // Try as ID first
+          language: "en",
+          version: 0,
+        });
+        
+        if (item?.id) {
+          setRootItemId(item.id);
+        } else {
+          // If not found by ID, it might be a path - we need to search for it
+          console.error("Could not resolve root item:", rootPathOrId);
+          // Fallback to Sitecore content root
+          setRootItemId("0DE95AE4-41AB-4D01-9EB0-67441B7C2450");
+        }
+      } catch (error) {
+        console.error("Error resolving root item:", error);
+        // Fallback to Sitecore content root
+        setRootItemId("0DE95AE4-41AB-4D01-9EB0-67441B7C2450");
+      } finally {
+        setIsLoadingRoot(false);
+      }
+    };
+    
+    resolveRootItem();
+  }, [editContext, rootPathOrId]);
+  
+  const loadItemByIdOrPath = React.useCallback(async (idOrPath: string) => {
+    if (!editContext) return;
+    
+    try {
+      const item = await editContext.itemsRepository.getItem({
+        id: idOrPath,
+        language: "en",
+        version: 0,
+      });
+      
+      if (item) {
+        setSelectedItem({
+          id: item.id,
+          path: item.path || item.name,
+          name: item.name,
+          language: "en",
+          icon: item.icon,
+        });
+        
+        const newValue = `${item.id}|${item.path || item.name}`;
+        onChange(newValue);
+      }
+    } catch (error) {
+      console.error("Failed to load item:", error);
+    }
+  }, [editContext, onChange]);
+  
+  // Parse existing value (format: "id|path")
+  React.useEffect(() => {
+    if (!value || !editContext) return;
+    
+    if (value.includes("|")) {
+      const [id, path] = value.split("|");
+      const name = path?.split("/").pop() || "";
+      setSelectedItem({ id: id || "", path: path || "", name, language: "en" });
+    } else {
+      // Try to load item by ID or path
+      loadItemByIdOrPath(value);
+    }
+  }, [value, editContext, loadItemByIdOrPath]);
+  
+  const handleItemSelected = (item: ItemDescriptor & { path?: string; idPath?: string; icon?: string }) => {
+    const resultItem: ResultItem = {
+      id: item.id,
+      name: item.name || "",
+      path: item.path || "",
+      language: item.language || "en",
+      icon: item.icon,
+      idPath: item.idPath,
+    };
+    setSelectedItem(resultItem);
+    const newValue = `${resultItem.id}|${resultItem.path}`;
+    onChange(newValue);
+    setIsOpen(false);
+  };
+  
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedItem(null);
+    onChange("");
+  };
+  
+  const displayValue = selectedItem ? selectedItem.path : "";
+  
+  // Don't render until root is resolved
+  if (isLoadingRoot || !rootItemId) {
+    return (
+      <div
+        ref={inputRef as React.Ref<HTMLDivElement>}
+        className="inline-flex min-w-[150px] max-w-[300px] items-center gap-1 rounded border border-gray-300 bg-gray-50 px-2 py-0.5 text-xs"
+      >
+        <span className="flex-1 text-gray-400">Loading...</span>
+      </div>
+    );
+  }
+  
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div
+          ref={inputRef as React.Ref<HTMLDivElement>}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          className={cn(
+            "inline-flex min-w-[150px] max-w-[300px] cursor-pointer items-center gap-1 rounded border border-blue-400 bg-blue-50 px-2 py-0.5 text-xs outline-none transition-all",
+            "hover:border-blue-500 hover:bg-blue-100",
+            "focus:border-blue-600 focus:bg-blue-100 focus:ring-2 focus:ring-blue-500/30",
+          )}
+        >
+          {selectedItem ? (
+            <>
+              {selectedItem.icon && (
+                <img
+                  src={selectedItem.icon}
+                  alt=""
+                  className="h-3 w-3 flex-shrink-0"
+                />
+              )}
+              <span className="flex-1 truncate">{displayValue}</span>
+              <button
+                onClick={handleClear}
+                className="rounded p-0.5 hover:bg-blue-200"
+                title="Clear selection"
+              >
+                <X size={12} />
+              </button>
+            </>
+          ) : (
+            <>
+              <span className="flex-1 text-blue-400">{placeholder.name}</span>
+              <ChevronDown size={12} className="text-blue-400" />
+            </>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[700px] p-0"
+        align="start"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <div className="flex h-[450px]">
+          <Splitter
+            direction="horizontal"
+            localStorageKey="placeholder-item-selector-split"
+            panels={[
+              {
+                name: "tree",
+                defaultSize: 300,
+                content: (
+                  <div className="h-full overflow-auto border-r border-gray-200 p-2">
+                    <ContentTree
+                      rootItemIds={[rootItemId]}
+                      selectionMode="single"
+                      selectedItemIds={selectedItem ? [selectedItem.id] : []}
+                      onSelectionChange={(selection) => {
+                        const node = selection[0] as ItemTreeNodeData;
+                        if (node) {
+                          handleItemSelected({
+                            id: node.id,
+                            name: node.name,
+                            path: node.path || node.name,
+                            language: "en",
+                            version: 0,
+                            icon: node.icon,
+                          });
+                        }
+                      }}
+                      language="en"
+                    />
+                  </div>
+                ),
+              },
+              {
+                name: "search",
+                defaultSize: "auto",
+                content: (
+                  <div className="flex h-full flex-col p-4">
+                    <ItemSearch
+                      rootItemIds={rootItemId ? [rootItemId] : undefined}
+                      itemSelected={handleItemSelected}
+                      language="en"
+                      autoFocus={true}
+                    />
+                  </div>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+