@marvalt/wparser 0.1.25 → 0.1.27

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[];
@@ -508,4 +536,4 @@ 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 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,GACvB,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));
     }
@@ -2141,10 +2150,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 +2199,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 +2215,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 +2230,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 +2253,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 +2421,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,
@@ -2435,6 +2464,7 @@ function createDefaultRegistry(colorMapper) {
         shortcodes: {}, // Empty by default - apps extend this
         fallback: Fallback,
         colorMapper,
+        spacingConfig,
     };
 }
 // Legacy function for backward compatibility - use getBlockTextContent instead
@@ -2524,8 +2554,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 +2603,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,
     };
 }