create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/blocks/editors/HeadingBlockEditor.tsx

@@ -0,0 +1,111 @@
+// app/cms/blocks/editors/HeadingBlockEditor.tsx
+"use client";
+
+import React from "react";
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
+import type { HeadingBlockContent } from "@/lib/blocks/blockRegistry";
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+export default function HeadingBlockEditor({ content, onChange }: BlockEditorProps<Partial<HeadingBlockContent>>) {
+  const idPrefix = React.useId();
+
+  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...content, text_content: event.target.value });
+  };
+
+  const handleLevelChange = (value: string) => {
+    onChange({ ...content, level: parseInt(value, 10) as HeadingBlockContent['level'] });
+  };
+
+  const textAlignOptions = ['left', 'center', 'right', 'justify'] as const;
+
+  const textColorOptions = [
+    { value: 'primary', label: 'Primary', swatchClass: 'bg-primary' },
+    { value: 'secondary', label: 'Secondary', swatchClass: 'bg-secondary' },
+    { value: 'accent', label: 'Accent', swatchClass: 'bg-accent' },
+    { value: 'muted', label: 'Muted', swatchClass: 'bg-muted-foreground' }, // Using muted-foreground for swatch as text-muted is for text
+    { value: 'destructive', label: 'Destructive', swatchClass: 'bg-destructive' },
+    { value: 'background', label: 'Background', swatchClass: 'bg-background' },
+  ] as const;
+
+  const handleTextAlignChange = (value: string) => {
+    onChange({ ...content, textAlign: value as HeadingBlockContent['textAlign'] });
+  };
+
+  const handleTextColorChange = (value: string) => {
+    const newTextColor = value === "" ? undefined : value as HeadingBlockContent['textColor'];
+    onChange({ ...content, textColor: newTextColor });
+  };
+
+  return (
+    <div className="space-y-3 p-3 border-t mt-2">
+      <div>
+        <Label htmlFor={`heading-text-${idPrefix}`}>Heading Text</Label>
+        <Input
+          id={`heading-text-${idPrefix}`}
+          value={content.text_content || ""}
+          onChange={handleTextChange}
+          placeholder="Enter heading text"
+          className="mt-1"
+        />
+      </div>
+      <div>
+        <Label htmlFor={`heading-level-${idPrefix}`}>Level</Label>
+        <Select
+            value={content.level?.toString() || "2"}
+            onValueChange={handleLevelChange}
+        >
+            <SelectTrigger id={`heading-level-${idPrefix}`} className="mt-1">
+                <SelectValue placeholder="Select level" />
+            </SelectTrigger>
+            <SelectContent>
+                {[1, 2, 3, 4, 5, 6].map(level => (
+                    <SelectItem key={level} value={level.toString()}>H{level}</SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor={`heading-text-align-${idPrefix}`}>Text Alignment</Label>
+        <Select
+          value={content.textAlign || 'left'}
+          onValueChange={handleTextAlignChange}
+        >
+          <SelectTrigger id={`heading-text-align-${idPrefix}`} className="mt-1">
+            <SelectValue placeholder="Select alignment" />
+          </SelectTrigger>
+          <SelectContent>
+            {textAlignOptions.map(align => (
+              <SelectItem key={align} value={align}>
+                {align.charAt(0).toUpperCase() + align.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor={`heading-text-color-${idPrefix}`}>Text Color</Label>
+        <Select
+          value={content.textColor || ""} // Use empty string if no color is selected initially
+          onValueChange={handleTextColorChange}
+        >
+          <SelectTrigger id={`heading-text-color-${idPrefix}`} className="mt-1">
+            <SelectValue placeholder="Select color (optional)" />
+          </SelectTrigger>
+          <SelectContent>
+            {textColorOptions.map(color => (
+              <SelectItem key={color.value} value={color.value}>
+                <div className="flex items-center">
+                  <div className={`w-4 h-4 rounded-sm mr-2 border ${color.swatchClass}`}></div>
+                  {color.label}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/ImageBlockEditor.tsx

@@ -0,0 +1,150 @@
+// app/cms/blocks/editors/ImageBlockEditor.tsx
+"use client";
+
+import React, { useState } from 'react'; // Removed useTransition as it's not used here
+import Image from 'next/image';
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+
+type Media = Database['public']['Tables']['media']['Row'];
+export type ImageBlockContent = {
+    media_id: string | null;
+    object_key: string | null;
+    alt_text: string | null;
+    caption: string | null;
+    width: number | null;
+    height: number | null;
+    blur_data_url: string | null;
+};
+import { ImageIcon, X as XIcon } from 'lucide-react';
+import MediaPickerDialog from "@/app/cms/media/components/MediaPickerDialog"; // Import the upload form
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+export default function ImageBlockEditor({ content, onChange }: BlockEditorProps<Partial<ImageBlockContent>>) {
+  const [selectedMediaObjectKey, setSelectedMediaObjectKey] = useState<string | null | undefined>(content.object_key);
+  const [isLoadingMediaDetails] = useState(false); // For fetching details if only ID is present
+
+
+  // Effect to fetch media details (like object_key) if only media_id is present in content
+  
+
+  const handleSelectMediaFromLibrary = (mediaItem: Media) => {
+    // Always reset alt to the new media's description (or derived from filename)
+    const deriveAltFromFilename = (name: string) => {
+      const lastDot = name.lastIndexOf('.');
+      const base = lastDot > 0 ? name.substring(0, lastDot) : name;
+      const spaced = base.replace(/[-+_\\]+/g, ' ').replace(/\s+/g, ' ').trim();
+      return spaced.replace(/\b\w+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1));
+    };
+    const newAlt = mediaItem.description && mediaItem.description.trim().length > 0
+      ? mediaItem.description
+      : deriveAltFromFilename(mediaItem.file_name || 'Image');
+
+    setSelectedMediaObjectKey(mediaItem.object_key);
+    onChange({
+      media_id: mediaItem.id,
+      object_key: mediaItem.object_key,
+      alt_text: newAlt, // overwrite alt when image changes
+      caption: content.caption || "",
+      width: mediaItem.width,
+      height: mediaItem.height,
+      blur_data_url: mediaItem.blur_data_url,
+    });
+  };
+
+  const handleAltTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...content,
+      media_id: content.media_id || null,
+      object_key: selectedMediaObjectKey,
+      alt_text: event.target.value,
+      width: content.width,
+      height: content.height,
+      blur_data_url: content.blur_data_url
+    });
+  };
+
+  const handleCaptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...content,
+      media_id: content.media_id || null,
+      object_key: selectedMediaObjectKey,
+      caption: event.target.value,
+      width: content.width,
+      height: content.height,
+      blur_data_url: content.blur_data_url
+    });
+  };
+
+  const handleRemoveImage = () => {
+    setSelectedMediaObjectKey(null);
+    onChange({ media_id: null, object_key: null, alt_text: "", caption: "", width: null, height: null, blur_data_url: null });
+  };
+
+  const displayObjectKey = content.object_key || selectedMediaObjectKey;
+
+  return (
+    <div className="space-y-3 p-3 border-t mt-2">
+      <Label>Image</Label>
+      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
+        {isLoadingMediaDetails && <p>Loading image details...</p>}
+        {!isLoadingMediaDetails && displayObjectKey && typeof content.width === 'number' && typeof content.height === 'number' && content.width > 0 && content.height > 0 ? (
+          <div className="relative group inline-block" style={{ maxWidth: content.width, maxHeight: 200 }}> {/* Max height for editor preview consistency */}
+            <Image
+              src={`${R2_BASE_URL}/${displayObjectKey}`}
+              alt={content.alt_text || "Selected image"}
+              width={content.width}
+              height={content.height}
+              className="rounded-md object-contain" // Removed max-h-40, relying on width/height and parent max-height
+              style={{ maxHeight: '200px' }} // Ensure image does not exceed this height in preview
+              placeholder={content.blur_data_url ? "blur" : "empty"}
+              blurDataURL={content.blur_data_url || undefined}
+            />
+            <Button
+              type="button" variant="destructive" size="icon"
+              className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
+              onClick={handleRemoveImage} title="Remove Image"
+            > <XIcon className="h-3 w-3" /> </Button>
+          </div>
+        ) : !isLoadingMediaDetails && displayObjectKey ? ( // Fallback if width/height are missing but key exists
+          <div className="relative group inline-block">
+            <Image
+              src={`${R2_BASE_URL}/${displayObjectKey}`}
+              alt={content.alt_text || "Selected image"}
+              width={300}
+              height={200}
+              className="rounded-md object-contain max-h-40 block"
+              style={{ maxHeight: '200px' }}
+            />
+             <Button
+              type="button" variant="destructive" size="icon"
+              className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
+              onClick={handleRemoveImage} title="Remove Image"
+            > <XIcon className="h-3 w-3" /> </Button>
+            <p className="text-xs text-orange-500 mt-1">Preview: Dimensions missing, using fallback.</p>
+          </div>
+        ) : !isLoadingMediaDetails && content.media_id ? (
+            <p className="text-sm text-red-500">Image details (object_key or dimensions) missing for Media ID: {content.media_id}. Try re-selecting.</p>
+        ) : (
+          <ImageIcon className="h-16 w-16 text-muted-foreground" />
+        )}
+
+        <MediaPickerDialog triggerLabel={displayObjectKey ? "Change Image" : "Select from Library"} onSelect={handleSelectMediaFromLibrary} accept={(m)=>!!m.file_type?.startsWith("image/")} title="Select or Upload Image" />
+      </div>
+
+      <div>
+        <Label htmlFor={`image-alt-${content.media_id || 'new'}`}>Alt Text</Label>
+        <Input id={`image-alt-${content.media_id || 'new'}`} value={content.alt_text || ""} onChange={handleAltTextChange} className="mt-1" disabled={!displayObjectKey} />
+      </div>
+      <div>
+        <Label htmlFor={`image-caption-${content.media_id || 'new'}`}>Caption</Label>
+        <Input id={`image-caption-${content.media_id || 'new'}`} value={content.caption || ""} onChange={handleCaptionChange} className="mt-1" disabled={!displayObjectKey} />
+      </div>
+    </div>
+  );
+}
+

package/templates/nextblock-template/app/cms/blocks/editors/PostsGridBlockEditor.tsx

@@ -0,0 +1,79 @@
+// app/cms/blocks/editors/PostsGridBlockEditor.tsx
+import React, { useState, useEffect } from 'react';
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+// import { useToast } from "@nextblock-cms/ui"; // Assuming you have a toast component - Removed for now
+
+interface PostsGridBlockContent {
+  title?: string;
+  postsPerPage?: number;
+  columns?: number;
+  showPagination?: boolean;
+}
+
+const PostsGridBlockEditor: React.FC<BlockEditorProps<PostsGridBlockContent>> = ({ content, onChange }) => {
+  const [currentTitle, setCurrentTitle] = useState(content.title || 'Recent Posts');
+  const [currentPostsPerPage, setCurrentPostsPerPage] = useState(content.postsPerPage || 6);
+  const [currentColumns, setCurrentColumns] = useState(content.columns || 3);
+  const showPagination = content.showPagination === undefined ? true : content.showPagination;
+
+  useEffect(() => {
+    const newContentPayload = {
+      title: currentTitle,
+      postsPerPage: Number(currentPostsPerPage),
+      columns: Number(currentColumns),
+      showPagination: showPagination,
+    };
+    onChange(newContentPayload);
+  }, [currentTitle, currentPostsPerPage, currentColumns, showPagination, onChange]);
+
+  return (
+    <div className="space-y-4 p-4 border rounded-md">
+      <h4 className="text-lg font-semibold">Posts Grid Block Editor</h4>
+      
+      <div>
+        <Label htmlFor="posts-grid-title">Title</Label>
+        <Input
+          id="posts-grid-title"
+          value={currentTitle}
+          onChange={(e) => setCurrentTitle(e.target.value)}
+          placeholder="Enter title for the posts grid"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="posts-grid-per-page">Posts Per Page</Label>
+        <Input
+          id="posts-grid-per-page"
+          type="number"
+          value={currentPostsPerPage}
+          onChange={(e) => setCurrentPostsPerPage(parseInt(e.target.value, 10))}
+          min="1"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="posts-grid-columns">Columns</Label>
+        <Input
+          id="posts-grid-columns"
+          type="number"
+          value={currentColumns}
+          onChange={(e) => setCurrentColumns(parseInt(e.target.value, 10))}
+          min="1"
+          max="6" // Example max, adjust as needed
+        />
+      </div>
+      
+      <p className="text-sm">
+        <strong>Show Pagination:</strong> {showPagination ? 'Yes' : 'No'}
+      </p>
+
+      <p className="text-xs text-muted-foreground pt-2">
+        Displays a grid of posts. Frontend rendering and further configuration options will be implemented in subsequent steps.
+      </p>
+    </div>
+  );
+};
+
+export default PostsGridBlockEditor;

package/templates/nextblock-template/app/cms/blocks/editors/SectionBlockEditor.tsx

@@ -0,0 +1,337 @@
+// app/cms/blocks/editors/SectionBlockEditor.tsx
+"use client";
+
+import React, { useState, useMemo } from "react";
+import ColumnEditor from "../components/ColumnEditor";
+import type { SectionBlockContent } from "@/lib/blocks/blockRegistry";
+import {
+  getBlockDefinition,
+} from "@/lib/blocks/blockRegistry";
+import SectionConfigPanel from "../components/SectionConfigPanel";
+
+
+
+// DND Kit imports for column block reordering
+import {
+  DndContext,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragStartEvent,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+  DropAnimation,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+
+interface SectionBlockEditorProps {
+  content: Partial<SectionBlockContent>;
+  onChange: (newContent: SectionBlockContent) => void;
+  isConfigPanelOpen: boolean;
+  blockType: 'section' | 'hero';
+}
+
+export default function SectionBlockEditor({
+  content,
+  onChange,
+  isConfigPanelOpen,
+  blockType,
+}: SectionBlockEditorProps) {
+
+  const processedContent = useMemo((): SectionBlockContent => {
+    const defaults: SectionBlockContent = {
+      container_type: "container",
+      background: { type: "none" },
+      responsive_columns: { mobile: 1, tablet: 2, desktop: 3 },
+      column_gap: "md",
+      padding: { top: "md", bottom: "md" },
+      column_blocks: [],
+    };
+
+    return {
+      container_type: content.container_type ?? defaults.container_type,
+      background: content.background ?? defaults.background,
+      responsive_columns:
+        content.responsive_columns ?? defaults.responsive_columns,
+      column_gap: content.column_gap ?? defaults.column_gap,
+      padding: content.padding ?? defaults.padding,
+      column_blocks: content.column_blocks ?? defaults.column_blocks,
+    };
+  }, [content]);
+
+
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [draggedBlock, setDraggedBlock] = useState<any>(null);
+
+  // DND sensors for cross-column dragging
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleColumnBlocksChange = (
+    columnIndex: number,
+    newBlocks: SectionBlockContent["column_blocks"][0]
+  ) => {
+    const newColumns = [...(processedContent.column_blocks || [])];
+    newColumns[columnIndex] = newBlocks;
+    onChange({ ...processedContent, column_blocks: newColumns });
+  };
+
+  // Get blocks for a specific column from the 2D array
+  const getColumnBlocks = (columnIndex: number) => {
+    // With 2D array structure, directly return the column's blocks
+    return (processedContent.column_blocks || [])[columnIndex] || [];
+  };
+
+  // Parse drag item ID to get column and block indices
+  const parseDragId = (id: string) => {
+    if (!id) return null;
+    const blockMatch = id.match(/^(hero|section)-column-(\d+)-block-(\d+)$/);
+    if (blockMatch) {
+      return {
+        type: "block",
+        blockType: blockMatch[1],
+        columnIndex: parseInt(blockMatch[2], 10),
+        blockIndex: parseInt(blockMatch[3], 10),
+      };
+    }
+    const droppableMatch = id.match(/^(hero|section)-column-droppable-(\d+)$/);
+    if (droppableMatch) {
+      return {
+        type: "column",
+        blockType: droppableMatch[1],
+        columnIndex: parseInt(droppableMatch[2], 10),
+      };
+    }
+    return null;
+  };
+
+  // Handle drag start - store the dragged block for overlay
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setActiveId(active.id.toString());
+
+    const parsed = parseDragId(active.id.toString());
+    if (
+      parsed &&
+      parsed.type === "block" &&
+      parsed.columnIndex !== undefined &&
+      parsed.blockIndex !== undefined
+    ) {
+      const block = (processedContent.column_blocks || [])[parsed.columnIndex]?.[
+        parsed.blockIndex
+      ];
+      setDraggedBlock(block);
+    }
+  };
+
+  // Handle drag end - move blocks between columns
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    setDraggedBlock(null);
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const activeData = parseDragId(active.id.toString());
+    const overData = parseDragId(over.id.toString());
+
+    if (!activeData) {
+      return;
+    }
+
+    const newColumnBlocks = [...(processedContent.column_blocks || [])];
+    const sourceColumnIndex = activeData.columnIndex;
+    const sourceBlockIndex = activeData.blockIndex;
+
+    // Guard against invalid source data
+    if (sourceColumnIndex === undefined || sourceBlockIndex === undefined)
+      return;
+
+    const sourceColumn = newColumnBlocks[sourceColumnIndex];
+    if (!sourceColumn) return;
+
+    // Remove the block from the source column
+    const [movedBlock] = sourceColumn.splice(sourceBlockIndex, 1);
+    if (!movedBlock) return;
+
+    // Determine the target and insert the block
+    if (overData?.type === "block") {
+      // Scenario 1: Dropped onto another block
+      const targetColumnIndex = overData.columnIndex;
+      const targetBlockIndex = overData.blockIndex;
+      if (
+        newColumnBlocks[targetColumnIndex] &&
+        targetBlockIndex !== undefined
+      ) {
+        newColumnBlocks[targetColumnIndex].splice(
+          targetBlockIndex,
+          0,
+          movedBlock
+        );
+      }
+    } else if (overData?.type === "column") {
+      // Scenario 2: Dropped on an empty column's droppable area
+      const targetColumnIndex = overData.columnIndex;
+      if (newColumnBlocks[targetColumnIndex]) {
+        newColumnBlocks[targetColumnIndex].push(movedBlock);
+      }
+    } else {
+      // Scenario 3: Invalid drop, return block to original position
+      sourceColumn.splice(sourceBlockIndex, 0, movedBlock);
+      return; // Exit without calling onChange
+    }
+
+    // Final state update
+    onChange({
+      ...processedContent,
+      column_blocks: newColumnBlocks,
+    });
+  };
+
+  // Custom drop animation for better visual feedback
+  const dropAnimation: DropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+      styles: {
+        active: {
+          opacity: "0.5",
+        },
+      },
+    }),
+  };
+
+return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="space-y-6 p-4 border-t mt-2">
+        {isConfigPanelOpen && (
+          <SectionConfigPanel
+            content={processedContent}
+            onChange={(newPartialContent) => {
+              onChange({ ...processedContent, ...newPartialContent });
+            }}
+          />
+        )}
+
+        {/* Column Content Management */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+              Column Content
+            </h3>
+          </div>
+
+          <SortableContext
+            items={(processedContent.column_blocks || [])
+              .flatMap((columnBlocks, columnIndex) =>
+                columnBlocks.map(
+                  (_, blockIndex) =>
+                    `${blockType}-column-${columnIndex}-block-${blockIndex}`
+                )
+              )
+              .concat(
+                Array.from(
+                  { length: (processedContent.column_blocks || []).length },
+                  (_, i) => `${blockType}-column-droppable-${i}`
+                )
+              )}
+            strategy={verticalListSortingStrategy}
+          >
+            <div
+              className={
+                (processedContent.column_blocks || []).length === 1
+                  ? "block"
+                  : `grid gap-4
+                    grid-cols-${processedContent.responsive_columns.mobile}
+                    md:grid-cols-${processedContent.responsive_columns.tablet}
+                    lg:grid-cols-${processedContent.responsive_columns.desktop}`
+              }
+            >
+              {Array.from({ length: (processedContent.column_blocks || []).length }, (_, columnIndex) => (
+                <ColumnEditor
+                  key={`${blockType}-column-${columnIndex}`}
+                  columnIndex={columnIndex}
+                  blocks={getColumnBlocks(columnIndex)}
+                  onBlocksChange={(newBlocks) =>
+                    handleColumnBlocksChange(columnIndex, newBlocks)
+                  }
+                  blockType={blockType}
+                />
+              ))}
+            </div>
+          </SortableContext>
+
+          {/* Drag overlay for visual feedback during cross-column dragging */}
+          <DragOverlay dropAnimation={dropAnimation}>
+            {activeId && draggedBlock ? (
+              <div className="p-2 border border-blue-300 dark:border-blue-600 rounded bg-blue-50 dark:bg-blue-900/50 shadow-lg opacity-90">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300 capitalize">
+                    {getBlockDefinition(draggedBlock.block_type)?.label ||
+                      draggedBlock.block_type}
+                  </span>
+                </div>
+                <div className="text-xs text-blue-600 dark:text-blue-400 mt-1">
+                  {draggedBlock.block_type === "text" && (
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html:
+                          (
+                            draggedBlock.content.html_content || "Empty text"
+                          ).substring(0, 30) + "...",
+                      }}
+                    />
+                  )}
+                  {draggedBlock.block_type === "heading" && (
+                    <div>
+                      H{draggedBlock.content.level || 1}:{" "}
+                      {(
+                        draggedBlock.content.text_content || "Empty heading"
+                      ).substring(0, 20) + "..."}
+                    </div>
+                  )}
+                  {draggedBlock.block_type === "image" && (
+                    <div>
+                      Image: {draggedBlock.content.alt_text || "No alt text"}
+                    </div>
+                  )}
+                  {draggedBlock.block_type === "button" && (
+                    <div>Button: {draggedBlock.content.text || "No text"}</div>
+                  )}
+                  {draggedBlock.block_type === "video_embed" && (
+                    <div>Video: {draggedBlock.content.title || "No title"}</div>
+                  )}
+                  {draggedBlock.block_type === "posts_grid" && (
+                    <div>
+                      Posts Grid: {draggedBlock.content.columns || 3} cols
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : null}
+          </DragOverlay>
+        </div>
+      </div>
+    </DndContext>
+  );
+}