create-nextblock 0.13.1 → 0.13.2

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

@@ -1,16 +1,17 @@
 // app/cms/blocks/components/BackgroundSelector.tsx
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useTransition } from "react";
 import Image from "next/image";
 import { Label, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, Button, Input, Checkbox } from "@nextblock-cms/ui";
 import { CustomSelectWithInput, ColorPicker } from "@nextblock-cms/ui";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { Trash } from "lucide-react";
+import { Trash, DownloadCloud } from "lucide-react";
 import type { Database } from "@nextblock-cms/db";
 import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import MediaPickerDialog from "../../media/components/MediaPickerDialog";
 import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
+import { importExternalImageToMedia } from "../../media/import-external-image";
 
 type Media = Database["public"]["Tables"]["media"]["Row"];
 
@@ -26,6 +27,13 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
   const [minHeight, setMinHeight] = useState(background?.min_height || "");
   const [imagePosition, setImagePosition] = useState<string>(selectedImage?.position || "center");
   const [overlayDirection, setOverlayDirection] = useState(selectedImage?.overlay?.gradient?.direction || "to bottom");
+  const [externalBgUrlInput, setExternalBgUrlInput] = useState("");
+  const [bgImportError, setBgImportError] = useState<string | null>(null);
+  const [isBgImporting, startBgImport] = useTransition();
+  const externalBgUrl =
+    selectedImage && typeof selectedImage.external_url === "string" && /^https?:\/\//i.test(selectedImage.external_url)
+      ? selectedImage.external_url
+      : null;
 
   useEffect(() => {
     setMinHeight(background?.min_height || "");
@@ -93,6 +101,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
       image: {
         media_id: "",
         object_key: "",
+        external_url: undefined,
         size: "cover",
         position: "center",
         overlay: undefined,
@@ -100,6 +109,53 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
     });
   };
 
+  const handleUseExternalBgUrl = () => {
+    const url = externalBgUrlInput.trim();
+    if (!/^https?:\/\//i.test(url)) {
+      setBgImportError("Enter a valid http(s) image URL.");
+      return;
+    }
+    setBgImportError(null);
+    onChange({
+      type: "image",
+      image: {
+        ...selectedImage,
+        external_url: url,
+        media_id: undefined,
+        object_key: undefined,
+        size: selectedImage?.size || "cover",
+        position: selectedImage?.position || "center",
+      },
+    });
+    setExternalBgUrlInput("");
+  };
+
+  const handleImportBgToLibrary = () => {
+    if (!externalBgUrl) return;
+    setBgImportError(null);
+    startBgImport(async () => {
+      const result = await importExternalImageToMedia({ url: externalBgUrl, altText: selectedImage?.alt_text });
+      if ("error" in result) {
+        setBgImportError(result.error);
+        return;
+      }
+      onChange({
+        type: "image",
+        image: {
+          ...selectedImage,
+          external_url: undefined,
+          media_id: result.media.id,
+          object_key: result.media.object_key,
+          width: result.media.width || undefined,
+          height: result.media.height || undefined,
+          blur_data_url: result.media.blur_data_url || undefined,
+          size: selectedImage?.size || "cover",
+          position: selectedImage?.position || "center",
+        },
+      });
+    });
+  };
+
   const handleImagePropertyChange = (prop: "size" | "position", value: string) => {
     if (background?.type === "image" && background.image) {
       onChange({ ...background, image: { ...background.image, [prop]: value } });
@@ -292,24 +348,46 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
         {backgroundType === "image" && (
           <div className="space-y-1.5">
             <Label className="text-xs uppercase font-bold text-muted-foreground tracking-wider leading-none">Image</Label>
-            {selectedImage?.object_key ? (
+            {(selectedImage?.object_key || externalBgUrl) ? (
               <div className="flex items-center gap-2 h-9">
                 <div className="relative w-9 h-9 rounded border bg-muted overflow-hidden flex-shrink-0 shadow-sm">
-                  {selectedImageUrl ? (
+                  {externalBgUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={externalBgUrl}
+                      alt="Thumbnail"
+                      className="absolute inset-0 h-full w-full object-cover"
+                      style={{ objectPosition: selectedImage?.position }}
+                    />
+                  ) : selectedImageUrl ? (
                     <Image
                       src={selectedImageUrl}
                       alt="Thumbnail"
                       fill
                       sizes="36px"
                       className="object-cover"
-                      style={{ objectPosition: selectedImage.position }}
+                      style={{ objectPosition: selectedImage?.position }}
                     />
                   ) : null}
-                  {selectedImage.overlay && (
+                  {selectedImage?.overlay && (
                     <div className="absolute inset-0" style={{ background: generateGradientCss(selectedImage.overlay.gradient) }} />
                   )}
                 </div>
                 <div className="flex items-center gap-1.5">
+                  {externalBgUrl && (
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      className="h-9 px-2.5 text-xs"
+                      onClick={handleImportBgToLibrary}
+                      disabled={isBgImporting}
+                      title="Save this image to your media library"
+                    >
+                      <DownloadCloud className="mr-1 h-3.5 w-3.5" />
+                      {isBgImporting ? "Saving..." : "Save"}
+                    </Button>
+                  )}
                   <MediaPickerDialog
                     triggerLabel="Change"
                     triggerVariant="outline"
@@ -334,7 +412,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
                 </div>
               </div>
             ) : (
-              <div className="h-9 flex items-center">
+              <div className="h-9 flex items-center gap-2">
                 <MediaPickerDialog
                   triggerLabel="Select Image"
                   triggerVariant="outline"
@@ -346,13 +424,30 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
                     Select Image
                   </Button>
                 </MediaPickerDialog>
+                <Input
+                  value={externalBgUrlInput}
+                  onChange={(e) => setExternalBgUrlInput(e.target.value)}
+                  placeholder="or paste image URL"
+                  className="h-9 text-xs w-[170px]"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-9 px-2.5 text-xs"
+                  onClick={handleUseExternalBgUrl}
+                  disabled={!externalBgUrlInput.trim()}
+                >
+                  Use URL
+                </Button>
               </div>
             )}
+            {bgImportError && <p className="text-xs text-red-500">{bgImportError}</p>}
           </div>
         )}
 
         {/* Overlay Checkbox */}
-        {backgroundType === "image" && selectedImage?.object_key && (
+        {backgroundType === "image" && (selectedImage?.object_key || externalBgUrl) && (
           <div className="space-y-1.5">
             <Label className="text-xs uppercase font-bold text-muted-foreground tracking-wider leading-none">Overlay</Label>
             <div className="flex items-center justify-center h-9 border border-input rounded-md px-3 bg-background">

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

@@ -68,6 +68,33 @@ interface EditingNestedBlockInfo {
   blockData: NestedBlockData;
 }
 
+// AI-generated Live Draft blocks arrive without a DB id, so key={block.id} collides
+// (all undefined) and dnd/inline-edit/delete — which all key off block.id — break for
+// them. Give any block missing (or duplicating) an id a deterministic, unique negative
+// temp id. Deterministic (no Math.random) so SSR and client render identical keys.
+function withStableBlockIds(blocks: Block[]): Block[] {
+  const used = new Set<number>();
+  let nextTempId = -1;
+  const takeTempId = () => {
+    while (used.has(nextTempId)) {
+      nextTempId -= 1;
+    }
+    used.add(nextTempId);
+    const id = nextTempId;
+    nextTempId -= 1;
+    return id;
+  };
+
+  return blocks.map((block) => {
+    const id = block.id;
+    if (id != null && !used.has(id)) {
+      used.add(id);
+      return block;
+    }
+    return { ...block, id: takeTempId() };
+  });
+}
+
 export default function BlockEditorArea({ parentId, parentType, initialBlocks, languageId }: BlockEditorAreaProps) {
   // Prevent SSR/hydration mismatches from dnd-kit by rendering on client only
   // Important: keep hooks order stable across renders; defer early return until after hooks
@@ -76,7 +103,9 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
     setIsMounted(true);
   }, []);
 
-  const [blocks, setBlocks] = useState<Block[]>(() => initialBlocks.sort((a, b) => a.order - b.order));
+  const [blocks, setBlocks] = useState<Block[]>(() =>
+    withStableBlockIds(initialBlocks).sort((a, b) => a.order - b.order)
+  );
   const lastSavedBlocks = useRef(blocks);
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -89,7 +118,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
   const [tempNestedBlockContent, setTempNestedBlockContent] = useState<Json | null>(null);
 
   useEffect(() => {
-    const sortedBlocks = initialBlocks.sort((a, b) => a.order - b.order);
+    const sortedBlocks = withStableBlockIds(initialBlocks).sort((a, b) => a.order - b.order);
     setBlocks(sortedBlocks);
     lastSavedBlocks.current = sortedBlocks;
   }, [initialBlocks]);

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

@@ -180,22 +180,44 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
          );
       }
       case 'image': {
-        const imageUrl = resolveMediaUrl(block.content.object_key) || block.content.src;
+        const externalUrl =
+          typeof block.content.external_url === 'string' &&
+          /^https?:\/\//i.test(block.content.external_url.trim())
+            ? block.content.external_url.trim()
+            : null;
+        const imageUrl = externalUrl || resolveMediaUrl(block.content.object_key) || block.content.src;
+        if (!imageUrl) {
+          return (
+            <div
+              className={cn(
+                "flex h-20 w-full items-center justify-center gap-2 rounded border border-dashed",
+                isDarkBackground ? "border-white/20 text-white/50" : "border-muted-foreground/30 text-muted-foreground"
+              )}
+            >
+              <ImageIcon className="h-5 w-5" />
+              <span className="text-[10px]">No image selected</span>
+            </div>
+          );
+        }
         return (
-             <div className="flex gap-3">
-                <div className="flex-shrink-0 h-10 w-10 bg-muted/20 rounded overflow-hidden flex items-center justify-center border border-white/10">
-                    {imageUrl ? (
-                        /* eslint-disable-next-line @next/next/no-img-element */
-                        <img src={imageUrl} alt={block.content.alt_text || 'Block image'} className="h-full w-full object-cover" />
-                    ) : (
-                        <ImageIcon className={cn("h-5 w-5", isDarkBackground ? "text-white/50" : "text-muted-foreground")} />
-                    )}
-                </div>
-                <div className="flex flex-col justify-center">
-                    <span className="text-xs font-medium truncate max-w-[150px]">{block.content.alt_text || 'No description'}</span>
-                     <span className={cn("text-[10px] truncate max-w-[150px]", isDarkBackground ? "text-white/50" : "text-muted-foreground")}>{imageUrl ? 'Image set' : 'No image selected'}</span>
-                </div>
-             </div>
+          <figure className="w-full">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={imageUrl}
+              alt={block.content.alt_text || 'Block image'}
+              className="h-auto w-full rounded border border-white/10"
+            />
+            {(block.content.caption || block.content.alt_text) && (
+              <figcaption
+                className={cn(
+                  "mt-1 truncate text-[10px]",
+                  isDarkBackground ? "text-white/60" : "text-muted-foreground"
+                )}
+              >
+                {block.content.caption || block.content.alt_text}
+              </figcaption>
+            )}
+          </figure>
         );
       }
       case 'button': {

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

@@ -179,22 +179,33 @@ export default function EditableBlock({
        }
        case 'image': {
          const content = (block.content || {}) as any;
-         const imageUrl = resolveMediaUrl(content.object_key) || content.src;
+         const externalUrl =
+           typeof content.external_url === 'string' && /^https?:\/\//i.test(content.external_url.trim())
+             ? content.external_url.trim()
+             : null;
+         const imageUrl = externalUrl || resolveMediaUrl(content.object_key) || content.src;
+         if (!imageUrl) {
+           return (
+             <div className="flex h-28 w-full items-center justify-center gap-2 rounded border border-dashed py-2 text-muted-foreground">
+               <ImageIcon className="h-6 w-6" />
+               <span className="text-sm">No image selected</span>
+             </div>
+           );
+         }
          return (
-              <div className="flex gap-4 py-2">
-                 <div className="flex-shrink-0 h-16 w-16 bg-muted rounded overflow-hidden flex items-center justify-center border">
-                     {imageUrl ? (
-                         /* eslint-disable-next-line @next/next/no-img-element */
-                         <img src={imageUrl} alt={content.alt_text || 'Block image'} className="h-full w-full object-cover" />
-                     ) : (
-                         <ImageIcon className="h-6 w-6 text-muted-foreground" />
-                     )}
-                 </div>
-                 <div className="flex flex-col justify-center">
-                     <span className="text-sm font-medium truncate max-w-[200px]">{content.alt_text || 'No description'}</span>
-                     <span className="text-xs text-muted-foreground truncate max-w-[200px]">{imageUrl ? 'Image set' : 'No image selected'}</span>
-                 </div>
-              </div>
+           <figure className="w-full py-1">
+             {/* eslint-disable-next-line @next/next/no-img-element */}
+             <img
+               src={imageUrl}
+               alt={content.alt_text || 'Block image'}
+               className="h-auto w-full rounded border"
+             />
+             {(content.caption || content.alt_text) && (
+               <figcaption className="mt-1 truncate text-xs text-muted-foreground">
+                 {content.caption || content.alt_text}
+               </figcaption>
+             )}
+           </figure>
          );
        }
        case 'button': {

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

@@ -1,7 +1,7 @@
 // app/cms/blocks/editors/ImageBlockEditor.tsx
 "use client";
 
-import React, { useState } from 'react'; // Removed useTransition as it's not used here
+import React, { useState, useTransition } from 'react';
 import Image from 'next/image';
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
@@ -12,42 +12,44 @@ type Media = Database['public']['Tables']['media']['Row'];
 export type ImageBlockContent = {
     media_id: string | null;
     object_key: string | null;
+    external_url?: 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 "../../media/components/MediaPickerDialog"; // Import the upload form
+import { ImageIcon, X as XIcon, Link as LinkIcon, DownloadCloud } from 'lucide-react';
+import MediaPickerDialog from "../../media/components/MediaPickerDialog";
 import { BlockEditorProps } from '../components/BlockEditorModal';
 import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { importExternalImageToMedia } from "../../media/import-external-image";
+
+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));
+};
 
 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 [externalUrlInput, setExternalUrlInput] = useState("");
+  const [importError, setImportError] = useState<string | null>(null);
+  const [isImporting, startImport] = useTransition();
 
   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);
+    setImportError(null);
     onChange({
       media_id: mediaItem.id,
       object_key: mediaItem.object_key,
-      alt_text: newAlt, // overwrite alt when image changes
+      external_url: null,
+      alt_text: newAlt,
       caption: content.caption || "",
       width: mediaItem.width,
       height: mediaItem.height,
@@ -55,52 +57,107 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
     });
   };
 
-  const handleAltTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleUseExternalUrl = () => {
+    const url = externalUrlInput.trim();
+    if (!/^https?:\/\//i.test(url)) {
+      setImportError("Enter a valid http(s) image URL.");
+      return;
+    }
+    setImportError(null);
+    setSelectedMediaObjectKey(null);
     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
+      media_id: null,
+      object_key: null,
+      external_url: url,
+      alt_text: content.alt_text || "",
+      caption: content.caption || "",
+      width: null,
+      height: null,
+      blur_data_url: null,
     });
+    setExternalUrlInput("");
   };
 
-  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 handleImportToLibrary = () => {
+    if (!content.external_url) return;
+    setImportError(null);
+    startImport(async () => {
+      const result = await importExternalImageToMedia({
+        url: content.external_url as string,
+        altText: content.alt_text || undefined,
+      });
+      if ("error" in result) {
+        setImportError(result.error);
+        return;
+      }
+      setSelectedMediaObjectKey(result.media.object_key);
+      onChange({
+        media_id: result.media.id,
+        object_key: result.media.object_key,
+        external_url: null,
+        alt_text: content.alt_text || result.media.alt_text || "",
+        caption: content.caption || "",
+        width: result.media.width || null,
+        height: result.media.height || null,
+        blur_data_url: result.media.blur_data_url,
+      });
     });
   };
 
+  const handleAltTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...content, object_key: selectedMediaObjectKey, alt_text: event.target.value });
+  };
+
+  const handleCaptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...content, object_key: selectedMediaObjectKey, caption: event.target.value });
+  };
+
   const handleRemoveImage = () => {
     setSelectedMediaObjectKey(null);
-    onChange({ media_id: null, object_key: null, alt_text: "", caption: "", width: null, height: null, blur_data_url: null });
+    setImportError(null);
+    onChange({ media_id: null, object_key: null, external_url: null, alt_text: "", caption: "", width: null, height: null, blur_data_url: null });
   };
 
   const displayObjectKey = content.object_key || selectedMediaObjectKey;
   const displayImageUrl = resolveMediaUrl(displayObjectKey);
+  const hasImage = Boolean(displayObjectKey || content.external_url);
 
   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 && displayImageUrl && 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 */}
+      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center gap-2">
+        {content.external_url ? (
+          <div className="relative group inline-block w-full text-center">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={content.external_url}
+              alt={content.alt_text || "External image"}
+              className="rounded-md object-contain mx-auto max-h-[200px] max-w-full"
+            />
+            <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 className="mt-2 flex items-center justify-center">
+              <Button type="button" size="sm" variant="secondary" onClick={handleImportToLibrary} disabled={isImporting}>
+                <DownloadCloud className="mr-1.5 h-3.5 w-3.5" />
+                {isImporting ? "Saving to library..." : "Save to media library"}
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              External image placeholder. Save it to your library to make it a permanent, optimized asset.
+            </p>
+          </div>
+        ) : displayImageUrl && 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 }}>
             <Image
               src={displayImageUrl}
               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
+              className="rounded-md object-contain"
+              style={{ maxHeight: '200px' }}
               placeholder={content.blur_data_url ? "blur" : "empty"}
               blurDataURL={content.blur_data_url || undefined}
             />
@@ -110,7 +167,7 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
               onClick={handleRemoveImage} title="Remove Image"
             > <XIcon className="h-3 w-3" /> </Button>
           </div>
-        ) : !isLoadingMediaDetails && displayImageUrl ? ( // Fallback if width/height are missing but key exists
+        ) : displayImageUrl ? (
           <div className="relative group inline-block">
             <Image
               src={displayImageUrl}
@@ -127,24 +184,44 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
             > <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 ? (
+        ) : 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" />
+        <MediaPickerDialog triggerLabel={hasImage ? "Change Image" : "Select from Library"} onSelect={handleSelectMediaFromLibrary} accept={(m)=>!!m.file_type?.startsWith("image/")} title="Select or Upload Image" />
+
+        {!content.external_url && (
+          <div className="w-full pt-2 mt-1 border-t">
+            <Label className="text-xs text-muted-foreground flex items-center gap-1">
+              <LinkIcon className="h-3 w-3" /> or paste an image URL
+            </Label>
+            <div className="flex gap-2 mt-1">
+              <Input
+                value={externalUrlInput}
+                onChange={(e) => setExternalUrlInput(e.target.value)}
+                placeholder="https://images.example.com/photo.jpg"
+                className="text-sm"
+              />
+              <Button type="button" variant="outline" size="sm" onClick={handleUseExternalUrl} disabled={!externalUrlInput.trim()}>
+                Use URL
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {importError && <p className="text-xs text-red-500 mt-1 w-full text-center">{importError}</p>}
       </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} />
+        <Input id={`image-alt-${content.media_id || 'new'}`} value={content.alt_text || ""} onChange={handleAltTextChange} className="mt-1" disabled={!hasImage} />
       </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} />
+        <Input id={`image-caption-${content.media_id || 'new'}`} value={content.caption || ""} onChange={handleCaptionChange} className="mt-1" disabled={!hasImage} />
       </div>
     </div>
   );
 }
-

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

@@ -83,7 +83,14 @@ function generateBackgroundStyles(background: SectionBlockContent['background'])
     
     case 'image':
       if (background.image) {
-        const imageUrl = resolveMediaUrl(background.image.object_key);
+        // Prefer an external stock-photo URL (external_url) before the stored R2
+        // object key, so AI-inserted hero backgrounds paint in the editor too.
+        const externalBgUrl =
+          typeof background.image.external_url === 'string' &&
+          /^https?:\/\//i.test(background.image.external_url.trim())
+            ? background.image.external_url.trim()
+            : null;
+        const imageUrl = externalBgUrl || resolveMediaUrl(background.image.object_key);
         if (!imageUrl) {
           break;
         }