feat: payload cms

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;
+}