create-nextblock 0.12.16 → 0.13.2

package/templates/nextblock-template/app/cms/interactions/InteractionsModerationClient.tsx

@@ -4,8 +4,17 @@ import React, { useState, useTransition } from "react";
 import { Button } from "@nextblock-cms/ui";
 import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@nextblock-cms/ui";
 import { updateInteractionStatus, saveNotificationEmails } from "../../actions/interactions";
 import { cn } from "@nextblock-cms/utils";
+import EmailRecipientsInput, { type EmailRecipientsInputHandle } from "./EmailRecipientsInput";
 import {
   MessageSquare,
   Check,
@@ -31,44 +40,100 @@ export default function InteractionsModerationClient({
 }: InteractionsModerationClientProps) {
   const [interactions, setInteractions] = useState<any[]>(initialInteractions);
 
-  // Notification settings states
-  const [emailsInput, setEmailsInput] = useState("");
+  // Notification settings states. `emails` is the working (editable) list; `savedEmails`
+  // mirrors what is persisted, so cancelling can revert unsaved edits.
+  const [emails, setEmails] = useState<string[]>([]);
+  const [savedEmails, setSavedEmails] = useState<string[]>([]);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [savingEmails, setSavingEmails] = useState(false);
   const [settingsError, setSettingsError] = useState<string | null>(null);
   const [settingsSuccess, setSettingsSuccess] = useState<string | null>(null);
+  const recipientsRef = React.useRef<EmailRecipientsInputHandle>(null);
+  const autoCloseTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearAutoClose = () => {
+    if (autoCloseTimer.current) {
+      clearTimeout(autoCloseTimer.current);
+      autoCloseTimer.current = null;
+    }
+  };
+
+  // Cancel any pending success auto-close timer on unmount.
+  React.useEffect(() => clearAutoClose, []);
+
+  const parseEmails = (raw: string | undefined | null): string[] =>
+    (raw || "")
+      .split(",")
+      .map((e) => e.trim())
+      .filter(Boolean);
 
   React.useEffect(() => {
     if (isAdmin) {
       import("../../actions/interactions").then(({ getNotificationEmails }) => {
         getNotificationEmails().then((res) => {
           if (res.success && res.emails) {
-            setEmailsInput(res.emails);
+            const list = parseEmails(res.emails);
+            setEmails(list);
+            setSavedEmails(list);
           }
         });
       });
     }
   }, [isAdmin]);
 
+  const openSettings = () => {
+    // Start from the last-saved list with a clean slate — discards any edits abandoned
+    // in a previous open, and clears stale success/error banners.
+    clearAutoClose();
+    setEmails(savedEmails);
+    setSettingsError(null);
+    setSettingsSuccess(null);
+    setIsSettingsOpen(true);
+  };
+
+  const closeSettings = () => {
+    if (savingEmails) return; // don't dismiss mid-save
+    clearAutoClose();
+    setEmails(savedEmails); // revert unsaved edits
+    setSettingsError(null);
+    setSettingsSuccess(null);
+    setIsSettingsOpen(false);
+  };
+
   const handleSaveEmails = async () => {
+    // Commit any address still typed in the input. `null` means it's invalid — the
+    // input already shows the inline error, so don't proceed to save.
+    const finalList = recipientsRef.current?.flush();
+    if (finalList === null) return;
+    const list = finalList ?? emails;
+
+    clearAutoClose(); // supersede any prior success timer
     setSavingEmails(true);
     setSettingsError(null);
     setSettingsSuccess(null);
 
-    const res = await saveNotificationEmails(emailsInput);
-    setSavingEmails(false);
-
-    if (res.error) {
-      setSettingsError(res.error);
-    } else {
-      setSettingsSuccess("Notification settings saved successfully.");
-      if (res.emails) {
-        setEmailsInput(res.emails);
+    try {
+      const res = await saveNotificationEmails(list.join(", "));
+      if (res.error) {
+        setSettingsError(res.error);
+      } else {
+        const saved = parseEmails(res.emails);
+        setEmails(saved);
+        setSavedEmails(saved);
+        setSettingsSuccess("Notification settings saved successfully.");
+        // Auto-close after a beat. Tracked so a reopen/second save cancels it.
+        autoCloseTimer.current = setTimeout(() => {
+          autoCloseTimer.current = null;
+          setSettingsSuccess(null);
+          setIsSettingsOpen(false);
+        }, 1500);
       }
-      setTimeout(() => {
-        setSettingsSuccess(null);
-        setIsSettingsOpen(false);
-      }, 1500);
+    } catch {
+      // The server action rejected (offline, 500, auth outage). Surface it — the
+      // `finally` re-enables the close paths so the dialog can never get stuck.
+      setSettingsError("Couldn't save settings. Check your connection and try again.");
+    } finally {
+      setSavingEmails(false);
     }
   };
   const [filterType, setFilterType] = useState<"all" | "review" | "comment">("all");
@@ -141,7 +206,7 @@ export default function InteractionsModerationClient({
         {isAdmin && (
           <div className="flex items-center gap-2 self-start md:self-auto">
             <Button
-              onClick={() => setIsSettingsOpen(true)}
+              onClick={openSettings}
               className="flex items-center gap-2 text-xs"
               variant="outline"
             >
@@ -347,62 +412,64 @@ export default function InteractionsModerationClient({
         )}
       </div>
 
-      {/* Settings Modal */}
-      {isSettingsOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/45 backdrop-blur-sm animate-in fade-in duration-200">
-          <div className="bg-background border border-border rounded-2xl max-w-md w-full p-6 shadow-xl space-y-4 animate-in zoom-in-95 duration-200">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
-                <Mail className="h-5 w-5 text-primary" />
-                Notification Settings
-              </h3>
-              <button
-                onClick={() => setIsSettingsOpen(false)}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            <p className="text-sm text-muted-foreground text-left">
+      {/* Settings Modal — Radix Dialog handles focus trap/restore, Escape, and overlay
+          click. onOpenChange fires for every close path; closeSettings() blocks dismissal
+          mid-save and reverts unsaved edits. */}
+      <Dialog
+        open={isSettingsOpen}
+        onOpenChange={(open) => {
+          if (!open) closeSettings();
+          else setIsSettingsOpen(true);
+        }}
+      >
+        <DialogContent
+          className="max-w-md rounded-2xl space-y-4"
+          onInteractOutside={(e) => {
+            if (savingEmails) e.preventDefault();
+          }}
+          onEscapeKeyDown={(e) => {
+            if (savingEmails) e.preventDefault();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Mail className="h-5 w-5 text-primary" />
+              Notification Settings
+            </DialogTitle>
+            <DialogDescription>
               Configure which email addresses receive notification alerts when new pending reviews or comments are submitted.
-            </p>
-            <div className="space-y-1.5 text-left">
-              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block">
-                Email Recipients
-              </label>
-              <textarea
-                value={emailsInput}
-                onChange={(e) => setEmailsInput(e.target.value)}
-                placeholder="admin@example.com, moderator@example.com"
-                className="w-full min-h-[80px] bg-background border border-border rounded-xl px-3 py-2 text-sm text-foreground focus:ring-1 focus:ring-primary focus:outline-none"
-              />
-              <span className="text-[10px] text-muted-foreground">
-                Enter a comma-separated list of email addresses.
-              </span>
-            </div>
-
-            {settingsError && <div className="text-xs font-medium text-destructive text-left">{settingsError}</div>}
-            {settingsSuccess && <div className="text-xs font-medium text-emerald-600 text-left">{settingsSuccess}</div>}
-
-            <div className="flex justify-end gap-3 pt-2">
-              <Button
-                variant="ghost"
-                onClick={() => setIsSettingsOpen(false)}
-                disabled={savingEmails}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleSaveEmails}
-                disabled={savingEmails}
-                className="min-w-[100px]"
-              >
-                {savingEmails ? "Saving..." : "Save Settings"}
-              </Button>
-            </div>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-1.5 text-left">
+            <label
+              htmlFor="notification-emails-input"
+              className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block"
+            >
+              Email Recipients
+            </label>
+            <EmailRecipientsInput
+              ref={recipientsRef}
+              inputId="notification-emails-input"
+              value={emails}
+              onChange={setEmails}
+              disabled={savingEmails}
+            />
           </div>
-        </div>
-      )}
+
+          {settingsError && <div role="alert" className="text-xs font-medium text-destructive text-left">{settingsError}</div>}
+          {settingsSuccess && <div className="text-xs font-medium text-emerald-600 text-left">{settingsSuccess}</div>}
+
+          <DialogFooter className="gap-3 sm:gap-2">
+            <Button variant="ghost" onClick={closeSettings} disabled={savingEmails}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveEmails} disabled={savingEmails} className="min-w-[100px]">
+              {savingEmails ? "Saving..." : "Save Settings"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

package/templates/nextblock-template/app/cms/media/import-external-image.ts

@@ -0,0 +1,289 @@
+// app/cms/media/import-external-image.ts
+"use server";
+
+import "server-only";
+
+import sharp from "sharp";
+import { PutObjectCommand } from "@aws-sdk/client-s3";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { recordMediaUpload } from "@nextblock-cms/db";
+import { getS3Client } from "@nextblock-cms/utils/server";
+
+import { getStorageBackend, getStorageBucket } from "../../../lib/storage/provider";
+import { supabaseUploadObject } from "../../../lib/storage/supabase-storage";
+import { resolveMediaUrl } from "../../../lib/media/resolveMediaUrl";
+
+const MAX_IMPORT_BYTES = 15 * 1024 * 1024; // 15MB
+const IMPORT_TIMEOUT_MS = 15000;
+
+type ImportExternalImageResult =
+  | {
+      success: true;
+      media: {
+        id: string;
+        object_key: string;
+        width: number;
+        height: number;
+        url: string;
+        blur_data_url: string | null;
+        alt_text: string;
+      };
+    }
+  | { error: string };
+
+/**
+ * Reject local/loopback/private/link-local hosts and cloud metadata endpoints so an
+ * admin-supplied URL cannot be used to probe internal infrastructure (SSRF).
+ */
+function isBlockedImportHost(hostname: string): boolean {
+  const host = hostname.trim().toLowerCase().replace(/\.$/, "").replace(/^\[|\]$/g, "");
+
+  if (
+    !host ||
+    host === "localhost" ||
+    host.endsWith(".localhost") ||
+    host.endsWith(".local") ||
+    host.endsWith(".internal") ||
+    host === "metadata.google.internal"
+  ) {
+    return true;
+  }
+
+  if (host === "0.0.0.0" || host === "::1" || host.startsWith("fe80:") || host.startsWith("fc") || host.startsWith("fd")) {
+    return true;
+  }
+
+  const ipv4 = host.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);
+
+  if (ipv4) {
+    const a = Number(ipv4[1]);
+    const b = Number(ipv4[2]);
+
+    if (a === 10 || a === 127 || a === 0 || (a === 192 && b === 168) || (a === 169 && b === 254) || (a === 172 && b >= 16 && b <= 31)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function extensionForImage(contentType: string, sharpFormat?: string): string {
+  const format = (sharpFormat || "").toLowerCase();
+  const byFormat: Record<string, string> = { jpeg: "jpg", jpg: "jpg", png: "png", webp: "webp", avif: "avif", gif: "gif", svg: "svg" };
+  if (byFormat[format]) return byFormat[format];
+
+  const ct = contentType.toLowerCase();
+  if (ct.includes("jpeg") || ct.includes("jpg")) return "jpg";
+  if (ct.includes("png")) return "png";
+  if (ct.includes("webp")) return "webp";
+  if (ct.includes("avif")) return "avif";
+  if (ct.includes("gif")) return "gif";
+  if (ct.includes("svg")) return "svg";
+  return "jpg";
+}
+
+function slugifyFileBase(value: string): string {
+  const base = (value || "image")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 40);
+  return base || "image";
+}
+
+/**
+ * Download an external image (e.g. an AI-inserted stock photo) and persist it into the
+ * NextBlock media library (R2 or Supabase Storage) so it becomes a permanent, optimized
+ * asset the page no longer hotlinks. ADMIN/WRITER only.
+ */
+export async function importExternalImageToMedia(input: {
+  url: string;
+  altText?: string;
+  fileName?: string;
+}): Promise<ImportExternalImageResult> {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return { error: "You must be signed in to import an image." };
+  }
+
+  const { data: profile } = await supabase.from("profiles").select("role").eq("id", user.id).single();
+
+  if (!profile || !["ADMIN", "WRITER"].includes(profile.role)) {
+    return { error: "You do not have permission to import media." };
+  }
+
+  let target: URL;
+
+  try {
+    target = new URL(input.url);
+  } catch {
+    return { error: "That is not a valid URL." };
+  }
+
+  if (target.protocol !== "https:" && target.protocol !== "http:") {
+    return { error: "Only http/https image URLs can be imported." };
+  }
+
+  if (isBlockedImportHost(target.hostname)) {
+    return { error: "Refusing to fetch a local, private, or internal address." };
+  }
+
+  // Unsplash API Guidelines require photos to stay hotlinked to their original
+  // image URL — re-hosting them into our own storage is not permitted. Pexels'
+  // license does allow downloading/hosting, so only Unsplash is blocked here.
+  const importHost = target.hostname.toLowerCase();
+  if (importHost === "unsplash.com" || importHost.endsWith(".unsplash.com")) {
+    return {
+      error:
+        "Unsplash requires photos to stay hotlinked, so they can't be saved into your media library. Keep it as an external image (it still displays fine), or use a Pexels photo or your own upload if you need a stored asset.",
+    };
+  }
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), IMPORT_TIMEOUT_MS);
+  let buffer: Buffer;
+  let contentType: string;
+
+  try {
+    const response = await fetch(target.toString(), {
+      headers: { accept: "image/*" },
+      redirect: "follow",
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      return { error: `The image URL responded with HTTP ${response.status}.` };
+    }
+
+    if (isBlockedImportHost(new URL(response.url || target.toString()).hostname)) {
+      return { error: "The image URL redirected to a blocked internal address." };
+    }
+
+    contentType = response.headers.get("content-type") || "";
+
+    if (!/^image\//i.test(contentType)) {
+      return { error: `The URL is not an image (content-type: ${contentType || "unknown"}).` };
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    if (arrayBuffer.byteLength > MAX_IMPORT_BYTES) {
+      return { error: "The image is too large to import (max 15MB)." };
+    }
+
+    buffer = Buffer.from(arrayBuffer);
+  } catch (error) {
+    const aborted = error instanceof Error && /abort/i.test(error.message);
+    return {
+      error: aborted
+        ? "Fetching the image timed out."
+        : `Failed to fetch the image: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  } finally {
+    clearTimeout(timeoutId);
+  }
+
+  let width = 0;
+  let height = 0;
+  let blurDataUrl: string | null = null;
+  let sharpFormat: string | undefined;
+  const isSvg = /svg/i.test(contentType);
+
+  if (!isSvg) {
+    try {
+      const metadata = await sharp(buffer).metadata();
+      width = metadata.width || 0;
+      height = metadata.height || 0;
+      sharpFormat = metadata.format;
+
+      const blurBuffer = await sharp(buffer).resize(16, 16, { fit: "inside" }).webp({ quality: 40 }).toBuffer();
+      blurDataUrl = `data:image/webp;base64,${blurBuffer.toString("base64")}`;
+    } catch {
+      // Non-fatal: proceed without dimensions/blur (e.g. an unusual format sharp can't parse).
+    }
+  }
+
+  const extension = extensionForImage(contentType, sharpFormat);
+  const baseName = slugifyFileBase(
+    input.fileName || input.altText || target.hostname.replace(/^www\./, "").split(".")[0] || "image"
+  );
+  const random = Math.random().toString(36).slice(2, 8);
+  const objectKey = `uploads/${baseName}-${Date.now()}-${random}.${extension}`;
+  const resolvedContentType = contentType || `image/${extension}`;
+
+  try {
+    if (getStorageBackend() === "supabase") {
+      await supabaseUploadObject(objectKey, buffer, resolvedContentType);
+    } else {
+      const s3Client = await getS3Client();
+      const bucket = getStorageBucket();
+
+      if (!s3Client || !bucket) {
+        return { error: "File storage is not configured on this server." };
+      }
+
+      await s3Client.send(
+        new PutObjectCommand({
+          Body: buffer,
+          Bucket: bucket,
+          ContentType: resolvedContentType,
+          Key: objectKey,
+          Metadata: { "uploader-user-id": user.id },
+        })
+      );
+    }
+  } catch (error) {
+    return {
+      error: `Failed to upload the image to storage: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  }
+
+  const publicUrl = resolveMediaUrl(objectKey) ?? "";
+  const fileName = `${baseName}.${extension}`;
+  const altText = (input.altText || baseName.replace(/-/g, " ")).trim();
+  const originalVariant = {
+    fileType: resolvedContentType,
+    height,
+    objectKey,
+    sizeBytes: buffer.byteLength,
+    url: publicUrl,
+    variantLabel: "original",
+    width,
+  };
+
+  const record = await recordMediaUpload(
+    {
+      blurDataUrl: blurDataUrl || undefined,
+      description: altText || undefined,
+      fileName,
+      originalImageDetails: originalVariant,
+      r2OriginalKey: objectKey,
+      r2Variants: [originalVariant],
+    },
+    true
+  );
+
+  if (!record || "error" in record) {
+    return { error: record && "error" in record ? record.error : "Failed to record the imported image." };
+  }
+
+  const media = record.data;
+
+  return {
+    media: {
+      alt_text: (media.description || altText || "").trim(),
+      blur_data_url: media.blur_data_url ?? blurDataUrl,
+      height: media.height || height,
+      id: media.id,
+      object_key: media.object_key,
+      url: publicUrl,
+      width: media.width || width,
+    },
+    success: true,
+  };
+}

package/templates/nextblock-template/app/cms/pages/[id]/edit/EditPageClient.tsx

@@ -4,7 +4,9 @@ import Link from "next/link";
 import React from "react";
 import { Separator } from "@nextblock-cms/ui";
 import { Button } from "@nextblock-cms/ui";
-import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
+import { ViewLiveButton } from "@nextblock-cms/ui";
+import { ArrowLeft, FilePenLine } from "lucide-react";
+import { publishPage } from "../../actions";
 import PageForm from "../../components/PageForm";
 import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
 import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
@@ -31,6 +33,8 @@ interface EditPageClientProps {
   allSiteLanguages: Language[];
   updatePageAction: (formData: FormData) => Promise<{ error?: string } | void>;
   publicPageUrl: string;
+  isLive: boolean;
+  liveViewUrl: string;
   isDraftModeEnabled: boolean;
   initialFeatureImageUrl?: string | null;
   initialFeatureImageId?: string | null;
@@ -43,6 +47,8 @@ export default function EditPageClient({
   allSiteLanguages,
   updatePageAction,
   publicPageUrl,
+  isLive,
+  liveViewUrl,
   isDraftModeEnabled,
   initialFeatureImageUrl,
   initialFeatureImageId,
@@ -105,15 +111,12 @@ export default function EditPageClient({
                 allSiteLanguages={allSiteLanguages}
               />
             )}
-            <Button variant="outline" asChild>
-              <Link
-                href={publicPageUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Eye className="mr-2 h-4 w-4" /> View Live
-              </Link>
-            </Button>
+            <ViewLiveButton
+              href={liveViewUrl}
+              isLive={isLive}
+              label="page"
+              publishAction={() => publishPage(pageId)}
+            />
             <Button variant="secondary" asChild>
               <a
                 href={draftModeUrl}

package/templates/nextblock-template/app/cms/pages/[id]/edit/page.tsx

@@ -20,7 +20,7 @@ interface PageWithBlocks extends Page {
   translation_group_id: string;
 }
 
-async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks; hasDraft: boolean } | null> {
+async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks; hasDraft: boolean; liveStatus: string; liveSlug: string } | null> {
   const supabase = createClient();
   const { data: pageData, error: pageError } = await supabase
     .from("pages")
@@ -71,7 +71,14 @@ async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks
     };
   }
 
-  return { page: pageWithBlocks, hasDraft };
+  return {
+    page: pageWithBlocks,
+    hasDraft,
+    // The LIVE row's status/slug (before the draft overlay above) — the "View
+    // Live" button must reflect what is actually published, not the draft.
+    liveStatus: pageData.status as string,
+    liveSlug: pageData.slug as string,
+  };
 }
 
 
@@ -90,13 +97,15 @@ export default async function EditPage(props: { params: Promise<{ id: string }>
 
   const pageDataResult = await getPageDataWithBlocks(pageId);
   if (!pageDataResult) return notFound();
-  const { page: pageWithBlocks, hasDraft } = pageDataResult;
+  const { page: pageWithBlocks, hasDraft, liveStatus, liveSlug } = pageDataResult;
 
   const allSiteLanguages = await getActiveLanguagesServerSide();
 
   const draft = await draftMode();
   const updatePageWithId = updatePage.bind(null, pageId);
   const publicPageUrl = `/${pageWithBlocks.slug}`;
+  const isLive = liveStatus === "published";
+  const liveViewUrl = liveSlug === "home" ? "/" : `/${liveSlug}`;
   let initialFeatureImageUrl: string | null = null;
   let initialFeatureImageId: string | null = null;
 
@@ -123,6 +132,8 @@ export default async function EditPage(props: { params: Promise<{ id: string }>
       allSiteLanguages={allSiteLanguages}
       updatePageAction={updatePageWithId}
       publicPageUrl={publicPageUrl}
+      isLive={isLive}
+      liveViewUrl={liveViewUrl}
       isDraftModeEnabled={draft.isEnabled}
       initialFeatureImageUrl={initialFeatureImageUrl}
       initialFeatureImageId={initialFeatureImageId}