create-nextblock 0.0.1

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

@@ -0,0 +1,81 @@
+// app/cms/blocks/editors/TextBlockEditor.tsx
+'use client';
+
+import React, { useId, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
+import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog';
+import { Label } from '@nextblock-cms/ui';
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+// Props expected by NotionEditor
+type NotionEditorProps = {
+  content: string;
+  onChange: (html: string) => void;
+  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
+};
+
+// Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
+const NotionEditor = dynamic<NotionEditorProps>(
+  () => import('@nextblock-cms/editor').then((m) => m.NotionEditor),
+  { ssr: false }
+);
+
+export type TextBlockContent = {
+  html_content?: string;
+};
+
+export default function TextBlockEditor({
+  content,
+  onChange,
+}: BlockEditorProps<Partial<TextBlockContent>>) {
+  const labelId = useId();
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const resolverRef = useRef<null | ((v: any) => void)>(null);
+  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+  const openImagePicker = useCallback(() => {
+    setPickerOpen(true);
+    return new Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>((resolve) => {
+      resolverRef.current = resolve;
+    });
+  }, []);
+
+  return (
+    <div className="h-full flex flex-col">
+      <Label htmlFor={labelId} className="sr-only">
+        Text Content
+      </Label>
+
+      <div id={labelId} role="group" aria-labelledby={labelId} className="flex-1 min-h-0 flex flex-col">
+        <NotionEditor
+          content={content?.html_content ?? ''}
+          onChange={(html) => onChange({ html_content: html })}
+          openImagePicker={openImagePicker}
+        />
+
+        {/* Hidden controlled MediaPickerDialog for image selection */}
+        <div className="sr-only" aria-hidden>
+          <MediaPickerDialog
+            hideTrigger
+            open={pickerOpen}
+            onOpenChange={setPickerOpen}
+            title="Select or Upload Image"
+            accept={(m) => !!m.file_type?.startsWith('image/')}
+            onSelect={(media) => {
+              const src = `${R2_BASE_URL}/${media.object_key}`;
+              resolverRef.current?.({
+                src,
+                alt: media.description || media.file_name || undefined,
+                width: media.width ?? null,
+                height: media.height ?? null,
+                blurDataURL: media.blur_data_url ?? null,
+              });
+              resolverRef.current = null;
+              setPickerOpen(false);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,64 @@
+"use client";
+
+import React from 'react';
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Checkbox } from "@nextblock-cms/ui";
+import { generateDefaultContent, VideoEmbedBlockContent } from "@/lib/blocks/blockRegistry";
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+export default function VideoEmbedBlockEditor({ content, onChange }: BlockEditorProps<Partial<VideoEmbedBlockContent>>) {
+  // Get default content from registry
+  const defaultContent = generateDefaultContent("video_embed") as VideoEmbedBlockContent;
+  
+  const handleChange = (field: keyof VideoEmbedBlockContent, value: unknown) => {
+    onChange({
+      ...defaultContent,
+      ...content,
+      [field]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-3 border-t mt-2">
+      <div>
+        <Label htmlFor="video-url">Video URL</Label>
+        <Input
+          id="video-url"
+          type="url"
+          value={content.url || ""}
+          onChange={(e) => handleChange("url", e.target.value)}
+          placeholder="https://www.youtube.com/watch?v=..."
+        />
+      </div>
+      
+      <div>
+        <Label htmlFor="video-title">Title (Optional)</Label>
+        <Input
+          id="video-title"
+          value={content.title || ""}
+          onChange={(e) => handleChange("title", e.target.value)}
+          placeholder="Video title"
+        />
+      </div>
+      
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="autoplay"
+          checked={content.autoplay || false}
+          onCheckedChange={(checked) => handleChange("autoplay", checked)}
+        />
+        <Label htmlFor="autoplay">Autoplay</Label>
+      </div>
+      
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="controls"
+          checked={content.controls !== false}
+          onCheckedChange={(checked) => handleChange("controls", checked)}
+        />
+        <Label htmlFor="controls">Show Controls</Label>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/ConfirmationModal.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@nextblock-cms/ui';
+import { Button } from '@nextblock-cms/ui';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+}) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {cancelText}
+          </Button>
+          <Button onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/templates/nextblock-template/app/cms/components/ContentLanguageSwitcher.tsx

@@ -0,0 +1,145 @@
+// app/cms/components/ContentLanguageSwitcher.tsx
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { createClient } from '@nextblock-cms/db';
+import Link from 'next/link';
+import { Button } from '@nextblock-cms/ui';
+import { Languages, CheckCircle } from 'lucide-react';
+import type { Database } from '@nextblock-cms/db';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { cn } from '@nextblock-cms/utils'; // For conditional styling
+
+type Language = Database['public']['Tables']['languages']['Row'];
+type Page = Database['public']['Tables']['pages']['Row'];
+type Post = Database['public']['Tables']['posts']['Row'];
+interface ContentLanguageSwitcherProps {
+  currentItem: (Page | Post) & { language_code?: string; translation_group_id: string; }; // Must have translation_group_id
+  itemType: 'page' | 'post';
+  allSiteLanguages: Language[];
+}
+
+interface TranslationVersion {
+  id: number; // Primary key of the specific language version
+  language_id: number;
+  language_code: string;
+  language_name: string;
+  title: string;
+  status: string;
+  slug: string; // The specific slug for this language version
+}
+
+export default function ContentLanguageSwitcher({
+  currentItem,
+  itemType,
+  allSiteLanguages,
+}: ContentLanguageSwitcherProps) {
+  const [translations, setTranslations] = useState<TranslationVersion[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const supabase = createClient();
+
+  useEffect(() => {
+    if (!currentItem.translation_group_id || allSiteLanguages.length === 0) {
+      setIsLoading(false);
+      setTranslations([]);
+      return;
+    }
+
+    async function fetchTranslations() {
+      setIsLoading(true);
+      const table = itemType === 'page' ? 'pages' : 'posts';
+      const { data, error } = await supabase
+        .from(table)
+        .select('id, title, status, language_id, slug') // Fetch slug too
+        .eq('translation_group_id', currentItem.translation_group_id);
+
+      if (error) {
+        console.error(`Error fetching translations for ${itemType} group ${currentItem.translation_group_id}:`, error);
+        setTranslations([]);
+      } else if (data) {
+        const mappedTranslations = data.map(item => {
+          const langInfo = allSiteLanguages.find(l => l.id === item.language_id);
+          return {
+            id: item.id,
+            language_id: item.language_id,
+            language_code: langInfo?.code || 'unk',
+            language_name: langInfo?.name || 'Unknown',
+            title: item.title,
+            status: item.status,
+            slug: item.slug,
+          };
+        });
+        setTranslations(mappedTranslations);
+      }
+      setIsLoading(false);
+    }
+
+    fetchTranslations();
+  }, [currentItem.translation_group_id, itemType, supabase, allSiteLanguages]);
+
+  const currentLanguageName = allSiteLanguages.find(l => l.id === currentItem.language_id)?.name || currentItem.language_code;
+
+  if (allSiteLanguages.length <= 1 && !isLoading) {
+    return null; // Don't show switcher if only one language configured
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="ml-auto" disabled={isLoading}>
+          <Languages className="mr-2 h-4 w-4" />
+          {isLoading ? "Loading..." : `Editing: ${currentLanguageName} (${currentItem.language_code?.toUpperCase()})`}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-72"> {/* Increased width */}
+        <DropdownMenuLabel>Switch to Edit Other Language Version</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {allSiteLanguages.map(lang => {
+          const version = translations.find(t => t.language_id === lang.id);
+          const isCurrent = lang.id === currentItem.language_id;
+          // Link to create new translation if it doesn't exist
+          // This requires a more complex "create translation" flow or pre-created placeholders
+          const editUrl = version
+            ? `/cms/${itemType === 'page' ? 'pages' : 'posts'}/${version.id}/edit`
+            : `/cms/${itemType === 'page' ? 'pages' : 'posts'}/new?from_group=${currentItem.translation_group_id}&target_lang_id=${lang.id}&base_slug=${currentItem.slug}`; // Example URL for creating new translation
+
+          if (version) {
+            return (
+              <DropdownMenuItem key={lang.id} asChild disabled={isCurrent} className={cn(isCurrent && "bg-accent font-semibold")}>
+                <Link href={editUrl} className="w-full">
+                  <div className="flex justify-between items-center w-full">
+                    <span>{lang.name} ({lang.code.toUpperCase()})</span>
+                    {isCurrent && <CheckCircle className="h-4 w-4 text-primary" />}
+                  </div>
+                  <div className="text-xs text-muted-foreground truncate" title={version.title}>
+                    Slug: /{version.slug} - <span className="capitalize">{version.status}</span>
+                  </div>
+                </Link>
+              </DropdownMenuItem>
+            );
+          } else {
+            // Offer to create a new translation (simplified link, full flow is more complex)
+            return (
+              <DropdownMenuItem key={lang.id} asChild className="opacity-75 hover:opacity-100">
+                 <Link href={editUrl} className="w-full"> {/* Adjust URL for creating new */}
+                    <div className="flex justify-between items-center w-full">
+                        <span>{lang.name} ({lang.code.toUpperCase()})</span>
+                        <span className="text-xs text-blue-500">(Create)</span>
+                    </div>
+                    <div className="text-xs text-muted-foreground">Not yet created</div>
+                </Link>
+              </DropdownMenuItem>
+            );
+          }
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/nextblock-template/app/cms/components/CopyContentFromLanguage.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import React, { useState, useTransition } from "react";
+import { Button } from "@nextblock-cms/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "@nextblock-cms/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import { copyBlocksFromLanguage } from "@/app/cms/blocks/actions";
+import type { Database } from "@nextblock-cms/db";
+import { useRouter } from "next/navigation";
+
+type Language = Database['public']['Tables']['languages']['Row'];
+import { AlertCircle, CheckCircle2, Copy as CopyIcon } from "lucide-react";
+
+interface CopyContentFromLanguageProps {
+  parentId: number;
+  parentType: "page" | "post";
+  currentLanguageId: number;
+  translationGroupId: string;
+  allSiteLanguages: Language[];
+}
+
+export default function CopyContentFromLanguage({
+  parentId,
+  parentType,
+  currentLanguageId,
+  translationGroupId,
+  allSiteLanguages,
+}: CopyContentFromLanguageProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedSourceLanguageId, setSelectedSourceLanguageId] = useState<
+    number | null
+  >(null);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+
+  const handleCopy = async () => {
+    if (!selectedSourceLanguageId) {
+      setMessage({
+        type: "error",
+        text: "Please select a source language.",
+      });
+      return;
+    }
+
+    setMessage(null);
+
+    startTransition(async () => {
+      try {
+        const result = await copyBlocksFromLanguage(
+          parentId,
+          parentType,
+          selectedSourceLanguageId,
+          currentLanguageId,
+          translationGroupId
+        );
+
+        if (result.success) {
+          setMessage({
+            type: "success",
+            text: "Content copied successfully. The page will now refresh.",
+          });
+          router.refresh();
+          // setIsModalOpen(false); // Refresh might close it, or parent re-render
+        } else {
+          setMessage({
+            type: "error",
+            text: result.error || "Failed to copy content. Please try again.",
+          });
+        }
+      } catch (error) {
+        console.error("Error copying content:", error);
+        setMessage({
+          type: "error",
+          text: "An unexpected error occurred. Please try again.",
+        });
+      }
+    });
+  };
+
+  const availableSourceLanguages = allSiteLanguages.filter(
+    (lang) => lang.id !== currentLanguageId
+  );
+
+  // Reset message when modal opens or source language changes
+  React.useEffect(() => {
+    if (isModalOpen) {
+      setMessage(null);
+    }
+  }, [isModalOpen, selectedSourceLanguageId]);
+  
+  // Close modal on successful copy after refresh (if not already closed by refresh)
+  React.useEffect(() => {
+    if (message?.type === "success" && !isPending) {
+      const timer = setTimeout(() => {
+        setIsModalOpen(false);
+      }, 1500); // Give some time for the user to see the success message
+      return () => clearTimeout(timer);
+    }
+  }, [message, isPending]);
+
+
+  if (availableSourceLanguages.length === 0) {
+    return (
+      <Button variant="outline" size="sm" disabled title="No other languages available to copy from">
+        <CopyIcon className="h-4 w-4 mr-2" />
+        Copy Content...
+      </Button>
+    );
+  }
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" title="Copy content from another language">
+          <CopyIcon className="h-4 w-4 mr-2" />
+          Copy Content...
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Copy Content from Another Language</DialogTitle>
+          <DialogDescription>
+            Select a source language. This will replace all existing blocks for the current language with blocks from the selected language. This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="sourceLanguageModal">Select Source Language</Label>
+            <Select
+              onValueChange={(value) => {
+                setSelectedSourceLanguageId(Number(value));
+                setMessage(null); // Clear message on new selection
+              }}
+              disabled={isPending}
+              value={selectedSourceLanguageId ? String(selectedSourceLanguageId) : undefined}
+            >
+              <SelectTrigger id="sourceLanguageModal" className="w-full">
+                <SelectValue placeholder="Select a language..." />
+              </SelectTrigger>
+              <SelectContent>
+                {availableSourceLanguages.map((lang) => (
+                  <SelectItem key={lang.id} value={String(lang.id)}>
+                    {lang.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {message && (
+            <div
+              className={`mt-3 p-3 rounded-md text-sm flex items-center gap-2 ${
+                message.type === "success"
+                  ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                  : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+              }`}
+            >
+              {message.type === "success" ? (
+                <CheckCircle2 className="h-5 w-5" />
+              ) : (
+                <AlertCircle className="h-5 w-5" />
+              )}
+              {message.text}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" onClick={() => setMessage(null)}>Cancel</Button>
+          </DialogClose>
+          <Button 
+            onClick={handleCopy} 
+            disabled={!selectedSourceLanguageId || isPending}
+          >
+            {isPending ? "Copying..." : "Copy Content & Replace"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/nextblock-template/app/cms/components/LanguageFilterSelect.tsx

@@ -0,0 +1,69 @@
+// app/cms/components/LanguageFilterSelect.tsx
+"use client";
+
+import React from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import type { Database } from '@nextblock-cms/db';
+import { Languages as LanguageIcon } from 'lucide-react';
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+interface LanguageFilterSelectProps {
+  allLanguages: Language[];
+  currentFilterLangId?: number; // The ID of the currently filtered language
+  basePath: string; // e.g., "/cms/pages" or "/cms/posts"
+}
+
+export default function LanguageFilterSelect({
+  allLanguages,
+  currentFilterLangId,
+  basePath,
+}: LanguageFilterSelectProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const handleLanguageChange = (selectedLangId: string) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (selectedLangId && selectedLangId !== "all") {
+      current.set("lang", selectedLangId);
+    } else {
+      current.delete("lang"); // Remove lang param to show all languages
+    }
+    const query = current.toString();
+    router.push(`${basePath}${query ? `?${query}` : ""}`);
+  };
+
+  if (allLanguages.length <= 1) {
+    return null; // Don't show filter if only one or no languages
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <LanguageIcon className="h-4 w-4 text-muted-foreground" />
+      <Select
+        value={currentFilterLangId?.toString() || "all"}
+        onValueChange={handleLanguageChange}
+      >
+        <SelectTrigger className="w-[180px] h-9 text-xs sm:text-sm">
+          <SelectValue placeholder="Filter by language..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Languages</SelectItem>
+          {allLanguages.map((lang) => (
+            <SelectItem key={lang.id} value={lang.id.toString()}>
+              {lang.name} ({lang.code.toUpperCase()})
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}