@marvalt/wparser 0.1.42 → 0.1.45

package/dist/index.cjs

@@ -2136,6 +2136,7 @@ function extractBackgroundColor(block, context) {
  */
 function extractTextColor(block, context) {
     const attrs = block.attributes || {};
+    const mapper = context.colorMapper;
     // Try multiple possible attribute names for text color
     let wpColorName = attrs['textColor'] ||
         attrs['text'] ||
@@ -2152,31 +2153,42 @@ function extractTextColor(block, context) {
         if (colorMatch && colorMatch[1]) {
             wpColorName = colorMatch[1];
         }
-        // Debug logging
-        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development' && !wpColorName) {
-            // Check if there are any color-related classes
-            const hasColorClass = className.includes('-color');
-            if (hasColorClass && context.colorMapper) {
-                console.log('🔍 extractTextColor - Found color class in className but no match:', {
-                    blockName: block.name,
-                    className: className,
-                    colorClasses: className.split(' ').filter(c => c.includes('-color')),
-                });
+        // Enhanced debug logging
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+            if (!wpColorName) {
+                const hasColorClass = className.includes('-color');
+                if (hasColorClass && context.colorMapper) {
+                    console.log('🔍 extractTextColor - Found color class in className but no match:', {
+                        blockName: block.name,
+                        className: className,
+                        colorClasses: className.split(' ').filter(c => c.includes('-color')),
+                        allAttrs: Object.keys(attrs),
+                    });
+                }
+            }
+            else {
+                console.log('✅ extractTextColor - Found color in className:', wpColorName);
             }
         }
     }
     if (!wpColorName || typeof wpColorName !== 'string') {
-        return null;
+        wpColorName = null;
     }
     // Use colorMapper from context if available
     // Note: colorMapper returns combined classes like "bg-[#FBFAF3] text-gray-900"
     // We need to extract just the text color part
-    if (context.colorMapper) {
-        const mapped = context.colorMapper(wpColorName);
+    if (mapper && wpColorName) {
+        const mapped = mapper(wpColorName);
         if (mapped) {
-            // Extract text color classes (e.g., "text-white", "text-gray-900")
-            // Match text- classes but not text- in the middle of other classes
-            const textColorMatch = mapped.match(/\btext-[\w-]+/g);
+            // If the mapper provided a background arbitrary value, derive a text color class directly from it
+            const bgArbitrary = mapped.match(/\bbg-\[([^\]]+)\]/);
+            if (bgArbitrary && bgArbitrary[1]) {
+                const derivedText = `text-[${bgArbitrary[1]}]`;
+                return derivedText;
+            }
+            // Extract text color classes (e.g., "text-white", "text-gray-900", "text-[#123456]")
+            // Match text- classes including arbitrary values in brackets
+            const textColorMatch = mapped.match(/\btext-(\[[^\]]+\]|[\w-]+)/g);
             if (textColorMatch && textColorMatch.length > 0) {
                 // Return the last text color class (in case there are multiple)
                 const result = textColorMatch[textColorMatch.length - 1];
@@ -2194,6 +2206,34 @@ function extractTextColor(block, context) {
     // Fallback: return null (no text color applied, will inherit from parent)
     return null;
 }
+/**
+ * Infer a readable text color class based on a background class string.
+ * Supports bg-[#hex] and bg-[rgb(...)].
+ */
+function inferTextColorFromBackground(backgroundClass) {
+    if (!backgroundClass)
+        return null;
+    // Try to extract hex color from arbitrary value class bg-[#xxxxxx]
+    const hexMatch = backgroundClass.match(/bg-\[#?([0-9a-fA-F]{6})\]/);
+    if (hexMatch) {
+        const hex = hexMatch[1];
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 140 ? 'text-white' : 'text-gray-900';
+    }
+    // Try rgb() form
+    const rgbMatch = backgroundClass.match(/bg-\[rgb\((\d+),\s*(\d+),\s*(\d+)\)\]/i);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1], 10);
+        const g = parseInt(rgbMatch[2], 10);
+        const b = parseInt(rgbMatch[3], 10);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 140 ? 'text-white' : 'text-gray-900';
+    }
+    return null;
+}
 /**
  * Extract spacer height from block attributes or innerHTML
  * Returns height in pixels, or null if not found
@@ -2335,6 +2375,9 @@ const Paragraph = ({ block, context }) => {
     const attrs = block.attributes || {};
     const textAlign = getTextAlignClasses(attrs['align']);
     const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'paragraph', 'my-6');
+    // Extract text color if specified
+    const textColor = extractTextColor(block, context);
+    const textColorClass = textColor || '';
     // Check if innerHTML contains HTML elements (like links, strong, em, etc.)
     const hasHTML = block.innerHTML && /<[a-z][\s\S]*>/i.test(block.innerHTML);
     // Check if content contains shortcodes (check both HTML and text content)
@@ -2370,17 +2413,17 @@ const Paragraph = ({ block, context }) => {
         const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
         if (hasBlockLevelContent) {
             // Render block-level content without <p> wrapper, but add spacing wrapper
-            return jsxRuntimeExports.jsx("div", { className: spacing, children: parts });
+            return jsxRuntimeExports.jsx("div", { className: buildClassName(spacing, textColorClass), children: parts });
         }
         // Render shortcode parts inside paragraph (shortcodes are processed as React components)
-        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: parts });
     }
     // If innerHTML contains HTML elements but no shortcodes, render it directly (preserves links, formatting, etc.)
     if (hasHTML && block.innerHTML) {
-        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), dangerouslySetInnerHTML: { __html: htmlContent } });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), dangerouslySetInnerHTML: { __html: htmlContent } });
     }
     // No HTML and no shortcodes, just render plain text content
-    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), children: textContent });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: textContent });
 };
 const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -2489,6 +2532,8 @@ const Group = ({ block, children, context }) => {
     const layout = attrs['layout'];
     // Extract background color using color mapper
     const backgroundColor = extractBackgroundColor(block, context);
+    // Extract text color (apply on the wrapper so children inherit)
+    const textColor = extractTextColor(block, context) || inferTextColorFromBackground(backgroundColor);
     // Determine if this is a section-level group (has alignment) or content-level
     const isSection = align === 'full' || align === 'wide';
     const containerClass = getContainerClasses(align, layout);
@@ -2502,8 +2547,8 @@ const Group = ({ block, children, context }) => {
         ? 'container'
         : containerClass;
     // Build className with background color if present
-    const className = buildClassName(finalContainerClass, spacingClass, backgroundColor // This will be null if no mapping, which is fine
-    );
+    const className = buildClassName(finalContainerClass, spacingClass, backgroundColor, // This will be null if no mapping, which is fine
+    textColor);
     return (jsxRuntimeExports.jsx("div", { className: className, children: children }));
 };
 const Columns = ({ block, children }) => {
@@ -2517,9 +2562,10 @@ const Column = ({ block, children, context }) => {
     const width = attrs['width'];
     // Extract background color using color mapper
     const backgroundColor = extractBackgroundColor(block, context);
+    const textColor = extractTextColor(block, context) || inferTextColorFromBackground(backgroundColor);
     // Handle column width (e.g., "50%" becomes flex-basis)
     const style = width ? { flexBasis: width } : undefined;
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor), style: style, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor, textColor), style: style, children: children }));
 };
 const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
 const ButtonBlock = ({ block, context }) => {
@@ -3079,6 +3125,7 @@ exports.getImageAttributes = getImageAttributes;
 exports.getImageUrl = getImageUrl;
 exports.getSectionSpacingClasses = getSectionSpacingClasses;
 exports.getTextAlignClasses = getTextAlignClasses;
+exports.inferTextColorFromBackground = inferTextColorFromBackground;
 exports.isCloudflareImageUrl = isCloudflareImageUrl;
 exports.isValidCloudflareUrl = isValidCloudflareUrl;
 exports.matchesPattern = matchesPattern;