@marvalt/wparser 0.1.29 → 0.1.31

package/dist/index.cjs

@@ -2059,6 +2059,38 @@ function extractBackgroundColor(block, context) {
     // Fallback: return null (no background applied)
     return null;
 }
+/**
+ * Extract and map text color from block attributes
+ * Uses colorMapper from context to convert WordPress theme colors to app CSS classes
+ *
+ * @param block - WordPress block to extract text color from
+ * @param context - Render context containing optional colorMapper
+ * @returns CSS class string (e.g., 'text-white') or null if no mapping
+ */
+function extractTextColor(block, context) {
+    const attrs = block.attributes || {};
+    const wpColorName = attrs['textColor'] || attrs['text'];
+    if (!wpColorName || typeof wpColorName !== 'string') {
+        return null;
+    }
+    // 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, or create a separate text color mapping
+    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];
+            }
+            // If no text color in the mapped class, try to infer from the color name
+            // For now, return null and let the app handle it via a separate text color mapper
+        }
+    }
+    return null;
+}
 /**
  * Extract spacer height from block attributes or innerHTML
  * Returns height in pixels, or null if not found
@@ -2270,10 +2302,35 @@ const List = ({ block, children, context }) => {
     const { ordered } = attrs;
     const Tag = ordered ? 'ol' : 'ul';
     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);
+    // Extract text color if specified
+    const textColor = extractTextColor(block, context);
+    // Default text color if none specified
+    const textColorClass = textColor || 'text-gray-700';
+    return React.createElement(Tag, { className: buildClassName('list-disc pl-6 space-y-2', textColorClass, spacing) }, children);
 };
-const ListItem = ({ children }) => {
-    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
+const ListItem = ({ block, children }) => {
+    // List items store their content in innerHTML (e.g., "<li>Text<br>More text</li>")
+    // We need to extract the content from inside the <li> tag and render it properly
+    let content = null;
+    if (block.innerHTML) {
+        // Extract content from innerHTML - remove the outer <li> tags
+        // Pattern: <li>content</li> or <li>content<br>more</li>
+        const liMatch = block.innerHTML.match(/<li[^>]*>(.*?)<\/li>/is);
+        if (liMatch && liMatch[1]) {
+            const innerContent = liMatch[1].trim();
+            if (innerContent) {
+                // Use dangerouslySetInnerHTML to properly render HTML content including <br> tags and entities
+                // This is safe because we're only rendering content from WordPress (trusted source)
+                content = jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: innerContent } });
+            }
+        }
+    }
+    // If we have both innerHTML content and children (innerBlocks), combine them
+    if (content && children && React.Children.count(children) > 0) {
+        return (jsxRuntimeExports.jsxs("li", { className: "text-gray-700", children: [content, children] }));
+    }
+    // Return content from innerHTML if available, otherwise use children
+    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: content || children });
 };
 const Group = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -2305,15 +2362,17 @@ const Columns = ({ block, children }) => {
     const alignClass = getAlignmentClasses(align);
     return (jsxRuntimeExports.jsx("div", { className: buildClassName('grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12', alignClass), children: children }));
 };
-const Column = ({ block, children }) => {
+const Column = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const width = attrs['width'];
+    // Extract background color using color mapper
+    const backgroundColor = extractBackgroundColor(block, context);
     // Handle column width (e.g., "50%" becomes flex-basis)
     const style = width ? { flexBasis: width } : undefined;
-    return (jsxRuntimeExports.jsx("div", { className: "space-y-4", 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 }) => {
+const ButtonBlock = ({ block, context }) => {
     const attrs = block.attributes || {};
     let url = attrs['url'];
     let text = attrs['text'];
@@ -2333,10 +2392,17 @@ const ButtonBlock = ({ block }) => {
     if (!url && !text)
         return null;
     const buttonText = text || 'Learn more';
+    // Extract background and text colors from button attributes
+    const backgroundColor = extractBackgroundColor(block, context);
+    const textColor = extractTextColor(block, context);
+    // Build button classes - use extracted colors or defaults
+    const bgClass = backgroundColor || 'bg-primary';
+    const textClass = textColor || 'text-primary-foreground';
+    const hoverClass = backgroundColor ? 'hover:opacity-90' : 'hover:bg-primary/90';
     // Handle internal vs external links
     const isExternal = url && (url.startsWith('http://') || url.startsWith('https://'));
     const linkProps = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-primary-foreground font-medium hover:bg-primary/90 transition-colors", ...linkProps, children: buttonText }));
+    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: buildClassName('inline-flex items-center justify-center rounded-md px-6 py-3 font-medium transition-colors', bgClass, textClass, hoverClass), ...linkProps, children: buttonText }));
 };
 const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
@@ -2842,6 +2908,7 @@ exports.extractSpacerHeight = extractSpacerHeight;
 exports.extractSubtitleFromInnerBlocks = extractSubtitleFromInnerBlocks;
 exports.extractTextAlign = extractTextAlign;
 exports.extractTextAlignFromInnerBlocks = extractTextAlignFromInnerBlocks;
+exports.extractTextColor = extractTextColor;
 exports.extractTextFromHTML = extractTextFromHTML;
 exports.extractTitle = extractTitle;
 exports.extractTitleFromInnerBlocks = extractTitleFromInnerBlocks;