cf-pagetree-parser 1.0.5 → 1.0.6

package/README.md

@@ -13,14 +13,13 @@ npm install cf-pagetree-parser
 ### ES Modules (Next.js, Node.js)
 
 ```javascript
-import { parsePageTree, exportPageTreeJSON } from 'cf-pagetree-parser';
+import { parsePageTree } from 'cf-pagetree-parser';
 
-// Parse a DOM element to PageTree
-const rootElement = document.querySelector('[data-type="ContentNode"]');
-const pageTree = parsePageTree(rootElement);
+// Parse to PageTree JSON (automatically finds ContentNode)
+const pageTree = parsePageTree();
 
-// Export as JSON string
-const json = exportPageTreeJSON(rootElement, true);
+// The result is ready for ClickFunnels import
+console.log(JSON.stringify(pageTree, null, 2));
 ```
 
 ### Browser (Standalone Bundle)
@@ -29,7 +28,9 @@ const json = exportPageTreeJSON(rootElement, true);
 <script src="dist/cf-pagetree-parser.js"></script>
 <script>
   const { parsePageTree } = CFPageTreeParser;
-  const pageTree = parsePageTree(rootElement);
+
+  // Automatically finds ContentNode in the document
+  const pageTree = parsePageTree();
 </script>
 ```
 
@@ -41,12 +42,10 @@ The `dist/cf-pagetree-parser.js` bundle can be used in sandboxed extension conte
 
 ### Main Functions
 
-- `parsePageTree(rootElement)` - Parse DOM to PageTree object
-- `parseElement(element, parentId, index)` - Parse single element
-- `extractPageSettings(rootElement)` - Extract page settings
-- `exportPageTreeJSON(rootElement, formatted?)` - Export as JSON string
-- `downloadPageTreeJSON(rootElement, filename?)` - Download JSON file
-- `copyPageTreeToClipboard(rootElement)` - Copy to clipboard
+- `parsePageTree(rootElement?)` - Parse DOM to PageTree object. If no element provided, automatically finds ContentNode.
+- `exportPageTreeJSON(rootElement?, formatted?)` - Export as JSON string
+- `downloadPageTree(filename?, rootElement?)` - Download JSON file
+- `copyPageTreeToClipboard(rootElement?)` - Copy to clipboard
 
 ### Utilities
 
@@ -72,8 +71,8 @@ The parser extracts page-level settings from cf-page attributes:
 | Attribute | Description |
 |-----------|-------------|
 | `font` | Page font family (e.g., "Poppins"). Applied to body-level styles. |
-| `font-family` | Alias for `font` |
-| `text-color` | Default text color (default: #334155) |
+| `color` | Default text color for all elements (default: #334155) |
+| `text-color` | Alias for `color` |
 | `link-color` | Default link color (default: #3b82f6) |
 | `font-weight` | Default font weight |
 | `css` | Custom CSS (URL-encoded) |

package/dist/cf-pagetree-parser.js

@@ -1653,10 +1653,19 @@ function parseTextElement(
     ? parseFontFamily(fontAttr)
     : parseFontFamily(textStyles["font-family"]);
 
+  // Get color: element data-color > inline style > page color > default
   const colorAttr = element.getAttribute("data-color");
-  const color = colorAttr
-    ? normalizeColor(colorAttr)
-    : normalizeColor(textStyles.color || "#000000");
+  let color;
+  if (colorAttr) {
+    color = normalizeColor(colorAttr);
+  } 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";
+  }
 
   const alignAttr = element.getAttribute("data-align");
   const textAlign = alignAttr || parseTextAlign(textStyles["text-align"]);
@@ -3075,9 +3084,16 @@ function parseCheckbox(element, parentId, index) {
   const boxBorderColor = boxBorderMatch ? normalizeColor(boxBorderMatch[2]) : 'rgb(229, 231, 235)';
   const boxBorderRadius = parseBorderRadius(boxStyles);
 
-  // Label text styling
+  // Label text styling - inherit page color if not set
   const textStyles = textSpan ? parseInlineStyle(textSpan.getAttribute('style') || '') : {};
-  const labelColor = normalizeColor(textStyles.color || '#334155');
+  let labelColor;
+  if (textStyles.color) {
+    labelColor = normalizeColor(textStyles.color);
+  } else {
+    const contentNode = element.closest('[data-type="ContentNode"]');
+    const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+    labelColor = pageColor ? normalizeColor(pageColor) : '#334155';
+  }
   const labelFontSize = parseValueWithUnit(textStyles['font-size'] || '16px');
 
   // Gap between checkbox and label
@@ -3229,12 +3245,17 @@ function parseBulletList(element, parentId, index) {
   // Find list items
   const items = ul ? ul.querySelectorAll('li') : [];
 
+  // Get page-level color from ContentNode for fallback
+  const contentNode = element.closest('[data-type="ContentNode"]');
+  const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+  const defaultTextColor = pageColor ? normalizeColor(pageColor) : '#334155';
+
   // Initialize with defaults, will be overridden by data attrs or inline styles
   let iconClass = 'fas fa-check fa_icon';
   let iconColor = '#10b981';
   let iconMarginRight = 12;
   let iconSize = null;
-  let textColor = '#334155';
+  let textColor = defaultTextColor;
   let textSize = null;
   let justifyContent = 'flex-start';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-pagetree-parser",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Parse FunnelWind HTML to ClickFunnels PageTree JSON",
   "main": "src/index.js",
   "type": "module",

package/src/parsers/form.js

@@ -562,9 +562,16 @@ export function parseCheckbox(element, parentId, index) {
   const boxBorderColor = boxBorderMatch ? normalizeColor(boxBorderMatch[2]) : 'rgb(229, 231, 235)';
   const boxBorderRadius = parseBorderRadius(boxStyles);
 
-  // Label text styling
+  // Label text styling - inherit page color if not set
   const textStyles = textSpan ? parseInlineStyle(textSpan.getAttribute('style') || '') : {};
-  const labelColor = normalizeColor(textStyles.color || '#334155');
+  let labelColor;
+  if (textStyles.color) {
+    labelColor = normalizeColor(textStyles.color);
+  } else {
+    const contentNode = element.closest('[data-type="ContentNode"]');
+    const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+    labelColor = pageColor ? normalizeColor(pageColor) : '#334155';
+  }
   const labelFontSize = parseValueWithUnit(textStyles['font-size'] || '16px');
 
   // Gap between checkbox and label

package/src/parsers/list.js

@@ -54,12 +54,17 @@ export function parseBulletList(element, parentId, index) {
   // Find list items
   const items = ul ? ul.querySelectorAll('li') : [];
 
+  // Get page-level color from ContentNode for fallback
+  const contentNode = element.closest('[data-type="ContentNode"]');
+  const pageColor = contentNode?.getAttribute("data-color") || contentNode?.getAttribute("data-text-color");
+  const defaultTextColor = pageColor ? normalizeColor(pageColor) : '#334155';
+
   // Initialize with defaults, will be overridden by data attrs or inline styles
   let iconClass = 'fas fa-check fa_icon';
   let iconColor = '#10b981';
   let iconMarginRight = 12;
   let iconSize = null;
-  let textColor = '#334155';
+  let textColor = defaultTextColor;
   let textSize = null;
   let justifyContent = 'flex-start';
 

package/src/parsers/text.js

@@ -73,10 +73,19 @@ function parseTextElement(
     ? parseFontFamily(fontAttr)
     : parseFontFamily(textStyles["font-family"]);
 
+  // Get color: element data-color > inline style > page color > default
   const colorAttr = element.getAttribute("data-color");
-  const color = colorAttr
-    ? normalizeColor(colorAttr)
-    : normalizeColor(textStyles.color || "#000000");
+  let color;
+  if (colorAttr) {
+    color = normalizeColor(colorAttr);
+  } 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";
+  }
 
   const alignAttr = element.getAttribute("data-align");
   const textAlign = alignAttr || parseTextAlign(textStyles["text-align"]);