create-nextblock 0.2.77 → 0.8.0

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

@@ -0,0 +1,23 @@
+import type { ComponentType } from "react";
+
+type PublicBlockRendererLoader = () => Promise<{
+  default: ComponentType<any>;
+}>;
+
+const ecommerceBlockRendererLoaders: Record<string, PublicBlockRendererLoader> = {
+  product_grid: () => import("./renderers/ProductGridBlockRenderer"),
+  featured_product: () => import("./renderers/FeaturedProductBlockRenderer"),
+  cart: () => import("./renderers/CartBlockRenderer"),
+  checkout: () => import("./renderers/CheckoutBlockRenderer"),
+  product_details: () => import("./renderers/ProductDetailsBlockRenderer"),
+};
+
+export function loadEcommerceBlockRenderer(blockType: string) {
+  const loader = ecommerceBlockRendererLoaders[blockType];
+
+  if (!loader) {
+    return Promise.reject(new Error(`Unsupported ecommerce block type: ${blockType}`));
+  }
+
+  return loader();
+}

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

@@ -0,0 +1,25 @@
+import type { ComponentType } from "react";
+import type { BlockType } from "../../lib/blocks/blockRegistry";
+
+type PublicBlockRendererLoader = () => Promise<{
+  default: ComponentType<any>;
+}>;
+
+const publicBlockRendererLoaders: Partial<
+  Record<BlockType | "hero", PublicBlockRendererLoader>
+> = {
+  text: () => import("./renderers/TextBlockRenderer"),
+  heading: () => import("./renderers/HeadingBlockRenderer"),
+  image: () => import("./renderers/ImageBlockRenderer"),
+  button: () => import("./renderers/ButtonBlockRenderer"),
+  posts_grid: () => import("./renderers/PostsGridBlockRenderer"),
+  video_embed: () => import("./renderers/VideoEmbedBlockRenderer"),
+  section: () => import("./renderers/SectionBlockRenderer"),
+  hero: () => import("./renderers/SectionBlockRenderer"),
+  form: () => import("./renderers/FormBlockRenderer"),
+  testimonial: () => import("./renderers/TestimonialBlockRenderer"),
+};
+
+export function getPublicBlockRendererLoader(blockType: string) {
+  return publicBlockRendererLoaders[blockType as BlockType | "hero"];
+}

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

@@ -1,84 +1,92 @@
-import React from "react";
-import Link from "next/link";
-import { Button } from "@nextblock-cms/ui";
-import { cn } from "@nextblock-cms/utils";
-
-export type ButtonBlockContent = {
-    text?: string;
-    url?: string;
-    variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'full';
-    position?: 'left' | 'center' | 'right';
-};
-
-interface ButtonBlockRendererProps {
-  content: ButtonBlockContent;
-  languageId: number; // This prop seems unused
-}
-
-const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
-  content,
-}) => {
-  const isExternal =
-    content.url?.startsWith("http") ||
-    content.url?.startsWith("mailto:") ||
-    content.url?.startsWith("tel:");
-  const isAnchor = content.url?.startsWith("#");
-
-  const buttonText = content.text || "Button";
-  const buttonVariant = content.variant || "default";
-  const buttonSize = content.size || "default";
-  const buttonPosition = content.position || "left";
-
-  const alignmentClasses = {
-      left: "justify-start text-left",
-      center: "justify-center text-center",
-      right: "justify-end text-right",
-  };
-
-  return (
-    <div className={cn("my-6 flex w-full", alignmentClasses[buttonPosition])}>
-      {/* Case 1: Internal link (not external, not anchor, has URL) */}
-      {!isExternal && !isAnchor && !!content.url ? (
-        <Button
-            asChild
-            variant={buttonVariant}
-            size={buttonSize}
-            className={cn(content.variant === 'outline' && "text-foreground")}
-        >
-            <Link href={content.url}>
-                {buttonText}
-            </Link>
-        </Button>
-      ) : /* Case 2: External or Anchor link (has URL) */
-      (isExternal || isAnchor) && !!content.url ? (
-        <Button
-            asChild
-            variant={buttonVariant}
-            size={buttonSize}
-            className={cn(content.variant === 'outline' && "text-foreground")}
-        >
-            <a
-            href={content.url}
-            target={isExternal ? "_blank" : undefined}
-            rel={isExternal ? "noopener noreferrer" : undefined}
-            >
-            {buttonText}
-            </a>
-        </Button>
-      ) : (
-        /* Case 3: No URL or other edge cases - render a plain or disabled button */
-        <Button
-            variant={buttonVariant}
-            size={buttonSize}
-            disabled={!content.url}
-            className={cn(content.variant === 'outline' && "text-foreground")}
-        >
-          {buttonText}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default ButtonBlockRenderer;
+"use client";
+import React from "react";
+import Link from "next/link";
+import { buttonVariants } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+
+export type ButtonBlockContent = {
+    text?: string;
+    url?: string;
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'full';
+    position?: 'left' | 'center' | 'right';
+};
+
+interface ButtonBlockRendererProps {
+  content: ButtonBlockContent;
+  languageId: number; // This prop seems unused
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
+  content,
+  visualEditAttributes,
+}) => {
+  const isExternal =
+    content.url?.startsWith("http") ||
+    content.url?.startsWith("mailto:") ||
+    content.url?.startsWith("tel:");
+  const isAnchor = content.url?.startsWith("#");
+
+  const buttonText = content.text || "Button";
+  // Map variant name if needed or pass directly if it matches
+  // The migration might have uppercase 'DEFAULT' or 'OUTLINE', ensure lowercase
+  const variantRaw = content.variant?.toLowerCase() || "default";
+  // Cast to specific allowed variants for TS safety if strictly typed, else as any
+  const variant = (variantRaw === 'default' || variantRaw === 'outline' || variantRaw === 'secondary' || variantRaw === 'ghost' || variantRaw === 'link' || variantRaw === 'destructive') 
+    ? variantRaw 
+    : 'default';
+
+  const sizeRaw = content.size?.toLowerCase() || "default";
+  const size = (sizeRaw === 'default' || sizeRaw === 'sm' || sizeRaw === 'lg' || sizeRaw === 'icon') 
+    ? sizeRaw 
+    : 'default';
+    
+  const buttonPosition = content.position || "left";
+
+  const alignmentClasses = {
+      left: "justify-start text-left",
+      center: "justify-center text-center",
+      right: "justify-end text-right",
+  };
+  
+  // We use buttonVariants directly to avoid 'asChild' composition issues with Radix Slot
+  // This ensures we just render a clean Link or Anchor with the correct classes.
+  const classes = cn(
+    buttonVariants({ variant, size }),
+    variant === 'outline' && "text-foreground", // Ensure outline text is visible
+    "no-underline" // Force no-underline for links
+  );
+
+  return (
+    <div
+      className={cn("my-6 flex w-full", alignmentClasses[buttonPosition])}
+      {...visualEditAttributes}
+    >
+      {/* Case 1: Internal link */}
+      {!isExternal && !isAnchor && !!content.url ? (
+        <Link href={content.url} className={classes}>
+            {buttonText}
+        </Link>
+      ) : /* Case 2: External or Anchor link */
+      (isExternal || isAnchor) && !!content.url ? (
+        <a
+          href={content.url}
+          target={isExternal ? "_blank" : undefined}
+          rel={isExternal ? "noopener noreferrer" : undefined}
+          className={classes}
+        >
+          {buttonText}
+        </a>
+      ) : (
+        /* Case 3: No URL - render a disabled fake button */
+        <button disabled className={cn(classes, "opacity-50 cursor-not-allowed")}>
+          {buttonText}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ButtonBlockRenderer;

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

@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import { Cart } from '@nextblock-cms/ecommerce/components/Cart';
+import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
+
+interface CartBlockRendererProps {
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+export default function CartBlockRenderer({ visualEditAttributes }: CartBlockRendererProps) {
+  return (
+    <div {...visualEditAttributes}>
+      <Cart />
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+import { Checkout } from '@nextblock-cms/ecommerce/components/Checkout';
+import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
+
+interface CheckoutBlockRendererProps {
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+export default function CheckoutBlockRenderer({
+  visualEditAttributes,
+}: CheckoutBlockRendererProps) {
+  return (
+    <div {...visualEditAttributes}>
+      <Checkout />
+    </div>
+  );
+}

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

@@ -1,23 +1,256 @@
-"use client";
-
 import React from "react";
-import parse, { HTMLReactParserOptions, Element } from 'html-react-parser';
+import Image from "next/image";
+import parse, {
+  HTMLReactParserOptions,
+  Element,
+  attributesToProps,
+} from 'html-react-parser';
 import AlertWidgetRenderer from "./inline/AlertWidgetRenderer";
 import CtaWidgetRenderer from "./inline/CtaWidgetRenderer";
 import type { TextBlockContent } from "./TextBlockRenderer";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+import { SimpleTiptapRenderer } from "@nextblock-cms/ecommerce/components/SimpleTiptapRenderer";
 
 interface ClientTextBlockRendererProps {
   content: TextBlockContent;
   languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+  renderContext?: 'prose' | 'section';
+}
+
+function normalizeHtmlEncodingArtifacts(html: string): string {
+  return html
+    .replaceAll("✓", "✓")
+    .replaceAll("✔", "✓");
+}
+
+function normalizeImageAttributes(attribs: Record<string, string>) {
+  if (attribs['fetchpriority']) {
+    attribs.fetchPriority = attribs['fetchpriority'];
+    delete attribs['fetchpriority'];
+  }
+
+  if (!attribs.loading) {
+    attribs.loading = 'lazy';
+  }
+
+  if (!attribs.decoding) {
+    attribs.decoding = 'async';
+  }
+
+  if (attribs.loading === 'lazy' && attribs.fetchPriority === 'high') {
+    delete attribs.fetchPriority;
+  }
+}
+
+type CmsImageMetadata = {
+  src: `/images/${string}`;
+  width: number;
+  height: number;
+  sizes: string;
+  priority?: boolean;
+};
+
+type HtmlImageProps = {
+  alt?: unknown;
+  className?: string;
+  id?: string;
+  sizes?: unknown;
+  style?: React.CSSProperties;
+  title?: string;
+};
+
+const inlineImageSizes =
+  '(max-width: 768px) calc(100vw - 2rem), (max-width: 1280px) 42vw, 512px';
+const nbCoverImageSizes =
+  '(max-width: 768px) calc(100vw - 2rem), (max-width: 1280px) 38vw, 438px';
+const contentImageSizes =
+  '(max-width: 768px) calc(100vw - 2rem), (max-width: 1280px) 75vw, 768px';
+
+const knownCmsImages: Record<string, CmsImageMetadata> = {
+  'images/NBcover.webp': {
+    src: '/images/NBcover.webp',
+    width: 1024,
+    height: 572,
+    sizes: nbCoverImageSizes,
+    priority: true,
+  },
+  'images/cap.webp': {
+    src: '/images/cap.webp',
+    width: 960,
+    height: 960,
+    sizes: inlineImageSizes,
+  },
+  'images/commerce-plan.webp': {
+    src: '/images/commerce-plan.webp',
+    width: 1024,
+    height: 559,
+    sizes: contentImageSizes,
+  },
+  'images/commerce-square.webp': {
+    src: '/images/commerce-square.webp',
+    width: 2048,
+    height: 2048,
+    sizes: inlineImageSizes,
+  },
+  'images/cortex-ai-square.webp': {
+    src: '/images/cortex-ai-square.webp',
+    width: 2048,
+    height: 2048,
+    sizes: inlineImageSizes,
+  },
+  'images/commerce-wide.webp': {
+    src: '/images/commerce-wide.webp',
+    width: 1024,
+    height: 434,
+    sizes: contentImageSizes,
+  },
+  'images/developer.webp': {
+    src: '/images/developer.webp',
+    width: 1024,
+    height: 1024,
+    sizes: '(max-width: 768px) calc(100vw - 2rem), 400px',
+  },
+  'images/extensibility.webp': {
+    src: '/images/extensibility.webp',
+    width: 1024,
+    height: 559,
+    sizes: contentImageSizes,
+  },
+  'images/goals.webp': {
+    src: '/images/goals.webp',
+    width: 1008,
+    height: 1024,
+    sizes: inlineImageSizes,
+  },
+  'images/included.webp': {
+    src: '/images/included.webp',
+    width: 1024,
+    height: 559,
+    sizes: contentImageSizes,
+  },
+  'images/metadata_image.webp': {
+    src: '/images/metadata_image.webp',
+    width: 1200,
+    height: 634,
+    sizes: contentImageSizes,
+  },
+  'images/nextblock-logo-small.webp': {
+    src: '/images/nextblock-logo-small.webp',
+    width: 1162,
+    height: 1164,
+    sizes: '128px',
+  },
+  'images/nx-graph.webp': {
+    src: '/images/nx-graph.webp',
+    width: 541,
+    height: 670,
+    sizes: contentImageSizes,
+  },
+  'images/pants.webp': {
+    src: '/images/pants.webp',
+    width: 740,
+    height: 717,
+    sizes: inlineImageSizes,
+  },
+  'images/programmer-upscaled.webp': {
+    src: '/images/programmer-upscaled.webp',
+    width: 8192,
+    height: 2632,
+    sizes: '(max-width: 768px) calc(100vw - 2rem), (max-width: 1280px) 75vw, 1200px',
+  },
+  'images/t-shirt.webp': {
+    src: '/images/t-shirt.webp',
+    width: 740,
+    height: 717,
+    sizes: inlineImageSizes,
+  },
+};
+
+function normalizeImagePath(src: string) {
+  try {
+    return new URL(src, 'https://nextblock.local').pathname.replace(/^\/+/, '');
+  } catch {
+    return src.replace(/^\/+/, '');
+  }
 }
 
-const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ content, languageId }) => {
+function getKnownCmsImage(src: string | undefined) {
+  if (!src) return null;
+
+  const imagePath = normalizeImagePath(src);
+  const directMatch = knownCmsImages[imagePath];
+
+  if (directMatch) {
+    return directMatch;
+  }
+
+  const entry = Object.entries(knownCmsImages).find(([knownPath]) =>
+    imagePath.endsWith(knownPath)
+  );
+
+  return entry?.[1] ?? null;
+}
+
+function renderOptimizedCmsImage(attribs: Record<string, string>) {
+  const image = getKnownCmsImage(attribs.src);
+
+  if (!image) {
+    normalizeImageAttributes(attribs);
+    return undefined;
+  }
+
+  const props = attributesToProps(attribs) as HtmlImageProps;
+  const alt = typeof props.alt === 'string' ? props.alt : '';
+  const sizes = typeof props.sizes === 'string' ? props.sizes : image.sizes;
+  const priority = image.priority === true;
+
+  return (
+    <Image
+      src={image.src}
+      alt={alt}
+      width={image.width}
+      height={image.height}
+      sizes={sizes}
+      quality={60}
+      priority={priority}
+      fetchPriority={priority ? 'high' : undefined}
+      loading={priority ? undefined : 'lazy'}
+      decoding="async"
+      className={props.className}
+      style={props.style}
+      title={props.title}
+      id={props.id}
+    />
+  );
+}
+
+const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({
+  content,
+  languageId,
+  visualEditAttributes,
+  renderContext = 'prose',
+}) => {
   void languageId;
+  const normalizedHtml = normalizeHtmlEncodingArtifacts(content.html_content || "");
+  const wrapperClassName =
+    renderContext === 'section'
+      ? 'w-full min-w-0'
+      : 'my-4 prose dark:prose-invert container mx-auto';
   const options: HTMLReactParserOptions = {
     replace: (domNode) => {
       if (domNode instanceof Element && domNode.attribs) {
-        if (domNode.attribs['fetchpriority']) {
-          domNode.attribs['fetchPriority'] = domNode.attribs['fetchpriority'];
+        // Clean up event handlers (like onclick) to prevent React warnings and XSS
+        for (const key of Object.keys(domNode.attribs)) {
+          if (key.toLowerCase().startsWith('on')) {
+            delete domNode.attribs[key];
+          }
+        }
+
+        if (domNode.name === 'img') {
+          return renderOptimizedCmsImage(domNode.attribs);
+        } else if (domNode.attribs['fetchpriority']) {
+          domNode.attribs.fetchPriority = domNode.attribs['fetchpriority'];
           delete domNode.attribs['fetchpriority'];
         }
 
@@ -64,9 +297,30 @@ const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ conte
     },
   };
 
+  const isJson = normalizedHtml.trim().startsWith('{') || normalizedHtml.trim().startsWith('[');
+
+  if (isJson) {
+    try {
+      JSON.parse(normalizedHtml);
+      return (
+        <div
+          className={wrapperClassName}
+          {...visualEditAttributes}
+        >
+          <SimpleTiptapRenderer content={normalizedHtml} />
+        </div>
+      );
+    } catch {
+      // Fallback to parse as HTML
+    }
+  }
+
   return (
-    <div className="my-4 prose dark:prose-invert container mx-auto">
-      {parse(content.html_content || "", options)}
+    <div
+      className={wrapperClassName}
+      {...visualEditAttributes}
+    >
+      {parse(normalizedHtml, options)}
     </div>
   );
 };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FeaturedProductBlock } from '../../../lib/blocks/FeaturedProductBlock';
+import type { FeaturedProductBlockContent } from '../../../lib/blocks/ecommerce-block-schemas';
+import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
+
+interface FeaturedProductBlockRendererProps {
+  content: FeaturedProductBlockContent;
+  languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+export default function FeaturedProductBlockRenderer({
+  content,
+  visualEditAttributes,
+}: FeaturedProductBlockRendererProps) {
+
+  return (
+    <div {...visualEditAttributes}>
+      <FeaturedProductBlock content={content} />
+    </div>
+  );
+}