@marvalt/wparser 0.1.25 → 0.1.29

package/dist/index.d.ts

@@ -50,6 +50,7 @@ interface RenderContext {
     registry: ComponentRegistry;
     page?: WordPressPageMinimal;
     colorMapper?: ColorMapper;
+    spacingConfig?: SpacingConfig;
 }
 interface BlockRendererProps {
     block: WordPressBlock;
@@ -70,6 +71,8 @@ interface ComponentRegistry {
     fallback: BlockRenderer;
     /** Optional color mapper for converting WordPress theme colors to CSS classes */
     colorMapper?: ColorMapper;
+    /** Optional spacing configuration for customizing element spacing */
+    spacingConfig?: SpacingConfig;
 }
 /**
  * Pattern matching for blocks - allows matching blocks by name and attributes
@@ -111,6 +114,31 @@ interface EnhancedRegistry extends ComponentRegistry {
     /** Find matching component mapping for a block */
     matchBlock: (block: WordPressBlock) => ComponentMapping | null;
 }
+/**
+ * Spacing configuration for customizing element and section spacing
+ * Allows applications to control spacing values while maintaining consistency
+ */
+interface SpacingConfig {
+    /** Spacing for paragraph elements (e.g., 'my-4', 'my-6') */
+    paragraph?: string;
+    /** Spacing for heading elements by level */
+    heading?: {
+        /** H1 spacing (e.g., 'mt-8 mb-6') */
+        h1?: string;
+        /** H2 spacing (e.g., 'mt-6 mb-4') */
+        h2?: string;
+        /** H3 and below spacing (e.g., 'mt-4 mb-3') */
+        h3?: string;
+    };
+    /** Spacing for image elements (e.g., 'my-4', 'my-6') */
+    image?: string;
+    /** Spacing for list elements (e.g., 'my-4', 'my-6') */
+    list?: string;
+    /** Section-level padding (for groups with align: 'full' or 'wide') */
+    section?: string;
+    /** Content-level spacing (for groups without alignment) */
+    content?: string;
+}
 
 type WPNode = WordPressBlock;
 interface ParseOptions {
@@ -122,7 +150,7 @@ interface RenderOptions {
 }
 declare function renderNodes(blocks: WordPressBlock[], registry: ComponentRegistry, options?: RenderOptions, page?: WordPressPageMinimal): React$1.ReactNode;
 
-declare function createDefaultRegistry(colorMapper?: ColorMapper): ComponentRegistry;
+declare function createDefaultRegistry(colorMapper?: ColorMapper, spacingConfig?: SpacingConfig): ComponentRegistry;
 
 /**
  * Create an enhanced registry that supports pattern-based component mapping
@@ -152,7 +180,7 @@ declare function createDefaultRegistry(colorMapper?: ColorMapper): ComponentRegi
  * const registry = createEnhancedRegistry(mappings);
  * ```
  */
-declare function createEnhancedRegistry(mappings?: ComponentMapping[], baseRegistry?: ComponentRegistry, colorMapper?: ColorMapper): EnhancedRegistry;
+declare function createEnhancedRegistry(mappings?: ComponentMapping[], baseRegistry?: ComponentRegistry, colorMapper?: ColorMapper, spacingConfig?: SpacingConfig): EnhancedRegistry;
 
 interface WPContentProps {
     blocks: WordPressBlock[];
@@ -455,6 +483,11 @@ declare function extractVideoIframeFromInnerBlocks(block: WordPressBlock): strin
  * ```
  */
 declare function extractBackgroundColor(block: WordPressBlock, context: RenderContext): string | null;
+/**
+ * Extract spacer height from block attributes or innerHTML
+ * Returns height in pixels, or null if not found
+ */
+declare function extractSpacerHeight(block: WordPressBlock): number | null;
 
 interface ImageConversionOptions {
     /** Convert to Cloudflare variant if URL is already Cloudflare */
@@ -507,5 +540,5 @@ interface SectionWrapperProps {
  */
 declare const SectionWrapper: React$1.FC<SectionWrapperProps>;
 
-export { SectionWrapper, WPContent, WPErrorBoundary, WPPage, buildClassName, convertImageToCloudflareVariant, convertImageUrl, convertImageUrls, createDefaultRegistry, createEnhancedRegistry, extractAlignment, extractBackgroundColor, extractBackgroundImage, extractButtonsFromInnerBlocks, extractContent, extractDimRatio, extractFontSize, extractHeadingLevel, extractImageAttributes, extractImageUrl, extractImageUrlWithFallback, extractMediaPosition, extractMinHeight, extractOverlayColor, extractSubtitleFromInnerBlocks, extractTextAlign, extractTextAlignFromInnerBlocks, extractTextFromHTML, extractTitle, extractTitleFromInnerBlocks, extractVerticalAlignment, extractVideoIframeFromInnerBlocks, findMatchingMapping, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, isValidCloudflareUrl, matchesPattern, parseContentPosition, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
-export type { AuthMode, BlockPattern, BlockRenderer, BlockRendererProps, CloudflareVariantOptions, ColorMapper, ComponentMapping, ComponentRegistry, EnhancedRegistry, ImageConversionOptions, ParseOptions, ParsedShortcode, RenderContext, RenderOptions, SectionWrapperProps, ShortcodeAttributes, ShortcodeRenderer, WPContentProps, WPNode, WPPageProps, WordPressBlock, WordPressEmbedded, WordPressFeaturedMedia, WordPressPageMinimal, WordPressTitleField };
+export { SectionWrapper, WPContent, WPErrorBoundary, WPPage, buildClassName, convertImageToCloudflareVariant, convertImageUrl, convertImageUrls, createDefaultRegistry, createEnhancedRegistry, extractAlignment, extractBackgroundColor, extractBackgroundImage, extractButtonsFromInnerBlocks, extractContent, extractDimRatio, extractFontSize, extractHeadingLevel, extractImageAttributes, extractImageUrl, extractImageUrlWithFallback, extractMediaPosition, extractMinHeight, extractOverlayColor, extractSpacerHeight, extractSubtitleFromInnerBlocks, extractTextAlign, extractTextAlignFromInnerBlocks, extractTextFromHTML, extractTitle, extractTitleFromInnerBlocks, extractVerticalAlignment, extractVideoIframeFromInnerBlocks, findMatchingMapping, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, isValidCloudflareUrl, matchesPattern, parseContentPosition, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
+export type { AuthMode, BlockPattern, BlockRenderer, BlockRendererProps, CloudflareVariantOptions, ColorMapper, ComponentMapping, ComponentRegistry, EnhancedRegistry, ImageConversionOptions, ParseOptions, ParsedShortcode, RenderContext, RenderOptions, SectionWrapperProps, ShortcodeAttributes, ShortcodeRenderer, SpacingConfig, WPContentProps, WPNode, WPPageProps, WordPressBlock, WordPressEmbedded, WordPressFeaturedMedia, WordPressPageMinimal, WordPressTitleField };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClH,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,2BAA2B,EAC3B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,+BAA+B,EAC/B,+BAA+B,EAC/B,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClH,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,2BAA2B,EAC3B,8BAA8B,EAC9B,6BAA6B,EAC7B,iCAAiC,EACjC,+BAA+B,EAC/B,+BAA+B,EAC/B,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC"}

package/dist/index.esm.js

@@ -1388,7 +1388,16 @@ function renderBlock(block, registry, key, options, page) {
     const children = block.innerBlocks && block.innerBlocks.length
         ? block.innerBlocks.map((child, i) => renderBlock(child, registry, `${key}-${i}`, options, page))
         : undefined;
-    const node = Renderer({ block, children, context: { registry, page, colorMapper: registry.colorMapper } });
+    const node = Renderer({
+        block,
+        children,
+        context: {
+            registry,
+            page,
+            colorMapper: registry.colorMapper,
+            spacingConfig: registry.spacingConfig,
+        }
+    });
     if (options?.debugWrappers) {
         return (jsxRuntimeExports.jsx("div", { "data-block": block.name, className: "wp-block", children: node }, key));
     }
@@ -2048,6 +2057,36 @@ function extractBackgroundColor(block, context) {
     // Fallback: return null (no background applied)
     return null;
 }
+/**
+ * Extract spacer height from block attributes or innerHTML
+ * Returns height in pixels, or null if not found
+ */
+function extractSpacerHeight(block) {
+    const attrs = block.attributes || {};
+    // First, try to get height from attributes
+    const height = attrs['height'];
+    if (typeof height === 'number') {
+        return height;
+    }
+    if (typeof height === 'string') {
+        // Parse "100px" or "100" to number
+        const match = height.match(/^(\d+)/);
+        if (match) {
+            return parseInt(match[1], 10);
+        }
+    }
+    // Fall back to parsing innerHTML for style="height:100px"
+    if (block.innerHTML) {
+        const styleMatch = block.innerHTML.match(/style=["']([^"']+)["']/i);
+        if (styleMatch) {
+            const heightMatch = styleMatch[1].match(/height:\s*(\d+)px/i);
+            if (heightMatch) {
+                return parseInt(heightMatch[1], 10);
+            }
+        }
+    }
+    return null;
+}
 
 /**
  * Style mapping utilities
@@ -2141,10 +2180,25 @@ function buildClassName(...classes) {
         .trim();
 }
 
+// Helper function to get spacing value with fallback
+// Only accepts string keys (excludes 'heading' which is an object)
+function getSpacing(spacingConfig, key, fallback) {
+    return spacingConfig?.[key] || fallback;
+}
+// Helper function to get heading spacing
+function getHeadingSpacing(spacingConfig, level) {
+    const headingConfig = spacingConfig?.heading;
+    if (level === 1)
+        return headingConfig?.h1 || 'mt-10 mb-8';
+    if (level === 2)
+        return headingConfig?.h2 || 'mt-8 mb-6';
+    return headingConfig?.h3 || 'mt-6 mb-4';
+}
 const Paragraph = ({ block, context }) => {
     const content = getBlockTextContent(block);
     const attrs = block.attributes || {};
     const textAlign = getTextAlignClasses(attrs['align']);
+    const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'paragraph', 'my-6');
     // Check if content contains shortcodes
     const hasShortcodes = /\[(\w+)/.test(content);
     if (hasShortcodes && context.registry.shortcodes) {
@@ -2175,14 +2229,14 @@ const Paragraph = ({ block, context }) => {
         };
         const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
         if (hasBlockLevelContent) {
-            // Render block-level content without <p> wrapper
-            return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: parts });
+            // Render block-level content without <p> wrapper, but add spacing wrapper
+            return jsxRuntimeExports.jsx("div", { className: spacing, children: parts });
         }
-        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700 my-4', textAlign), children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: parts });
     }
-    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700 my-4', textAlign), children: content });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: content });
 };
-const Heading = ({ block, children }) => {
+const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const { level = 2 } = attrs;
     const content = getBlockTextContent(block);
@@ -2191,12 +2245,11 @@ const Heading = ({ block, children }) => {
     const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
     // Default heading sizes if fontSize not specified
     const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
-    // Add spacing: mt for top (except first heading), mb for bottom
-    // Use larger bottom margin for headings to create visual separation
-    const spacingClass = level === 1 ? 'mt-8 mb-6' : level === 2 ? 'mt-6 mb-4' : 'mt-4 mb-3';
+    // Get spacing from config with improved defaults
+    const spacingClass = getHeadingSpacing(context.spacingConfig || context.registry.spacingConfig, level);
     return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold text-gray-900', sizeClass, textAlign, spacingClass), children: children ?? content }));
 };
-const Image = ({ block }) => {
+const Image = ({ block, context }) => {
     const imageAttrs = getImageAttributes(block);
     if (!imageAttrs.url)
         return null;
@@ -2207,13 +2260,15 @@ const Image = ({ block }) => {
         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 rounded-lg object-cover my-4", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
+    const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'image', 'my-6');
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: buildClassName('w-full h-auto rounded-lg object-cover', spacing), style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
 };
-const List = ({ block, children }) => {
+const List = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const { ordered } = attrs;
     const Tag = ordered ? 'ol' : 'ul';
-    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-2 text-gray-700 my-4' }, children);
+    const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'list', 'my-6');
+    return React.createElement(Tag, { className: buildClassName('list-disc pl-6 space-y-2 text-gray-700', spacing) }, children);
 };
 const ListItem = ({ children }) => {
     return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
@@ -2228,7 +2283,11 @@ const Group = ({ block, children, context }) => {
     // 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();
+    // Get spacing from config or use defaults
+    const spacingConfig = context.spacingConfig || context.registry.spacingConfig;
+    const spacingClass = isSection
+        ? (spacingConfig?.section || getSectionSpacingClasses())
+        : (spacingConfig?.content || getContentSpacingClasses());
     // Ensure container class is always applied for constrained groups
     const finalContainerClass = layout?.type === 'constrained' && align === 'wide'
         ? 'container'
@@ -2392,7 +2451,7 @@ const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety
     return jsxRuntimeExports.jsx("div", { "data-unknown-block": block.name, children: children });
 };
-function createDefaultRegistry(colorMapper) {
+function createDefaultRegistry(colorMapper, spacingConfig) {
     const renderers = {
         'core/paragraph': Paragraph,
         'core/heading': Heading,
@@ -2429,12 +2488,22 @@ function createDefaultRegistry(colorMapper) {
             const html = block.innerHTML || '';
             return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } });
         },
+        // Spacer block - adds vertical spacing
+        'core/spacer': ({ block }) => {
+            const height = extractSpacerHeight(block);
+            if (height && height > 0) {
+                return jsxRuntimeExports.jsx("div", { style: { height: `${height}px` }, "aria-hidden": "true" });
+            }
+            // Default fallback if height not found
+            return jsxRuntimeExports.jsx("div", { style: { height: '100px' }, "aria-hidden": "true" });
+        },
     };
     return {
         renderers,
         shortcodes: {}, // Empty by default - apps extend this
         fallback: Fallback,
         colorMapper,
+        spacingConfig,
     };
 }
 // Legacy function for backward compatibility - use getBlockTextContent instead
@@ -2524,8 +2593,8 @@ function findMatchingMapping(block, mappings) {
  * const registry = createEnhancedRegistry(mappings);
  * ```
  */
-function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper) {
-    const base = baseRegistry || createDefaultRegistry(colorMapper);
+function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper, spacingConfig) {
+    const base = baseRegistry || createDefaultRegistry(colorMapper, spacingConfig);
     // Create enhanced renderers that check patterns first
     const enhancedRenderers = {
         ...base.renderers,
@@ -2573,6 +2642,8 @@ function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper) {
         matchBlock,
         // Use provided colorMapper or inherit from base registry
         colorMapper: colorMapper || base.colorMapper,
+        // Use provided spacingConfig or inherit from base registry
+        spacingConfig: spacingConfig || base.spacingConfig,
     };
 }
 
@@ -2741,5 +2812,5 @@ const SectionWrapper = ({ children, background = 'light', spacing = 'medium', co
     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, extractBackgroundColor, extractBackgroundImage, extractButtonsFromInnerBlocks, extractContent, extractDimRatio, extractFontSize, extractHeadingLevel, extractImageAttributes, extractImageUrl, extractImageUrlWithFallback, extractMediaPosition, extractMinHeight, extractOverlayColor, extractSubtitleFromInnerBlocks, extractTextAlign, extractTextAlignFromInnerBlocks, extractTextFromHTML, extractTitle, extractTitleFromInnerBlocks, extractVerticalAlignment, extractVideoIframeFromInnerBlocks, findMatchingMapping, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, isValidCloudflareUrl, matchesPattern, parseContentPosition, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
+export { SectionWrapper, WPContent, WPErrorBoundary, WPPage, buildClassName, convertImageToCloudflareVariant, convertImageUrl, convertImageUrls, createDefaultRegistry, createEnhancedRegistry, extractAlignment, extractBackgroundColor, extractBackgroundImage, extractButtonsFromInnerBlocks, extractContent, extractDimRatio, extractFontSize, extractHeadingLevel, extractImageAttributes, extractImageUrl, extractImageUrlWithFallback, extractMediaPosition, extractMinHeight, extractOverlayColor, extractSpacerHeight, extractSubtitleFromInnerBlocks, extractTextAlign, extractTextAlignFromInnerBlocks, extractTextFromHTML, extractTitle, extractTitleFromInnerBlocks, extractVerticalAlignment, extractVideoIframeFromInnerBlocks, findMatchingMapping, findShortcodes, getAlignmentClasses, getBlockTextContent, getCloudflareVariantUrl, getContainerClasses, getContentSpacingClasses, getFontSizeClasses, getImageAttributes, getImageUrl, getSectionSpacingClasses, getTextAlignClasses, isCloudflareImageUrl, isValidCloudflareUrl, matchesPattern, parseContentPosition, parseGutenbergBlocks, parseShortcodeAttrs, renderNodes, renderTextWithShortcodes };
 //# sourceMappingURL=index.esm.js.map