@marvalt/wparser 0.1.43 → 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'] ||
@@ -2171,17 +2172,23 @@ function extractTextColor(block, context) {
         }
     }
     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];
@@ -2199,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
@@ -2497,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);
@@ -2510,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 }) => {
@@ -2525,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 }) => {
@@ -3087,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;