feat: payload cms

components/PayloadRichText.tsx

@@ -0,0 +1,213 @@
+import { RichText } from '@payloadcms/richtext-lexical/react';
+import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
+import Image from 'next/image';
+
+// Import all custom React components that were previously mapped via MDX
+import StickyNarrative from '@/components/blog/StickyNarrative';
+import ComparisonGrid from '@/components/blog/ComparisonGrid';
+import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
+import TechnicalGrid from '@/components/blog/TechnicalGrid';
+import HighlightBox from '@/components/blog/HighlightBox';
+import AnimatedImage from '@/components/blog/AnimatedImage';
+import ChatBubble from '@/components/blog/ChatBubble';
+import PowerCTA from '@/components/blog/PowerCTA';
+import { Callout } from '@/components/ui/Callout';
+import Stats from '@/components/blog/Stats';
+import SplitHeading from '@/components/blog/SplitHeading';
+import ProductTabs from '@/components/ProductTabs';
+import ProductTechnicalData from '@/components/ProductTechnicalData';
+const jsxConverters: JSXConverters = {
+  blocks: {
+    // Map the custom Payload Blocks created in src/payload/blocks to their React components
+    // Payload Lexical exposes blocks using the 'block-[slug]' pattern
+    stickyNarrative: ({ node }: any) => (
+      <StickyNarrative title={node.fields.title} items={node.fields.items} />
+    ),
+    'block-stickyNarrative': ({ node }: any) => (
+      <StickyNarrative title={node.fields.title} items={node.fields.items} />
+    ),
+    comparisonGrid: ({ node }: any) => (
+      <ComparisonGrid
+        title={node.fields.title}
+        leftLabel={node.fields.leftLabel}
+        rightLabel={node.fields.rightLabel}
+        items={node.fields.items}
+      />
+    ),
+    'block-comparisonGrid': ({ node }: any) => (
+      <ComparisonGrid
+        title={node.fields.title}
+        leftLabel={node.fields.leftLabel}
+        rightLabel={node.fields.rightLabel}
+        items={node.fields.items}
+      />
+    ),
+    visualLinkPreview: ({ node }: any) => (
+      <VisualLinkPreview
+        url={node.fields.url}
+        title={node.fields.title}
+        summary={node.fields.summary}
+        image={node.fields.image?.sizes?.card?.url || node.fields.image?.url}
+      />
+    ),
+    'block-visualLinkPreview': ({ node }: any) => (
+      <VisualLinkPreview
+        url={node.fields.url}
+        title={node.fields.title}
+        summary={node.fields.summary}
+        image={node.fields.image?.sizes?.card?.url || node.fields.image?.url}
+      />
+    ),
+    technicalGrid: ({ node }: any) => (
+      <TechnicalGrid title={node.fields.title} items={node.fields.items} />
+    ),
+    'block-technicalGrid': ({ node }: any) => {
+      console.log('[PayloadRichText] Rendering block-technicalGrid:', node.fields.title);
+      return <TechnicalGrid title={node.fields.title} items={node.fields.items} />;
+    },
+    highlightBox: ({ node }: any) => (
+      <HighlightBox title={node.fields.title} color={node.fields.color}>
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </HighlightBox>
+    ),
+    'block-highlightBox': ({ node }: any) => (
+      <HighlightBox title={node.fields.title} color={node.fields.color}>
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </HighlightBox>
+    ),
+    animatedImage: ({ node }: any) => (
+      <AnimatedImage
+        src={node.fields.src}
+        alt={node.fields.alt}
+        width={node.fields.width}
+        height={node.fields.height}
+      />
+    ),
+    'block-animatedImage': ({ node }: any) => (
+      <AnimatedImage
+        src={node.fields.src}
+        alt={node.fields.alt}
+        width={node.fields.width}
+        height={node.fields.height}
+      />
+    ),
+    chatBubble: ({ node }: any) => (
+      <ChatBubble
+        author={node.fields.author}
+        avatar={node.fields.avatar}
+        role={node.fields.role}
+        align={node.fields.align}
+      >
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </ChatBubble>
+    ),
+    'block-chatBubble': ({ node }: any) => (
+      <ChatBubble
+        author={node.fields.author}
+        avatar={node.fields.avatar}
+        role={node.fields.role}
+        align={node.fields.align}
+      >
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </ChatBubble>
+    ),
+    powerCTA: ({ node }: any) => <PowerCTA locale={node.fields.locale} />,
+    'block-powerCTA': ({ node }: any) => <PowerCTA locale={node.fields.locale} />,
+    callout: ({ node }: any) => (
+      <Callout type={node.fields.type} title={node.fields.title}>
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </Callout>
+    ),
+    'block-callout': ({ node }: any) => (
+      <Callout type={node.fields.type} title={node.fields.title}>
+        <RichText data={node.fields.content} converters={jsxConverters} />
+      </Callout>
+    ),
+    stats: ({ node }: any) => <Stats stats={node.fields.stats} />,
+    'block-stats': ({ node }: any) => <Stats stats={node.fields.stats} />,
+    splitHeading: ({ node }: any) => (
+      <SplitHeading id={node.fields.id} level={node.fields.level}>
+        {node.fields.title}
+      </SplitHeading>
+    ),
+    'block-splitHeading': ({ node }: any) => (
+      <SplitHeading id={node.fields.id} level={node.fields.level}>
+        {node.fields.title}
+      </SplitHeading>
+    ),
+    productTabs: ({ node }: any) => (
+      <ProductTabs
+        technicalData={
+          <ProductTechnicalData
+            data={{
+              technicalItems: node.fields.technicalItems,
+              voltageTables: node.fields.voltageTables,
+            }}
+          />
+        }
+      >
+        <></>
+      </ProductTabs>
+    ),
+    'block-productTabs': ({ node }: any) => (
+      <ProductTabs
+        technicalData={
+          <ProductTechnicalData
+            data={{
+              technicalItems: node.fields.technicalItems,
+              voltageTables: node.fields.voltageTables,
+            }}
+          />
+        }
+      >
+        <></>
+      </ProductTabs>
+    ),
+  },
+  // Custom converter for the Payload "upload" Lexical node (Media collection)
+  // This natively reconstructs Next.js <Image /> tags pointing to the focal-point cropped sizes
+  upload: ({ node }: any) => {
+    // Attempt to extract the highly optimized 'card' generated size from Payload, fallback to raw url
+    let src = node?.value?.sizes?.card?.url || node?.value?.url;
+    const alt = node?.value?.alt || 'Blog Post Media';
+
+    if (!src) return null;
+
+    // Strip legacy imgproxy query parameters (e.g. ?ar=16:9) that crash Next.js 14+ localPatterns
+    if (src.includes('?')) {
+      src = src.split('?')[0];
+    }
+
+    // Fallback dimensions if unmapped or loading from raw
+    const width = node?.value?.sizes?.card?.width || 800;
+    const height = node?.value?.sizes?.card?.height || 600;
+
+    return (
+      <figure className="my-8 md:my-12 relative w-full rounded-2xl md:rounded-[32px] overflow-hidden shadow-xl md:shadow-2xl">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          className="w-full object-cover transition-transform duration-700 hover:scale-105"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
+        />
+        {node?.value?.caption && (
+          <figcaption className="p-4 bg-neutral-dark text-white/80 text-sm text-center italic border-t border-white/10">
+            {node.value.caption}
+          </figcaption>
+        )}
+      </figure>
+    );
+  },
+};
+
+export default function PayloadRichText({ data }: { data: any }) {
+  if (!data) return null;
+
+  return (
+    <div className="article-content max-w-none">
+      <RichText data={data} converters={jsxConverters} />
+    </div>
+  );
+}