@marvalt/wparser 0.1.49 → 0.1.51

package/dist/index.cjs

@@ -2083,45 +2083,13 @@ function extractVideoIframeFromInnerBlocks(block) {
  */
 function extractBackgroundColor(block, context) {
     const attrs = block.attributes || {};
-    // Try multiple possible attribute names for background color
-    // WordPress can store it as backgroundColor, background, or in style
-    let wpColorName = attrs['backgroundColor'] ||
-        attrs['background'] ||
-        attrs['backgroundColorSlug'] ||
-        null;
-    // If not found in attributes, check className for WordPress color classes
-    // WordPress uses classes like: has-accent-4-background-color, has-contrast-background-color
-    if (!wpColorName && attrs['className']) {
-        const className = attrs['className'];
-        const colorMatch = className.match(/has-([\w-]+)-background-color/);
-        if (colorMatch && colorMatch[1]) {
-            // Convert kebab-case to slug (e.g., "accent-4" stays "accent-4", "contrast" stays "contrast")
-            wpColorName = colorMatch[1];
-        }
-    }
-    // Debug logging in development
-    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
-        if (!wpColorName && context.colorMapper) {
-            console.log('🔍 extractBackgroundColor - No backgroundColor found in block:', {
-                blockName: block.name,
-                hasClassName: !!attrs['className'],
-                className: attrs['className'],
-                hasStyle: !!attrs['style'],
-                availableAttrs: Object.keys(attrs),
-            });
-        }
-    }
+    const wpColorName = attrs['backgroundColor'] || attrs['background'];
     if (!wpColorName || typeof wpColorName !== 'string') {
         return null;
     }
     // Use colorMapper from context if available
     if (context.colorMapper) {
-        const result = context.colorMapper(wpColorName);
-        // Debug logging
-        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
-            console.log('🎨 extractBackgroundColor - Mapped', wpColorName, '→', result);
-        }
-        return result;
+        return context.colorMapper(wpColorName);
     }
     // Fallback: return null (no background applied)
     return null;
@@ -2136,102 +2104,34 @@ 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'] ||
-        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);
-            }
-        }
-    }
+    const wpColorName = attrs['textColor'] || attrs['text'];
     if (!wpColorName || typeof wpColorName !== 'string') {
-        wpColorName = null;
+        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 returns combined classes like "bg-[#FBFAF3] text-gray-900"
-    // We need to extract just the text color part
-    if (mapper && wpColorName) {
-        const mapped = mapper(wpColorName);
+    // Note: colorMapper might return combined classes like "bg-gray-900 text-white"
+    // We'll extract just the text color part
+    if (context.colorMapper) {
+        const mapped = context.colorMapper(wpColorName);
         if (mapped) {
-            // 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;
+            // 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", "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];
-                // 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;
-}
-/**
- * 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;
 }
 /**
@@ -2375,9 +2275,6 @@ 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)
@@ -2413,17 +2310,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: buildClassName(spacing, textColorClass), children: parts });
+            return jsxRuntimeExports.jsx("div", { className: spacing, children: parts });
         }
         // Render shortcode parts inside paragraph (shortcodes are processed as React components)
-        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), 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, textColorClass), dangerouslySetInnerHTML: { __html: htmlContent } });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), dangerouslySetInnerHTML: { __html: htmlContent } });
     }
     // No HTML and no shortcodes, just render plain text content
-    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: textContent });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), children: textContent });
 };
 const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -2432,17 +2329,15 @@ const Heading = ({ block, children, context }) => {
     const textAlign = getTextAlignClasses(attrs['textAlign']);
     const fontSize = getFontSizeClasses(attrs['fontSize']);
     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');
+    // Use CSS variables for font sizes (defined in index.css) instead of Tailwind classes
+    // Only use Tailwind class if explicitly set via fontSize attribute
+    const sizeClass = fontSize || ''; // Let CSS variables handle default sizes
     // Get spacing from config with improved defaults
     const spacingClass = getHeadingSpacing(context.spacingConfig || context.registry.spacingConfig, level);
-    // Extract text color if specified, otherwise fall back to heading var (set by dstyler) or inherit
+    // Extract text color if specified, otherwise inherit from parent (CSS variables handle default)
     const textColor = extractTextColor(block, context);
-    const isFallbackHeadingColor = !textColor;
-    const textColorClass = textColor || 'text-[var(--dstyler-color-heading)]';
-    // Inline style ensures heading color wins over inherited parent text classes
-    const inlineStyle = isFallbackHeadingColor ? { color: 'var(--dstyler-color-heading)' } : undefined;
-    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold', textColorClass, sizeClass, textAlign, spacingClass), style: inlineStyle, children: children ?? content }));
+    const textColorClass = textColor || ''; // Don't hardcode - let CSS variables handle default
+    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold', textColorClass, sizeClass, textAlign, spacingClass), children: children ?? content }));
 };
 const Image = ({ block, context }) => {
     const imageAttrs = getImageAttributes(block);
@@ -2535,8 +2430,6 @@ 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);
@@ -2550,8 +2443,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
-    textColor);
+    const className = buildClassName(finalContainerClass, spacingClass, backgroundColor // This will be null if no mapping, which is fine
+    );
     return (jsxRuntimeExports.jsx("div", { className: className, children: children }));
 };
 const Columns = ({ block, children }) => {
@@ -2565,10 +2458,9 @@ 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, textColor), style: style, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor), style: style, children: children }));
 };
 const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
 const ButtonBlock = ({ block, context }) => {
@@ -3128,7 +3020,6 @@ exports.getImageAttributes = getImageAttributes;
 exports.getImageUrl = getImageUrl;
 exports.getSectionSpacingClasses = getSectionSpacingClasses;
 exports.getTextAlignClasses = getTextAlignClasses;
-exports.inferTextColorFromBackground = inferTextColorFromBackground;
 exports.isCloudflareImageUrl = isCloudflareImageUrl;
 exports.isValidCloudflareUrl = isValidCloudflareUrl;
 exports.matchesPattern = matchesPattern;