@marvalt/wparser 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -1506,63 +1506,338 @@ function renderTextWithShortcodes(text, registry) {
     return parts;
 }
 
+/**
+ * Content extraction utilities for WordPress blocks
+ * Extracts text content from various block formats
+ */
+/**
+ * Extract text content from a block's innerHTML by stripping HTML tags
+ */
+function extractTextFromHTML(html) {
+    if (!html)
+        return '';
+    // Remove HTML tags and decode entities
+    let text = html
+        .replace(/<[^>]*>/g, '') // Remove HTML tags
+        .replace(/&nbsp;/g, ' ') // Replace &nbsp; with space
+        .replace(/&#8217;/g, "'") // Replace apostrophe entity
+        .replace(/&#8220;/g, '"') // Replace left double quote
+        .replace(/&#8221;/g, '"') // Replace right double quote
+        .replace(/&#8230;/g, '...') // Replace ellipsis
+        .replace(/&amp;/g, '&') // Replace &amp;
+        .replace(/&lt;/g, '<') // Replace &lt;
+        .replace(/&gt;/g, '>') // Replace &gt;
+        .replace(/&quot;/g, '"') // Replace &quot;
+        .replace(/&#8211;/g, '–') // Replace en dash
+        .replace(/&#8212;/g, '—') // Replace em dash
+        .trim();
+    // Clean up extra whitespace
+    text = text.replace(/\s+/g, ' ');
+    return text;
+}
+/**
+ * Extract text content from block attributes or innerHTML
+ */
+function getBlockTextContent(block) {
+    const attrs = block.attributes || {};
+    // Try various attribute keys
+    const content = attrs['content'] || attrs['text'] || attrs['value'] || '';
+    if (typeof content === 'string' && content.trim()) {
+        return content.trim();
+    }
+    // Fall back to innerHTML
+    if (block.innerHTML) {
+        return extractTextFromHTML(block.innerHTML);
+    }
+    return '';
+}
+/**
+ * Extract image URL from block attributes
+ * Checks for Cloudflare URLs first, then falls back to regular URLs
+ * Also extracts from innerHTML if needed
+ */
+function getImageUrl(block) {
+    const attrs = block.attributes || {};
+    // Check various possible URL attributes
+    let url = attrs['url'] ||
+        attrs['src'] ||
+        attrs['imageUrl'] ||
+        attrs['mediaUrl'] ||
+        attrs['backgroundImage'];
+    if (typeof url === 'string' && url.trim()) {
+        return url.trim();
+    }
+    // Try to extract from innerHTML if it's an img tag
+    if (block.innerHTML) {
+        // Try img src first
+        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
+        if (imgMatch && imgMatch[1]) {
+            return imgMatch[1];
+        }
+        // Try background-image in style attribute
+        const bgMatch = block.innerHTML.match(/background-image:\s*url\(["']?([^"')]+)["']?\)/i);
+        if (bgMatch && bgMatch[1]) {
+            return bgMatch[1];
+        }
+    }
+    return null;
+}
+/**
+ * Extract image attributes (alt, width, height) from block
+ */
+function getImageAttributes(block) {
+    const attrs = block.attributes || {};
+    const url = getImageUrl(block);
+    return {
+        url,
+        alt: attrs['alt'] || '',
+        width: attrs['width'] ? Number(attrs['width']) : undefined,
+        height: attrs['height'] ? Number(attrs['height']) : undefined,
+    };
+}
+
+/**
+ * Style mapping utilities
+ * Maps WordPress block attributes to Tailwind CSS classes
+ */
+/**
+ * Map WordPress alignment to Tailwind classes
+ */
+function getAlignmentClasses(align) {
+    if (!align)
+        return '';
+    switch (align) {
+        case 'full':
+            return 'w-full';
+        case 'wide':
+            return 'max-w-7xl mx-auto';
+        case 'center':
+            return 'mx-auto';
+        case 'left':
+            return 'mr-auto';
+        case 'right':
+            return 'ml-auto';
+        default:
+            return '';
+    }
+}
+/**
+ * Map WordPress text alignment to Tailwind classes
+ */
+function getTextAlignClasses(textAlign) {
+    if (!textAlign)
+        return '';
+    switch (textAlign) {
+        case 'center':
+            return 'text-center';
+        case 'left':
+            return 'text-left';
+        case 'right':
+            return 'text-right';
+        default:
+            return '';
+    }
+}
+/**
+ * Map WordPress font size to Tailwind classes
+ */
+function getFontSizeClasses(fontSize) {
+    if (!fontSize)
+        return '';
+    // Map WordPress font sizes to Tailwind
+    const sizeMap = {
+        'small': 'text-sm',
+        'medium': 'text-base',
+        'large': 'text-lg',
+        'x-large': 'text-xl',
+        'xx-large': 'text-3xl',
+        'xxx-large': 'text-4xl',
+    };
+    return sizeMap[fontSize] || '';
+}
+/**
+ * Get container classes based on layout and alignment
+ */
+function getContainerClasses(align, layout) {
+    const alignClass = getAlignmentClasses(align);
+    // If layout is constrained, use container
+    if (layout?.type === 'constrained') {
+        return align === 'full' ? 'w-full' : 'container';
+    }
+    return alignClass || 'container';
+}
+/**
+ * Get spacing classes for sections
+ */
+function getSectionSpacingClasses() {
+    return 'py-16 md:py-24';
+}
+/**
+ * Get content spacing classes
+ */
+function getContentSpacingClasses() {
+    return 'space-y-6';
+}
+/**
+ * Build className string from multiple class sources
+ */
+function buildClassName(...classes) {
+    return classes
+        .filter((cls) => Boolean(cls && cls.trim()))
+        .join(' ')
+        .trim();
+}
+
+/**
+ * Cloudflare Images URL helpers for wparser package
+ * Formats Cloudflare image URLs with variants for optimal performance
+ */
+/**
+ * Check if a URL is a Cloudflare Images URL
+ */
+const isCloudflareImageUrl = (url) => {
+    if (!url)
+        return false;
+    try {
+        const u = new URL(url);
+        return u.hostname.toLowerCase().includes('imagedelivery.net');
+    }
+    catch {
+        return false;
+    }
+};
+/**
+ * Append Cloudflare Images variant to the base URL if not already present.
+ * Example output: https://imagedelivery.net/<account>/<id>/w=1024,h=600
+ */
+const getCloudflareVariantUrl = (url, options) => {
+    if (!isCloudflareImageUrl(url))
+        return url;
+    // If a transform already exists, return as-is
+    if (/\/w=\d+/.test(url) || /\/(public|thumbnail|banner|avatar)/.test(url)) {
+        return url;
+    }
+    const { width, height } = options;
+    const hasTrailingSlash = url.endsWith('/');
+    const base = hasTrailingSlash ? url.slice(0, -1) : url;
+    const variant = `w=${Math.max(1, Math.floor(width))}` + (height ? `,h=${Math.max(1, Math.floor(height))}` : '');
+    return `${base}/${variant}`;
+};
+
 const Paragraph = ({ block, context }) => {
-    const content = getString(block);
+    const content = getBlockTextContent(block);
+    const attrs = block.attributes || {};
+    const textAlign = getTextAlignClasses(attrs['align']);
     // Check if content contains shortcodes
     const hasShortcodes = /\[(\w+)/.test(content);
     if (hasShortcodes && context.registry.shortcodes) {
         const parts = renderTextWithShortcodes(content, context.registry);
-        return jsxRuntimeExports.jsx("p", { className: "prose-p", children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', textAlign), children: parts });
     }
-    return jsxRuntimeExports.jsx("p", { className: "prose-p", children: content });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', textAlign), children: content });
 };
 const Heading = ({ block, children }) => {
-    const { level = 2 } = block.attributes || {};
-    const content = getString(block);
+    const attrs = block.attributes || {};
+    const { level = 2 } = attrs;
+    const content = getBlockTextContent(block);
+    const textAlign = getTextAlignClasses(attrs['textAlign']);
+    const fontSize = getFontSizeClasses(attrs['fontSize']);
     const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
-    return jsxRuntimeExports.jsx(Tag, { className: "prose-headings font-semibold", children: children ?? content });
+    // Default heading sizes if fontSize not specified
+    const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
+    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold text-gray-900', sizeClass, textAlign), children: children ?? content }));
 };
 const Image = ({ block }) => {
-    const { url, alt, width, height } = block.attributes || {};
-    if (!url)
+    const imageAttrs = getImageAttributes(block);
+    if (!imageAttrs.url)
         return null;
-    return (jsxRuntimeExports.jsx("img", { src: url, alt: alt || '', width: width, height: height, className: "w-full h-auto object-cover", loading: "lazy" }));
+    // Use Cloudflare variant URL if it's a Cloudflare image
+    let imageUrl = imageAttrs.url;
+    if (isCloudflareImageUrl(imageUrl)) {
+        const width = imageAttrs.width || 1024;
+        const height = imageAttrs.height;
+        imageUrl = getCloudflareVariantUrl(imageUrl, { width, height });
+    }
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: "w-full h-auto object-cover rounded-lg", loading: "lazy" }));
 };
 const List = ({ block, children }) => {
-    const { ordered } = block.attributes || {};
+    const attrs = block.attributes || {};
+    const { ordered } = attrs;
     const Tag = ordered ? 'ol' : 'ul';
-    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-1' }, children);
+    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-2 text-gray-700' }, children);
 };
 const ListItem = ({ children }) => {
-    return jsxRuntimeExports.jsx("li", { children: children });
+    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
 };
-const Group = ({ children }) => {
-    return jsxRuntimeExports.jsx("div", { className: "space-y-4", children: children });
+const Group = ({ block, children }) => {
+    const attrs = block.attributes || {};
+    const align = attrs['align'];
+    const layout = attrs['layout'];
+    // Determine if this is a section-level group (has alignment) or content-level
+    const isSection = align === 'full' || align === 'wide';
+    const containerClass = getContainerClasses(align, layout);
+    const spacingClass = isSection ? getSectionSpacingClasses() : getContentSpacingClasses();
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(containerClass, spacingClass), children: children }));
 };
-const Columns = ({ children }) => {
-    return jsxRuntimeExports.jsx("div", { className: "grid gap-6 md:grid-cols-2", children: children });
+const Columns = ({ block, children }) => {
+    const attrs = block.attributes || {};
+    const align = attrs['align'];
+    const alignClass = getAlignmentClasses(align);
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12', alignClass), children: children }));
 };
-const Column = ({ children }) => {
-    return jsxRuntimeExports.jsx("div", { className: "space-y-4", children: children });
+const Column = ({ block, children }) => {
+    const attrs = block.attributes || {};
+    const width = attrs['width'];
+    // Handle column width (e.g., "50%" becomes flex-basis)
+    const style = width ? { flexBasis: width } : undefined;
+    return (jsxRuntimeExports.jsx("div", { className: "space-y-4", style: style, children: children }));
 };
 const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
 const ButtonBlock = ({ block }) => {
-    const { url, text } = block.attributes || {};
-    if (!url)
+    const attrs = block.attributes || {};
+    const url = attrs['url'];
+    const text = attrs['text'];
+    attrs['linkDestination'];
+    if (!url && !text)
         return null;
-    return (jsxRuntimeExports.jsx("a", { href: url, className: "inline-flex items-center rounded-md bg-primary px-4 py-2 text-white", children: text || 'Learn more' }));
+    const buttonText = text || getBlockTextContent(block) || 'Learn more';
+    // Handle internal vs external links
+    const isExternal = url && (url.startsWith('http://') || url.startsWith('https://'));
+    const linkProps = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-white font-medium hover:bg-primary/90 transition-colors", ...linkProps, children: buttonText }));
 };
 const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const { url, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, hasParallax, } = attrs;
+    const { url, id, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
     // Get background image URL from various possible sources
-    const bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    let bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    // If not found in attributes, try to extract from innerHTML
+    if (!bgImageUrl && block.innerHTML) {
+        // Try to extract img src from innerHTML
+        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
+        if (imgMatch && imgMatch[1]) {
+            bgImageUrl = imgMatch[1];
+        }
+        // Try background-image in style attribute
+        if (!bgImageUrl) {
+            const bgMatch = block.innerHTML.match(/background-image:\s*url\(["']?([^"')]+)["']?\)/i);
+            if (bgMatch && bgMatch[1]) {
+                bgImageUrl = bgMatch[1];
+            }
+        }
+    }
+    // Convert to Cloudflare URL if it's a Cloudflare image, otherwise use as-is
+    if (bgImageUrl && isCloudflareImageUrl(bgImageUrl)) {
+        // Use full width for cover images
+        bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+    }
     // Build alignment classes
-    const alignClass = align === 'full' ? 'w-full' : align === 'wide' ? 'max-w-7xl mx-auto' : '';
+    const alignClass = getAlignmentClasses(align);
     // Build style object
     const style = {};
     if (minHeight) {
-        style.minHeight = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;
+        const minHeightValue = typeof minHeight === 'number' ? minHeight : parseFloat(String(minHeight));
+        style.minHeight = minHeightUnit === 'vh' ? `${minHeightValue}vh` : `${minHeightValue}px`;
     }
     if (bgImageUrl) {
         style.backgroundImage = `url(${bgImageUrl})`;
@@ -1573,11 +1848,11 @@ const Cover = ({ block, children }) => {
         }
     }
     // Calculate overlay opacity
-    const overlayOpacity = dimRatio / 100;
-    return (jsxRuntimeExports.jsxs("div", { className: `relative ${alignClass}`, style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0", style: {
-                    backgroundColor: overlayColor || '#000000',
+    const overlayOpacity = typeof dimRatio === 'number' ? dimRatio / 100 : 0;
+    return (jsxRuntimeExports.jsxs("div", { className: buildClassName('relative w-full', alignClass), style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0 z-0", style: {
+                    backgroundColor: overlayColor === 'contrast' ? '#000000' : (overlayColor || '#000000'),
                     opacity: overlayOpacity,
-                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: "relative z-10 container mx-auto px-4 py-12", children: children })] }));
+                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: buildClassName('relative z-10', align === 'full' ? 'w-full' : 'container mx-auto px-4'), children: children })] }));
 };
 const MediaText = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -1594,7 +1869,7 @@ const MediaText = ({ block, children, context }) => {
     // Content is all other children
     const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
     // Build alignment classes
-    const alignClass = align === 'full' ? 'w-full' : align === 'wide' ? 'max-w-7xl mx-auto' : 'max-w-6xl mx-auto';
+    const alignClass = getAlignmentClasses(align) || 'max-w-7xl mx-auto';
     // Vertical alignment classes
     const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
         verticalAlignment === 'bottom' ? 'items-end' :
@@ -1603,7 +1878,7 @@ const MediaText = ({ block, children, context }) => {
     const stackClass = 'flex-col md:flex-row';
     // Media position determines order
     const isMediaRight = mediaPosition === 'right';
-    return (jsxRuntimeExports.jsx("div", { className: `${alignClass} px-4`, children: jsxRuntimeExports.jsxs("div", { className: `flex ${stackClass} ${verticalAlignClass} gap-6`, children: [jsxRuntimeExports.jsx("div", { className: `${isMediaRight ? 'order-2' : 'order-1'} ${imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0'}`, children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded" }) }), jsxRuntimeExports.jsx("div", { className: `${isMediaRight ? 'order-1' : 'order-2'} ${imageFill ? 'w-full md:w-1/2' : 'flex-1'} space-y-4`, children: contentElements.length > 0 ? contentElements : children })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', imageFill ? 'w-full md:w-1/2' : 'flex-1', 'space-y-4'), children: contentElements.length > 0 ? contentElements : children })] }) }));
 };
 const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety
@@ -1621,7 +1896,15 @@ function createDefaultRegistry() {
         'core/column': Column,
         'core/separator': Separator,
         'core/button': ButtonBlock,
-        'core/buttons': ({ children }) => jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-3", children: children }),
+        'core/buttons': ({ block, children }) => {
+            const attrs = block.attributes || {};
+            const layout = attrs['layout'];
+            const justifyContent = layout?.justifyContent || 'left';
+            const justifyClass = justifyContent === 'center' ? 'justify-center' :
+                justifyContent === 'right' ? 'justify-end' :
+                    'justify-start';
+            return jsxRuntimeExports.jsx("div", { className: buildClassName('flex flex-wrap gap-3', justifyClass), children: children });
+        },
         'core/quote': ({ children }) => jsxRuntimeExports.jsx("blockquote", { className: "border-l-4 pl-4 italic", children: children }),
         'core/code': ({ block }) => (jsxRuntimeExports.jsx("pre", { className: "bg-gray-100 p-3 rounded text-sm overflow-auto", children: jsxRuntimeExports.jsx("code", { children: getString(block) }) })),
         'core/preformatted': ({ block }) => jsxRuntimeExports.jsx("pre", { children: getString(block) }),
@@ -1645,12 +1928,9 @@ function createDefaultRegistry() {
         fallback: Fallback,
     };
 }
+// Legacy function for backward compatibility - use getBlockTextContent instead
 function getString(block) {
-    const attrs = (block.attributes || {});
-    const content = attrs['content'];
-    const text = attrs['text'];
-    const value = (typeof content === 'string' ? content : typeof text === 'string' ? text : block.innerHTML || '');
-    return String(value);
+    return getBlockTextContent(block);
 }
 
 const WPContent = ({ blocks, registry, className }) => {
@@ -1686,7 +1966,7 @@ const WPPage = ({ page, registry, className }) => {
     }
     const hasHeroShortcode = React.useMemo(() => detectHeroShortcode(page.blocks), [page.blocks]);
     const featured = getFeaturedImage(page);
-    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsxs("div", { className: "container mx-auto px-4 py-8 prose max-w-none", children: [jsxRuntimeExports.jsx("header", { className: "mb-8", children: page.title?.rendered && (jsxRuntimeExports.jsx("h1", { className: "text-3xl font-bold", children: page.title.rendered })) }), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry })] })] }));
+    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry })] }));
 };
 function detectHeroShortcode(blocks) {
     for (const block of blocks) {
@@ -1736,8 +2016,21 @@ class WPErrorBoundary extends React.Component {
 exports.WPContent = WPContent;
 exports.WPErrorBoundary = WPErrorBoundary;
 exports.WPPage = WPPage;
+exports.buildClassName = buildClassName;
 exports.createDefaultRegistry = createDefaultRegistry;
+exports.extractTextFromHTML = extractTextFromHTML;
 exports.findShortcodes = findShortcodes;
+exports.getAlignmentClasses = getAlignmentClasses;
+exports.getBlockTextContent = getBlockTextContent;
+exports.getCloudflareVariantUrl = getCloudflareVariantUrl;
+exports.getContainerClasses = getContainerClasses;
+exports.getContentSpacingClasses = getContentSpacingClasses;
+exports.getFontSizeClasses = getFontSizeClasses;
+exports.getImageAttributes = getImageAttributes;
+exports.getImageUrl = getImageUrl;
+exports.getSectionSpacingClasses = getSectionSpacingClasses;
+exports.getTextAlignClasses = getTextAlignClasses;
+exports.isCloudflareImageUrl = isCloudflareImageUrl;
 exports.parseGutenbergBlocks = parseGutenbergBlocks;
 exports.parseShortcodeAttrs = parseShortcodeAttrs;
 exports.renderNodes = renderNodes;