feat: payload cms

This commit is contained in:
2026-02-24 15:52:16 +01:00
parent a5d77fc69b
commit 4742630260
21 changed files with 255 additions and 22850 deletions

3
.npmrc Normal file
View File

@@ -0,0 +1,3 @@
@mintel:registry=https://npm.infra.mintel.me/
//npm.infra.mintel.me/:_authToken=${NPM_TOKEN}
always-auth=true

View File

@@ -83,6 +83,9 @@ export default async function BlogPost({ params }: BlogPostProps) {
priority priority
className="object-cover" className="object-cover"
sizes="100vw" sizes="100vw"
style={{
objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
}}
/> />
</div> </div>
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />

View File

@@ -1,4 +1,4 @@
import { RichText } from '@payloadcms/richtext-lexical/react'; import { defaultJSXConverters, RichText } from '@payloadcms/richtext-lexical/react';
import type { JSXConverters } from '@payloadcms/richtext-lexical/react'; import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
import Image from 'next/image'; import Image from 'next/image';
@@ -16,7 +16,9 @@ import Stats from '@/components/blog/Stats';
import SplitHeading from '@/components/blog/SplitHeading'; import SplitHeading from '@/components/blog/SplitHeading';
import ProductTabs from '@/components/ProductTabs'; import ProductTabs from '@/components/ProductTabs';
import ProductTechnicalData from '@/components/ProductTechnicalData'; import ProductTechnicalData from '@/components/ProductTechnicalData';
const jsxConverters: JSXConverters = { const jsxConverters: JSXConverters = {
...defaultJSXConverters,
blocks: { blocks: {
// Map the custom Payload Blocks created in src/payload/blocks to their React components // Map the custom Payload Blocks created in src/payload/blocks to their React components
// Payload Lexical exposes blocks using the 'block-[slug]' pattern // Payload Lexical exposes blocks using the 'block-[slug]' pattern
@@ -160,7 +162,7 @@ const jsxConverters: JSXConverters = {
/> />
} }
> >
<></> {node.fields.content && <RichText data={node.fields.content} converters={jsxConverters} />}
</ProductTabs> </ProductTabs>
), ),
}, },
@@ -191,6 +193,9 @@ const jsxConverters: JSXConverters = {
height={height} height={height}
className="w-full object-cover transition-transform duration-700 hover:scale-105" className="w-full object-cover transition-transform duration-700 hover:scale-105"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
style={{
objectPosition: `${node?.value?.focalX ?? 50}% ${node?.value?.focalY ?? 50}%`,
}}
/> />
{node?.value?.caption && ( {node?.value?.caption && (
<figcaption className="p-4 bg-neutral-dark text-white/80 text-sm text-center italic border-t border-white/10"> <figcaption className="p-4 bg-neutral-dark text-white/80 text-sm text-center italic border-t border-white/10">

View File

@@ -130,12 +130,14 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
<td className="px-3 py-2 text-xs font-bold text-primary sticky left-0 bg-white group-hover:bg-neutral-light/50 z-10 whitespace-nowrap"> <td className="px-3 py-2 text-xs font-bold text-primary sticky left-0 bg-white group-hover:bg-neutral-light/50 z-10 whitespace-nowrap">
{row.configuration} {row.configuration}
</td> </td>
{row.cells.map((cell, cellIdx) => ( {row.cells.map((cell: any, cellIdx: number) => (
<td <td
key={cellIdx} key={cellIdx}
className="px-3 py-2 text-xs text-text-secondary whitespace-nowrap" className="px-3 py-2 text-xs text-text-secondary whitespace-nowrap"
> >
{cell} {typeof cell === 'object' && cell !== null && 'value' in cell
? cell.value
: cell}
</td> </td>
))} ))}
</tr> </tr>

View File

@@ -1,4 +1,16 @@
services: services:
# Lightweight proxy: gives Caddy the labels to route klz.localhost → host Mac
klz-proxy:
image: alpine:latest
command: sleep infinity
restart: unless-stopped
networks:
- infra
labels:
- "caddy=http://${TRAEFIK_HOST:-klz.localhost}"
- "caddy.reverse_proxy=host.docker.internal:3100"
# Full Docker dev (use with `pnpm run dev:docker`)
klz-app: klz-app:
build: build:
context: . context: .
@@ -17,15 +29,24 @@ services:
NEXT_TELEMETRY_DISABLED: "1" NEXT_TELEMETRY_DISABLED: "1"
POSTGRES_URI: postgres://${DIRECTUS_DB_USER:-payload}:${DIRECTUS_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${DIRECTUS_DB_NAME:-payload} POSTGRES_URI: postgres://${DIRECTUS_DB_USER:-payload}:${DIRECTUS_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${DIRECTUS_DB_NAME:-payload}
PAYLOAD_SECRET: ${DIRECTUS_SECRET:-fallback-secret-for-dev} PAYLOAD_SECRET: ${DIRECTUS_SECRET:-fallback-secret-for-dev}
NODE_OPTIONS: "--max-old-space-size=4096" NODE_OPTIONS: "--max-old-space-size=2048"
CI: "true" # Prevents some interactive prompts during install UV_THREADPOOL_SIZE: "4"
NPM_TOKEN: ${NPM_TOKEN:-}
CI: "true"
volumes: volumes:
- .:/app - .:/app
# Named volumes for persistence & performance (mintel.me standard)
- klz_node_modules:/app/node_modules - klz_node_modules:/app/node_modules
- klz_next_cache:/app/.next - klz_next_cache:/app/.next
- klz_turbo_cache:/app/.turbo
- klz_pnpm_store:/pnpm - klz_pnpm_store:/pnpm
- ~/.npmrc:/root/.npmrc:ro - /app/.git
- /app/reference
- /app/data
deploy:
resources:
limits:
cpus: '4'
memory: 4G
command: > command: >
sh -c "pnpm install && pnpm next dev --turbo --hostname 0.0.0.0" sh -c "pnpm install && pnpm next dev --turbo --hostname 0.0.0.0"
labels: labels:
@@ -62,4 +83,5 @@ volumes:
external: false external: false
klz_node_modules: klz_node_modules:
klz_next_cache: klz_next_cache:
klz_turbo_cache:
klz_pnpm_store: klz_pnpm_store:

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

View File

@@ -32,6 +32,8 @@ export interface PostFrontmatter {
date: string; date: string;
excerpt?: string; excerpt?: string;
featuredImage?: string | null; featuredImage?: string | null;
focalX?: number;
focalY?: number;
category?: string; category?: string;
locale: string; locale: string;
public?: boolean; public?: boolean;
@@ -83,6 +85,14 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostM
typeof doc.featuredImage === 'object' && doc.featuredImage !== null typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
: null, : null,
focalX:
typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.focalX
: 50,
focalY:
typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.focalY
: 50,
public: doc._status === 'published', public: doc._status === 'published',
} as PostFrontmatter, } as PostFrontmatter,
content: doc.content as any, // Native Lexical Editor State content: doc.content as any, // Native Lexical Editor State
@@ -117,6 +127,14 @@ export async function getAllPosts(locale: string): Promise<PostMdx[]> {
typeof doc.featuredImage === 'object' && doc.featuredImage !== null typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
: null, : null,
focalX:
typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.focalX
: 50,
focalY:
typeof doc.featuredImage === 'object' && doc.featuredImage !== null
? doc.featuredImage.focalY
: 50,
} as PostFrontmatter, } as PostFrontmatter,
// Pass the Lexical content object rather than raw markdown string // Pass the Lexical content object rather than raw markdown string
content: doc.content as any, content: doc.content as any,

View File

@@ -155,12 +155,23 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
// Fetch ALL products in a single query to avoid N+1 getPayload() calls // Fetch ALL products in a single query to avoid N+1 getPayload() calls
const payload = await getPayload({ config: configPromise }); const payload = await getPayload({ config: configPromise });
const selectFields = {
title: true,
slug: true,
sku: true,
description: true,
categories: true,
images: true,
locale: true,
};
// Get products for this locale // Get products for this locale
const result = await payload.find({ const result = await payload.find({
collection: 'products', collection: 'products',
where: { locale: { equals: locale } }, where: { locale: { equals: locale } },
depth: 1, depth: 1,
pagination: false, pagination: false,
select: selectFields,
}); });
let products: ProductMdx[] = result.docs let products: ProductMdx[] = result.docs
@@ -174,15 +185,15 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
slug: doc.slug, slug: doc.slug,
frontmatter: { frontmatter: {
title: doc.title, title: doc.title,
sku: doc.sku, sku: doc.sku || '',
description: doc.description, description: doc.description || '',
categories: Array.isArray(doc.categories) ? doc.categories.map((c: any) => c.category) : [], categories: Array.isArray(doc.categories) ? doc.categories.map((c: any) => c.category) : [],
images: ((doc.images as any[]) || []) images: ((doc.images as any[]) || [])
.map((img) => (typeof img === 'string' ? img : img.url)) .map((img) => (typeof img === 'string' ? img : img.url))
.filter(Boolean), .filter(Boolean),
locale: doc.locale, locale: doc.locale,
}, },
content: doc.content, content: null, // Avoided loading into memory!
})); }));
// Also include English fallbacks for slugs not in this locale // Also include English fallbacks for slugs not in this locale
@@ -193,6 +204,7 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
where: { locale: { equals: 'en' } }, where: { locale: { equals: 'en' } },
depth: 1, depth: 1,
pagination: false, pagination: false,
select: selectFields,
}); });
const fallbacks = enResult.docs const fallbacks = enResult.docs
@@ -207,8 +219,8 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
slug: doc.slug, slug: doc.slug,
frontmatter: { frontmatter: {
title: doc.title, title: doc.title,
sku: doc.sku, sku: doc.sku || '',
description: doc.description, description: doc.description || '',
categories: Array.isArray(doc.categories) categories: Array.isArray(doc.categories)
? doc.categories.map((c: any) => c.category) ? doc.categories.map((c: any) => c.category)
: [], : [],
@@ -218,7 +230,7 @@ export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
locale: doc.locale, locale: doc.locale,
isFallback: true, isFallback: true,
}, },
content: doc.content, content: null, // Avoided loading into memory!
})); }));
products = [...products, ...fallbacks]; products = [...products, ...fallbacks];

View File

@@ -46,7 +46,7 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
if (!this.sentryPromise) { if (!this.sentryPromise) {
this.sentryPromise = import('@sentry/nextjs').then((Sentry) => { this.sentryPromise = import('@sentry/nextjs').then((Sentry) => {
// Client-side initialization must happen here since sentry.client.config.ts is empty // Client-side initialization must happen here since sentry.client.config.ts is empty
if (typeof window !== 'undefined') { if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
Sentry.init({ Sentry.init({
dsn: 'https://public@errors.infra.mintel.me/1', dsn: 'https://public@errors.infra.mintel.me/1',
tunnel: '/errors/api/relay', tunnel: '/errors/api/relay',

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

View File

@@ -4,7 +4,7 @@ import { withSentryConfig } from '@sentry/nextjs';
import { withPayload } from '@payloadcms/next/withPayload'; import { withPayload } from '@payloadcms/next/withPayload';
console.log('🚀 NEXT CONFIG LOADED FROM:', process.cwd()); const isProd = process.env.NODE_ENV === 'production';
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
onDemandEntries: { onDemandEntries: {
@@ -22,7 +22,7 @@ const nextConfig = {
fullUrl: true, fullUrl: true,
}, },
}, },
output: 'standalone', ...(isProd ? { output: 'standalone' } : {}),
async headers() { async headers() {
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin; const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin;
@@ -430,6 +430,13 @@ const withAnalyzer = withBundleAnalyzer({
enabled: process.env.ANALYZE === 'true', enabled: process.env.ANALYZE === 'true',
}); });
export default withPayload(withAnalyzer(withMintelConfig(nextConfig, { // withMintelConfig internally sets output:'standalone' and wraps with withSentryConfig.
hideSourceMaps: true, // In dev mode, standalone triggers @vercel/nft file tracing on every compile through
}))); // VirtioFS, which hammers CPU. Strip it for dev.
let resolvedConfig = withPayload(withAnalyzer(withMintelConfig(nextConfig)));
if (!isProd) {
delete resolvedConfig.output;
}
export default resolvedConfig;

File diff suppressed because it is too large Load Diff

View File

@@ -91,8 +91,9 @@
"vitest": "^4.0.16" "vitest": "^4.0.16"
}, },
"scripts": { "scripts": {
"dev": "docker network create infra 2>/dev/null || true && echo \"\\n🚀 Dockerized Environment Starting...\\n\" && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up klz-app klz-db", "dev": "COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy && NODE_ENV=development next dev --webpack --port 3100 --hostname 0.0.0.0",
"dev:infra": "docker-compose up klz-db klz-gatekeeper", "dev:docker": "docker network create infra 2>/dev/null || true && echo \"\\n🚀 Dockerized Environment Starting...\\n\" && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up klz-app klz-db",
"dev:infra": "COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "eslint .", "lint": "eslint .",
@@ -133,6 +134,13 @@
}, },
"version": "1.0.1-rc.0", "version": "1.0.1-rc.0",
"pnpm": { "pnpm": {
"onlyBuiltDependencies": [
"@parcel/watcher",
"@swc/core",
"sharp",
"esbuild",
"unrs-resolver"
],
"overrides": { "overrides": {
"next": "16.1.6", "next": "16.1.6",
"minimatch": ">=10.2.2" "minimatch": ">=10.2.2"

View File

@@ -685,6 +685,21 @@ export interface ProductTabsBlock {
id?: string | null; id?: string | null;
}[] }[]
| null; | null;
content?: {
root: {
type: string;
children: {
type: any;
version: number;
[k: string]: unknown;
}[];
direction: ('ltr' | 'rtl') | null;
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
indent: number;
version: number;
};
[k: string]: unknown;
} | null;
id?: string | null; id?: string | null;
blockName?: string | null; blockName?: string | null;
blockType: 'productTabs'; blockType: 'productTabs';

View File

@@ -8,8 +8,11 @@ import { nodemailerAdapter } from '@payloadcms/email-nodemailer';
import { BlocksFeature } from '@payloadcms/richtext-lexical'; import { BlocksFeature } from '@payloadcms/richtext-lexical';
import { payloadBlocks } from './src/payload/blocks/allBlocks'; import { payloadBlocks } from './src/payload/blocks/allBlocks';
// Disable sharp cache to prevent memory leaks in Docker // Only disable sharp cache in production to prevent memory leaks.
// In dev, the cache avoids 41s+ re-processing per image through VirtioFS.
if (process.env.NODE_ENV === 'production') {
sharp.cache(false); sharp.cache(false);
}
import { Users } from './src/payload/collections/Users'; import { Users } from './src/payload/collections/Users';
import { Media } from './src/payload/collections/Media'; import { Media } from './src/payload/collections/Media';

View File

@@ -1,10 +1,11 @@
import * as Sentry from '@sentry/nextjs'; import * as Sentry from '@sentry/nextjs';
const dsn = process.env.SENTRY_DSN; const dsn = process.env.SENTRY_DSN;
const isProd = process.env.NODE_ENV === 'production';
Sentry.init({ Sentry.init({
dsn, dsn,
enabled: Boolean(dsn), enabled: isProd && Boolean(dsn),
// Adjust this value in production, or use tracesSampler for greater control // Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1, tracesSampleRate: 1,

View File

@@ -1,10 +1,11 @@
import * as Sentry from '@sentry/nextjs'; import * as Sentry from '@sentry/nextjs';
const dsn = process.env.SENTRY_DSN; const dsn = process.env.SENTRY_DSN;
const isProd = process.env.NODE_ENV === 'production';
Sentry.init({ Sentry.init({
dsn, dsn,
enabled: Boolean(dsn), enabled: isProd && Boolean(dsn),
// Adjust this value in production, or use tracesSampler for greater control // Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1, tracesSampleRate: 1,

View File

@@ -1,4 +1,5 @@
import { Block } from 'payload'; import { Block } from 'payload';
import { lexicalEditor } from '@payloadcms/richtext-lexical';
export const ProductTabs: Block = { export const ProductTabs: Block = {
slug: 'productTabs', slug: 'productTabs',
@@ -92,5 +93,15 @@ export const ProductTabs: Block = {
}, },
], ],
}, },
{
name: 'content',
type: 'richText',
editor: lexicalEditor({
features: ({ defaultFeatures }) => [
...defaultFeatures,
// We don't need blocks inside ProductTabs for now to avoid complexity/recursion
],
}),
},
], ],
}; };

View File

@@ -53,13 +53,63 @@ function ensureChildren(parsedNodes: any[]): any[] {
return parsedNodes; return parsedNodes;
} }
function parseInlineMarkdown(text: string): any[] {
// Simple regex-based inline parser for bold and italic
// Matches **bold**, __bold__, *italic*, _italic_
const regex = /(\*\*|__|TextNode)(.*?)\1|(\*|_)(.*?)\3/g;
const nodes: any[] = [];
let lastIndex = 0;
let match;
const createTextNode = (content: string, format = 0) => ({
detail: 0,
format,
mode: 'normal',
style: '',
text: content,
type: 'text',
version: 1,
});
const rawMatch = text.matchAll(
/(\*\*(.*?)\*\*|__(.*?)__|(?<!\*)\*(?!\*)(.*?)\*|(?<!_)_(?!_)(.*?)_)/g,
);
for (const m of rawMatch) {
const offset = m.index!;
// Leading plain text
if (offset > lastIndex) {
nodes.push(createTextNode(text.slice(lastIndex, offset)));
}
const boldContent = m[2] || m[3];
const italicContent = m[4] || m[5];
if (boldContent) {
nodes.push(createTextNode(boldContent, 1)); // 1 = Bold
} else if (italicContent) {
nodes.push(createTextNode(italicContent, 2)); // 2 = Italic
}
lastIndex = offset + m[0].length;
}
// Trailing plain text
if (lastIndex < text.length) {
nodes.push(createTextNode(text.slice(lastIndex)));
}
return nodes.length > 0 ? nodes : [createTextNode(text)];
}
export function parseMarkdownToLexical(markdown: string): any[] { export function parseMarkdownToLexical(markdown: string): any[] {
const textNode = (text: string) => ({ const paragraphNode = (text: string) => ({
type: 'paragraph', type: 'paragraph',
format: '', format: '',
indent: 0, indent: 0,
version: 1, version: 1,
children: [{ mode: 'normal', type: 'text', text, version: 1 }], direction: 'ltr',
children: parseInlineMarkdown(text),
}); });
const nodes: any[] = []; const nodes: any[] = [];
@@ -70,7 +120,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
if (fm) content = content.replace(fm[0], '').trim(); if (fm) content = content.replace(fm[0], '').trim();
// 1. EXTRACT MULTILINE WRAPPERS BEFORE CHUNKING // 1. EXTRACT MULTILINE WRAPPERS BEFORE CHUNKING
// This allows nested newlines inside components without breaking them.
const extractBlocks = [ const extractBlocks = [
{ {
tag: 'HighlightBox', tag: 'HighlightBox',
@@ -131,9 +180,66 @@ export function parseMarkdownToLexical(markdown: string): any[] {
}, },
}), }),
}, },
{
tag: 'ProductTabs',
regex: /<ProductTabs([^>]*)>([\s\S]*?)<\/ProductTabs>/g,
build: (props: string, inner: string) => {
const fullTag = `<ProductTabs ${props}>`;
const dataMatch = fullTag.match(/data=\{({[\s\S]*?})\}\s*\/>/);
let technicalItems = [];
let voltageTables = [];
if (dataMatch) {
try {
const parsedData = JSON.parse(dataMatch[1]);
technicalItems = parsedData.technicalItems || [];
voltageTables = parsedData.voltageTables || [];
voltageTables.forEach((vt: any) => {
vt.rows?.forEach((row: any) => {
if (row.cells) {
row.cells = row.cells.map((c: any) =>
typeof c !== 'object' ? { value: String(c) } : c,
);
}
});
});
} catch (e) {
console.warn('Failed to parse ProductTabs JSON data:', e);
}
}
return blockNode('productTabs', {
technicalItems,
voltageTables,
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 function cleanMdxContent(text: string): string {
return text
.replace(/<section[^>]*>/g, '')
.replace(/<\/section>/g, '')
.replace(/<h3[^>]*>(.*?)<\/h3>/g, '### $1\n\n')
.replace(/<p[^>]*>(.*?)<\/p>/g, '$1\n\n')
.replace(/<strong[^>]*>(.*?)<\/strong>/g, '**$1**')
.replace(/&nbsp;/g, ' ')
.trim();
}
content = cleanMdxContent(content);
const placeholders = new Map<string, any>(); const placeholders = new Map<string, any>();
let placeholderIdx = 0; let placeholderIdx = 0;
@@ -141,59 +247,22 @@ export function parseMarkdownToLexical(markdown: string): any[] {
content = content.replace(block.regex, (match, propsMatch, innerMatch) => { content = content.replace(block.regex, (match, propsMatch, innerMatch) => {
const id = `__BLOCK_PLACEHOLDER_${placeholderIdx++}__`; const id = `__BLOCK_PLACEHOLDER_${placeholderIdx++}__`;
placeholders.set(id, block.build(propsMatch, innerMatch)); placeholders.set(id, block.build(propsMatch, innerMatch));
return `\n\n${id}\n\n`; // Pad with newlines so it becomes its own chunk return `\n\n${id}\n\n`;
}); });
} }
// 2. CHUNK THE REST (Paragraphs, Single-line Components) // 2. CHUNK THE REST
const rawChunks = content.split(/\n\s*\n/); const rawChunks = content.split(/\n\s*\n/);
for (let chunk of rawChunks) { for (let chunk of rawChunks) {
chunk = chunk.trim(); chunk = chunk.trim();
if (!chunk) continue; if (!chunk) continue;
// Has Placeholder?
if (chunk.startsWith('__BLOCK_PLACEHOLDER_')) { if (chunk.startsWith('__BLOCK_PLACEHOLDER_')) {
nodes.push(placeholders.get(chunk)); nodes.push(placeholders.get(chunk));
continue; 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')) { if (chunk.includes('<StickyNarrative')) {
nodes.push( nodes.push(
blockNode('stickyNarrative', { blockNode('stickyNarrative', {
@@ -204,7 +273,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Custom Component: ComparisonGrid ---
if (chunk.includes('<ComparisonGrid')) { if (chunk.includes('<ComparisonGrid')) {
nodes.push( nodes.push(
blockNode('comparisonGrid', { blockNode('comparisonGrid', {
@@ -217,7 +285,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Custom Component: VisualLinkPreview ---
if (chunk.includes('<VisualLinkPreview')) { if (chunk.includes('<VisualLinkPreview')) {
nodes.push( nodes.push(
blockNode('visualLinkPreview', { blockNode('visualLinkPreview', {
@@ -230,7 +297,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Custom Component: TechnicalGrid ---
if (chunk.includes('<TechnicalGrid')) { if (chunk.includes('<TechnicalGrid')) {
nodes.push( nodes.push(
blockNode('technicalGrid', { blockNode('technicalGrid', {
@@ -241,7 +307,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Custom Component: AnimatedImage ---
if (chunk.includes('<AnimatedImage')) { if (chunk.includes('<AnimatedImage')) {
const widthMatch = chunk.match(/width=\{?(\d+)\}?/); const widthMatch = chunk.match(/width=\{?(\d+)\}?/);
const heightMatch = chunk.match(/height=\{?(\d+)\}?/); const heightMatch = chunk.match(/height=\{?(\d+)\}?/);
@@ -256,7 +321,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Custom Component: PowerCTA ---
if (chunk.includes('<PowerCTA')) { if (chunk.includes('<PowerCTA')) {
nodes.push( nodes.push(
blockNode('powerCTA', { blockNode('powerCTA', {
@@ -266,30 +330,28 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue; continue;
} }
// --- Standard Markdown: Headings ---
const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/); const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
if (headingMatch) { if (headingMatch) {
const level = Math.min(headingMatch[1].length + 1, 6);
nodes.push({ nodes.push({
type: 'heading', type: 'heading',
tag: `h${headingMatch[1].length}`, tag: `h${level}`,
format: '', format: '',
indent: 0, indent: 0,
version: 1, version: 1,
direction: 'ltr', direction: 'ltr',
children: [{ mode: 'normal', type: 'text', text: headingMatch[2], version: 1 }], children: parseInlineMarkdown(headingMatch[2]),
}); });
continue; continue;
} }
// --- Standard Markdown: Images ---
const imageMatch = chunk.match(/^!\[([^\]]*)\]\(([^)]+)\)$/); const imageMatch = chunk.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
if (imageMatch) { if (imageMatch) {
nodes.push(textNode(chunk)); nodes.push(paragraphNode(chunk));
continue; continue;
} }
// Default: plain text paragraph nodes.push(paragraphNode(chunk));
nodes.push(textNode(chunk));
} }
return nodes; return nodes;