feat: payload cms

src/payload/blocks/AnimatedImage.ts

@@ -0,0 +1,25 @@
+import { Block } from 'payload';
+
+export const AnimatedImage: Block = {
+  slug: 'animatedImage',
+  fields: [
+    {
+      name: 'src',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'width',
+      type: 'number',
+    },
+    {
+      name: 'height',
+      type: 'number',
+    },
+  ],
+};

src/payload/blocks/Callout.ts

@@ -0,0 +1,20 @@
+import { Block } from 'payload';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export const Callout: Block = {
+  slug: 'callout',
+  fields: [
+    {
+      name: 'type',
+      type: 'select',
+      options: ['info', 'warning', 'important', 'tip', 'caution'],
+      defaultValue: 'info',
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({}),
+      required: true,
+    },
+  ],
+};

src/payload/blocks/ChatBubble.ts

@@ -0,0 +1,34 @@
+import { Block } from 'payload';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export const ChatBubble: Block = {
+  slug: 'chatBubble',
+  fields: [
+    {
+      name: 'author',
+      type: 'text',
+      defaultValue: 'KLZ Team',
+    },
+    {
+      name: 'avatar',
+      type: 'text',
+    },
+    {
+      name: 'role',
+      type: 'text',
+      defaultValue: 'Assistant',
+    },
+    {
+      name: 'align',
+      type: 'select',
+      options: ['left', 'right'],
+      defaultValue: 'left',
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({}),
+      required: true,
+    },
+  ],
+};

src/payload/blocks/ComparisonGrid.ts

@@ -0,0 +1,47 @@
+import { Block } from 'payload';
+
+export const ComparisonGrid: Block = {
+  slug: 'comparisonGrid',
+  fields: [
+    {
+      name: 'title',
+      label: 'Main Heading',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'leftLabel',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'rightLabel',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'items',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      fields: [
+        {
+          name: 'label',
+          label: 'Row Label',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'leftValue',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'rightValue',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/payload/blocks/HighlightBox.ts

@@ -0,0 +1,20 @@
+import { Block } from 'payload';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export const HighlightBox: Block = {
+  slug: 'highlightBox',
+  fields: [
+    {
+      name: 'type',
+      type: 'select',
+      options: ['info', 'warning', 'success', 'error', 'neutral'],
+      defaultValue: 'neutral',
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({}),
+      required: true,
+    },
+  ],
+};

src/payload/blocks/PowerCTA.ts

@@ -0,0 +1,12 @@
+import { Block } from 'payload';
+
+export const PowerCTA: Block = {
+  slug: 'powerCTA',
+  fields: [
+    {
+      name: 'locale',
+      type: 'text',
+      required: true,
+    },
+  ],
+};

src/payload/blocks/ProductTabs.ts

@@ -0,0 +1,96 @@
+import { Block } from 'payload';
+
+export const ProductTabs: Block = {
+  slug: 'productTabs',
+  interfaceName: 'ProductTabsBlock',
+  fields: [
+    {
+      name: 'technicalItems',
+      type: 'array',
+      fields: [
+        {
+          name: 'label',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'value',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'unit',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'voltageTables',
+      type: 'array',
+      fields: [
+        {
+          name: 'voltageLabel',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'metaItems',
+          type: 'array',
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              required: true,
+            },
+            {
+              name: 'value',
+              type: 'text',
+              required: true,
+            },
+            {
+              name: 'unit',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          name: 'columns',
+          type: 'array',
+          fields: [
+            {
+              name: 'key',
+              type: 'text',
+              required: true,
+            },
+            {
+              name: 'label',
+              type: 'text',
+              required: true,
+            },
+          ],
+        },
+        {
+          name: 'rows',
+          type: 'array',
+          fields: [
+            {
+              name: 'configuration',
+              type: 'text',
+              required: true,
+            },
+            {
+              name: 'cells',
+              type: 'array',
+              fields: [
+                {
+                  name: 'value',
+                  type: 'text',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

src/payload/blocks/SplitHeading.ts

@@ -0,0 +1,23 @@
+import { Block } from 'payload';
+
+export const SplitHeading: Block = {
+  slug: 'splitHeading',
+  interfaceName: 'SplitHeadingBlock',
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'id',
+      type: 'text',
+    },
+    {
+      name: 'level',
+      type: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      defaultValue: 'h2',
+    },
+  ],
+};

src/payload/blocks/Stats.ts

@@ -0,0 +1,25 @@
+import { Block } from 'payload';
+
+export const Stats: Block = {
+  slug: 'stats',
+  interfaceName: 'StatsBlock',
+  fields: [
+    {
+      name: 'stats',
+      type: 'array',
+      required: true,
+      fields: [
+        {
+          name: 'value',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'label',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/payload/blocks/StickyNarrative.ts

@@ -0,0 +1,31 @@
+import { Block } from 'payload';
+
+export const StickyNarrative: Block = {
+  slug: 'stickyNarrative',
+  fields: [
+    {
+      name: 'title',
+      label: 'Main Heading',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'items',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'content',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/payload/blocks/TechnicalGrid.ts

@@ -0,0 +1,30 @@
+import { Block } from 'payload';
+
+export const TechnicalGrid: Block = {
+  slug: 'technicalGrid',
+  fields: [
+    {
+      name: 'title',
+      label: 'Main Heading',
+      type: 'text',
+    },
+    {
+      name: 'items',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      fields: [
+        {
+          name: 'label',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'value',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/payload/blocks/VisualLinkPreview.ts

@@ -0,0 +1,30 @@
+import { Block } from 'payload';
+
+export const VisualLinkPreview: Block = {
+  slug: 'visualLinkPreview',
+  fields: [
+    {
+      name: 'url',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'summary',
+      type: 'textarea',
+      required: true,
+    },
+    {
+      name: 'image',
+      type: 'text',
+      admin: {
+        description: 'Legacy HTTP string from the old hardcoded images.',
+      },
+      required: false,
+    },
+  ],
+};

src/payload/blocks/allBlocks.ts

@@ -0,0 +1,27 @@
+import { AnimatedImage } from './AnimatedImage';
+import { Callout } from './Callout';
+import { ChatBubble } from './ChatBubble';
+import { ComparisonGrid } from './ComparisonGrid';
+import { HighlightBox } from './HighlightBox';
+import { PowerCTA } from './PowerCTA';
+import { ProductTabs } from './ProductTabs';
+import { SplitHeading } from './SplitHeading';
+import { Stats } from './Stats';
+import { StickyNarrative } from './StickyNarrative';
+import { TechnicalGrid } from './TechnicalGrid';
+import { VisualLinkPreview } from './VisualLinkPreview';
+
+export const payloadBlocks = [
+  AnimatedImage,
+  Callout,
+  ChatBubble,
+  ComparisonGrid,
+  HighlightBox,
+  PowerCTA,
+  ProductTabs,
+  SplitHeading,
+  Stats,
+  StickyNarrative,
+  TechnicalGrid,
+  VisualLinkPreview,
+];

src/payload/collections/FormSubmissions.ts

@@ -0,0 +1,67 @@
+import type { CollectionConfig } from 'payload';
+
+export const FormSubmissions: CollectionConfig = {
+  slug: 'form-submissions',
+  admin: {
+    useAsTitle: 'name',
+    defaultColumns: ['name', 'email', 'type', 'createdAt'],
+    description: 'Captured leads from Contact and Product Quote forms.',
+  },
+  access: {
+    // Only Admins can view and delete leads via dashboard.
+    read: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    update: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    delete: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    // Next.js server actions handle secure inserts natively. No public client create access.
+    create: () => false,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+    {
+      name: 'email',
+      type: 'email',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+    {
+      name: 'type',
+      type: 'select',
+      options: [
+        { label: 'General Contact', value: 'contact' },
+        { label: 'Product Quote', value: 'product_quote' },
+      ],
+      required: true,
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
+      },
+    },
+    {
+      name: 'productName',
+      type: 'text',
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
+        condition: (data) => data.type === 'product_quote',
+        description: 'The specific KLZ product the user requested a quote for.',
+      },
+    },
+    {
+      name: 'message',
+      type: 'textarea',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+  ],
+};

src/payload/collections/Media.ts

@@ -0,0 +1,48 @@
+import type { CollectionConfig } from 'payload';
+
+export const Media: CollectionConfig = {
+  slug: 'media',
+  access: {
+    read: () => true,
+  },
+  admin: {
+    useAsTitle: 'alt',
+    defaultColumns: ['filename', 'alt', 'updatedAt'],
+  },
+  upload: {
+    staticDir: 'public/media',
+    adminThumbnail: 'thumbnail',
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        width: 600,
+        // height: undefined allows wide 5:1 aspect ratios to be preserved without cropping
+        height: undefined,
+        position: 'centre',
+      },
+      {
+        name: 'card',
+        width: 768,
+        height: undefined,
+        position: 'centre',
+      },
+      {
+        name: 'tablet',
+        width: 1024,
+        height: undefined,
+        position: 'centre',
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'caption',
+      type: 'text',
+    },
+  ],
+};

src/payload/collections/Pages.ts

@@ -0,0 +1,61 @@
+import { CollectionConfig } from 'payload';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'slug', 'locale', 'updatedAt'],
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'excerpt',
+      type: 'textarea',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({}),
+      required: true,
+    },
+  ],
+};

src/payload/collections/Posts.ts

@@ -0,0 +1,154 @@
+import type { CollectionConfig } from 'payload';
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical';
+
+import { StickyNarrative } from '../blocks/StickyNarrative';
+import { ComparisonGrid } from '../blocks/ComparisonGrid';
+import { VisualLinkPreview } from '../blocks/VisualLinkPreview';
+import { TechnicalGrid } from '../blocks/TechnicalGrid';
+import { HighlightBox } from '../blocks/HighlightBox';
+import { AnimatedImage } from '../blocks/AnimatedImage';
+import { ChatBubble } from '../blocks/ChatBubble';
+import { PowerCTA } from '../blocks/PowerCTA';
+import { Callout } from '../blocks/Callout';
+import { Stats } from '../blocks/Stats';
+import { SplitHeading } from '../blocks/SplitHeading';
+
+export const Posts: CollectionConfig = {
+  slug: 'posts',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['featuredImage', 'title', 'date', 'updatedAt', '_status'],
+  },
+  versions: {
+    drafts: true, // Enables Draft/Published workflows
+  },
+  access: {
+    read: ({ req: { user } }) => {
+      // In local development, always show everything (including Drafts and scheduled future posts)
+      if (process.env.NODE_ENV === 'development') {
+        return true;
+      }
+
+      // If an Admin user is logged in, they can view everything
+      if (user) {
+        return true;
+      }
+
+      // For public unauthenticated visitors in PROD/STAGING contexts:
+      // Only serve Posts where Status = "published" AND the publish Date is in the past!
+      return {
+        and: [
+          {
+            _status: {
+              equals: 'published',
+            },
+          },
+          {
+            date: {
+              less_than_equal: new Date().toISOString(),
+            },
+          },
+        ],
+      };
+    },
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        position: 'sidebar',
+      },
+      hooks: {
+        beforeValidate: [
+          ({ value, data }) => {
+            // Auto-generate slug from title if left blank
+            if (value || !data?.title) return value;
+            return data.title
+              .toLowerCase()
+              .replace(/ /g, '-')
+              .replace(/[^\w-]+/g, '');
+          },
+        ],
+      },
+    },
+    {
+      name: 'excerpt',
+      type: 'text',
+      admin: {
+        description: 'A short summary for blog feed cards and SEO.',
+      },
+    },
+    {
+      name: 'date',
+      type: 'date',
+      required: true,
+      admin: {
+        position: 'sidebar',
+        description: 'Future dates will schedule the post to publish automatically.',
+      },
+      defaultValue: () => new Date().toISOString(),
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+        description: 'The primary Hero image used for headers and OpenGraph previews.',
+      },
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      defaultValue: 'en',
+    },
+    {
+      name: 'category',
+      type: 'text',
+      admin: {
+        position: 'sidebar',
+        description: 'Used for tag bucketing (e.g. "Kabel Technologie").',
+      },
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: [
+              StickyNarrative,
+              ComparisonGrid,
+              VisualLinkPreview,
+              TechnicalGrid,
+              HighlightBox,
+              AnimatedImage,
+              ChatBubble,
+              PowerCTA,
+              Callout,
+              Stats,
+              SplitHeading,
+            ],
+          }),
+        ],
+      }),
+    },
+  ],
+};

src/payload/collections/Products.ts

@@ -0,0 +1,144 @@
+import type { CollectionConfig } from 'payload';
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical';
+
+import { StickyNarrative } from '../blocks/StickyNarrative';
+import { ComparisonGrid } from '../blocks/ComparisonGrid';
+import { VisualLinkPreview } from '../blocks/VisualLinkPreview';
+import { TechnicalGrid } from '../blocks/TechnicalGrid';
+import { HighlightBox } from '../blocks/HighlightBox';
+import { AnimatedImage } from '../blocks/AnimatedImage';
+import { ChatBubble } from '../blocks/ChatBubble';
+import { PowerCTA } from '../blocks/PowerCTA';
+import { Callout } from '../blocks/Callout';
+import { Stats } from '../blocks/Stats';
+import { SplitHeading } from '../blocks/SplitHeading';
+import { ProductTabs } from '../blocks/ProductTabs';
+
+export const Products: CollectionConfig = {
+  slug: 'products',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['featuredImage', 'title', 'sku', 'locale', 'updatedAt', '_status'],
+  },
+  versions: {
+    drafts: true,
+  },
+  access: {
+    read: ({ req: { user } }) => {
+      if (process.env.NODE_ENV === 'development') {
+        return true;
+      }
+      if (user) {
+        return true;
+      }
+      return {
+        _status: {
+          equals: 'published',
+        },
+      };
+    },
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'sku',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      required: true,
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      defaultValue: 'de',
+    },
+    {
+      name: 'categories',
+      type: 'array',
+      required: true,
+      fields: [
+        {
+          name: 'category',
+          type: 'text',
+        },
+      ],
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+        description: 'The primary thumbnail used in list views.',
+      },
+    },
+    {
+      name: 'images',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'application',
+      type: 'richText',
+      editor: lexicalEditor({}),
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: [
+              StickyNarrative,
+              ComparisonGrid,
+              VisualLinkPreview,
+              TechnicalGrid,
+              HighlightBox,
+              AnimatedImage,
+              ChatBubble,
+              PowerCTA,
+              Callout,
+              Stats,
+              SplitHeading,
+              ProductTabs,
+            ],
+          }),
+        ],
+      }),
+    },
+  ],
+};

src/payload/collections/Users.ts

@@ -0,0 +1,12 @@
+import type { CollectionConfig } from 'payload';
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+  ],
+};

src/payload/utils/lexicalParser.ts

@@ -0,0 +1,296 @@
+/**
+ * Converts a Markdown+JSX string into a Lexical AST node array.
+ * Specifically adapted for klz-cables.com custom Component Blocks.
+ */
+
+function propValue(chunk: string, prop: string): string {
+  // Match prop="value" or prop='value' or prop={value}
+  // and also multiline props like prop={\n  [\n    {...}\n  ]\n}
+  // For arrays or complex objects passed as props, basic regex might fail,
+  // but the MDX in klz-cables usually uses simpler props or children.
+  const match =
+    chunk.match(new RegExp(`${prop}=["']([^"']+)["']`)) ||
+    chunk.match(new RegExp(`${prop}=\\{([^}]+)\\}`));
+  return match ? match[1] : '';
+}
+
+function extractItemsProp(chunk: string, startTag: string): any[] {
+  // Match items={ [ ... ] } robustly without stopping at inner object braces
+  const itemsMatch = chunk.match(/items=\{\s*(\[[\s\S]*?\])\s*\}/);
+  if (itemsMatch) {
+    try {
+      const arrayString = itemsMatch[1].trim();
+      // Since klz-cables MDX passes pure JS object arrays like `items={[{title: 'A', content: 'B'}]}`,
+      // parsing it via Regex to JSON is extremely brittle due to unquoted keys and trailing commas.
+      // Using `new Function` safely evaluates the array AST directly in this Node script environment.
+      const fn = new Function(`return ${arrayString};`);
+      return fn();
+    } catch (_e: any) {
+      console.warn(`Could not parse items array for block ${startTag}:`, _e.message);
+      return [];
+    }
+  }
+  return [];
+}
+
+function blockNode(blockType: string, fields: Record<string, any>) {
+  return { type: 'block', format: '', version: 2, fields: { blockType, ...fields } };
+}
+
+function ensureChildren(parsedNodes: any[]): any[] {
+  // Lexical root nodes require at least one child node, or validation fails
+  if (parsedNodes.length === 0) {
+    return [
+      {
+        type: 'paragraph',
+        format: '',
+        indent: 0,
+        version: 1,
+        children: [{ mode: 'normal', type: 'text', text: ' ', version: 1 }],
+      },
+    ];
+  }
+  return parsedNodes;
+}
+
+export function parseMarkdownToLexical(markdown: string): any[] {
+  const textNode = (text: string) => ({
+    type: 'paragraph',
+    format: '',
+    indent: 0,
+    version: 1,
+    children: [{ mode: 'normal', type: 'text', text, version: 1 }],
+  });
+
+  const nodes: any[] = [];
+  let content = markdown;
+
+  // Strip frontmatter
+  const fm = content.match(/^---\s*\n[\s\S]*?\n---/);
+  if (fm) content = content.replace(fm[0], '').trim();
+
+  // 1. EXTRACT MULTILINE WRAPPERS BEFORE CHUNKING
+  // This allows nested newlines inside components without breaking them.
+  const extractBlocks = [
+    {
+      tag: 'HighlightBox',
+      regex: /<HighlightBox([^>]*)>([\s\S]*?)<\/HighlightBox>/g,
+      build: (props: string, inner: string) =>
+        blockNode('highlightBox', {
+          title: propValue(`<Tag ${props}>`, 'title'),
+          color: propValue(`<Tag ${props}>`, 'color') || 'primary',
+          content: {
+            root: {
+              type: 'root',
+              format: '',
+              indent: 0,
+              version: 1,
+              direction: 'ltr',
+              children: ensureChildren(parseMarkdownToLexical(inner.trim())),
+            },
+          },
+        }),
+    },
+    {
+      tag: 'ChatBubble',
+      regex: /<ChatBubble([^>]*)>([\s\S]*?)<\/ChatBubble>/g,
+      build: (props: string, inner: string) =>
+        blockNode('chatBubble', {
+          author: propValue(`<Tag ${props}>`, 'author') || 'KLZ Team',
+          avatar: propValue(`<Tag ${props}>`, 'avatar'),
+          role: propValue(`<Tag ${props}>`, 'role') || 'Assistant',
+          align: propValue(`<Tag ${props}>`, 'align') || 'left',
+          content: {
+            root: {
+              type: 'root',
+              format: '',
+              indent: 0,
+              version: 1,
+              direction: 'ltr',
+              children: ensureChildren(parseMarkdownToLexical(inner.trim())),
+            },
+          },
+        }),
+    },
+    {
+      tag: 'Callout',
+      regex: /<Callout([^>]*)>([\s\S]*?)<\/Callout>/g,
+      build: (props: string, inner: string) =>
+        blockNode('callout', {
+          type: propValue(`<Tag ${props}>`, 'type') || 'info',
+          title: propValue(`<Tag ${props}>`, 'title'),
+          content: {
+            root: {
+              type: 'root',
+              format: '',
+              indent: 0,
+              version: 1,
+              direction: 'ltr',
+              children: ensureChildren(parseMarkdownToLexical(inner.trim())),
+            },
+          },
+        }),
+    },
+  ];
+
+  // Placeholder map to temporarily store extracted multi-line blocks
+  const placeholders = new Map<string, any>();
+  let placeholderIdx = 0;
+
+  for (const block of extractBlocks) {
+    content = content.replace(block.regex, (match, propsMatch, innerMatch) => {
+      const id = `__BLOCK_PLACEHOLDER_${placeholderIdx++}__`;
+      placeholders.set(id, block.build(propsMatch, innerMatch));
+      return `\n\n${id}\n\n`; // Pad with newlines so it becomes its own chunk
+    });
+  }
+
+  // 2. CHUNK THE REST (Paragraphs, Single-line Components)
+  const rawChunks = content.split(/\n\s*\n/);
+
+  for (let chunk of rawChunks) {
+    chunk = chunk.trim();
+    if (!chunk) continue;
+
+    // Has Placeholder?
+    if (chunk.startsWith('__BLOCK_PLACEHOLDER_')) {
+      nodes.push(placeholders.get(chunk));
+      continue;
+    }
+
+    // --- Custom Component: ProductTabs ---
+    if (chunk.includes('<ProductTabs')) {
+      const dataMatch = chunk.match(/data=\{({[\s\S]*?})\}\s*\/>/);
+      if (dataMatch) {
+        try {
+          const parsedData = JSON.parse(dataMatch[1]);
+
+          // Normalize String Arrays to Payload Object Arrays { value: "string" }
+          if (parsedData.voltageTables) {
+            parsedData.voltageTables.forEach((vt: any) => {
+              if (vt.rows) {
+                vt.rows.forEach((row: any) => {
+                  if (row.cells && Array.isArray(row.cells)) {
+                    row.cells = row.cells.map((cell: any) =>
+                      typeof cell !== 'object' || cell === null ? { value: String(cell) } : cell,
+                    );
+                  }
+                });
+              }
+            });
+          }
+
+          nodes.push(
+            blockNode('productTabs', {
+              technicalItems: parsedData.technicalItems || [],
+              voltageTables: parsedData.voltageTables || [],
+            }),
+          );
+        } catch (e: any) {
+          console.warn(`Could not parse JSON payload for ProductTabs:`, e.message);
+        }
+      }
+      continue;
+    }
+
+    // --- Custom Component: StickyNarrative ---
+    if (chunk.includes('<StickyNarrative')) {
+      nodes.push(
+        blockNode('stickyNarrative', {
+          title: propValue(chunk, 'title'),
+          items: extractItemsProp(chunk, 'StickyNarrative'),
+        }),
+      );
+      continue;
+    }
+
+    // --- Custom Component: ComparisonGrid ---
+    if (chunk.includes('<ComparisonGrid')) {
+      nodes.push(
+        blockNode('comparisonGrid', {
+          title: propValue(chunk, 'title'),
+          leftLabel: propValue(chunk, 'leftLabel'),
+          rightLabel: propValue(chunk, 'rightLabel'),
+          items: extractItemsProp(chunk, 'ComparisonGrid'),
+        }),
+      );
+      continue;
+    }
+
+    // --- Custom Component: VisualLinkPreview ---
+    if (chunk.includes('<VisualLinkPreview')) {
+      nodes.push(
+        blockNode('visualLinkPreview', {
+          url: propValue(chunk, 'url'),
+          title: propValue(chunk, 'title'),
+          summary: propValue(chunk, 'summary'),
+          image: propValue(chunk, 'image'),
+        }),
+      );
+      continue;
+    }
+
+    // --- Custom Component: TechnicalGrid ---
+    if (chunk.includes('<TechnicalGrid')) {
+      nodes.push(
+        blockNode('technicalGrid', {
+          title: propValue(chunk, 'title'),
+          items: extractItemsProp(chunk, 'TechnicalGrid'),
+        }),
+      );
+      continue;
+    }
+
+    // --- Custom Component: AnimatedImage ---
+    if (chunk.includes('<AnimatedImage')) {
+      const widthMatch = chunk.match(/width=\{?(\d+)\}?/);
+      const heightMatch = chunk.match(/height=\{?(\d+)\}?/);
+      nodes.push(
+        blockNode('animatedImage', {
+          src: propValue(chunk, 'src'),
+          alt: propValue(chunk, 'alt'),
+          width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
+          height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
+        }),
+      );
+      continue;
+    }
+
+    // --- Custom Component: PowerCTA ---
+    if (chunk.includes('<PowerCTA')) {
+      nodes.push(
+        blockNode('powerCTA', {
+          locale: propValue(chunk, 'locale') || 'de',
+        }),
+      );
+      continue;
+    }
+
+    // --- Standard Markdown: Headings ---
+    const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
+    if (headingMatch) {
+      nodes.push({
+        type: 'heading',
+        tag: `h${headingMatch[1].length}`,
+        format: '',
+        indent: 0,
+        version: 1,
+        direction: 'ltr',
+        children: [{ mode: 'normal', type: 'text', text: headingMatch[2], version: 1 }],
+      });
+      continue;
+    }
+
+    // --- Standard Markdown: Images ---
+    const imageMatch = chunk.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+    if (imageMatch) {
+      nodes.push(textNode(chunk));
+      continue;
+    }
+
+    // Default: plain text paragraph
+    nodes.push(textNode(chunk));
+  }
+
+  return nodes;
+}