create-nextblock 0.2.78 → 0.8.1

package/templates/nextblock-template/components/blocks/renderers/FormBlockRenderer.tsx

@@ -1,53 +1,336 @@
 "use client";
 
-import React, { useActionState } from 'react';
+import React, { useActionState, useState, useEffect, useRef } from 'react';
 import { useFormStatus } from 'react-dom';
-import { handleFormSubmission } from '@/app/actions/formActions';
-import type { FormBlockContent, FormField } from '@/lib/blocks/blockRegistry';
-import { Input } from '@nextblock-cms/ui';
-import { Textarea } from '@nextblock-cms/ui';
-import { Label } from '@nextblock-cms/ui';
+import Script from 'next/script';
+import { handleFormSubmission } from '../../../app/actions/formActions';
+import type { FormBlockContent, FormField } from '../../../lib/blocks/blockRegistry';
 import { Button } from '@nextblock-cms/ui';
 import { Checkbox } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
 
-interface FormBlockRendererProps {
-  content: FormBlockContent;
-  languageId: number;
-}
-
-function SubmitButton({ text }: { text: string }) {
-  const { pending } = useFormStatus();
-  return <Button type="submit" disabled={pending}>{pending ? 'Submitting...' : text}</Button>;
-}
+interface FormBlockRendererProps {
+  content: FormBlockContent;
+  languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+  botProtectionPublic?: BotProtectionPublicSettings;
+  scriptNonce?: string;
+}
+
+type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
+
+type BotProtectionPublicSettings = {
+  provider: BotProtectionProvider;
+  siteKey: string;
+};
+
+function SubmitButton({ text, verifying }: { text: string; verifying?: boolean }) {
+  const { pending } = useFormStatus();
+  const isDisabled = pending || verifying;
+  return (
+    <Button type="submit" disabled={isDisabled}>
+      {verifying ? 'Verifying...' : pending ? 'Submitting...' : text}
+    </Button>
+  );
+}
+
+function resolveBotProtection(
+  content: FormBlockContent,
+  botProtectionPublic?: BotProtectionPublicSettings
+) {
+  const blockProvider = content.botProtectionProvider;
+  const provider: BotProtectionProvider =
+    blockProvider === 'turnstile' || blockProvider === 'recaptcha'
+      ? blockProvider
+      : botProtectionPublic?.provider || 'none';
+  const fallbackSiteKey =
+    provider === 'turnstile'
+      ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+      : provider === 'recaptcha'
+        ? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
+        : '';
+  const publicSiteKey =
+    provider === botProtectionPublic?.provider ? botProtectionPublic?.siteKey || '' : '';
+  const siteKey = content.botProtectionSiteKey?.trim() ||
+    publicSiteKey ||
+    fallbackSiteKey ||
+    '';
+
+  return { provider, siteKey };
+}
+
+const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEditAttributes, botProtectionPublic, scriptNonce }) => {
+  const { provider, siteKey } = resolveBotProtection(content, botProtectionPublic);
+  const [state, formAction] = useActionState(handleFormSubmission.bind(null, {
+    recipient: content.recipient_email,
+    botProtectionProvider: provider,
+  }), {
+    success: false,
+    message: '',
+  });
+
+  const [recaptchaToken, setRecaptchaToken] = useState<string>('');
+  const turnstileRef = useRef<HTMLDivElement>(null);
+  const turnstileWidgetIdRef = useRef<string | null>(null);
+  const pendingTurnstileFormRef = useRef<HTMLFormElement | null>(null);
+  const [turnstileToken, setTurnstileToken] = useState<string>('');
+  const [turnstileError, setTurnstileError] = useState<string>('');
+  const [isVerifyingTurnstile, setIsVerifyingTurnstile] = useState(false);
+
+  useEffect(() => {
+    if (provider === 'turnstile' && siteKey && typeof window !== 'undefined') {
+      let widgetId: string | null = null;
+
+      const renderWidget = () => {
+        if ((window as any).turnstile && turnstileRef.current) {
+          // Clear any stale children
+          turnstileRef.current.innerHTML = '';
+          try {
+            widgetId = (window as any).turnstile.render(turnstileRef.current, {
+              sitekey: siteKey,
+              theme: 'light',
+              execution: 'execute',
+              'response-field': false,
+              callback: (token: string) => {
+                setTurnstileToken(token);
+                setTurnstileError('');
+                setIsVerifyingTurnstile(false);
+
+                const form = pendingTurnstileFormRef.current;
+                if (form) {
+                  pendingTurnstileFormRef.current = null;
+                  const input = form.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
+                  if (input) {
+                    input.value = token;
+                  }
+                  form.requestSubmit();
+                }
+              },
+              'expired-callback': () => {
+                setTurnstileToken('');
+              },
+              'error-callback': () => {
+                setTurnstileToken('');
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification could not be completed. Please try again.');
+              },
+              'timeout-callback': () => {
+                setTurnstileToken('');
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification timed out. Please try again.');
+              },
+            });
+            turnstileWidgetIdRef.current = widgetId;
+
+            if (widgetId && pendingTurnstileFormRef.current) {
+              try {
+                (window as any).turnstile.execute(widgetId);
+              } catch (err) {
+                console.error("Turnstile execute error:", err);
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification could not be started. Please try again.');
+              }
+            }
+          } catch (err) {
+            console.error("Turnstile render error:", err);
+            pendingTurnstileFormRef.current = null;
+            setIsVerifyingTurnstile(false);
+            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
+          }
+        }
+      };
 
-const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content }) => {
-  const [state, formAction] = useActionState(handleFormSubmission.bind(null, content.recipient_email), {
-    success: false,
-    message: '',
-  });
+      if ((window as any).turnstile) {
+        renderWidget();
+      } else {
+        const interval = setInterval(() => {
+          if ((window as any).turnstile) {
+            clearInterval(interval);
+            renderWidget();
+          }
+        }, 100);
+        return () => clearInterval(interval);
+      }
+
+      return () => {
+        if (widgetId && (window as any).turnstile) {
+          try {
+            (window as any).turnstile.remove(widgetId);
+          } catch {
+            // Ignore
+          }
+        }
+        turnstileWidgetIdRef.current = null;
+      };
+    }
+  }, [provider, siteKey]);
+
+  useEffect(() => {
+    if (!state.success && state.message) {
+      setRecaptchaToken('');
+
+      if (provider === 'turnstile') {
+        setTurnstileToken('');
+        pendingTurnstileFormRef.current = null;
+        setIsVerifyingTurnstile(false);
+        const widgetId = turnstileWidgetIdRef.current;
+        if (widgetId && typeof window !== 'undefined' && (window as any).turnstile) {
+          try {
+            (window as any).turnstile.reset(widgetId);
+          } catch {
+            // Ignore reset failures; the next render can still create a fresh token.
+          }
+        }
+      }
+    }
+  }, [provider, state.message, state.success]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    if (provider === 'turnstile' && siteKey) {
+      const widgetId = turnstileWidgetIdRef.current;
+      const turnstile = typeof window !== 'undefined' ? (window as any).turnstile : undefined;
+      const token = widgetId && turnstile
+        ? turnstile.getResponse(widgetId)
+        : turnstileToken;
+
+      const input = e.currentTarget.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
+      if (token && input) {
+        input.value = token;
+        return;
+      }
+
+      e.preventDefault();
+
+      if (!widgetId || !turnstile) {
+        pendingTurnstileFormRef.current = e.currentTarget;
+        setTurnstileError('');
+        setIsVerifyingTurnstile(true);
+        return;
+      }
+
+      pendingTurnstileFormRef.current = e.currentTarget;
+      setTurnstileError('');
+      setIsVerifyingTurnstile(true);
+
+      try {
+        turnstile.execute(widgetId);
+      } catch (err) {
+        console.error("Turnstile execute error:", err);
+        pendingTurnstileFormRef.current = null;
+        setIsVerifyingTurnstile(false);
+        setTurnstileError('Security verification could not be started. Please try again.');
+      }
+      return;
+    }
+
+    if (provider === 'recaptcha' && siteKey && !recaptchaToken) {
+      e.preventDefault();
+      const form = e.currentTarget;
+      if (typeof window !== 'undefined' && (window as any).grecaptcha) {
+        (window as any).grecaptcha.ready(() => {
+          (window as any).grecaptcha.execute(siteKey, { action: 'submit' }).then((token: string) => {
+            setRecaptchaToken(token);
+            const input = form.querySelector('input[name="g-recaptcha-response"]') as HTMLInputElement;
+            if (input) {
+              input.value = token;
+            }
+            form.requestSubmit();
+          });
+        });
+      }
+    }
+  };
 
   if (state.success) {
-    return <div className="p-4 rounded-md bg-green-100 text-green-800">{content.success_message}</div>;
+    return (
+      <div
+        className="p-4 rounded-md bg-green-100 text-green-800 text-center"
+        {...visualEditAttributes}
+      >
+        {content.success_message}
+      </div>
+    );
   }
 
   return (
-    <form action={formAction} className="space-y-4 my-6 container mx-auto">
-      {content.fields.map((field: FormField) => (
-        <div key={field.temp_id} className="space-y-2">
-          <Label htmlFor={field.temp_id}>
-            {field.label} {field.is_required && <span className="text-red-500">*</span>}
-          </Label>
-          {renderField(field)}
+    <>
+      {provider === 'recaptcha' && siteKey && (
+        <Script
+          strategy="lazyOnload"
+          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
+          nonce={scriptNonce}
+        />
+      )}
+      {provider === 'turnstile' && siteKey && (
+        <Script
+          strategy="afterInteractive"
+          src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+          nonce={scriptNonce}
+          onError={() => {
+            pendingTurnstileFormRef.current = null;
+            setIsVerifyingTurnstile(false);
+            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
+          }}
+        />
+      )}
+
+      <form
+        action={formAction}
+        onSubmit={handleSubmit}
+        className="space-y-4 my-6 container mx-auto"
+        {...visualEditAttributes}
+      >
+        {/* Invisible Honeypot input field */}
+        <div className="absolute opaque-0 opacity-0 w-0 h-0 pointer-events-none select-none" style={{ opacity: 0, width: 0, height: 0, zIndex: -1 }}>
+          <Label htmlFor="verification_secondary_email" className="sr-only">Do not fill this field</Label>
+          <Input
+            id="verification_secondary_email"
+            type="text"
+            name="verification_secondary_email"
+            tabIndex={-1}
+            autoComplete="off"
+          />
         </div>
-      ))}
-      {state.message && !state.success && (
-          <p className="text-sm text-red-600">{state.message}</p>
-      )}
-      <SubmitButton text={content.submit_button_text} />
-    </form>
-  );
-};
+
+        {content.fields.map((field: FormField) => (
+          <div key={field.temp_id} className="space-y-2">
+            <Label htmlFor={field.temp_id}>
+              {field.label} {field.is_required && <span className="text-red-500">*</span>}
+            </Label>
+            {renderField(field)}
+          </div>
+        ))}
+
+        {provider === 'recaptcha' && (
+          <input type="hidden" name="g-recaptcha-response" value={recaptchaToken} readOnly />
+        )}
+
+        {provider === 'turnstile' && siteKey && (
+          <div className="my-4 flex justify-start">
+            <input type="hidden" name="cf-turnstile-response" value={turnstileToken} readOnly />
+            <div ref={turnstileRef}></div>
+          </div>
+        )}
+
+        {turnstileError && (
+          <p className="text-sm text-red-600">{turnstileError}</p>
+        )}
+
+        {state.message && !state.success && (
+            <p className="text-sm text-red-600">{state.message}</p>
+        )}
+        <SubmitButton text={content.submit_button_text} verifying={isVerifyingTurnstile} />
+      </form>
+    </>
+  );
+};
 
 const renderField = (field: FormField) => {
     const commonProps = {
@@ -95,4 +378,4 @@ const renderField = (field: FormField) => {
     }
 };
 
-export default FormBlockRenderer;
+export default FormBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/HeadingBlockRenderer.tsx

@@ -1,16 +1,19 @@
 import React from "react";
-import type { HeadingBlockContent } from "@/lib/blocks/blockRegistry";
+import type { HeadingBlockContent } from '../../../lib/blocks/blockRegistry';
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 interface HeadingBlockRendererProps {
   content: HeadingBlockContent;
   languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
 }
 
-const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
-  content,
-  languageId,
-}) => {
-  void languageId;
+const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
+  content,
+  languageId,
+  visualEditAttributes,
+}) => {
+  void languageId;
   // Ensure level is between 1 and 6, default to 2
   const level =
     typeof content.level === "number" &&
@@ -32,10 +35,10 @@ const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
 
   const combinedClasses = `my-6 font-bold container mx-auto ${alignmentClass} ${colorClass}`.trim();
   return (
-    <Tag className={combinedClasses}>
+    <Tag className={combinedClasses} {...visualEditAttributes}>
       {content.text_content}
     </Tag>
   );
 };
 
-export default HeadingBlockRenderer;
+export default HeadingBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/ImageBlockRenderer.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Image from "next/image";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 export type ImageBlockContent = {
     media_id: string | null;
@@ -17,17 +18,22 @@ interface ImageBlockRendererProps {
   content: ImageBlockContent;
   languageId: number;
   priority?: boolean;
+  visualEditAttributes?: VisualEditAttributes;
 }
 
 const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   content,
   languageId,
   priority = false,
+  visualEditAttributes,
 }) => {
   void languageId;
   if (!content.media_id || !content.object_key) {
     return (
-      <div className="my-4 p-4 border rounded text-center text-muted-foreground italic">
+      <div
+        className="my-4 p-4 border rounded text-center text-muted-foreground italic"
+        {...visualEditAttributes}
+      >
         (Image block: Media not selected or object_key missing)
       </div>
     );
@@ -40,7 +46,10 @@ const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
     content.height <= 0
   ) {
     return (
-      <div className="my-4 p-4 border rounded text-center text-muted-foreground italic">
+      <div
+        className="my-4 p-4 border rounded text-center text-muted-foreground italic"
+        {...visualEditAttributes}
+      >
         (Image block: Image dimensions are missing or invalid)
       </div>
     );
@@ -49,7 +58,7 @@ const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   const displayImageUrl = `${R2_BASE_URL}/${content.object_key}`;
   
   return (
-    <div className="w-full">
+    <div className="w-full" {...visualEditAttributes}>
       <figure
         className="my-6 text-center mx-auto max-w-full"
         // Removed inline style: style={{ width: content.width }}

package/templates/nextblock-template/components/blocks/renderers/PostsGridBlockRenderer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import PostsGridBlock from "@/components/blocks/PostsGridBlock";
+import PostsGridBlock from "../../blocks/PostsGridBlock";
 import type { Database } from "@nextblock-cms/db";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 type Block = Database['public']['Tables']['blocks']['Row'];
 type PostsGridBlockContent = {
@@ -14,20 +15,24 @@ interface PostsGridBlockRendererProps {
   content: PostsGridBlockContent;
   languageId: number;
   block: Block;
+  visualEditAttributes?: VisualEditAttributes;
 }
 
-const PostsGridBlockRenderer: React.FC<PostsGridBlockRendererProps> = ({
-  content,
-  languageId,
-  block,
-}) => {
-  void content;
-  return (
-    <PostsGridBlock
-      block={block}
-      languageId={languageId}
-    />
+const PostsGridBlockRenderer: React.FC<PostsGridBlockRendererProps> = ({
+  content,
+  languageId,
+  block,
+  visualEditAttributes,
+}) => {
+  void content;
+  return (
+    <div {...visualEditAttributes}>
+      <PostsGridBlock
+        block={block}
+        languageId={languageId}
+      />
+    </div>
   );
 };
 
-export default PostsGridBlockRenderer;
+export default PostsGridBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/ProductDetailsBlockRenderer.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { ProductDetailsLayout } from '@nextblock-cms/ecommerce/components/ProductDetailsLayout';
+import type { VisualEditAttributes, VisualEditingDocumentContext } from '../../../lib/visual-editing/types';
+import { createClient } from "@nextblock-cms/db/server";
+import BlockRenderer from "../../BlockRenderer";
+
+interface ProductDetailsBlockRendererProps {
+  visualEditAttributes?: VisualEditAttributes;
+  productVisualEditingEnabled?: boolean;
+  excludeProductId?: string;
+  languageId: number;
+  visualEditing?: VisualEditingDocumentContext;
+}
+
+export default async function ProductDetailsBlockRenderer({
+  visualEditAttributes,
+  productVisualEditingEnabled = false,
+  excludeProductId,
+  languageId,
+  visualEditing,
+}: ProductDetailsBlockRendererProps) {
+  const supabase = createClient();
+  
+  let descriptionBlocks: any[] = [];
+  let productSlug = "";
+  let productDraftId: number | null = null;
+  
+  if (excludeProductId) {
+    const { data: productInfo } = await supabase
+      .from('products')
+      .select('slug')
+      .eq('id', excludeProductId)
+      .maybeSingle();
+
+    if (productInfo) {
+      productSlug = productInfo.slug;
+    }
+
+    if (productVisualEditingEnabled) {
+      const { data: draftData } = await supabase
+        .from('product_drafts')
+        .select('id, blocks')
+        .eq('product_id', excludeProductId)
+        .maybeSingle();
+        
+      if (draftData) {
+        productDraftId = draftData.id;
+        if (draftData.blocks && Array.isArray(draftData.blocks)) {
+          descriptionBlocks = draftData.blocks;
+        }
+      }
+    }
+    
+    if (descriptionBlocks.length === 0) {
+      const { data: liveBlocks } = await supabase
+        .from('blocks')
+        .select('*')
+        .eq('product_id', excludeProductId)
+        .order('order', { ascending: true });
+      descriptionBlocks = liveBlocks || [];
+    }
+  }
+
+  const productDescriptionVisualEditing = {
+    enabled: productVisualEditingEnabled,
+    documentType: "product" as const,
+    documentId: excludeProductId!,
+    slug: productSlug,
+    languageId: languageId,
+    draftId: productDraftId,
+  };
+
+  const descriptionNode = descriptionBlocks.length > 0 ? (
+    <BlockRenderer 
+      blocks={descriptionBlocks} 
+      languageId={languageId} 
+      productVisualEditingEnabled={productVisualEditingEnabled}
+      visualEditing={productDescriptionVisualEditing}
+    />
+  ) : undefined;
+
+  return (
+    <div {...visualEditAttributes}>
+      <ProductDetailsLayout 
+        visualEditingEnabled={productVisualEditingEnabled} 
+        descriptionNode={descriptionNode}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/components/blocks/renderers/ProductGridBlockRenderer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ProductGridBlock } from '../../../lib/blocks/ProductGridBlock';
+import type { ProductGridBlockContent } from '../../../lib/blocks/ecommerce-block-schemas';
+import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
+
+interface ProductGridBlockRendererProps {
+  content: ProductGridBlockContent;
+  languageId: number;
+  excludeProductId?: string;
+  excludeTranslationGroupId?: string | null;
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+export default function ProductGridBlockRenderer({ 
+  content, 
+  languageId,
+  excludeProductId,
+  excludeTranslationGroupId,
+  visualEditAttributes,
+}: ProductGridBlockRendererProps) {
+  return (
+    <div {...visualEditAttributes}>
+      <ProductGridBlock
+        content={content}
+        languageId={languageId}
+        excludeProductId={excludeProductId}
+        excludeTranslationGroupId={excludeTranslationGroupId}
+      />
+    </div>
+  );
+}