cf-pagetree-parser 1.0.2 → 1.0.4

package/README.md

@@ -65,6 +65,23 @@ The `dist/cf-pagetree-parser.js` bundle can be used in sandboxed extension conte
 - `parseBackground(styles)` - Parse background styles
 - `backgroundToParams(background)` - Convert background to CF params
 
+## Page Settings
+
+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) |
+| `link-color` | Default link color (default: #3b82f6) |
+| `font-weight` | Default font weight |
+| `css` | Custom CSS (URL-encoded) |
+| `header-code` | Custom header HTML/scripts (URL-encoded) |
+| `footer-code` | Custom footer HTML/scripts (URL-encoded) |
+
+Font values are normalized to ClickFunnels format (e.g., `"Poppins", sans-serif`).
+
 ## Development
 
 ```bash

package/dist/cf-pagetree-parser.js

@@ -30,11 +30,12 @@ function sanitizeHtml(html) {
  * ============================================================================
  */
 
-// Use DOMPurify in browser, simple passthrough on server
-// Server-side parsing is from trusted FunnelWind source
-let DOMPurify = null;
-if (typeof window !== 'undefined') {
-  import('dompurify').then(mod => { DOMPurify = mod.default; });
+/**
+ * Sanitize HTML - passthrough for trusted FunnelWind source content
+ */
+function sanitizeHtml(html) {
+  if (!html) return '';
+  return html;
 }
 
 /**
@@ -1621,6 +1622,9 @@ function parseTextElement(
   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);
 
@@ -1715,6 +1719,7 @@ function parseTextElement(
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },
@@ -4466,7 +4471,8 @@ function parsePageTree(rootElement = null) {
   const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
   const textColor = normalizeColor(textColorRaw);
   const linkColor = normalizeColor(linkColorRaw);
-  const fontFamily = rootElement.getAttribute("data-font-family") || "";
+  // Support both 'font' (simple) and 'font-family' attributes
+  const fontFamily = rootElement.getAttribute("data-font") || rootElement.getAttribute("data-font-family") || "";
   const fontWeight = rootElement.getAttribute("data-font-weight") || "";
   // Decode URL-encoded values
   const headerCodeRaw = rootElement.getAttribute("data-header-code") || "";
@@ -4633,10 +4639,9 @@ async function copyPageTreeToClipboard(rootElement = null) {
 // Expose API
 global.CFPageTreeParser = {
   parsePageTree,
-  parseElement,
-  extractPageSettings,
+  createParseElement,
   exportPageTreeJSON,
-  downloadPageTreeJSON,
+  downloadPageTree,
   copyPageTreeToClipboard,
   // Utils
   generateId,

package/package.json

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

package/src/index.js

@@ -225,7 +225,8 @@ export function parsePageTree(rootElement = null) {
   const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
   const textColor = normalizeColor(textColorRaw);
   const linkColor = normalizeColor(linkColorRaw);
-  const fontFamily = rootElement.getAttribute("data-font-family") || "";
+  // Support both 'font' (simple) and 'font-family' attributes
+  const fontFamily = rootElement.getAttribute("data-font") || rootElement.getAttribute("data-font-family") || "";
   const fontWeight = rootElement.getAttribute("data-font-weight") || "";
   // Decode URL-encoded values
   const headerCodeRaw = rootElement.getAttribute("data-header-code") || "";

package/src/parsers/text.js

@@ -42,6 +42,9 @@ function parseTextElement(
   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);
 
@@ -136,6 +139,7 @@ function parseTextElement(
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },

package/src/utils.js

@@ -8,26 +8,12 @@
  * ============================================================================
  */
 
-// Use DOMPurify in browser, simple passthrough on server
-// Server-side parsing is from trusted FunnelWind source
-let DOMPurify = null;
-if (typeof window !== 'undefined') {
-  import('dompurify').then(mod => { DOMPurify = mod.default; });
-}
-
 /**
- * Sanitize HTML to prevent XSS attacks
- * Allows only safe formatting tags for text content
+ * Sanitize HTML - passthrough for trusted FunnelWind source content
  */
 export function sanitizeHtml(html) {
   if (!html) return '';
-  // On server or before DOMPurify loads, return HTML as-is
-  // (server-side parsing is from trusted FunnelWind source)
-  if (!DOMPurify) return html;
-  return DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: ['b', 'strong', 'i', 'em', 'u', 's', 'strike', 'a', 'br', 'span', 'li'],
-    ALLOWED_ATTR: ['href', 'target', 'rel', 'style', 'class'],
-  });
+  return html;
 }
 
 /**