@marvalt/wparser 0.1.5 → 0.1.7

package/dist/index.esm.js

@@ -1515,7 +1515,7 @@ function extractTextFromHTML(html) {
     if (!html)
         return '';
     // Remove HTML tags and decode entities
-    const text = html
+    let text = html
         .replace(/<[^>]*>/g, '') // Remove HTML tags
         .replace(/&nbsp;/g, ' ') // Replace &nbsp; with space
         .replace(/&#8217;/g, "'") // Replace apostrophe entity
@@ -1526,7 +1526,11 @@ function extractTextFromHTML(html) {
         .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;
 }
 /**
@@ -1548,11 +1552,12 @@ function getBlockTextContent(block) {
 /**
  * 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
-    const url = attrs['url'] ||
+    let url = attrs['url'] ||
         attrs['src'] ||
         attrs['imageUrl'] ||
         attrs['mediaUrl'] ||
@@ -1562,10 +1567,16 @@ function getImageUrl(block) {
     }
     // Try to extract from innerHTML if it's an img tag
     if (block.innerHTML) {
-        const imgMatch = block.innerHTML.match(/src=["']([^"']+)["']/);
+        // 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;
 }
@@ -1798,8 +1809,22 @@ const Cover = ({ block, children }) => {
     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 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 });
@@ -1822,10 +1847,10 @@ const Cover = ({ block, children }) => {
     }
     // 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',
+    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", 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 || {};
@@ -1906,6 +1931,138 @@ function getString(block) {
     return getBlockTextContent(block);
 }
 
+/**
+ * Check if a block matches a pattern
+ */
+function matchesPattern(block, pattern) {
+    // Check block name
+    if (block.name !== pattern.name) {
+        return false;
+    }
+    // Check attributes if specified
+    if (pattern.attributes) {
+        const blockAttrs = block.attributes || {};
+        for (const [key, value] of Object.entries(pattern.attributes)) {
+            if (blockAttrs[key] !== value) {
+                return false;
+            }
+        }
+    }
+    // Check innerBlocks patterns if specified
+    if (pattern.innerBlocks && pattern.innerBlocks.length > 0) {
+        const blockInnerBlocks = block.innerBlocks || [];
+        // If pattern specifies innerBlocks, check if block has matching innerBlocks
+        for (const innerPattern of pattern.innerBlocks) {
+            // Find at least one matching innerBlock
+            const hasMatch = blockInnerBlocks.some(innerBlock => matchesPattern(innerBlock, innerPattern));
+            if (!hasMatch) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+/**
+ * Find the best matching component mapping for a block
+ * Returns the mapping with highest priority that matches, or null
+ */
+function findMatchingMapping(block, mappings) {
+    // Sort by priority (higher first), then by order in array
+    const sortedMappings = [...mappings].sort((a, b) => {
+        const priorityA = a.priority ?? 0;
+        const priorityB = b.priority ?? 0;
+        if (priorityA !== priorityB) {
+            return priorityB - priorityA; // Higher priority first
+        }
+        return 0; // Keep original order for same priority
+    });
+    // Find first matching mapping
+    for (const mapping of sortedMappings) {
+        if (matchesPattern(block, mapping.pattern)) {
+            return mapping;
+        }
+    }
+    return null;
+}
+
+/**
+ * Create an enhanced registry that supports pattern-based component mapping
+ *
+ * This combines the default registry (for fallback) with app-specific component mappings.
+ * When a block matches a pattern, it uses the mapped component. Otherwise, it falls back
+ * to the default renderer.
+ *
+ * @param mappings - Array of component mappings with patterns
+ * @param baseRegistry - Optional base registry (defaults to createDefaultRegistry())
+ * @returns Enhanced registry with pattern matching capabilities
+ *
+ * @example
+ * ```ts
+ * const mappings: ComponentMapping[] = [
+ *   {
+ *     pattern: { name: 'core/cover' },
+ *     component: HomeHeroSection,
+ *     extractProps: (block) => ({
+ *       backgroundImage: extractBackgroundImage(block),
+ *       title: extractTitle(block),
+ *     }),
+ *     wrapper: SectionWrapper,
+ *   },
+ * ];
+ *
+ * const registry = createEnhancedRegistry(mappings);
+ * ```
+ */
+function createEnhancedRegistry(mappings = [], baseRegistry) {
+    const base = baseRegistry || createDefaultRegistry();
+    // Create enhanced renderers that check patterns first
+    const enhancedRenderers = {
+        ...base.renderers,
+    };
+    // Override renderers for blocks that have mappings
+    // We need to check patterns at render time, so we create a wrapper renderer
+    const createPatternRenderer = (blockName) => {
+        return (props) => {
+            const { block, context } = props;
+            // Find matching mapping
+            const mapping = findMatchingMapping(block, mappings);
+            if (mapping) {
+                // Extract props from block
+                const componentProps = mapping.extractProps(block, context);
+                // Render component
+                const Component = mapping.component;
+                const content = jsxRuntimeExports.jsx(Component, { ...componentProps });
+                // Wrap with wrapper if provided
+                if (mapping.wrapper) {
+                    const Wrapper = mapping.wrapper;
+                    return jsxRuntimeExports.jsx(Wrapper, { block: block, children: content });
+                }
+                return content;
+            }
+            // Fall back to default renderer
+            const defaultRenderer = base.renderers[blockName] || base.fallback;
+            return defaultRenderer(props);
+        };
+    };
+    // For each mapping, override the renderer for that block name
+    for (const mapping of mappings) {
+        const blockName = mapping.pattern.name;
+        if (blockName) {
+            enhancedRenderers[blockName] = createPatternRenderer(blockName);
+        }
+    }
+    // Create matchBlock function
+    const matchBlock = (block) => {
+        return findMatchingMapping(block, mappings);
+    };
+    return {
+        ...base,
+        renderers: enhancedRenderers,
+        mappings,
+        matchBlock,
+    };
+}
+
 const WPContent = ({ blocks, registry, className }) => {
     if (!Array.isArray(blocks)) {
         if (process.env.NODE_ENV !== 'production') {
@@ -1939,7 +2096,7 @@ const WPPage = ({ page, registry, className }) => {
     }
     const hasHeroShortcode = 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) {
@@ -1986,5 +2143,252 @@ class WPErrorBoundary extends React.Component {
     }
 }
 
-export { WPContent, WPErrorBoundary, WPPage, buildClassName, createDefaultRegistry, extractTextFromHTML, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
+/**
+ * Extract background image URL from a block
+ * Checks various possible sources: url, backgroundImage, innerHTML
+ */
+function extractBackgroundImage(block) {
+    const attrs = block.attributes || {};
+    // Try various attribute keys
+    let url = attrs['url'] ||
+        attrs['backgroundImage'] ||
+        (typeof attrs['backgroundImage'] === 'object' && attrs['backgroundImage']?.url);
+    if (typeof url === 'string' && url.trim()) {
+        return url.trim();
+    }
+    // Try to extract from innerHTML if not found in attributes
+    if (block.innerHTML) {
+        // Try img src from innerHTML
+        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 URL from a block
+ * Returns Cloudflare URL if available, otherwise WordPress URL
+ */
+function extractImageUrl(block) {
+    return getImageUrl(block);
+}
+/**
+ * Extract image attributes (url, alt, width, height)
+ */
+function extractImageAttributes(block) {
+    return getImageAttributes(block);
+}
+/**
+ * Extract title/heading text from a block
+ */
+function extractTitle(block) {
+    const attrs = block.attributes || {};
+    const title = attrs['title'] || attrs['content'] || getBlockTextContent(block);
+    return typeof title === 'string' ? title.trim() : null;
+}
+/**
+ * Extract content/text from a block
+ * Returns React node for rendering
+ */
+function extractContent(block, context) {
+    const text = getBlockTextContent(block);
+    return text || null;
+}
+/**
+ * Extract media position from media-text block
+ */
+function extractMediaPosition(block) {
+    const attrs = block.attributes || {};
+    const position = attrs['mediaPosition'] || 'left';
+    return position === 'right' ? 'right' : 'left';
+}
+/**
+ * Extract vertical alignment from block
+ */
+function extractVerticalAlignment(block) {
+    const attrs = block.attributes || {};
+    const alignment = attrs['verticalAlignment'] || 'center';
+    if (alignment === 'top' || alignment === 'bottom') {
+        return alignment;
+    }
+    return 'center';
+}
+/**
+ * Extract alignment (full, wide, contained) from block
+ */
+function extractAlignment(block) {
+    const attrs = block.attributes || {};
+    const align = attrs['align'];
+    if (align === 'full' || align === 'wide') {
+        return align;
+    }
+    return 'contained';
+}
+/**
+ * Extract overlay color from cover block
+ */
+function extractOverlayColor(block) {
+    const attrs = block.attributes || {};
+    const overlayColor = attrs['overlayColor'];
+    if (typeof overlayColor === 'string') {
+        return overlayColor;
+    }
+    return null;
+}
+/**
+ * Extract dim ratio (overlay opacity) from cover block
+ */
+function extractDimRatio(block) {
+    const attrs = block.attributes || {};
+    const dimRatio = attrs['dimRatio'];
+    if (typeof dimRatio === 'number') {
+        return dimRatio;
+    }
+    return 0;
+}
+/**
+ * Extract min height from block
+ */
+function extractMinHeight(block) {
+    const attrs = block.attributes || {};
+    const minHeight = attrs['minHeight'];
+    const minHeightUnit = attrs['minHeightUnit'] || 'vh';
+    if (typeof minHeight === 'number') {
+        return { value: minHeight, unit: minHeightUnit };
+    }
+    return null;
+}
+/**
+ * Extract heading level from heading block
+ */
+function extractHeadingLevel(block) {
+    const attrs = block.attributes || {};
+    const level = attrs['level'];
+    if (typeof level === 'number' && level >= 1 && level <= 6) {
+        return level;
+    }
+    return 2; // Default to h2
+}
+/**
+ * Extract text alignment from block
+ */
+function extractTextAlign(block) {
+    const attrs = block.attributes || {};
+    const align = attrs['align'] || attrs['textAlign'];
+    if (align === 'left' || align === 'center' || align === 'right') {
+        return align;
+    }
+    return null;
+}
+/**
+ * Extract font size from block
+ */
+function extractFontSize(block) {
+    const attrs = block.attributes || {};
+    const fontSize = attrs['fontSize'];
+    return typeof fontSize === 'string' ? fontSize : null;
+}
+/**
+ * Convert image URL to Cloudflare variant if it's a Cloudflare URL
+ */
+function convertImageToCloudflareVariant(url, options = {}) {
+    if (!url)
+        return null;
+    if (isCloudflareImageUrl(url)) {
+        const width = options.width || 1024;
+        const height = options.height;
+        return getCloudflareVariantUrl(url, { width, height });
+    }
+    return url;
+}
+
+/**
+ * Convert image URL with optional Cloudflare variant transformation
+ *
+ * @param url - Image URL (WordPress or Cloudflare)
+ * @param options - Conversion options
+ * @returns Converted URL or original if conversion not applicable
+ */
+function convertImageUrl(url, options = {}) {
+    if (!url)
+        return null;
+    const { convertToCloudflare = true, defaultWidth = 1024, defaultHeight, forceCloudflare = false, } = options;
+    // If already Cloudflare URL and conversion is enabled
+    if (isCloudflareImageUrl(url)) {
+        if (convertToCloudflare) {
+            return getCloudflareVariantUrl(url, {
+                width: defaultWidth,
+                height: defaultHeight,
+            });
+        }
+        return url;
+    }
+    // If force conversion is enabled (not recommended - requires WordPress plugin to provide Cloudflare URLs)
+    if (forceCloudflare) {
+        // This would require additional logic to map WordPress URLs to Cloudflare URLs
+        // which should be handled by the WordPress plugin providing Cloudflare URLs in block data
+        console.warn('forceCloudflare is enabled but URL is not Cloudflare. WordPress plugin should provide Cloudflare URLs in block metadata.');
+    }
+    // Return original URL if not Cloudflare
+    return url;
+}
+/**
+ * Batch convert multiple image URLs
+ */
+function convertImageUrls(urls, options = {}) {
+    return urls.map(url => convertImageUrl(url, options));
+}
+
+/**
+ * Generic section wrapper component for consistent spacing and layout
+ *
+ * Usage in component mappings:
+ * ```ts
+ * {
+ *   pattern: { name: 'core/cover' },
+ *   component: HeroSection,
+ *   wrapper: SectionWrapper,
+ *   extractProps: (block) => ({ ... })
+ * }
+ * ```
+ */
+const SectionWrapper = ({ children, background = 'light', spacing = 'medium', container = 'contained', className, block, }) => {
+    // Background classes
+    const backgroundClasses = {
+        light: 'bg-white',
+        dark: 'bg-gray-900 text-white',
+        transparent: 'bg-transparent',
+    };
+    // Spacing classes (vertical padding)
+    const spacingClasses = {
+        none: '',
+        small: 'py-8 md:py-12',
+        medium: 'py-16 md:py-24',
+        large: 'py-24 md:py-32',
+    };
+    // Container classes
+    const containerClasses = {
+        full: 'w-full',
+        wide: 'max-w-7xl mx-auto px-4',
+        contained: 'container mx-auto px-4',
+    };
+    // Extract additional props from block if provided
+    const blockAttrs = block?.attributes || {};
+    const blockBackground = blockAttrs['backgroundColor'] || blockAttrs['background'];
+    const blockSpacing = blockAttrs['spacing'];
+    const blockContainer = blockAttrs['container'] || blockAttrs['align'];
+    // Override with block attributes if present
+    const finalBackground = blockBackground || background;
+    const finalSpacing = blockSpacing || spacing;
+    const finalContainer = blockContainer || container;
+    return (jsxRuntimeExports.jsx("section", { className: buildClassName(backgroundClasses[finalBackground] || backgroundClasses.light, spacingClasses[finalSpacing] || spacingClasses.medium, containerClasses[finalContainer] || containerClasses.contained, className), children: children }));
+};
+
+export { SectionWrapper, WPContent, WPErrorBoundary, WPPage, buildClassName, convertImageToCloudflareVariant, convertImageUrl, convertImageUrls, createDefaultRegistry, createEnhancedRegistry, extractAlignment, extractBackgroundImage, extractContent, extractDimRatio, extractFontSize, extractHeadingLevel, extractImageAttributes, extractImageUrl, extractMediaPosition, extractMinHeight, extractOverlayColor, extractTextAlign, extractTextFromHTML, extractTitle, extractVerticalAlignment, findMatchingMapping, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, matchesPattern, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
 //# sourceMappingURL=index.esm.js.map