create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, type ComponentType, Suspense, LazyExoticComponent, useCallback } from "react";
+import { useState, useEffect, type ComponentType, Suspense, LazyExoticComponent, useCallback, type CSSProperties } from "react";
 import { cn } from "@nextblock-cms/utils";
 import {
   Dialog,
@@ -9,7 +9,7 @@ import {
   DialogDescription,
 } from "@nextblock-cms/ui";
 import { Button } from "@nextblock-cms/ui";
-import { blockRegistry, type BlockType } from "@/lib/blocks/blockRegistry";
+import { blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
 
 // A generic representation of a block object.
 // The modal primarily needs `type` to get the label and `content` for editing.
@@ -28,6 +28,14 @@ export type BlockEditorProps<T = unknown> = {
   sectionBackground?: import("@/lib/blocks/blockRegistry").SectionBlockContent['background'];
 };
 
+export type EditorSurfaceContext = {
+  isDark: boolean;
+  style: CSSProperties;
+};
+
+export type BlockEditorSaveMode = "manual" | "autosave";
+export type BlockEditorSaveStatus = "idle" | "dirty" | "saving" | "saved" | "error";
+
 type BlockEditorModalProps = {
   block: Block;
   isOpen: boolean;
@@ -35,6 +43,22 @@ type BlockEditorModalProps = {
   onSave: (updatedContent: unknown) => void;
   EditorComponent: LazyExoticComponent<ComponentType<BlockEditorProps<unknown>>> | ComponentType<BlockEditorProps<unknown>>;
   sectionBackground?: import("@/lib/blocks/blockRegistry").SectionBlockContent['background'];
+  editorSurfaceContext?: EditorSurfaceContext | null;
+  titleOverride?: string;
+  useContextualSurface?: boolean;
+  saveMode?: BlockEditorSaveMode;
+  saveStatus?: BlockEditorSaveStatus;
+  saveStatusText?: string;
+  onAutoChange?: (content: unknown) => void;
+  onFlushBeforeClose?: () => Promise<boolean>;
+};
+
+const autosaveStatusLabels: Record<BlockEditorSaveStatus, string> = {
+  idle: "Saved",
+  dirty: "Unsaved",
+  saving: "Saving...",
+  saved: "Saved",
+  error: "Save failed",
 };
 
 export function BlockEditorModal({
@@ -44,42 +68,121 @@ export function BlockEditorModal({
   onSave,
   EditorComponent,
   sectionBackground,
+  editorSurfaceContext,
+  titleOverride,
+  useContextualSurface,
+  saveMode = "manual",
+  saveStatus = "idle",
+  saveStatusText,
+  onAutoChange,
+  onFlushBeforeClose,
 }: BlockEditorModalProps) {
   const [tempContent, setTempContent] = useState(block.content);
   const [showConfirmClose, setShowConfirmClose] = useState(false);
+  const [isFlushingBeforeClose, setIsFlushingBeforeClose] = useState(false);
   const isValid = true; // Placeholder for future validation logic
+  const isAutosaveMode = saveMode === "autosave";
+  const [saveShortcutLabel, setSaveShortcutLabel] = useState("CMD+S");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const isMac = navigator.userAgent.indexOf("Mac") !== -1;
+      setSaveShortcutLabel(isMac ? "CMD+S" : "Ctrl+S");
+    }
+  }, []);
 
   useEffect(() => {
     // When the modal is opened with a new block, reset the temp content
     if (isOpen) {
       setTempContent(block.content);
       setShowConfirmClose(false);
+      setIsFlushingBeforeClose(false);
     }
   }, [isOpen, block.content]);
 
-  const handleSave = () => {
+  const handleSave = useCallback(() => {
     onSave(tempContent);
-  };
+  }, [onSave, tempContent]);
 
   const hasUnsavedChanges = useCallback(() => {
     return JSON.stringify(block.content) !== JSON.stringify(tempContent);
   }, [block.content, tempContent]);
 
+  const flushAutosave = useCallback(async () => {
+    if (!onFlushBeforeClose) {
+      return true;
+    }
+
+    setIsFlushingBeforeClose(true);
+    try {
+      return await onFlushBeforeClose();
+    } finally {
+      setIsFlushingBeforeClose(false);
+    }
+  }, [onFlushBeforeClose]);
+
   const handleCloseAttempt = useCallback(() => {
+    if (isAutosaveMode) {
+      void (async () => {
+        const didFlush = await flushAutosave();
+        if (didFlush) {
+          onClose();
+        }
+      })();
+      return;
+    }
+
     if (hasUnsavedChanges()) {
       setShowConfirmClose(true);
     } else {
       onClose();
     }
-  }, [hasUnsavedChanges, onClose]);
+  }, [flushAutosave, hasUnsavedChanges, isAutosaveMode, onClose]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "s") {
+        return;
+      }
+
+      event.preventDefault();
+      if (isAutosaveMode) {
+        handleCloseAttempt();
+      } else {
+        handleSave();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [handleCloseAttempt, handleSave, isAutosaveMode, isOpen]);
 
   const handleContentChange = (newContent: unknown) => {
     setTempContent(newContent);
+    if (isAutosaveMode) {
+      onAutoChange?.(newContent);
+    }
     // Potentially add validation here and set isValid
   };
 
   const blockInfo = blockRegistry[block.type];
   const displayText = blockInfo?.label || "Block";
+  const shouldUseContextualSurface =
+    (useContextualSurface ?? true) && block.type === 'text';
+  const contextualSurfaceStyle = shouldUseContextualSurface ? editorSurfaceContext?.style : undefined;
+  const editorClassName = cn(
+    "bg-transparent text-foreground border-none shadow-none focus-within:ring-0 min-h-[60vh]",
+    shouldUseContextualSurface &&
+      editorSurfaceContext?.isDark &&
+      "[&_.ProseMirror]:text-white [&_.ProseMirror.prose]:prose-invert"
+  );
+  const resolvedSaveStatusText = saveStatusText ?? autosaveStatusLabels[saveStatus];
 
   return (
     <>
@@ -100,15 +203,43 @@ export function BlockEditorModal({
           }}
         >
             {/* Header */}
-            <div className="flex items-center justify-between p-4 border-b bg-background/95 backdrop-blur z-10">
+            <div className="flex items-center justify-between p-4 border-b bg-background/95 text-foreground backdrop-blur z-10">
                 <div className="flex items-center gap-2">
-                   <DialogTitle className="text-lg font-semibold">Edit {displayText}</DialogTitle>
+                   <DialogTitle className="text-lg font-semibold">
+                    {titleOverride ?? `Edit ${displayText}`}
+                   </DialogTitle>
                 </div>
                  <div className="flex items-center gap-2">
-                    <Button variant="ghost" size="sm" onClick={handleCloseAttempt}>Cancel</Button>
-                    <Button onClick={handleSave} disabled={!isValid} size="sm">
-                      Save (CMD+S)
+                    {isAutosaveMode && (
+                      <span
+                        aria-live="polite"
+                        className={cn(
+                          "rounded-md px-2 py-1 text-xs font-medium",
+                          saveStatus === "error"
+                            ? "bg-destructive/10 text-destructive"
+                            : saveStatus === "dirty"
+                              ? "bg-amber-500/10 text-amber-700 dark:text-amber-300"
+                              : "bg-muted text-muted-foreground",
+                          "max-w-[360px] truncate"
+                        )}
+                        title={resolvedSaveStatusText}
+                      >
+                        {resolvedSaveStatusText}
+                      </span>
+                    )}
+                    <Button
+                      variant={isAutosaveMode ? "default" : "ghost"}
+                      size="sm"
+                      onClick={handleCloseAttempt}
+                      disabled={isAutosaveMode && isFlushingBeforeClose}
+                    >
+                      {isAutosaveMode ? "Done" : "Cancel"}
                     </Button>
+                    {!isAutosaveMode && (
+                      <Button onClick={handleSave} disabled={!isValid} size="sm">
+                        Save ({saveShortcutLabel})
+                      </Button>
+                    )}
                  </div>
             </div>
 
@@ -120,25 +251,27 @@ export function BlockEditorModal({
                   // Conditional Background Logic:
                   // Only apply specific section background to 'text' and 'heading' blocks to allow "Live Preview" of copy.
                   // For complex blocks like Forms, Buttons, etc., keep a neutral background to ensure input field contrast.
-                  (block.type === 'text' || block.type === 'heading') ? (
+                  shouldUseContextualSurface ? (
                      // If no specific background, use white/dark default
                      (!sectionBackground || sectionBackground.type === 'none') && "bg-muted/10"
                   ) : "bg-muted/10", // Default for non-text blocks
 
                   // Apply theme classes if present (ONLY for text/heading)
-                  (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'primary' && 'bg-primary text-primary-foreground',
-                  (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'secondary' && 'bg-secondary text-secondary-foreground',
-                  (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'muted' && 'bg-muted text-muted-foreground',
+                  shouldUseContextualSurface && sectionBackground?.type === 'theme' && sectionBackground.theme === 'primary' && 'bg-primary text-primary-foreground',
+                  shouldUseContextualSurface && sectionBackground?.type === 'theme' && sectionBackground.theme === 'secondary' && 'bg-secondary text-secondary-foreground',
+                  shouldUseContextualSurface && sectionBackground?.type === 'theme' && sectionBackground.theme === 'muted' && 'bg-muted text-muted-foreground',
                   
                    // Dark mode prose invert if dark background (approximate check for solid color)
-                  (block.type === 'text' || block.type === 'heading') && (sectionBackground?.type === 'solid' && sectionBackground.solid_color && ['#000', '#111', '#0f172a', 'black'].some(c => sectionBackground.solid_color?.includes(c))) && "[&_.prose]:prose-invert"
+                  shouldUseContextualSurface && (sectionBackground?.type === 'solid' && sectionBackground.solid_color && ['#000', '#111', '#0f172a', 'black'].some(c => sectionBackground.solid_color?.includes(c))) && "[&_.prose]:prose-invert",
+                  shouldUseContextualSurface && editorSurfaceContext?.isDark && "[&_.prose]:prose-invert [&_.ProseMirror]:text-white"
               )}
               style={{
                   // Only apply custom color/gradient styles for text/heading
-                  backgroundColor: (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'solid' ? sectionBackground.solid_color : undefined,
-                  backgroundImage: (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'gradient' && sectionBackground.gradient ? 
+                  backgroundColor: shouldUseContextualSurface && sectionBackground?.type === 'solid' ? sectionBackground.solid_color : undefined,
+                  backgroundImage: shouldUseContextualSurface && sectionBackground?.type === 'gradient' && sectionBackground.gradient ? 
                     `${sectionBackground.gradient.type}-gradient(${sectionBackground.gradient.direction}, ${sectionBackground.gradient.stops.map(s => `${s.color} ${s.position}%`).join(', ')})` 
-                    : undefined
+                    : undefined,
+                  ...contextualSurfaceStyle,
               }}
             >
                <div className="max-w-6xl mx-auto">
@@ -147,7 +280,7 @@ export function BlockEditorModal({
                         block={block}
                         content={tempContent} 
                         onChange={handleContentChange} 
-                        className="bg-transparent border-none shadow-none focus-within:ring-0 min-h-[60vh]" // Make editor transparent
+                        className={editorClassName}
                         sectionBackground={sectionBackground} // Pass down if editor supports it
                     />
                   </Suspense>

package/templates/nextblock-template/app/cms/blocks/components/BlockTypeCard.tsx

@@ -1,6 +1,5 @@
 // app/cms/blocks/components/BlockTypeCard.tsx
 import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from "@nextblock-cms/ui";
 import {
   FileText,
   Heading,
@@ -12,6 +11,12 @@ import {
   LayoutTemplate,
   NotebookPen,
   Package,
+  ShoppingBag,
+  Star,
+  ShoppingCart,
+  CreditCard,
+  Tag,
+  MessageSquareQuote,
   type LucideProps,
 } from 'lucide-react';
 
@@ -25,33 +30,36 @@ const iconMap: { [key: string]: React.FC<LucideProps> } = {
   Columns3,
   LayoutTemplate,
   NotebookPen,
+  ShoppingBag,
+  Star,
+  ShoppingCart,
+  CreditCard,
+  Tag,
+  MessageSquareQuote,
 };
 
 interface BlockTypeCardProps {
-  icon?: string;
+  icon?: string | any;
   name: string;
-  description?: string;
   onClick: () => void;
 }
 
-const BlockTypeCard: React.FC<BlockTypeCardProps> = ({ icon, name, description, onClick }) => {
-  const IconComponent = icon && iconMap[icon] ? iconMap[icon] : Package;
+const BlockTypeCard: React.FC<BlockTypeCardProps> = ({ icon, name, onClick }) => {
+  const IconComponent = typeof icon === 'string'
+    ? (iconMap[icon] || Package)
+    : (icon || Package);
 
   return (
-    <Card
+    <button
+      type="button"
       onClick={onClick}
-      className="cursor-pointer hover:shadow-lg hover:border-primary transition-all duration-200 ease-in-out"
+      className="group w-full flex items-center justify-between p-4 rounded-lg border border-border bg-card text-card-foreground text-left transition-all duration-150 ease-in-out hover:border-primary/50 hover:bg-accent/40 hover:shadow-sm active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none"
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{name}</CardTitle>
-        {IconComponent && <IconComponent className="h-4 w-4 text-muted-foreground" />}
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-muted-foreground">
-          {description || 'No description available.'}
-        </p>
-      </CardContent>
-    </Card>
+      <span className="text-sm font-medium leading-none truncate pr-2 text-foreground/90 group-hover:text-foreground">
+        {name}
+      </span>
+      <IconComponent className="h-4 w-4 flex-shrink-0 text-muted-foreground group-hover:text-primary transition-colors duration-150" />
+    </button>
   );
 };
 

package/templates/nextblock-template/app/cms/blocks/components/BlockTypeSelector.tsx

@@ -8,51 +8,233 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  Input,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
 } from "@nextblock-cms/ui";
-import { blockRegistry, BlockType } from '@/lib/blocks/blockRegistry';
+import { Search, X, Package } from 'lucide-react';
+import { blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
 import BlockTypeCard from './BlockTypeCard';
 
 interface BlockTypeSelectorProps {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  onSelectBlockType: (blockType: BlockType) => void;
+  onSelectBlockType: (blockType: any) => void;
   allowedBlockTypes?: BlockType[];
 }
 
+const CATEGORIES = ["All", "Layout", "Content", "Media", "Interactive", "E-commerce", "Custom"];
+
+const getBlockCategory = (type: string, isCustomSlug?: boolean): string => {
+  if (isCustomSlug) {
+    return 'Custom';
+  }
+  switch (type) {
+    case 'section':
+      return 'Layout';
+    case 'text':
+    case 'heading':
+    case 'button':
+    case 'testimonial':
+      return 'Content';
+    case 'image':
+    case 'video_embed':
+      return 'Media';
+    case 'form':
+    case 'posts_grid':
+      return 'Interactive';
+    case 'product_grid':
+    case 'featured_product':
+    case 'cart':
+    case 'checkout':
+    case 'product_details':
+      return 'E-commerce';
+    default:
+      return 'Content';
+  }
+};
+
 const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
   isOpen,
   onOpenChange,
   onSelectBlockType,
   allowedBlockTypes,
 }) => {
-  const handleSelect = (blockType: BlockType) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [activeCategory, setActiveCategory] = React.useState('All');
+  const [customDefs, setCustomDefs] = React.useState<any[]>([]);
+
+  // Reset state and fetch custom blocks when modal is opened
+  React.useEffect(() => {
+    if (isOpen) {
+      setSearchQuery('');
+      setActiveCategory('All');
+      
+      fetch("/api/custom-blocks/editor-definitions")
+        .then((res) => {
+          if (res.ok) {
+            return res.json();
+          }
+          throw new Error("Failed to fetch definitions");
+        })
+        .then((data) => {
+          if (data && data.definitions) {
+            setCustomDefs(data.definitions);
+          }
+        })
+        .catch((err) => console.error("Error loading custom blocks for selector:", err));
+    }
+  }, [isOpen]);
+
+  const handleSelect = (blockType: string) => {
     onSelectBlockType(blockType);
     onOpenChange(false);
   };
 
-  const blockDefs = Object.values(blockRegistry).filter(
-    (blockDef) => !allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)
-  );
+  const blockDefs = React.useMemo(() => {
+    const coreDefs = Object.values(blockRegistry).filter(
+      (blockDef) =>
+        !allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)
+    );
+
+    const mappedCustomDefs = customDefs.map((def) => ({
+      type: def.slug,
+      label: def.name,
+      icon: "LayoutTemplate",
+      initialContent: def.fields.reduce((acc: any, field: any) => {
+        acc[field.key] = field.type === "image_r2" ? null : field.type === "db_relation" ? (field.multiple ? [] : null) : "";
+        return acc;
+      }, {}),
+      documentation: {
+        description: def.description || "Custom user-defined block layout component.",
+        useCases: ["Custom page components"],
+      },
+    }));
+
+    return [...coreDefs, ...mappedCustomDefs];
+  }, [allowedBlockTypes, customDefs]);
+
+  // Memoized filter and search results to prevent re-calculations during key strokes
+  const filteredBlockDefs = React.useMemo(() => {
+    return blockDefs
+      .filter((blockDef) => {
+        const isCustom = customDefs.some((d) => d.slug === blockDef.type);
+        const category = getBlockCategory(blockDef.type, isCustom);
+
+        // Category Filter
+        if (activeCategory !== 'All' && category !== activeCategory) {
+          return false;
+        }
+        // Search Filter
+        if (searchQuery.trim() !== '') {
+          const query = searchQuery.toLowerCase();
+          const matchesLabel = blockDef.label.toLowerCase().includes(query);
+          const matchesDesc = blockDef.documentation?.description?.toLowerCase().includes(query) || false;
+          return matchesLabel || matchesDesc;
+        }
+        return true;
+      })
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }, [blockDefs, searchQuery, activeCategory, customDefs]);
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[625px]">
-        <DialogHeader>
+      <DialogContent className="sm:max-w-[700px] max-h-[85vh] flex flex-col gap-0 p-6 overflow-hidden">
+        <DialogHeader className="pb-4">
           <DialogTitle>Add a New Block</DialogTitle>
           <DialogDescription>
             Choose a block type from the options below to add it to the page.
           </DialogDescription>
         </DialogHeader>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-4">
-          {blockDefs.map((blockDef) => (
-            <BlockTypeCard
-              key={blockDef.type}
-              name={blockDef.label}
-              description={blockDef.documentation?.description}
-              icon={blockDef.icon}
-              onClick={() => handleSelect(blockDef.type)}
-            />
-          ))}
+
+        <div className="flex flex-col gap-4 py-2 overflow-hidden flex-grow">
+          {/* Search and Filters Header */}
+          <div className="space-y-3 flex-shrink-0">
+            <div className="relative flex items-center">
+              <Search className="absolute left-3 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                type="text"
+                placeholder="Search block types..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 pr-8 h-9 text-sm bg-muted/40 hover:bg-muted/60 focus:bg-background transition-colors duration-150 rounded-lg border-border"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 p-0.5 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors duration-150"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+
+            {/* Category Filter Tabs */}
+            <div className="flex flex-wrap gap-1.5 pb-3 border-b border-border">
+              {CATEGORIES.map((category) => (
+                <button
+                  key={category}
+                  type="button"
+                  onClick={() => setActiveCategory(category)}
+                  className={`text-xs py-1 px-3 rounded-full transition-all duration-150 border outline-none ${
+                    activeCategory === category
+                      ? 'bg-primary text-primary-foreground border-primary font-medium shadow-sm'
+                      : 'bg-secondary/40 hover:bg-secondary/80 border-transparent text-muted-foreground'
+                  }`}
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Grid Area */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 overflow-y-auto pr-1 py-1 flex-grow">
+            <TooltipProvider delayDuration={200}>
+              {filteredBlockDefs.map((blockDef) => (
+                <Tooltip key={blockDef.type}>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <BlockTypeCard
+                        name={blockDef.label}
+                        icon={blockDef.icon}
+                        onClick={() => handleSelect(blockDef.type)}
+                      />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side="top"
+                    align="center"
+                    className="max-w-[280px] p-3 text-xs bg-popover border border-border shadow-lg rounded-md z-[60]"
+                  >
+                    <div className="space-y-1">
+                      <div className="font-semibold text-foreground">{blockDef.label}</div>
+                      <div className="text-muted-foreground leading-normal">
+                        {blockDef.documentation?.description || 'No description available.'}
+                      </div>
+                      {blockDef.documentation?.useCases && blockDef.documentation.useCases.length > 0 && (
+                        <div className="pt-1.5 border-t border-border mt-1.5 text-[10px] text-muted-foreground/80">
+                          <span className="font-semibold text-foreground/90">Use cases: </span>
+                          {blockDef.documentation.useCases.join(', ')}
+                        </div>
+                      )}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+            </TooltipProvider>
+
+            {filteredBlockDefs.length === 0 && (
+              <div className="col-span-full py-12 text-center flex flex-col items-center justify-center text-muted-foreground">
+                <Package className="h-8 w-8 mb-2 opacity-30 animate-pulse" />
+                <p className="text-sm font-medium">No block types found</p>
+                <p className="text-xs">Adjust your search query or select another category</p>
+              </div>
+            )}
+          </div>
         </div>
       </DialogContent>
     </Dialog>