cf-pagetree-parser 1.0.4 → 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"]);
@@ -1872,6 +1881,9 @@ function parseButton(element, parentId, index) {
   const mainTextId = generateId();
   const subTextId = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -1994,6 +2006,7 @@ function parseButton(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         'text-align': textAlign,
       },
@@ -2170,6 +2183,9 @@ function parseButton(element, parentId, index) {
 function parseImage(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -2198,6 +2214,7 @@ function parseImage(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt,
       style: {
         'text-align': textAlign,
@@ -2266,6 +2283,9 @@ function parseImage(element, parentId, index) {
 function parseIcon(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -2301,6 +2321,7 @@ function parseIcon(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },
@@ -2349,6 +2370,9 @@ function parseIcon(element, parentId, index) {
 function parseVideo(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -2372,6 +2396,7 @@ function parseVideo(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-video-type': videoType,
       'data-skip-background-settings': background.color ? 'false' : 'true',
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
@@ -2423,6 +2448,9 @@ function parseVideo(element, parentId, index) {
 function parseDivider(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -2468,6 +2496,7 @@ function parseDivider(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -2527,6 +2556,9 @@ function parseDivider(element, parentId, index) {
 function parseInput(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -2569,6 +2601,7 @@ function parseInput(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
       type: inputType === 'phone_number' ? 'tel' : (inputType === 'email' ? 'email' : 'text'),
       style: {
@@ -2687,6 +2720,9 @@ function parseInput(element, parentId, index) {
 function parseTextArea(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -2728,6 +2764,7 @@ function parseTextArea(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
       style: {
         width,
@@ -2844,6 +2881,9 @@ function parseTextArea(element, parentId, index) {
 function parseSelectBox(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -2912,6 +2952,7 @@ function parseSelectBox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         width,
         'margin-top': marginTop.value,
@@ -3017,6 +3058,9 @@ function parseSelectBox(element, parentId, index) {
 function parseCheckbox(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -3040,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
@@ -3056,6 +3107,7 @@ function parseCheckbox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3168,6 +3220,9 @@ function parseBulletList(element, parentId, index) {
   const id = generateId();
   const contentEditableId = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -3190,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';
 
@@ -3295,6 +3355,7 @@ function parseBulletList(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3513,6 +3574,9 @@ function parseBulletList(element, parentId, index) {
 function parseProgressBar(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -3556,6 +3620,7 @@ function parseProgressBar(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3635,6 +3700,9 @@ function parseProgressBar(element, parentId, index) {
 function parseVideoPopup(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -3673,6 +3741,7 @@ function parseVideoPopup(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt: alt || 'Video thumbnail',
     },
     params: {
@@ -3750,6 +3819,9 @@ function parseVideoPopup(element, parentId, index) {
 function parseCountdown(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -3823,6 +3895,10 @@ function parseCountdown(element, parentId, index) {
     version: 0,
     parentId,
     fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      ...(elementId ? { id: elementId } : {}),
+      style: {},
+    },
     params: {
       type: 'countdown',
       countdown_opts: {
@@ -3947,7 +4023,7 @@ function parseCountdown(element, parentId, index) {
 
   // Apply spacing
   const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
-  Object.assign(node.attrs || (node.attrs = {}), { style: spacingAttrs.style });
+  Object.assign(node.attrs.style, spacingAttrs.style);
   Object.assign(node.params, spacingParams);
 
   // Apply border to amount container
@@ -4467,7 +4543,8 @@ function parsePageTree(rootElement = null) {
   }
 
   // Extract page settings from data attributes
-  const textColorRaw = rootElement.getAttribute("data-text-color") || "#334155";
+  // Support both 'color' (simple) and 'text-color' (explicit) for page text color
+  const textColorRaw = rootElement.getAttribute("data-color") || rootElement.getAttribute("data-text-color") || "#334155";
   const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
   const textColor = normalizeColor(textColorRaw);
   const linkColor = normalizeColor(linkColorRaw);

package/package.json

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

package/src/index.js

@@ -221,7 +221,8 @@ export function parsePageTree(rootElement = null) {
   }
 
   // Extract page settings from data attributes
-  const textColorRaw = rootElement.getAttribute("data-text-color") || "#334155";
+  // Support both 'color' (simple) and 'text-color' (explicit) for page text color
+  const textColorRaw = rootElement.getAttribute("data-color") || rootElement.getAttribute("data-text-color") || "#334155";
   const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
   const textColor = normalizeColor(textColorRaw);
   const linkColor = normalizeColor(linkColorRaw);

package/src/parsers/button.js

@@ -40,6 +40,9 @@ export function parseButton(element, parentId, index) {
   const mainTextId = generateId();
   const subTextId = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -162,6 +165,7 @@ export function parseButton(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         'text-align': textAlign,
       },

package/src/parsers/form.js

@@ -34,6 +34,9 @@ import {
 export function parseInput(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -76,6 +79,7 @@ export function parseInput(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
       type: inputType === 'phone_number' ? 'tel' : (inputType === 'email' ? 'email' : 'text'),
       style: {
@@ -194,6 +198,9 @@ export function parseInput(element, parentId, index) {
 export function parseTextArea(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -235,6 +242,7 @@ export function parseTextArea(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
       style: {
         width,
@@ -351,6 +359,9 @@ export function parseTextArea(element, parentId, index) {
 export function parseSelectBox(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -419,6 +430,7 @@ export function parseSelectBox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         width,
         'margin-top': marginTop.value,
@@ -524,6 +536,9 @@ export function parseSelectBox(element, parentId, index) {
 export function parseCheckbox(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -547,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
@@ -563,6 +585,7 @@ export function parseCheckbox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {

package/src/parsers/interactive.js

@@ -33,6 +33,9 @@ import {
 export function parseProgressBar(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -76,6 +79,7 @@ export function parseProgressBar(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -155,6 +159,9 @@ export function parseProgressBar(element, parentId, index) {
 export function parseVideoPopup(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -193,6 +200,7 @@ export function parseVideoPopup(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt: alt || 'Video thumbnail',
     },
     params: {
@@ -270,6 +278,9 @@ export function parseVideoPopup(element, parentId, index) {
 export function parseCountdown(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -343,6 +354,10 @@ export function parseCountdown(element, parentId, index) {
     version: 0,
     parentId,
     fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      ...(elementId ? { id: elementId } : {}),
+      style: {},
+    },
     params: {
       type: 'countdown',
       countdown_opts: {
@@ -467,7 +482,7 @@ export function parseCountdown(element, parentId, index) {
 
   // Apply spacing
   const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
-  Object.assign(node.attrs || (node.attrs = {}), { style: spacingAttrs.style });
+  Object.assign(node.attrs.style, spacingAttrs.style);
   Object.assign(node.params, spacingParams);
 
   // Apply border to amount container

package/src/parsers/list.js

@@ -29,6 +29,9 @@ export function parseBulletList(element, parentId, index) {
   const id = generateId();
   const contentEditableId = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -51,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';
 
@@ -156,6 +164,7 @@ export function parseBulletList(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {

package/src/parsers/media.js

@@ -35,6 +35,9 @@ import {
 export function parseImage(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -63,6 +66,7 @@ export function parseImage(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt,
       style: {
         'text-align': textAlign,
@@ -131,6 +135,9 @@ export function parseImage(element, parentId, index) {
 export function parseIcon(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
   const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -166,6 +173,7 @@ export function parseIcon(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },
@@ -214,6 +222,9 @@ export function parseIcon(element, parentId, index) {
 export function parseVideo(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -237,6 +248,7 @@ export function parseVideo(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-video-type': videoType,
       'data-skip-background-settings': background.color ? 'false' : 'true',
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
@@ -288,6 +300,9 @@ export function parseVideo(element, parentId, index) {
 export function parseDivider(element, parentId, index) {
   const id = generateId();
 
+  // Get element-id for scroll-to/show-hide targeting
+  const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
+
   const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
   const spacing = parseSpacing(wrapperStyles);
 
@@ -333,6 +348,7 @@ export function parseDivider(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {

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"]);