@marvalt/wparser 0.1.41 → 0.1.43

package/dist/index.esm.js

@@ -2134,34 +2134,67 @@ function extractBackgroundColor(block, context) {
  */
 function extractTextColor(block, context) {
     const attrs = block.attributes || {};
-    const wpColorName = attrs['textColor'] || attrs['text'];
+    // Try multiple possible attribute names for text color
+    let wpColorName = attrs['textColor'] ||
+        attrs['text'] ||
+        attrs['textColorSlug'] ||
+        null;
+    // If not found in attributes, check className for WordPress color classes
+    // WordPress uses classes like: has-accent-4-color, has-contrast-color
+    // Note: We need to avoid matching has-{color}-background-color, so we check for -color that's not followed by -background
+    if (!wpColorName && attrs['className']) {
+        const className = attrs['className'];
+        // Match: has-{color}-color (text color class, not background-color)
+        // This regex matches "has-accent-4-color" but not "has-accent-4-background-color"
+        const colorMatch = className.match(/has-([\w-]+)-color(?!-background)/);
+        if (colorMatch && colorMatch[1]) {
+            wpColorName = colorMatch[1];
+        }
+        // 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;
     }
-    // Special handling for common WordPress color names when used as text color
-    // These mappings take precedence because text color semantics differ from background color
-    const textColorMap = {
-        'contrast': 'text-gray-900', // Contrast text is typically dark/black (opposite of contrast background)
-        'base': 'text-white', // Base text on dark backgrounds
-    };
-    // Check special text color mappings first
-    if (textColorMap[wpColorName]) {
-        return textColorMap[wpColorName];
-    }
     // Use colorMapper from context if available
-    // Note: colorMapper might return combined classes like "bg-gray-900 text-white"
-    // We'll extract just the text color part
+    // 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 (mapped) {
-            // If the mapped class includes text color (e.g., "bg-gray-900 text-white"),
-            // extract just the text color part
-            const textColorMatch = mapped.match(/\btext-\S+/);
-            if (textColorMatch) {
-                return textColorMatch[0];
+            // 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 (textColorMatch && textColorMatch.length > 0) {
+                // Return the last text color class (in case there are multiple)
+                const result = textColorMatch[textColorMatch.length - 1];
+                // Debug logging
+                if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+                    console.log('🎨 extractTextColor - Mapped', wpColorName, '→', result, '(from:', mapped, ')');
+                }
+                return result;
             }
+            // If no text color class found, try to determine from the background color
+            // For theme palette colors, we can infer text color based on brightness
+            // But for now, return null if no text color is in the mapped result
         }
     }
+    // Fallback: return null (no text color applied, will inherit from parent)
     return null;
 }
 /**
@@ -2305,6 +2338,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)
@@ -2340,17 +2376,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 || {};