cf-pagetree-parser 1.0.6 → 1.0.8

package/README.md

@@ -2,6 +2,8 @@
 
 Parse FunnelWind HTML to ClickFunnels PageTree JSON.
 
+**Requires [cf-elements](https://www.npmjs.com/package/cf-elements)** - This parser works on the rendered HTML output from cf-elements. The cf-elements package renders FunnelWind custom elements (like `<cf-section>`, `<cf-headline>`, `<cf-button>`) into the DOM structure that this parser reads.
+
 ## Installation
 
 ```bash

package/dist/cf-pagetree-parser.js

@@ -420,6 +420,34 @@ function parseHtmlToTextNodes(html, defaultLinkColor = null) {
  * ============================================================================
  */
 
+/**
+ * Shadow preset names to CSS values (matches cf-elements SHADOWS)
+ */
+const SHADOW_NAMES = {
+  none: 'none',
+  sm: '0 1px 2px rgba(0,0,0,0.05)',
+  default: '0 1px 3px rgba(0,0,0,0.1)',
+  md: '0 4px 6px rgba(0,0,0,0.1)',
+  lg: '0 10px 15px rgba(0,0,0,0.1)',
+  xl: '0 20px 25px rgba(0,0,0,0.1)',
+  '2xl': '0 25px 50px rgba(0,0,0,0.25)',
+};
+
+/**
+ * Radius preset names to CSS values (matches cf-elements RADIUS)
+ */
+const RADIUS_NAMES = {
+  none: '0',
+  sm: '4px',
+  default: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '32px',
+  full: '9999px',
+};
+
 /**
  * Shadow presets mapping (from inline shadow to CF params)
  */
@@ -447,11 +475,20 @@ const SHADOW_PRESETS = {
 
 /**
  * Parse box-shadow value to CF params
+ * Handles both preset names (sm, md, lg, xl) and CSS shadow strings
  */
 function parseShadow(shadowValue) {
   if (!shadowValue || shadowValue === 'none') return null;
 
-  // Check if it matches a preset
+  // Check if it's a preset name first (e.g., "sm", "lg", "xl")
+  if (SHADOW_NAMES[shadowValue]) {
+    const resolvedShadow = SHADOW_NAMES[shadowValue];
+    if (resolvedShadow === 'none') return null;
+    // Now parse the resolved CSS value
+    return parseShadow(resolvedShadow);
+  }
+
+  // Check if it matches a preset CSS value
   const normalized = shadowValue.replace(/\s+/g, ' ').trim();
   if (SHADOW_PRESETS[normalized]) {
     return SHADOW_PRESETS[normalized];
@@ -694,6 +731,23 @@ function parseBorderRadius(styles) {
   return null;
 }
 
+/**
+ * Resolve radius value - handles both preset names (sm, md, lg) and CSS values
+ * Returns { value, unit } or null
+ */
+function resolveRadius(radiusValue) {
+  if (!radiusValue || radiusValue === 'none') return { value: 0, unit: 'px' };
+
+  // Check if it's a preset name first (e.g., "sm", "lg", "xl")
+  if (RADIUS_NAMES[radiusValue]) {
+    const resolvedRadius = RADIUS_NAMES[radiusValue];
+    return parseValueWithUnit(resolvedRadius);
+  }
+
+  // Otherwise parse as a CSS value
+  return parseValueWithUnit(radiusValue);
+}
+
 /**
  * Convert font-weight string to numeric value
  */
@@ -1653,7 +1707,12 @@ function parseTextElement(
     ? parseFontFamily(fontAttr)
     : parseFontFamily(textStyles["font-family"]);
 
-  // Get color: element data-color > inline style > page color > default
+  // Get color with proper inheritance chain:
+  // 1. Element's own data-color attribute
+  // 2. Inline style color
+  // 3. Walk up parent containers checking for data-color (cf-flex, cf-col, cf-row, cf-section)
+  // 4. cf-page text-color attribute
+  // 5. Default fallback
   const colorAttr = element.getAttribute("data-color");
   let color;
   if (colorAttr) {
@@ -1661,10 +1720,34 @@ function parseTextElement(
   } else if (textStyles.color) {
     color = normalizeColor(textStyles.color);
   } else {
-    // Fall back to page-level color from ContentNode
-    const contentNode = element.closest('[data-type="ContentNode"]');
-    const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
-    color = pageColor ? normalizeColor(pageColor) : "#000000";
+    // Walk up the DOM tree checking for data-color on parent containers
+    // Check cf-flex, cf-col, cf-row, cf-section in order (closest first)
+    const containerSelectors = [
+      '[data-type="FlexContainer/V1"]',
+      '[data-type="FlexContainer/V2"]',
+      '[data-type="ColContainer/V1"]',
+      '[data-type="RowContainer/V1"]',
+      '[data-type="SectionContainer/V1"]',
+    ];
+
+    let inheritedColor = null;
+    for (const selector of containerSelectors) {
+      const parent = element.closest(selector);
+      const parentColor = parent?.getAttribute("data-color");
+      if (parentColor) {
+        inheritedColor = normalizeColor(parentColor);
+        break;
+      }
+    }
+
+    if (inheritedColor) {
+      color = inheritedColor;
+    } else {
+      // Fall back to page-level color from ContentNode
+      const contentNode = element.closest('[data-type="ContentNode"]');
+      const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+      color = pageColor ? normalizeColor(pageColor) : "#000000";
+    }
   }
 
   const alignAttr = element.getAttribute("data-align");
@@ -1928,9 +2011,10 @@ function parseButton(element, parentId, index) {
   const paddingVertical = pyAttr ? parseValueWithUnit(pyAttr) : parseValueWithUnit(anchorStyles['padding-top'] || '16px');
 
   // Border and corners - data attributes first, then inline styles
+  // Use resolveRadius to handle preset names like "lg", "xl", etc.
   const roundedAttr = element.getAttribute('data-rounded');
   const borderRadius = roundedAttr
-    ? parseValueWithUnit(roundedAttr)
+    ? resolveRadius(roundedAttr)
     : parseBorderRadius(anchorStyles);
 
   const borderColorAttr = element.getAttribute('data-border-color');
@@ -1980,9 +2064,12 @@ function parseButton(element, parentId, index) {
   const fullWidth = element.getAttribute('data-full-width') === 'true';
 
   // Build button selector - always include padding params
+  const hasBorder = borderWidth && borderWidth.value > 0;
   const buttonSelector = {
     attrs: {
       style: {},
+      'data-skip-shadow-settings': shadow ? 'false' : 'true',
+      'data-skip-corners-settings': borderRadius ? 'false' : 'true',
     },
     params: {
       '--style-padding-horizontal': paddingHorizontal ? paddingHorizontal.value : 32,
@@ -1993,6 +2080,7 @@ function parseButton(element, parentId, index) {
       '--style-border-color': borderColor || 'transparent',
       '--style-border-width': borderWidth ? borderWidth.value : 0,
       '--style-border-width--unit': borderWidth ? borderWidth.unit : 'px',
+      '--style-border-style': hasBorder ? 'solid' : 'none',
     },
   };
 
@@ -2097,9 +2185,9 @@ function parseButton(element, parentId, index) {
     node.selectors['.elButton'].params['border-radius--unit'] = borderRadius.unit;
   }
 
-  // Apply shadow (button doesn't support shadow in CF, but keep for reference)
+  // Apply shadow
   if (shadow) {
-    // CF buttons don't have native shadow support
+    Object.assign(node.selectors['.elButton'].params, shadowToParams(shadow));
   }
 
   // Add subtext if present
@@ -3849,19 +3937,12 @@ function parseCountdown(element, parentId, index) {
   const borderRadius = parseBorderRadius(containerStyles);
 
   // Parse shadow from inline styles or data attribute
+  // parseShadow() now handles preset names like "sm", "lg", "xl" automatically
   let shadow = parseShadow(containerStyles['box-shadow']);
   if (!shadow) {
     const shadowAttr = element.getAttribute('data-shadow');
     if (shadowAttr) {
-      // Resolve preset names to actual shadow values
-      const SHADOW_VALUES = {
-        'sm': '0 1px 2px rgba(0,0,0,0.05)',
-        'md': '0 4px 6px rgba(0,0,0,0.1)',
-        'lg': '0 10px 15px rgba(0,0,0,0.1)',
-        'xl': '0 20px 25px rgba(0,0,0,0.1)',
-        '2xl': '0 25px 50px rgba(0,0,0,0.25)',
-      };
-      shadow = parseShadow(SHADOW_VALUES[shadowAttr] || shadowAttr);
+      shadow = parseShadow(shadowAttr);
     }
   }
 
@@ -4385,6 +4466,7 @@ const PARSER_MAP = {
   "ColContainer/V1": parseColContainer,
   "ColInner/V1": parseColInner,
   "FlexContainer/V1": parseFlexContainer,
+  "FlexContainer/V2": parseFlexContainer,
   "Headline/V1": parseHeadline,
   "SubHeadline/V1": parseSubHeadline,
   "Paragraph/V1": parseParagraph,
@@ -4435,6 +4517,7 @@ function createParseElement(elementIdMap) {
       "RowContainer/V1",
       "ColContainer/V1",
       "FlexContainer/V1",
+      "FlexContainer/V2",
     ];
 
     let node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-pagetree-parser",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Parse FunnelWind HTML to ClickFunnels PageTree JSON",
   "main": "src/index.js",
   "type": "module",
@@ -28,6 +28,6 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/WynterJones/cf-pagetree-parser"
+    "url": "https://github.com/PrimeMoverHQ/BarnumPT-Builder.git"
   }
 }

package/src/index.js

@@ -63,6 +63,7 @@ const PARSER_MAP = {
   "ColContainer/V1": parseColContainer,
   "ColInner/V1": parseColInner,
   "FlexContainer/V1": parseFlexContainer,
+  "FlexContainer/V2": parseFlexContainer,
   "Headline/V1": parseHeadline,
   "SubHeadline/V1": parseSubHeadline,
   "Paragraph/V1": parseParagraph,
@@ -113,6 +114,7 @@ function createParseElement(elementIdMap) {
       "RowContainer/V1",
       "ColContainer/V1",
       "FlexContainer/V1",
+      "FlexContainer/V2",
     ];
 
     let node;

package/src/parsers/button.js

@@ -23,6 +23,8 @@ import {
   spacingToAttrsAndParams,
   parseBorderRadius,
   parseShadow,
+  shadowToParams,
+  resolveRadius,
   normalizeFontWeight,
   parseTextAlign,
 } from '../styles.js';
@@ -87,9 +89,10 @@ export function parseButton(element, parentId, index) {
   const paddingVertical = pyAttr ? parseValueWithUnit(pyAttr) : parseValueWithUnit(anchorStyles['padding-top'] || '16px');
 
   // Border and corners - data attributes first, then inline styles
+  // Use resolveRadius to handle preset names like "lg", "xl", etc.
   const roundedAttr = element.getAttribute('data-rounded');
   const borderRadius = roundedAttr
-    ? parseValueWithUnit(roundedAttr)
+    ? resolveRadius(roundedAttr)
     : parseBorderRadius(anchorStyles);
 
   const borderColorAttr = element.getAttribute('data-border-color');
@@ -139,9 +142,12 @@ export function parseButton(element, parentId, index) {
   const fullWidth = element.getAttribute('data-full-width') === 'true';
 
   // Build button selector - always include padding params
+  const hasBorder = borderWidth && borderWidth.value > 0;
   const buttonSelector = {
     attrs: {
       style: {},
+      'data-skip-shadow-settings': shadow ? 'false' : 'true',
+      'data-skip-corners-settings': borderRadius ? 'false' : 'true',
     },
     params: {
       '--style-padding-horizontal': paddingHorizontal ? paddingHorizontal.value : 32,
@@ -152,6 +158,7 @@ export function parseButton(element, parentId, index) {
       '--style-border-color': borderColor || 'transparent',
       '--style-border-width': borderWidth ? borderWidth.value : 0,
       '--style-border-width--unit': borderWidth ? borderWidth.unit : 'px',
+      '--style-border-style': hasBorder ? 'solid' : 'none',
     },
   };
 
@@ -256,9 +263,9 @@ export function parseButton(element, parentId, index) {
     node.selectors['.elButton'].params['border-radius--unit'] = borderRadius.unit;
   }
 
-  // Apply shadow (button doesn't support shadow in CF, but keep for reference)
+  // Apply shadow
   if (shadow) {
-    // CF buttons don't have native shadow support
+    Object.assign(node.selectors['.elButton'].params, shadowToParams(shadow));
   }
 
   // Add subtext if present

package/src/parsers/interactive.js

@@ -308,19 +308,12 @@ export function parseCountdown(element, parentId, index) {
   const borderRadius = parseBorderRadius(containerStyles);
 
   // Parse shadow from inline styles or data attribute
+  // parseShadow() now handles preset names like "sm", "lg", "xl" automatically
   let shadow = parseShadow(containerStyles['box-shadow']);
   if (!shadow) {
     const shadowAttr = element.getAttribute('data-shadow');
     if (shadowAttr) {
-      // Resolve preset names to actual shadow values
-      const SHADOW_VALUES = {
-        'sm': '0 1px 2px rgba(0,0,0,0.05)',
-        'md': '0 4px 6px rgba(0,0,0,0.1)',
-        'lg': '0 10px 15px rgba(0,0,0,0.1)',
-        'xl': '0 20px 25px rgba(0,0,0,0.1)',
-        '2xl': '0 25px 50px rgba(0,0,0,0.25)',
-      };
-      shadow = parseShadow(SHADOW_VALUES[shadowAttr] || shadowAttr);
+      shadow = parseShadow(shadowAttr);
     }
   }
 

package/src/parsers/text.js

@@ -73,7 +73,12 @@ function parseTextElement(
     ? parseFontFamily(fontAttr)
     : parseFontFamily(textStyles["font-family"]);
 
-  // Get color: element data-color > inline style > page color > default
+  // Get color with proper inheritance chain:
+  // 1. Element's own data-color attribute
+  // 2. Inline style color
+  // 3. Walk up parent containers checking for data-color (cf-flex, cf-col, cf-row, cf-section)
+  // 4. cf-page text-color attribute
+  // 5. Default fallback
   const colorAttr = element.getAttribute("data-color");
   let color;
   if (colorAttr) {
@@ -81,10 +86,34 @@ function parseTextElement(
   } else if (textStyles.color) {
     color = normalizeColor(textStyles.color);
   } else {
-    // Fall back to page-level color from ContentNode
-    const contentNode = element.closest('[data-type="ContentNode"]');
-    const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
-    color = pageColor ? normalizeColor(pageColor) : "#000000";
+    // Walk up the DOM tree checking for data-color on parent containers
+    // Check cf-flex, cf-col, cf-row, cf-section in order (closest first)
+    const containerSelectors = [
+      '[data-type="FlexContainer/V1"]',
+      '[data-type="FlexContainer/V2"]',
+      '[data-type="ColContainer/V1"]',
+      '[data-type="RowContainer/V1"]',
+      '[data-type="SectionContainer/V1"]',
+    ];
+
+    let inheritedColor = null;
+    for (const selector of containerSelectors) {
+      const parent = element.closest(selector);
+      const parentColor = parent?.getAttribute("data-color");
+      if (parentColor) {
+        inheritedColor = normalizeColor(parentColor);
+        break;
+      }
+    }
+
+    if (inheritedColor) {
+      color = inheritedColor;
+    } else {
+      // Fall back to page-level color from ContentNode
+      const contentNode = element.closest('[data-type="ContentNode"]');
+      const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+      color = pageColor ? normalizeColor(pageColor) : "#000000";
+    }
   }
 
   const alignAttr = element.getAttribute("data-align");

package/src/styles.js

@@ -10,6 +10,34 @@
 
 import { parseValueWithUnit, normalizeColor } from './utils.js';
 
+/**
+ * Shadow preset names to CSS values (matches cf-elements SHADOWS)
+ */
+export const SHADOW_NAMES = {
+  none: 'none',
+  sm: '0 1px 2px rgba(0,0,0,0.05)',
+  default: '0 1px 3px rgba(0,0,0,0.1)',
+  md: '0 4px 6px rgba(0,0,0,0.1)',
+  lg: '0 10px 15px rgba(0,0,0,0.1)',
+  xl: '0 20px 25px rgba(0,0,0,0.1)',
+  '2xl': '0 25px 50px rgba(0,0,0,0.25)',
+};
+
+/**
+ * Radius preset names to CSS values (matches cf-elements RADIUS)
+ */
+export const RADIUS_NAMES = {
+  none: '0',
+  sm: '4px',
+  default: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '32px',
+  full: '9999px',
+};
+
 /**
  * Shadow presets mapping (from inline shadow to CF params)
  */
@@ -37,11 +65,20 @@ export const SHADOW_PRESETS = {
 
 /**
  * Parse box-shadow value to CF params
+ * Handles both preset names (sm, md, lg, xl) and CSS shadow strings
  */
 export function parseShadow(shadowValue) {
   if (!shadowValue || shadowValue === 'none') return null;
 
-  // Check if it matches a preset
+  // Check if it's a preset name first (e.g., "sm", "lg", "xl")
+  if (SHADOW_NAMES[shadowValue]) {
+    const resolvedShadow = SHADOW_NAMES[shadowValue];
+    if (resolvedShadow === 'none') return null;
+    // Now parse the resolved CSS value
+    return parseShadow(resolvedShadow);
+  }
+
+  // Check if it matches a preset CSS value
   const normalized = shadowValue.replace(/\s+/g, ' ').trim();
   if (SHADOW_PRESETS[normalized]) {
     return SHADOW_PRESETS[normalized];
@@ -284,6 +321,23 @@ export function parseBorderRadius(styles) {
   return null;
 }
 
+/**
+ * Resolve radius value - handles both preset names (sm, md, lg) and CSS values
+ * Returns { value, unit } or null
+ */
+export function resolveRadius(radiusValue) {
+  if (!radiusValue || radiusValue === 'none') return { value: 0, unit: 'px' };
+
+  // Check if it's a preset name first (e.g., "sm", "lg", "xl")
+  if (RADIUS_NAMES[radiusValue]) {
+    const resolvedRadius = RADIUS_NAMES[radiusValue];
+    return parseValueWithUnit(resolvedRadius);
+  }
+
+  // Otherwise parse as a CSS value
+  return parseValueWithUnit(radiusValue);
+}
+
 /**
  * Convert font-weight string to numeric value
  */