create-nextblock 0.2.78 → 0.8.0

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

@@ -2,23 +2,27 @@
 import React from "react";
 import { Separator } from "@nextblock-cms/ui";
 import { createClient } from "@nextblock-cms/db/server";
-import PostForm from "../../components/PostForm"; // Adjusted path
+import PostForm from "../../components/PostForm";
 import { updatePost } from "../../actions";
-import type { Database } from "@nextblock-cms/db"; // Ensure Language and Media are imported
+import type { Database } from "@nextblock-cms/db";
 import { notFound, redirect } from "next/navigation";
+import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
+import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+import { normalizeContentDraftRow } from "../../../../../lib/visual-editing/draft-content";
+import CopyContentFromLanguage from "../../../components/CopyContentFromLanguage";
+import { UploadFolderProvider } from '../../../media/UploadFolderContext';
+import RevisionHistoryButton from "../../../revisions/RevisionHistoryButton";
+import { resolveMediaUrl } from "../../../../../lib/media/resolveMediaUrl";
+import { CortexAiPageContextRegistrar } from "../../../components/CortexAiPageContext";
+import DraftStatusActions from "../../../components/DraftStatusActions";
 
 type PostType = Database['public']['Tables']['posts']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
 type Language = Database['public']['Tables']['languages']['Row'];
-import BlockEditorArea from "@/app/cms/blocks/components/BlockEditorArea";
-import Link from "next/link";
-import { Button } from "@nextblock-cms/ui";
-import { Eye, ArrowLeft } from "lucide-react"; // Removed SeparatorVertical, use <Separator />
-import ContentLanguageSwitcher from "@/app/cms/components/ContentLanguageSwitcher";
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server"; // Correct server-side fetch
-import CopyContentFromLanguage from "@/app/cms/components/CopyContentFromLanguage";
-import { UploadFolderProvider } from "@/app/cms/media/UploadFolderContext";
-import RevisionHistoryButton from "@/app/cms/revisions/RevisionHistoryButton";
 
 interface PostWithBlocks extends PostType {
   blocks: BlockType[];
@@ -26,7 +30,7 @@ interface PostWithBlocks extends PostType {
   translation_group_id: string;
 }
 
-async function getPostDataWithBlocks(id: number): Promise<PostWithBlocks | null> {
+async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks; hasDraft: boolean } | null> {
   const supabase = createClient();
   const { data: postData, error: postError } = await supabase
     .from("posts")
@@ -44,14 +48,45 @@ async function getPostDataWithBlocks(id: number): Promise<PostWithBlocks | null>
     return null;
   }
 
-  const langCode = (postData.languages as unknown as Language)?.code;
+  const langCode = Array.isArray(postData.languages)
+    ? postData.languages[0]?.code
+    : (postData.languages as unknown as Language)?.code;
 
-  return {
+  let postWithBlocks: PostWithBlocks = {
     ...postData,
     blocks: postData.blocks || [],
     language_code: langCode,
-    translation_group_id: postData.translation_group_id,
+    translation_group_id: postData.translation_group_id ?? "",
   } as PostWithBlocks;
+
+  const { data: draftData } = await supabase
+    .from("content_drafts")
+    .select("*")
+    .eq("parent_type", "post")
+    .eq("parent_id", id)
+    .maybeSingle();
+
+  const hasDraft = draftData !== null;
+  if (draftData) {
+    const draft = normalizeContentDraftRow(draftData);
+    postWithBlocks = {
+      ...postWithBlocks,
+      title: (draft.meta.title as string) ?? postWithBlocks.title,
+      slug: (draft.meta.slug as string) ?? postWithBlocks.slug,
+      language_id: (draft.meta.language_id as number) ?? postWithBlocks.language_id,
+      status: (draft.meta.status as any) ?? postWithBlocks.status,
+      meta_title: (draft.meta.meta_title as string) ?? postWithBlocks.meta_title,
+      meta_description: (draft.meta.meta_description as string) ?? postWithBlocks.meta_description,
+      label: (draft.meta.label as string) ?? postWithBlocks.label,
+      excerpt: (draft.meta.excerpt as string) ?? postWithBlocks.excerpt,
+      subtitle: (draft.meta.subtitle as string) ?? postWithBlocks.subtitle,
+      published_at: (draft.meta.published_at as string) ?? postWithBlocks.published_at,
+      feature_image_id: (draft.meta.feature_image_id as any) ?? postWithBlocks.feature_image_id,
+      blocks: draft.blocks as any[],
+    };
+  }
+
+  return { post: postWithBlocks, hasDraft };
 }
 
 export default async function EditPostPage(props: { params: Promise<{ id: string }> }) {
@@ -71,113 +106,120 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
   }
 
   // Fetch post data and all site languages concurrently
-  const [postWithBlocks, allSiteLanguages] = await Promise.all([
-    getPostDataWithBlocks(postId),
-    getActiveLanguagesServerSide() // Fetch languages on the server
-  ]);
+  const postDataResult = await getPostDataWithBlocks(postId);
+  const allSiteLanguages = await getActiveLanguagesServerSide();
 
-  if (!postWithBlocks) {
+  if (!postDataResult) {
     return notFound();
   }
 
+  const { post: postWithBlocks, hasDraft } = postDataResult;
+
   let initialFeatureImageUrl: string | null = null;
   let initialFeatureImageIdProp: string | null = null;
 
-  // The PostType defines feature_image_id as number | null.
-  // However, Media.id is a string (uuid), and PostForm expects a string UUID.
-  // This assumes that postWithBlocks.feature_image_id, despite its 'number' typing,
-  // actually holds a value that can be used to identify a media item by its UUID,
-  // or that the type definition for Post.feature_image_id is outdated.
-  // Casting to `unknown` then `string` for the query.
   const featureImageIdFromDb = postWithBlocks.feature_image_id as unknown as (string | number | null);
 
   if (featureImageIdFromDb) {
     const { data: mediaItem, error: mediaError } = await supabase
       .from("media")
-      .select("id, object_key")
+      .select("id, object_key, file_path")
       .eq("id", String(featureImageIdFromDb)) // Query using the ID as string
       .single();
 
     if (mediaError) {
       console.error(`Error fetching media item for feature_image_id '${featureImageIdFromDb}':`, mediaError.message);
-      // Not critical enough to notFound(), form will just not have initial image.
     } else if (mediaItem) {
       initialFeatureImageIdProp = mediaItem.id; // string UUID from media table
-      const r2BaseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL;
-      if (r2BaseUrl && mediaItem.object_key) {
-        initialFeatureImageUrl = `${r2BaseUrl}/${mediaItem.object_key}`;
-      } else if (!r2BaseUrl) {
-        console.warn("NEXT_PUBLIC_R2_PUBLIC_URL is not set. Cannot construct feature image URL for edit page.");
-      }
+      initialFeatureImageUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
     }
   }
 
   const updatePostWithId = updatePost.bind(null, postId);
-  const publicPostUrl = `/article/${postWithBlocks.slug}`;
+  const publicPostUrl = `/article/${postWithBlocks.slug}`;
+  const draftModeUrl = `/api/draft/start?path=${encodeURIComponent(publicPostUrl)}`;
   
   return (
     <UploadFolderProvider defaultFolder={`posts/${postWithBlocks.slug}/`}>
-    <div className="space-y-8 w-full mx-auto px-6">
-      <div className="flex justify-between items-center flex-wrap gap-4 w-full">
-        <div className="flex items-center gap-3">
-            <Button variant="outline" size="icon" aria-label="Back to posts" asChild>
-                <Link href="/cms/posts">
-                    <ArrowLeft className="h-4 w-4" />
+      <CortexAiPageContextRegistrar
+        context={{
+          contentType: "post",
+          entityId: postWithBlocks.id,
+          languageId: postWithBlocks.language_id,
+          slug: postWithBlocks.slug,
+          title: postWithBlocks.title,
+          translationGroupId: postWithBlocks.translation_group_id,
+        }}
+      />
+      <div className="space-y-8 w-full mx-auto px-6">
+        <div className="flex justify-between items-center flex-wrap gap-4 w-full">
+          <div className="flex items-center gap-3">
+              <Button variant="outline" size="icon" aria-label="Back to posts" asChild>
+                  <Link href="/cms/posts">
+                      <ArrowLeft className="h-4 w-4" />
+                  </Link>
+              </Button>
+              <div>
+                  <h1 className="text-2xl font-bold">Edit Post</h1>
+                  <p className="text-sm text-muted-foreground truncate max-w-md" title={postWithBlocks.title}>{postWithBlocks.title}</p>
+              </div>
+          </div>
+          <div className="flex items-center gap-3 flex-wrap">
+              {allSiteLanguages.length > 0 && (
+                   <ContentLanguageSwitcher
+                      currentItem={postWithBlocks}
+                      itemType="post"
+                      allSiteLanguages={allSiteLanguages}
+                    />
+              )}
+              {postWithBlocks.translation_group_id && allSiteLanguages.length > 1 && (
+                <CopyContentFromLanguage
+                  parentId={postId}
+                  parentType="post"
+                  currentLanguageId={postWithBlocks.language_id}
+                  translationGroupId={postWithBlocks.translation_group_id}
+                  allSiteLanguages={allSiteLanguages}
+                />
+              )}
+              <Button variant="outline" asChild>
+                <Link href={publicPostUrl} target="_blank" rel="noopener noreferrer">
+                  <Eye className="mr-2 h-4 w-4" /> View Live Post
                 </Link>
-            </Button>
-            <div>
-                <h1 className="text-2xl font-bold">Edit Post</h1>
-                <p className="text-sm text-muted-foreground truncate max-w-md" title={postWithBlocks.title}>{postWithBlocks.title}</p>
-            </div>
-        </div>
-        <div className="flex items-center gap-3 flex-wrap"> {/* Added flex-wrap for responsiveness */}
-            {allSiteLanguages.length > 0 && (
-                 <ContentLanguageSwitcher
-                    currentItem={postWithBlocks}
-                    itemType="post"
-                    allSiteLanguages={allSiteLanguages}
-                  />
-            )}
-            {postWithBlocks.translation_group_id && allSiteLanguages.length > 1 && (
-              <CopyContentFromLanguage
-                parentId={postId}
-                parentType="post"
-                currentLanguageId={postWithBlocks.language_id}
-                translationGroupId={postWithBlocks.translation_group_id}
-                allSiteLanguages={allSiteLanguages}
-              />
-            )}
-            <Button variant="outline" asChild>
-              <Link href={publicPostUrl} target="_blank" rel="noopener noreferrer">
-                <Eye className="mr-2 h-4 w-4" /> View Live Post
-              </Link>
-            </Button>
-            <RevisionHistoryButton parentType="post" parentId={postId} />
+              </Button>
+              <Button variant="secondary" asChild>
+                <a href={draftModeUrl} target="_blank" rel="noopener noreferrer">
+                  <FilePenLine className="mr-2 h-4 w-4" />
+                  Preview
+                </a>
+              </Button>
+              <RevisionHistoryButton parentType="post" parentId={postId} />
+          </div>
         </div>
-      </div>
-
-      <PostForm
-        post={postWithBlocks as PostType & { feature_image_id?: string | null }} // Asserting feature_image_id might be string for PostForm
-        formAction={updatePostWithId}
-        actionButtonText="Update Post Metadata"
-        isEditing={true}
-        availableLanguagesProp={allSiteLanguages}
-        initialFeatureImageUrl={initialFeatureImageUrl}
-        initialFeatureImageId={initialFeatureImageIdProp}
-      />
 
-      <Separator className="my-8" />
+        <DraftStatusActions parentId={postId} parentType="post" hasDraft={hasDraft} />
 
-      <div className="w-full mx-auto px-6">
-        <h2 className="text-xl font-semibold mb-4">Post Content Blocks</h2>
-        <BlockEditorArea
-          parentId={postWithBlocks.id}
-          parentType="post"
-          initialBlocks={postWithBlocks.blocks}
-          languageId={postWithBlocks.language_id}
+        <PostForm
+          post={postWithBlocks as PostType & { feature_image_id?: string | null }}
+          formAction={updatePostWithId}
+          actionButtonText="Update Post Metadata"
+          isEditing={true}
+          availableLanguagesProp={allSiteLanguages}
+          initialFeatureImageUrl={initialFeatureImageUrl}
+          initialFeatureImageId={initialFeatureImageIdProp}
         />
+
+        <Separator className="my-8" />
+
+        <div className="w-full mx-auto px-6">
+          <h2 className="text-xl font-semibold mb-4">Post Content Blocks</h2>
+          <BlockEditorArea
+            parentId={postWithBlocks.id}
+            parentType="post"
+            initialBlocks={postWithBlocks.blocks}
+            languageId={postWithBlocks.language_id}
+          />
+        </div>
       </div>
-    </div>
     </UploadFolderProvider>
   );
 }

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

@@ -6,19 +6,17 @@ 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"; // Ensure this is correctly imported
-import { getFullPostContent } from "../revisions/utils";
-import { createPostRevision } from "../revisions/service";
-
-// --- createPost and updatePost functions to be updated similarly for error returns ---
-
-export async function createPost(formData: FormData) {
-  const supabase = createClient();
-  const { data: { user } } = await supabase.auth.getUser();
-  if (!user) {
-    return encodedRedirect("error", "/cms/posts/new", "User not authenticated.");
+// --- createPost and updatePost functions to be updated similarly for error returns ---
+
+export async function createPost(formData: FormData) {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) {
+    return encodedRedirect("error", "/cms/posts/new", "User not authenticated.");
   }
 
   const featureImageIdStr_create = formData.get("feature_image_id") as string;
@@ -31,8 +29,10 @@ export async function createPost(formData: FormData) {
     title: formData.get("title") as string,
     slug: formData.get("slug") as string,
     language_id: parseInt(formData.get("language_id") as string, 10),
+    label: formData.get("label") as string || null,
     status: formData.get("status") as PageStatus,
     excerpt: formData.get("excerpt") as string || null,
+    subtitle: formData.get("subtitle") as string || null,
     published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
@@ -63,7 +63,7 @@ export async function createPost(formData: FormData) {
   const { data: newPost, error: createError } = await supabase
     .from("posts")
     .insert(postData)
-    .select("id, title, slug, language_id, translation_group_id, excerpt, feature_image_id") // Added excerpt, feature_image_id
+    .select("id, title, slug, language_id, translation_group_id, label, excerpt, subtitle, feature_image_id")
     .single();
 
   if (createError) {
@@ -92,9 +92,11 @@ export async function createPost(formData: FormData) {
           language_id: lang.id,
           title: `[${lang.code.toUpperCase()}] ${newPost.title}`,
           slug: placeholderSlug,
+          label: newPost.label || null,
           status: 'draft',
           published_at: null,
           excerpt: `Placeholder for ${lang.code.toUpperCase()} translation. Original excerpt: ${newPost.excerpt || ''}`.substring(0, 250),
+          subtitle: `Placeholder for ${lang.code.toUpperCase()} translation. Original subtitle: ${newPost.subtitle || ''}`.substring(0, 500),
           meta_title: null,
           meta_description: null,
           translation_group_id: newPost.translation_group_id,
@@ -111,16 +113,16 @@ export async function createPost(formData: FormData) {
         successMessage += ` ${placeholderCreations} placeholder version(s) also created (draft status, please edit their slugs and content).`;
       }
     }
-  }
-
-  revalidatePath("/cms/posts");
-  if (newPost?.slug) revalidatePath(`/article/${newPost.slug}`);
-  revalidatePath("/articles");
-
-  if (newPost?.id) {
-    redirect(`/cms/posts/${newPost.id}/edit?success=${encodeURIComponent(successMessage)}`);
-  } else {
-    redirect(`/cms/posts?success=${encodeURIComponent(successMessage)}`);
+  }
+
+  revalidatePath("/cms/posts");
+  if (newPost?.slug) revalidatePath(`/article/${newPost.slug}`);
+  revalidatePath("/articles");
+
+  if (newPost?.id) {
+    redirect(`/cms/posts/${newPost.id}/edit?success=${encodeURIComponent(successMessage)}`);
+  } else {
+    redirect(`/cms/posts?success=${encodeURIComponent(successMessage)}`);
   }
 }
 
@@ -129,7 +131,7 @@ export async function updatePost(postId: number, formData: FormData) {
   const { data: { user } } = await supabase.auth.getUser();
   const postEditPath = `/cms/posts/${postId}/edit`;
 
-  if (!user) return encodedRedirect("error", postEditPath, "User not authenticated.");
+  if (!user) return { error: "User not authenticated." };
 
   const { data: existingPost, error: fetchError } = await supabase
     .from("posts")
@@ -138,7 +140,7 @@ export async function updatePost(postId: number, formData: FormData) {
     .single();
 
   if (fetchError || !existingPost) {
-    return encodedRedirect("error", "/cms/posts", "Original post not found or error fetching it.");
+    return { error: "Original post not found or error fetching it." };
   }
 
   const featureImageIdStr_update = formData.get("feature_image_id") as string;
@@ -151,8 +153,10 @@ export async function updatePost(postId: number, formData: FormData) {
     title: formData.get("title") as string,
     slug: formData.get("slug") as string,
     language_id: existingPost.language_id, // Use existing post's language_id
+    label: formData.get("label") as string || null,
     status: formData.get("status") as PageStatus,
     excerpt: formData.get("excerpt") as string || null,
+    subtitle: formData.get("subtitle") as string || null,
     published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
@@ -160,10 +164,10 @@ export async function updatePost(postId: number, formData: FormData) {
   };
 
   if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-     return encodedRedirect("error", postEditPath, "Missing required fields: title, slug, language, or status.");
+     return { error: "Missing required fields: title, slug, language, or status." };
   }
   if (rawFormData.language_id !== existingPost.language_id) {
-      return encodedRedirect("error", postEditPath, "Changing the language of an existing post version is not allowed. Create a new translation instead.");
+      return { error: "Changing the language of an existing post version is not allowed. Create a new translation instead." };
   }
 
   let publishedAtISO: string | null = null;
@@ -177,7 +181,9 @@ export async function updatePost(postId: number, formData: FormData) {
     title: rawFormData.title,
     slug: rawFormData.slug,
     language_id: rawFormData.language_id,
+    label: rawFormData.label,
     excerpt: rawFormData.excerpt,
+    subtitle: rawFormData.subtitle,
     status: rawFormData.status,
     published_at: publishedAtISO,
     meta_title: rawFormData.meta_title,
@@ -185,40 +191,31 @@ export async function updatePost(postId: number, formData: FormData) {
     feature_image_id: rawFormData.feature_image_id,
   };
 
-  // capture previous full content
-  const previousContent = await getFullPostContent(postId);
-
-  const { error: updateError } = await supabase
-    .from("posts")
-    .update(postUpdateData)
-    .eq("id", postId);
-
-  if (updateError) {
-    console.error("Error updating post:", updateError);
-    if (updateError.code === '23505' && updateError.message.includes('posts_language_id_slug_key')) {
-        return encodedRedirect("error", postEditPath, `The slug "${postUpdateData.slug}" already exists for the selected language. Please use a unique slug.`);
+  try {
+    const draft = await getOrCreateContentDraft(supabase, "post", postId, user.id);
+    const updatedMeta = {
+      ...draft.meta,
+      ...postUpdateData,
+    };
+
+    const { error: updateError } = await supabase
+      .from("content_drafts")
+      .update({ meta: updatedMeta as any })
+      .eq("id", draft.id);
+
+    if (updateError) {
+      console.error("Error updating post draft:", updateError);
+      return { error: `Failed to update draft: ${updateError.message}` };
     }
-    return encodedRedirect("error", postEditPath, `Failed to update post: ${updateError.message}`);
+  } catch (err: any) {
+    console.error("Error loading/creating draft for post metadata update:", err);
+    return { error: `Failed to load draft: ${err.message || err}` };
   }
 
-  // create revision after update
-  if (previousContent && user) {
-    const newContent = await getFullPostContent(postId);
-    if (newContent) {
-      await createPostRevision(postId, user.id, previousContent, newContent);
-    }
-  }
-
-  revalidatePath("/cms/posts");
-  if (existingPost.slug) revalidatePath(`/article/${existingPost.slug}`);
-  if (rawFormData.slug && rawFormData.slug !== existingPost.slug) {
-      revalidatePath(`/article/${rawFormData.slug}`);
-  }
-  revalidatePath("/articles");
-  revalidatePath(postEditPath);
-  redirect(`${postEditPath}?success=Post updated successfully`);
-}
-
+  revalidatePath(postEditPath);
+  return { success: true };
+}
+
 
 export async function deletePost(postId: number) {
   const supabase = createClient();
@@ -248,11 +245,11 @@ export async function deletePost(postId: number) {
 
   // 3. Delete All Associated Navigation Links
   if (relatedPosts && relatedPosts.length > 0) {
-    const urlsToDelete = relatedPosts.map(p => `/article/${p.slug}`);
-    const { error: navError } = await supabase
-      .from("navigation_items")
-      .delete()
-      .in("url", urlsToDelete);
+    const urlsToDelete = relatedPosts.map(p => `/article/${p.slug}`);
+    const { error: navError } = await supabase
+      .from("navigation_items")
+      .delete()
+      .in("url", urlsToDelete);
 
     if (navError) {
       console.error("Error deleting navigation links:", navError);
@@ -270,17 +267,17 @@ export async function deletePost(postId: number) {
     return encodedRedirect("error", "/cms/posts", `Failed to delete posts: ${deletePostsError.message}`);
   }
 
-  // Revalidate paths
-  revalidatePath("/cms/posts");
-  revalidatePath("/cms/navigation");
-  if (relatedPosts) {
-    relatedPosts.forEach(p => {
-      if (p.slug) {
-        revalidatePath(`/article/${p.slug}`);
-      }
-    });
-  }
-  revalidatePath("/articles");
+  // Revalidate paths
+  revalidatePath("/cms/posts");
+  revalidatePath("/cms/navigation");
+  if (relatedPosts) {
+    relatedPosts.forEach(p => {
+      if (p.slug) {
+        revalidatePath(`/article/${p.slug}`);
+      }
+    });
+  }
+  revalidatePath("/articles");
 
   // 5. Update Redirect Message
   redirect(`/cms/posts?success=${encodeURIComponent("Post and all its translations were deleted successfully.")}`);
@@ -302,7 +299,9 @@ type UpsertPostPayload = {
   author_id: string | null;
   title: string;
   slug: string;
+  label?: string | null;
   excerpt?: string | null;
+  subtitle?: string | null;
   status: PageStatus;
   published_at?: string | null;
   meta_title?: string | null;

package/templates/nextblock-template/app/cms/posts/components/DeletePostButtonClient.tsx

@@ -5,7 +5,7 @@ import React, { useState, useRef } from 'react';
 import { DropdownMenuItem } from "@nextblock-cms/ui";
 import { Trash2 } from "lucide-react";
 import { deletePost } from "../actions";
-import { ConfirmationModal } from '@/app/cms/components/ConfirmationModal';
+import { ConfirmationModal } from '../../components/ConfirmationModal';
 
 interface DeletePostButtonClientProps {
   postId: number;