@marvalt/wparser 0.1.6 → 0.1.8

package/dist/components/SectionWrapper.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { WordPressBlock } from '../types';
+export interface SectionWrapperProps {
+    children: React.ReactNode;
+    /** Background color variant */
+    background?: 'light' | 'dark' | 'transparent';
+    /** Vertical spacing between sections */
+    spacing?: 'none' | 'small' | 'medium' | 'large';
+    /** Container width */
+    container?: 'full' | 'wide' | 'contained';
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional block reference for extracting additional props */
+    block?: WordPressBlock;
+}
+/**
+ * Generic section wrapper component for consistent spacing and layout
+ *
+ * Usage in component mappings:
+ * ```ts
+ * {
+ *   pattern: { name: 'core/cover' },
+ *   component: HeroSection,
+ *   wrapper: SectionWrapper,
+ *   extractProps: (block) => ({ ... })
+ * }
+ * ```
+ */
+export declare const SectionWrapper: React.FC<SectionWrapperProps>;
+//# sourceMappingURL=SectionWrapper.d.ts.map

package/dist/components/SectionWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../src/components/SectionWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;IAC9C,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;IAC1C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqDxD,CAAC"}

package/dist/index.cjs

@@ -1933,6 +1933,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') {
@@ -2013,12 +2145,398 @@ class WPErrorBoundary extends React.Component {
     }
 }
 
+/**
+ * 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;
+}
+/**
+ * Extract title from innerBlocks (finds first heading block)
+ */
+function extractTitleFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // Recursively search for heading blocks
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/heading') {
+            return getBlockTextContent(innerBlock);
+        }
+        // Recursively search nested blocks
+        const nestedTitle = extractTitleFromInnerBlocks(innerBlock);
+        if (nestedTitle)
+            return nestedTitle;
+    }
+    return null;
+}
+/**
+ * Extract subtitle/description from innerBlocks (finds first paragraph block)
+ */
+function extractSubtitleFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // Recursively search for paragraph blocks
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/paragraph') {
+            const text = getBlockTextContent(innerBlock);
+            if (text && text.trim()) {
+                return text;
+            }
+        }
+        // Recursively search nested blocks
+        const nestedSubtitle = extractSubtitleFromInnerBlocks(innerBlock);
+        if (nestedSubtitle)
+            return nestedSubtitle;
+    }
+    return null;
+}
+/**
+ * Extract buttons from innerBlocks (finds buttons block and extracts button data)
+ */
+function extractButtonsFromInnerBlocks(block) {
+    const buttons = [];
+    const innerBlocks = block.innerBlocks || [];
+    // Find buttons block
+    const findButtonsBlock = (blocks) => {
+        for (const innerBlock of blocks) {
+            if (innerBlock.name === 'core/buttons') {
+                return innerBlock;
+            }
+            if (innerBlock.innerBlocks) {
+                const found = findButtonsBlock(innerBlock.innerBlocks);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    const buttonsBlock = findButtonsBlock(innerBlocks);
+    if (!buttonsBlock || !buttonsBlock.innerBlocks) {
+        return buttons;
+    }
+    // Extract button data from button blocks
+    for (const buttonBlock of buttonsBlock.innerBlocks) {
+        if (buttonBlock.name === 'core/button') {
+            const attrs = buttonBlock.attributes || {};
+            const url = attrs['url'];
+            const text = attrs['text'] || getBlockTextContent(buttonBlock);
+            // Try to extract from innerHTML if not in attributes
+            if (!url && buttonBlock.innerHTML) {
+                const linkMatch = buttonBlock.innerHTML.match(/<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);
+                if (linkMatch) {
+                    const extractedUrl = linkMatch[1];
+                    const extractedText = linkMatch[2] || text;
+                    if (extractedUrl) {
+                        buttons.push({
+                            text: extractedText || 'Learn More',
+                            url: extractedUrl,
+                            isExternal: extractedUrl.startsWith('http://') || extractedUrl.startsWith('https://'),
+                        });
+                    }
+                }
+            }
+            else if (url && text) {
+                buttons.push({
+                    text,
+                    url,
+                    isExternal: url.startsWith('http://') || url.startsWith('https://'),
+                });
+            }
+        }
+    }
+    return buttons;
+}
+/**
+ * Extract video iframe HTML from innerBlocks (finds HTML block with iframe)
+ */
+function extractVideoIframeFromInnerBlocks(block) {
+    const innerBlocks = block.innerBlocks || [];
+    // Recursively search for HTML blocks with iframe
+    for (const innerBlock of innerBlocks) {
+        if (innerBlock.name === 'core/html' && innerBlock.innerHTML) {
+            // Check if innerHTML contains an iframe
+            if (innerBlock.innerHTML.includes('<iframe')) {
+                return innerBlock.innerHTML;
+            }
+        }
+        // Recursively search nested blocks
+        if (innerBlock.innerBlocks) {
+            const nestedVideo = extractVideoIframeFromInnerBlocks(innerBlock);
+            if (nestedVideo)
+                return nestedVideo;
+        }
+    }
+    return null;
+}
+
+/**
+ * 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 }));
+};
+
+exports.SectionWrapper = SectionWrapper;
 exports.WPContent = WPContent;
 exports.WPErrorBoundary = WPErrorBoundary;
 exports.WPPage = WPPage;
 exports.buildClassName = buildClassName;
+exports.convertImageToCloudflareVariant = convertImageToCloudflareVariant;
+exports.convertImageUrl = convertImageUrl;
+exports.convertImageUrls = convertImageUrls;
 exports.createDefaultRegistry = createDefaultRegistry;
+exports.createEnhancedRegistry = createEnhancedRegistry;
+exports.extractAlignment = extractAlignment;
+exports.extractBackgroundImage = extractBackgroundImage;
+exports.extractButtonsFromInnerBlocks = extractButtonsFromInnerBlocks;
+exports.extractContent = extractContent;
+exports.extractDimRatio = extractDimRatio;
+exports.extractFontSize = extractFontSize;
+exports.extractHeadingLevel = extractHeadingLevel;
+exports.extractImageAttributes = extractImageAttributes;
+exports.extractImageUrl = extractImageUrl;
+exports.extractMediaPosition = extractMediaPosition;
+exports.extractMinHeight = extractMinHeight;
+exports.extractOverlayColor = extractOverlayColor;
+exports.extractSubtitleFromInnerBlocks = extractSubtitleFromInnerBlocks;
+exports.extractTextAlign = extractTextAlign;
 exports.extractTextFromHTML = extractTextFromHTML;
+exports.extractTitle = extractTitle;
+exports.extractTitleFromInnerBlocks = extractTitleFromInnerBlocks;
+exports.extractVerticalAlignment = extractVerticalAlignment;
+exports.extractVideoIframeFromInnerBlocks = extractVideoIframeFromInnerBlocks;
+exports.findMatchingMapping = findMatchingMapping;
 exports.findShortcodes = findShortcodes;
 exports.getAlignmentClasses = getAlignmentClasses;
 exports.getBlockTextContent = getBlockTextContent;
@@ -2031,6 +2549,7 @@ exports.getImageUrl = getImageUrl;
 exports.getSectionSpacingClasses = getSectionSpacingClasses;
 exports.getTextAlignClasses = getTextAlignClasses;
 exports.isCloudflareImageUrl = isCloudflareImageUrl;
+exports.matchesPattern = matchesPattern;
 exports.parseGutenbergBlocks = parseGutenbergBlocks;
 exports.parseShortcodeAttrs = parseShortcodeAttrs;
 exports.renderNodes = renderNodes;