create-nextblock 0.2.77 → 0.8.0

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

@@ -1,24 +1,26 @@
 // app/cms/pages/[id]/edit/page.tsx
 import React from "react";
-import { createClient } from "@nextblock-cms/db/server";
-import { updatePage } from "../../actions";
-import type { Database } from "@nextblock-cms/db";
-import { notFound, redirect } from "next/navigation";
+import { createClient } from "@nextblock-cms/db/server";
+import { updatePage } from "../../actions";
+import type { Database } from "@nextblock-cms/db";
+import { notFound, redirect } from "next/navigation";
+import { draftMode } from "next/headers";
+import { resolveMediaUrl } from "../../../../../lib/media/resolveMediaUrl";
 
 type Page = Database['public']['Tables']['pages']['Row'];
 type Block = Database['public']['Tables']['blocks']['Row'];
 type Language = Database['public']['Tables']['languages']['Row'];
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
-import EditPageClient from "./EditPageClient";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+import EditPageClient from "./EditPageClient";
+import { normalizeContentDraftRow } from "../../../../../lib/visual-editing/draft-content";
 
-// ... (Interface PageWithBlocks and getPageDataWithBlocks remain the same) ...
 interface PageWithBlocks extends Page {
   blocks: Block[];
   language_code?: string;
   translation_group_id: string;
 }
 
-async function getPageDataWithBlocks(id: number): Promise<PageWithBlocks | null> {
+async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks; hasDraft: boolean } | null> {
   const supabase = createClient();
   const { data: pageData, error: pageError } = await supabase
     .from("pages")
@@ -40,7 +42,36 @@ async function getPageDataWithBlocks(id: number): Promise<PageWithBlocks | null>
     ? pageData.languages[0]?.code
     : (pageData.languages as Language)?.code;
 
-  return { ...pageData, blocks: pageData.blocks || [], language_code: langCode } as PageWithBlocks;
+  let pageWithBlocks: PageWithBlocks = {
+    ...pageData,
+    blocks: pageData.blocks || [],
+    language_code: langCode,
+    translation_group_id: pageData.translation_group_id ?? "",
+  } as PageWithBlocks;
+
+  const { data: draftData } = await supabase
+    .from("content_drafts")
+    .select("*")
+    .eq("parent_type", "page")
+    .eq("parent_id", id)
+    .maybeSingle();
+
+  const hasDraft = draftData !== null;
+  if (draftData) {
+    const draft = normalizeContentDraftRow(draftData);
+    pageWithBlocks = {
+      ...pageWithBlocks,
+      title: (draft.meta.title as string) ?? pageWithBlocks.title,
+      slug: (draft.meta.slug as string) ?? pageWithBlocks.slug,
+      language_id: (draft.meta.language_id as number) ?? pageWithBlocks.language_id,
+      status: (draft.meta.status as any) ?? pageWithBlocks.status,
+      meta_title: (draft.meta.meta_title as string) ?? pageWithBlocks.meta_title,
+      meta_description: (draft.meta.meta_description as string) ?? pageWithBlocks.meta_description,
+      blocks: draft.blocks as any[],
+    };
+  }
+
+  return { page: pageWithBlocks, hasDraft };
 }
 
 
@@ -57,23 +88,45 @@ export default async function EditPage(props: { params: Promise<{ id: string }>
       return <div className="p-6">Access Denied.</div>;
   }
 
-  const [pageWithBlocks, allSiteLanguages] = await Promise.all([
-    getPageDataWithBlocks(pageId),
-    getActiveLanguagesServerSide()
-  ]);
+  const pageDataResult = await getPageDataWithBlocks(pageId);
+  if (!pageDataResult) return notFound();
+  const { page: pageWithBlocks, hasDraft } = pageDataResult;
 
-  if (!pageWithBlocks) return notFound();
+  const allSiteLanguages = await getActiveLanguagesServerSide();
 
+  const draft = await draftMode();
   const updatePageWithId = updatePage.bind(null, pageId);
-  const publicPageUrl = `/${pageWithBlocks.slug}`;
-
-  return (
-    <EditPageClient
-      page={pageWithBlocks}
-      pageId={pageId}
-      allSiteLanguages={allSiteLanguages}
-      updatePageAction={updatePageWithId}
-      publicPageUrl={publicPageUrl}
-    />
-  );
-}
+  const publicPageUrl = `/${pageWithBlocks.slug}`;
+  let initialFeatureImageUrl: string | null = null;
+  let initialFeatureImageId: string | null = null;
+
+  const featureImageIdFromDb = pageWithBlocks.feature_image_id as unknown as string | null;
+  if (featureImageIdFromDb) {
+    const { data: mediaItem, error: mediaError } = await supabase
+      .from("media")
+      .select("id, object_key, file_path")
+      .eq("id", featureImageIdFromDb)
+      .single();
+
+    if (mediaError) {
+      console.error(`Error fetching page feature image '${featureImageIdFromDb}':`, mediaError.message);
+    } else if (mediaItem) {
+      initialFeatureImageId = mediaItem.id;
+      initialFeatureImageUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
+    }
+  }
+
+  return (
+    <EditPageClient
+      page={pageWithBlocks}
+      pageId={pageId}
+      allSiteLanguages={allSiteLanguages}
+      updatePageAction={updatePageWithId}
+      publicPageUrl={publicPageUrl}
+      isDraftModeEnabled={draft.isEnabled}
+      initialFeatureImageUrl={initialFeatureImageUrl}
+      initialFeatureImageId={initialFeatureImageId}
+      hasDraft={hasDraft}
+    />
+  );
+}

package/templates/nextblock-template/app/cms/pages/actions.ts

@@ -6,14 +6,27 @@ import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import type { Database } from "@nextblock-cms/db";
 import { v4 as uuidv4 } from 'uuid';
+import { getOrCreateContentDraft } from "../../../lib/visual-editing/draft-content";
 
 type PageStatus = Database['public']['Enums']['page_status'];
 import { encodedRedirect } from "@nextblock-cms/utils/server";
-import { getFullPageContent } from "../revisions/utils";
-import { createPageRevision } from "../revisions/service";
 
 // --- createPage and updatePage functions remain unchanged ---
 
+function getOptionalFeatureImageId(formData: FormData) {
+  const value = formData.get("feature_image_id");
+  return typeof value === "string" && value.trim() !== "" ? value.trim() : null;
+}
+
+function revalidatePublicPageSlug(slug: string | null | undefined) {
+  if (!slug) return;
+
+  revalidatePath(`/${slug}`);
+  if (slug === "home" || slug === "accueil") {
+    revalidatePath("/");
+  }
+}
+
 export async function createPage(formData: FormData) {
   const supabase = createClient();
   const { data: { user } } = await supabase.auth.getUser();
@@ -27,6 +40,7 @@ export async function createPage(formData: FormData) {
     status: formData.get("status") as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    feature_image_id: getOptionalFeatureImageId(formData),
   };
 
   if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
@@ -64,7 +78,7 @@ export async function createPage(formData: FormData) {
    const { data: newPage, error: createError } = await supabase
      .from("pages")
      .insert(pageData)
-     .select("id, title, slug, language_id, translation_group_id")
+     .select("id, title, slug, language_id, translation_group_id, feature_image_id")
      .single();
 
   if (createError) {
@@ -76,7 +90,7 @@ export async function createPage(formData: FormData) {
   }
 
   revalidatePath("/cms/pages");
-  if (newPage?.slug) revalidatePath(`/${newPage.slug}`);
+  revalidatePublicPageSlug(newPage?.slug);
 
   if (newPage?.id) {
     redirect(`/cms/pages/${newPage.id}/edit?success=${encodeURIComponent("Page created successfully.")}`);
@@ -90,7 +104,7 @@ export async function updatePage(pageId: number, formData: FormData) {
   const { data: { user } } = await supabase.auth.getUser();
   const pageEditPath = `/cms/pages/${pageId}/edit`;
 
-  if (!user) return encodedRedirect("error", pageEditPath, "User not authenticated.");
+  if (!user) return { error: "User not authenticated." };
 
   const { data: existingPage, error: fetchError } = await supabase
     .from("pages")
@@ -99,7 +113,7 @@ export async function updatePage(pageId: number, formData: FormData) {
     .single();
 
   if (fetchError || !existingPage) {
-    return encodedRedirect("error", "/cms/pages", "Original page not found or error fetching it.");
+    return { error: "Original page not found or error fetching it." };
   }
 
   const rawFormData = {
@@ -109,10 +123,11 @@ export async function updatePage(pageId: number, formData: FormData) {
     status: formData.get("status") as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    feature_image_id: getOptionalFeatureImageId(formData),
   };
 
   if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-     return encodedRedirect("error", pageEditPath, "Missing required fields: title, slug, language, or status.");
+     return { error: "Missing required fields: title, slug, language, or status." };
   }
 
   const pageUpdateData: Partial<Omit<UpsertPagePayload, 'translation_group_id' | 'author_id'>> = {
@@ -122,39 +137,41 @@ export async function updatePage(pageId: number, formData: FormData) {
     status: rawFormData.status,
     meta_title: rawFormData.meta_title,
     meta_description: rawFormData.meta_description,
+    feature_image_id: rawFormData.feature_image_id,
   };
 
-  // capture previous full content before update
-  const previousContent = await getFullPageContent(pageId);
-
-  const { error: updateError } = await supabase
-    .from("pages")
-    .update(pageUpdateData)
-    .eq("id", pageId);
-
-  if (updateError) {
-    console.error("Error updating page:", updateError);
-     if (updateError.code === '23505' && updateError.message.includes('pages_language_id_slug_key')) {
-        return encodedRedirect("error", pageEditPath, `The slug "${pageUpdateData.slug}" already exists for the selected language. Please use a unique slug.`);
-    }
-    return encodedRedirect("error", pageEditPath, `Failed to update page: ${updateError.message}`);
-  }
-
-  // create revision after update
-  if (previousContent && user) {
-    const newContent = await getFullPageContent(pageId);
-    if (newContent) {
-      await createPageRevision(pageId, user.id, previousContent, newContent);
-    }
-  }
-
-  revalidatePath("/cms/pages");
-  if (existingPage.slug) revalidatePath(`/${existingPage.slug}`);
+  try {
+    const draft = await getOrCreateContentDraft(supabase, "page", pageId, user.id);
+    const updatedMeta = {
+      ...draft.meta,
+      ...pageUpdateData,
+    };
+
+    const { error: updateError } = await supabase
+      .from("content_drafts")
+      .update({ meta: updatedMeta as any })
+      .eq("id", draft.id);
+
+    if (updateError) {
+      console.error("Error updating page draft:", updateError);
+      if (updateError.code === '23505' && updateError.message.includes('pages_language_id_slug_key')) {
+        return { error: `The slug "${pageUpdateData.slug}" already exists for the selected language. Please use a unique slug.` };
+      }
+      return { error: `Failed to update draft: ${updateError.message}` };
+    }
+  } catch (err: any) {
+    console.error("Error loading/creating draft for page metadata update:", err);
+    return { error: `Failed to load draft: ${err.message || err}` };
+  }
+
+  revalidatePath("/cms/pages");
+  revalidatePublicPageSlug(existingPage.slug);
   if (rawFormData.slug && rawFormData.slug !== existingPage.slug) {
-      revalidatePath(`/${rawFormData.slug}`);
+      revalidatePublicPageSlug(rawFormData.slug);
   }
+
   revalidatePath(pageEditPath);
-  redirect(`${pageEditPath}?success=Page updated successfully`);
+  return { success: true };
 }
 
 
@@ -219,9 +236,7 @@ export async function deletePage(pageId: number) {
   revalidatePath("/cms/navigation");
   if (relatedPages) {
     relatedPages.forEach(p => {
-      if (p.slug) {
-        revalidatePath(`/${p.slug}`);
-      }
+      revalidatePublicPageSlug(p.slug);
     });
   }
 
@@ -237,5 +252,6 @@ type UpsertPagePayload = {
   status: PageStatus;
   meta_title?: string | null;
   meta_description?: string | null;
+  feature_image_id?: string | null;
   translation_group_id: string; // UUID
 };

package/templates/nextblock-template/app/cms/pages/components/DeletePageButtonClient.tsx

@@ -5,7 +5,7 @@ import React, { useState, useTransition } from 'react';
 import { DropdownMenuItem } from "@nextblock-cms/ui";
 import { Trash2 } from "lucide-react";
 import { deletePage } from "../actions";
-import { ConfirmationModal } from '@/app/cms/components/ConfirmationModal';
+import { ConfirmationModal } from '../../components/ConfirmationModal';
 
 interface DeletePageButtonClientProps {
   pageId: number;