mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: payload cms

Browse Source
This commit is contained in:
Marc Mintel
2026-02-24 15:52:16 +01:00
parent a5d77fc69b
commit 4742630260
21 changed files with 255 additions and 22850 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/payload/blocks/ProductTabs.ts
View File

@@ -1,4 +1,5 @@
import { Block } from 'payload';
import { lexicalEditor } from '@payloadcms/richtext-lexical';
export const ProductTabs: Block = {
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
],
}),
},
],
};

172
src/payload/utils/lexicalParser.ts
View File

@@ -53,13 +53,63 @@ function ensureChildren(parsedNodes: any[]): any[] {
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[] {
const textNode = (text: string) => ({
const paragraphNode = (text: string) => ({
type: 'paragraph',
format: '',
indent: 0,
version: 1,
children: [{ mode: 'normal', type: 'text', text, version: 1 }],
direction: 'ltr',
children: parseInlineMarkdown(text),
});
const nodes: any[] = [];
@@ -70,7 +120,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
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',
@@ -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>();
let placeholderIdx = 0;
@@ -141,59 +247,22 @@ export function parseMarkdownToLexical(markdown: string): any[] {
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
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/);
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', {
@@ -204,7 +273,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Custom Component: ComparisonGrid ---
if (chunk.includes('<ComparisonGrid')) {
nodes.push(
blockNode('comparisonGrid', {
@@ -217,7 +285,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Custom Component: VisualLinkPreview ---
if (chunk.includes('<VisualLinkPreview')) {
nodes.push(
blockNode('visualLinkPreview', {
@@ -230,7 +297,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Custom Component: TechnicalGrid ---
if (chunk.includes('<TechnicalGrid')) {
nodes.push(
blockNode('technicalGrid', {
@@ -241,7 +307,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Custom Component: AnimatedImage ---
if (chunk.includes('<AnimatedImage')) {
const widthMatch = chunk.match(/width=\{?(\d+)\}?/);
const heightMatch = chunk.match(/height=\{?(\d+)\}?/);
@@ -256,7 +321,6 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Custom Component: PowerCTA ---
if (chunk.includes('<PowerCTA')) {
nodes.push(
blockNode('powerCTA', {
@@ -266,30 +330,28 @@ export function parseMarkdownToLexical(markdown: string): any[] {
continue;
}
// --- Standard Markdown: Headings ---
const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
if (headingMatch) {
const level = Math.min(headingMatch[1].length + 1, 6);
nodes.push({
type: 'heading',
tag: `h${headingMatch[1].length}`,
tag: `h${level}`,
format: '',
indent: 0,
version: 1,
direction: 'ltr',
children: [{ mode: 'normal', type: 'text', text: headingMatch[2], version: 1 }],
children: parseInlineMarkdown(headingMatch[2]),
});
continue;
}
// --- Standard Markdown: Images ---
const imageMatch = chunk.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
if (imageMatch) {
nodes.push(textNode(chunk));
nodes.push(paragraphNode(chunk));
continue;
}
// Default: plain text paragraph
nodes.push(textNode(chunk));
nodes.push(paragraphNode(chunk));
}
return nodes;