create-nextblock 0.14.1 → 0.14.4

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

@@ -13,139 +13,139 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Textarea } from '@nextblock-cms/ui';
 import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
 
-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.');
-          }
-        }
-      };
+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.');
+          }
+        }
+      };
 
       if ((window as any).turnstile) {
         renderWidget();
@@ -158,81 +158,81 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
         }, 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;
+
+      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) => {
@@ -262,24 +262,24 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
   return (
     <>
       {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.');
-          }}
-        />
-      )}
+        <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}
@@ -308,29 +308,29 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
           </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>
-    </>
-  );
-};
+        {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 = {

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { HeadingBlockContent } from '../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../lib/blocks/blockColors';
 import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 interface HeadingBlockRendererProps {
@@ -23,19 +24,15 @@ const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
       : 2;
   const Tag: React.ElementType = `h${level}`;
   
-  let alignmentClass = "";
-  if (content.textAlign) {
-    alignmentClass = `text-${content.textAlign}`;
-  }
+  const alignmentClass = resolveTextAlign(content.textAlign);
+  const { className: colorClass, style: colorStyle } = resolveTextColor(content.textColor);
 
-  let colorClass = "";
-  if (content.textColor) {
-    colorClass = `text-${content.textColor}`;
-  }
+  const combinedClasses = ["my-6 font-bold container mx-auto", alignmentClass, colorClass]
+    .filter(Boolean)
+    .join(" ");
 
-  const combinedClasses = `my-6 font-bold container mx-auto ${alignmentClass} ${colorClass}`.trim();
   return (
-    <Tag className={combinedClasses} {...visualEditAttributes}>
+    <Tag className={combinedClasses} style={colorStyle} {...visualEditAttributes}>
       {content.text_content}
     </Tag>
   );

package/templates/nextblock-template/components/blocks/types.ts

@@ -1,9 +1,9 @@
 import type { Database } from '@nextblock-cms/db';
 
-export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
-    feature_image_url: string | null;
-    feature_image_width: number | null;
-    feature_image_height: number | null;
-    blur_data_url: string | null;
-    estimated_read_time_minutes: number;
-};
+export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
+    feature_image_url: string | null;
+    feature_image_width: number | null;
+    feature_image_height: number | null;
+    blur_data_url: string | null;
+    estimated_read_time_minutes: number;
+};

package/templates/nextblock-template/components/env-var-warning.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
-import { Badge } from "@nextblock-cms/ui";
-import { Button } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
 
 export function EnvVarWarning() {
   return (

package/templates/nextblock-template/components/form-message.tsx

@@ -1,32 +1,32 @@
- 'use client';
-
-import { useTranslations } from "@nextblock-cms/utils";
-
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export function FormMessage({ message }: { message?: Message }) {
-  const { t } = useTranslations();
-
-  if (!message) return null;
-
-  return (
-    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
-      {"success" in message && message.success && (
-        <div className="text-foreground border-l-2 border-foreground px-4">
-          {t(message.success)}
-        </div>
-      )}
-      {"error" in message && message.error && (
-        <div className="text-destructive border-l-2 border-destructive px-4">
-          {t(message.error)}
-        </div>
-      )}
-      {"message" in message && message.message && (
-        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
-      )}
-    </div>
-  );
-}
+ 'use client';
+
+import { useTranslations } from "@nextblock-cms/utils";
+
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export function FormMessage({ message }: { message?: Message }) {
+  const { t } = useTranslations();
+
+  if (!message) return null;
+
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+      {"success" in message && message.success && (
+        <div className="text-foreground border-l-2 border-foreground px-4">
+          {t(message.success)}
+        </div>
+      )}
+      {"error" in message && message.error && (
+        <div className="text-destructive border-l-2 border-destructive px-4">
+          {t(message.error)}
+        </div>
+      )}
+      {"message" in message && message.message && (
+        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
+      )}
+    </div>
+  );
+}