@marvalt/wparser 0.1.3 → 0.1.5

package/README.md

@@ -57,6 +57,8 @@ const registry = createDefaultRegistry();
 
 ## Supported core blocks (default registry)
 - paragraph, heading, image, list, list-item, group, columns, column, separator, buttons/button, quote, code, preformatted, table (+ row/cell)
+- **cover** - Hero sections with background images, overlays, and inner content
+- **media-text** - Side-by-side media and text layouts with responsive stacking
 
 ## Custom renderers
 Extend or replace mappings:

package/dist/index.cjs

@@ -1506,51 +1506,354 @@ 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
+    const 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;
+        .trim();
+    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
+ */
+function getImageUrl(block) {
+    const attrs = block.attributes || {};
+    // Check various possible URL attributes
+    const 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) {
+        const imgMatch = block.innerHTML.match(/src=["']([^"']+)["']/);
+        if (imgMatch && imgMatch[1]) {
+            return imgMatch[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, id, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
+    // Get background image URL from various possible sources
+    let bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    // If we have an image ID, try to get Cloudflare URL from media data
+    // For now, use the URL as-is (should already be Cloudflare if processed)
+    if (bgImageUrl && isCloudflareImageUrl(bgImageUrl)) {
+        // Use full width for cover images
+        bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+    }
+    // Build alignment classes
+    const alignClass = getAlignmentClasses(align);
+    // Build style object
+    const style = {};
+    if (minHeight) {
+        const minHeightValue = typeof minHeight === 'number' ? minHeight : parseFloat(String(minHeight));
+        style.minHeight = minHeightUnit === 'vh' ? `${minHeightValue}vh` : `${minHeightValue}px`;
+    }
+    if (bgImageUrl) {
+        style.backgroundImage = `url(${bgImageUrl})`;
+        style.backgroundSize = 'cover';
+        style.backgroundPosition = 'center';
+        if (hasParallax) {
+            style.backgroundAttachment = 'fixed';
+        }
+    }
+    // Calculate overlay opacity
+    const overlayOpacity = typeof dimRatio === 'number' ? dimRatio / 100 : 0;
+    return (jsxRuntimeExports.jsxs("div", { className: buildClassName('relative', alignClass), style: style, children: [overlayOpacity > 0 && (jsxRuntimeExports.jsx("span", { className: "absolute inset-0", style: {
+                    backgroundColor: overlayColor || '#000000',
+                    opacity: overlayOpacity,
+                }, "aria-hidden": "true" })), jsxRuntimeExports.jsx("div", { className: "relative z-10 container", children: children })] }));
+};
+const MediaText = ({ block, children, context }) => {
+    const attrs = block.attributes || {};
+    const { mediaPosition = 'left', verticalAlignment = 'center', imageFill = false, align = 'wide', } = attrs;
+    // Access innerBlocks to identify media vs content
+    const innerBlocks = block.innerBlocks || [];
+    // Find media block (image or video)
+    const mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
+    // Render children - media-text typically has media as first child, then content
+    const childrenArray = React.Children.toArray(children);
+    const mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
+        ? childrenArray[mediaBlockIndex]
+        : null;
+    // Content is all other children
+    const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
+    // Build alignment classes
+    const alignClass = getAlignmentClasses(align) || 'max-w-7xl mx-auto';
+    // Vertical alignment classes
+    const verticalAlignClass = verticalAlignment === 'top' ? 'items-start' :
+        verticalAlignment === 'bottom' ? 'items-end' :
+            'items-center';
+    // Stack on mobile
+    const stackClass = 'flex-col md:flex-row';
+    // Media position determines order
+    const isMediaRight = mediaPosition === 'right';
+    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
@@ -1568,13 +1871,25 @@ 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) }),
         'core/table': ({ children }) => jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: jsxRuntimeExports.jsx("table", { className: "table-auto w-full", children: children }) }),
         'core/table-row': ({ children }) => jsxRuntimeExports.jsx("tr", { children: children }),
         'core/table-cell': ({ children }) => jsxRuntimeExports.jsx("td", { className: "border px-3 py-2", children: children }),
+        // Cover block - hero sections with background images
+        'core/cover': Cover,
+        // Media & Text block - side-by-side media and content
+        'core/media-text': MediaText,
         // HTML block - render innerHTML as-is
         // Note: Shortcodes in HTML blocks are not parsed (they would need to be in text content)
         'core/html': ({ block }) => {
@@ -1588,12 +1903,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 }) => {
@@ -1679,8 +1991,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;