cf-pagetree-parser 1.0.0

package/src/parsers/text.js

@@ -0,0 +1,278 @@
+/**
+ * ============================================================================
+ * PAGETREE PARSER - Text Element Parsers
+ * ============================================================================
+ *
+ * Headline/V1, SubHeadline/V1, Paragraph/V1
+ *
+ * ============================================================================
+ */
+
+import {
+  generateId,
+  generateFractionalIndex,
+  parseInlineStyle,
+  parseValueWithUnit,
+  normalizeColor,
+  parseHtmlToTextNodes,
+  parseAnimationAttrs,
+} from "../utils.js";
+
+import {
+  parseSpacing,
+  spacingToAttrsAndParams,
+  normalizeFontWeight,
+  parseLineHeight,
+  parseTextAlign,
+  parseFontFamily,
+} from "../styles.js";
+
+/**
+ * Parse text element (Headline, SubHeadline, or Paragraph)
+ *
+ * Reads from data attributes first (most reliable), falls back to inline styles
+ */
+function parseTextElement(
+  element,
+  parentId,
+  index,
+  type,
+  selector,
+  _styleGuideAttr
+) {
+  const id = generateId();
+  const contentEditableId = generateId();
+
+  const wrapperStyles = parseInlineStyle(element.getAttribute("style") || "");
+  const spacing = parseSpacing(wrapperStyles);
+
+  // Find the text element (h1, h2, p, span)
+  const textEl =
+    element.querySelector("h1, h2, h3, h4, h5, h6, p, span") || element;
+  const textStyles = parseInlineStyle(textEl.getAttribute("style") || "");
+
+  // Read from data attributes first (most reliable), fallback to inline styles
+  // data-size-resolved is set by applyStyleguideDataAttributes() when size presets are used
+  // This converts "xl", "l", "m", "s" presets to actual pixel values from the typescale
+  const sizeResolved = element.getAttribute("data-size-resolved");
+  const sizeAttr = element.getAttribute("data-size");
+  const parsedSizeResolved = sizeResolved ? parseValueWithUnit(sizeResolved) : null;
+  const parsedSizeAttr = sizeAttr ? parseValueWithUnit(sizeAttr) : null;
+  const fontSize = parsedSizeResolved || parsedSizeAttr || parseValueWithUnit(textStyles["font-size"] || "48px");
+
+  const weightAttr = element.getAttribute("data-weight");
+  const fontWeight = weightAttr
+    ? normalizeFontWeight(weightAttr)
+    : normalizeFontWeight(textStyles["font-weight"] || "normal");
+
+  const fontAttr = element.getAttribute("data-font");
+  // Normalize font-family to ClickFunnels format (e.g., "\"Poppins\", sans-serif")
+  const fontFamily = fontAttr
+    ? parseFontFamily(fontAttr)
+    : parseFontFamily(textStyles["font-family"]);
+
+  const colorAttr = element.getAttribute("data-color");
+  const color = colorAttr
+    ? normalizeColor(colorAttr)
+    : normalizeColor(textStyles.color || "#000000");
+
+  const alignAttr = element.getAttribute("data-align");
+  const textAlign = alignAttr || parseTextAlign(textStyles["text-align"]);
+
+  const leadingAttr = element.getAttribute("data-leading");
+  const lineHeight = leadingAttr
+    ? parseLineHeight(leadingAttr)
+    : parseLineHeight(textStyles["line-height"]);
+
+  const trackingAttr = element.getAttribute("data-tracking");
+  const letterSpacing = trackingAttr
+    ? parseValueWithUnit(trackingAttr, "rem")
+    : parseValueWithUnit(textStyles["letter-spacing"], "rem");
+
+  const transformAttr = element.getAttribute("data-transform");
+  const textTransform = transformAttr || textStyles["text-transform"];
+
+  // Get icon attributes
+  const iconAttr = element.getAttribute("data-icon");
+  const iconAlignAttr = element.getAttribute("data-icon-align");
+
+  // Get link color - prefer data attribute, fallback to parsing anchor elements
+  const linkColorAttr = element.getAttribute("data-link-color");
+  let linkColor = null;
+  if (linkColorAttr) {
+    linkColor = normalizeColor(linkColorAttr);
+  } else {
+    // Try to find an anchor in the content and get its color
+    const anchor = textEl.querySelector("a");
+    if (anchor) {
+      const anchorStyles = parseInlineStyle(anchor.getAttribute("style") || "");
+      if (anchorStyles.color) {
+        linkColor = normalizeColor(anchorStyles.color);
+      }
+    }
+  }
+
+  // Build the style object for the selector
+  const selectorStyle = {
+    "font-size": fontSize ? fontSize.value : 48,
+    "font-weight": fontWeight,
+    color: color,
+    "text-align": textAlign,
+    "line-height": lineHeight ? lineHeight.value : 140,
+    "letter-spacing": letterSpacing ? letterSpacing.value : 0,
+  };
+
+  // Add font-family if present
+  if (fontFamily) {
+    selectorStyle["font-family"] = fontFamily;
+  }
+
+  // Determine the style-guide-override param name based on type
+  const styleGuideOverrideMap = {
+    "Headline/V1": "style-guide-override-headline",
+    "SubHeadline/V1": "style-guide-override-subheadline",
+    "Paragraph/V1": "style-guide-override-content",
+  };
+  const styleGuideOverrideParam = styleGuideOverrideMap[type];
+
+  // Parse animation attributes
+  const { attrs: animationAttrs, params: animationParams } = parseAnimationAttrs(element);
+
+  const node = {
+    type,
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      style: {},
+      ...animationAttrs,
+    },
+    params: {
+      "padding-top--unit": "px",
+      "padding-bottom--unit": "px",
+      "--style-padding-horizontal--unit": "px",
+      "--style-padding-horizontal": 0,
+      ...animationParams,
+    },
+    selectors: {
+      [selector]: {
+        attrs: {
+          style: selectorStyle,
+        },
+        params: {
+          [styleGuideOverrideParam]: true,
+          "font-size--unit": fontSize ? fontSize.unit : "px",
+          "line-height--unit": "%",
+          "letter-spacing--unit": "rem",
+        },
+      },
+    },
+    children: [
+      {
+        type: "ContentEditableNode",
+        attrs: {
+          "data-align-selector": selector,
+        },
+        id: contentEditableId,
+        version: 0,
+        parentId: id,
+        fractionalIndex: "a0",
+        children: [],
+      },
+    ],
+  };
+
+  // Apply spacing to wrapper
+  const spacingWithDefaults = {
+    paddingTop: spacing.paddingTop || parseValueWithUnit("0px"),
+    paddingBottom: spacing.paddingBottom || parseValueWithUnit("0px"),
+    paddingHorizontal: spacing.paddingHorizontal || parseValueWithUnit("0px"),
+    marginTop: spacing.marginTop || parseValueWithUnit("0px"),
+  };
+
+  const { attrs: spacingAttrs, params: spacingParams } =
+    spacingToAttrsAndParams(spacingWithDefaults, true);
+  Object.assign(node.attrs.style, spacingAttrs.style);
+  Object.assign(node.params, spacingParams);
+
+  // Apply text-transform if present
+  if (textTransform) {
+    node.selectors[selector].attrs.style["text-transform"] = textTransform;
+  }
+
+  // Apply link color to selector (for CSS cascade)
+  if (linkColor) {
+    node.selectors[`${selector} .elTypographyLink`] = {
+      attrs: {
+        style: {
+          color: linkColor,
+        },
+      },
+    };
+  }
+
+  // Add icon attributes to params if present
+  if (iconAttr) {
+    node.params["icon"] = iconAttr;
+  }
+  if (iconAlignAttr) {
+    node.params["icon-align"] = iconAlignAttr;
+  }
+
+  // Parse text content - pass linkColor for inline anchor styles
+  const textContent = textEl.innerHTML;
+  node.children[0].children = parseHtmlToTextNodes(textContent, linkColor);
+
+  // If no children were parsed, add simple text
+  if (node.children[0].children.length === 0) {
+    node.children[0].children.push({
+      type: "text",
+      innerText: textEl.textContent || "",
+    });
+  }
+
+  return node;
+}
+
+/**
+ * Parse Headline/V1
+ */
+export function parseHeadline(element, parentId, index) {
+  return parseTextElement(
+    element,
+    parentId,
+    index,
+    "Headline/V1",
+    ".elHeadline",
+    "data-style-guide-headline"
+  );
+}
+
+/**
+ * Parse SubHeadline/V1
+ */
+export function parseSubHeadline(element, parentId, index) {
+  return parseTextElement(
+    element,
+    parentId,
+    index,
+    "SubHeadline/V1",
+    ".elSubheadline",
+    "data-style-guide-subheadline"
+  );
+}
+
+/**
+ * Parse Paragraph/V1
+ */
+export function parseParagraph(element, parentId, index) {
+  return parseTextElement(
+    element,
+    parentId,
+    index,
+    "Paragraph/V1",
+    ".elParagraph",
+    "data-style-guide-content"
+  );
+}

package/src/styles.js

@@ -0,0 +1,444 @@
+/**
+ * ============================================================================
+ * PAGETREE PARSER - Style Parsing Helpers
+ * ============================================================================
+ *
+ * Parse inline styles and convert to ClickFunnels pagetree format.
+ *
+ * ============================================================================
+ */
+
+import { parseValueWithUnit, normalizeColor } from './utils.js';
+
+/**
+ * Shadow presets mapping (from inline shadow to CF params)
+ */
+export const SHADOW_PRESETS = {
+  'none': null,
+  '0 1px 2px rgba(0,0,0,0.05)': {
+    x: 0, y: 1, blur: 2, spread: 0, color: 'rgba(0, 0, 0, 0.05)'
+  },
+  '0 1px 3px rgba(0,0,0,0.1)': {
+    x: 0, y: 1, blur: 3, spread: 0, color: 'rgba(0, 0, 0, 0.1)'
+  },
+  '0 4px 6px rgba(0,0,0,0.1)': {
+    x: 0, y: 4, blur: 6, spread: 0, color: 'rgba(0, 0, 0, 0.1)'
+  },
+  '0 10px 15px rgba(0,0,0,0.1)': {
+    x: 0, y: 10, blur: 15, spread: 0, color: 'rgba(0, 0, 0, 0.1)'
+  },
+  '0 20px 25px rgba(0,0,0,0.1)': {
+    x: 0, y: 20, blur: 25, spread: 0, color: 'rgba(0, 0, 0, 0.1)'
+  },
+  '0 25px 50px rgba(0,0,0,0.25)': {
+    x: 0, y: 25, blur: 50, spread: 0, color: 'rgba(0, 0, 0, 0.25)'
+  },
+};
+
+/**
+ * Parse box-shadow value to CF params
+ */
+export function parseShadow(shadowValue) {
+  if (!shadowValue || shadowValue === 'none') return null;
+
+  // Check if it matches a preset
+  const normalized = shadowValue.replace(/\s+/g, ' ').trim();
+  if (SHADOW_PRESETS[normalized]) {
+    return SHADOW_PRESETS[normalized];
+  }
+
+  // Check for inset keyword
+  const isInset = shadowValue.toLowerCase().includes('inset');
+  const shadowWithoutInset = shadowValue.replace(/inset\s*/gi, '').trim();
+
+  // Parse custom shadow: "0 4px 6px rgba(0,0,0,0.1)"
+  const match = shadowWithoutInset.match(
+    /(-?\d+(?:\.\d+)?(?:px)?)\s+(-?\d+(?:\.\d+)?(?:px)?)\s+(-?\d+(?:\.\d+)?(?:px)?)\s*(-?\d+(?:\.\d+)?(?:px)?)?\s*(rgba?\([^)]+\)|#[0-9a-fA-F]{3,8})?/
+  );
+
+  if (match) {
+    return {
+      x: parseFloat(match[1]) || 0,
+      y: parseFloat(match[2]) || 0,
+      blur: parseFloat(match[3]) || 0,
+      spread: parseFloat(match[4]) || 0,
+      color: match[5] || 'rgba(0, 0, 0, 0.1)',
+      inset: isInset,
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Convert shadow params to CF pagetree format
+ */
+export function shadowToParams(shadow) {
+  if (!shadow) return {};
+
+  const params = {
+    '--style-box-shadow-distance-x': shadow.x,
+    '--style-box-shadow-distance-y': shadow.y,
+    '--style-box-shadow-blur': shadow.blur,
+    '--style-box-shadow-spread': shadow.spread,
+    '--style-box-shadow-color': shadow.color,
+    '--style-box-shadow-distance-x--unit': 'px',
+    '--style-box-shadow-distance-y--unit': 'px',
+    '--style-box-shadow-blur--unit': 'px',
+    '--style-box-shadow-spread--unit': 'px',
+  };
+
+  if (shadow.inset) {
+    params['--style-box-shadow-style-type'] = 'inset';
+  }
+
+  return params;
+}
+
+/**
+ * Parse border properties from inline styles
+ */
+export function parseBorder(styles) {
+  const result = {
+    width: null,
+    style: null,
+    color: null,
+  };
+
+  // Check for border shorthand
+  if (styles.border) {
+    const parts = styles.border.split(/\s+/);
+    for (const part of parts) {
+      if (part.match(/^\d/)) {
+        result.width = parseValueWithUnit(part);
+      } else if (['solid', 'dashed', 'dotted', 'none'].includes(part)) {
+        result.style = part;
+      } else {
+        result.color = normalizeColor(part);
+      }
+    }
+  }
+
+  // Check individual properties (override shorthand)
+  if (styles['border-width']) {
+    result.width = parseValueWithUnit(styles['border-width']);
+  }
+  if (styles['border-style']) {
+    result.style = styles['border-style'];
+  }
+  if (styles['border-color']) {
+    result.color = normalizeColor(styles['border-color']);
+  }
+
+  return result;
+}
+
+/**
+ * Convert border to CF params format
+ */
+export function borderToParams(border) {
+  if (!border.width && !border.style && !border.color) return {};
+
+  const params = {};
+
+  if (border.width) {
+    params['--style-border-width'] = border.width.value;
+    params['--style-border-width--unit'] = border.width.unit;
+  }
+  if (border.style) {
+    params['--style-border-style'] = border.style;
+  }
+  if (border.color) {
+    params['--style-border-color'] = border.color;
+  }
+
+  return params;
+}
+
+/**
+ * Parse spacing (padding/margin) from inline styles
+ */
+export function parseSpacing(styles) {
+  const result = {};
+
+  if (styles['padding-top']) {
+    result.paddingTop = parseValueWithUnit(styles['padding-top']);
+  }
+  if (styles['padding-bottom']) {
+    result.paddingBottom = parseValueWithUnit(styles['padding-bottom']);
+  }
+  if (styles['padding-left'] || styles['padding-right']) {
+    result.paddingHorizontal = parseValueWithUnit(
+      styles['padding-left'] || styles['padding-right']
+    );
+  }
+  if (styles['margin-top']) {
+    result.marginTop = parseValueWithUnit(styles['margin-top']);
+  }
+
+  return result;
+}
+
+/**
+ * Convert spacing to CF attrs/params format
+ */
+export function spacingToAttrsAndParams(spacing, forceDefaults = false) {
+  const attrs = { style: {} };
+  const params = {};
+
+  const paddingTop = spacing.paddingTop || (forceDefaults ? parseValueWithUnit('0px') : null);
+  const paddingBottom = spacing.paddingBottom || (forceDefaults ? parseValueWithUnit('0px') : null);
+  const paddingHorizontal = spacing.paddingHorizontal || (forceDefaults ? parseValueWithUnit('0px') : null);
+  const marginTop = spacing.marginTop || (forceDefaults ? parseValueWithUnit('0px') : null);
+
+  if (paddingTop) {
+    attrs.style['padding-top'] = paddingTop.value;
+    params['padding-top--unit'] = paddingTop.unit;
+  }
+
+  if (paddingBottom) {
+    attrs.style['padding-bottom'] = paddingBottom.value;
+    params['padding-bottom--unit'] = paddingBottom.unit;
+  }
+
+  if (paddingHorizontal) {
+    params['--style-padding-horizontal'] = paddingHorizontal.value;
+    params['--style-padding-horizontal--unit'] = paddingHorizontal.unit;
+  }
+
+  if (marginTop) {
+    attrs.style['margin-top'] = marginTop.value;
+    params['margin-top--unit'] = marginTop.unit;
+  }
+
+  return { attrs, params };
+}
+
+/**
+ * Parse background from inline styles
+ */
+export function parseBackground(styles) {
+  const result = {
+    color: null,
+    imageUrl: null,
+    gradient: null,
+  };
+
+  if (styles['background-color']) {
+    result.color = normalizeColor(styles['background-color']);
+  }
+
+  if (styles.background) {
+    // Check if it's a gradient
+    if (styles.background.includes('gradient')) {
+      result.gradient = styles.background;
+    } else {
+      // Could be color
+      result.color = normalizeColor(styles.background);
+    }
+  }
+
+  if (styles['background-image']) {
+    const urlMatch = styles['background-image'].match(/url\(['"]?([^'"]+)['"]?\)/);
+    if (urlMatch) {
+      result.imageUrl = urlMatch[1];
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Convert background to CF params format
+ *
+ * NOTE: In ClickFunnels, gradients use --style-background-color (not --style-background-image)
+ * The gradient value like "linear-gradient(180deg, #6366f1 0%, #a855f7 100%)"
+ * goes directly into --style-background-color
+ *
+ * IMPORTANT: --style-background-image-url is always included (even as empty string)
+ * This is required for ClickFunnels to recognize background settings
+ */
+export function backgroundToParams(background) {
+  const params = {};
+
+  // Gradients take priority and use --style-background-color
+  if (background.gradient) {
+    params['--style-background-color'] = background.gradient;
+  } else if (background.color) {
+    params['--style-background-color'] = background.color;
+  }
+
+  // Always include background-image-url (empty string if no image)
+  params['--style-background-image-url'] = background.imageUrl || '';
+
+  return params;
+}
+
+/**
+ * Parse border-radius from inline styles
+ */
+export function parseBorderRadius(styles) {
+  if (styles['border-radius']) {
+    return parseValueWithUnit(styles['border-radius']);
+  }
+  return null;
+}
+
+/**
+ * Convert font-weight string to numeric value
+ */
+export function normalizeFontWeight(weight) {
+  const weightMap = {
+    thin: '100',
+    extralight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  };
+
+  if (weightMap[weight]) {
+    return weightMap[weight];
+  }
+
+  return weight;
+}
+
+/**
+ * Parse line-height and convert to percentage
+ */
+export function parseLineHeight(value) {
+  if (!value) return null;
+
+  // Already percentage
+  if (String(value).endsWith('%')) {
+    return {
+      value: parseFloat(value),
+      unit: '%'
+    };
+  }
+
+  // Decimal multiplier (e.g., 1.5 = 150%)
+  const num = parseFloat(value);
+  if (!isNaN(num) && num > 0 && num < 5) {
+    return {
+      value: Math.round(num * 100),
+      unit: '%'
+    };
+  }
+
+  // Named values
+  const lineHeightMap = {
+    none: 100,
+    tight: 110,
+    snug: 120,
+    normal: 140,
+    relaxed: 160,
+    loose: 180,
+  };
+
+  if (lineHeightMap[value]) {
+    return {
+      value: lineHeightMap[value],
+      unit: '%'
+    };
+  }
+
+  return {
+    value: parseFloat(value) || 140,
+    unit: '%'
+  };
+}
+
+/**
+ * Parse text-align value
+ */
+export function parseTextAlign(value) {
+  if (!value) return 'center'; // CF default
+  const valid = ['left', 'center', 'right'];
+  return valid.includes(value) ? value : 'center';
+}
+
+/**
+ * Parse flex direction
+ */
+export function parseFlexDirection(value) {
+  const map = {
+    row: 'row',
+    column: 'column',
+    'row-reverse': 'row-reverse',
+    'column-reverse': 'column-reverse',
+  };
+  return map[value] || 'row';
+}
+
+/**
+ * Parse justify-content
+ */
+export function parseJustifyContent(value) {
+  const valid = [
+    'flex-start', 'center', 'flex-end',
+    'space-between', 'space-around', 'space-evenly'
+  ];
+  return valid.includes(value) ? value : 'center';
+}
+
+/**
+ * Parse align-items
+ */
+export function parseAlignItems(value) {
+  const valid = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];
+  return valid.includes(value) ? value : 'center';
+}
+
+/**
+ * Normalize font-family to ClickFunnels format
+ * ClickFunnels expects: "\"FontName\", sans-serif" (with escaped quotes around font name)
+ *
+ * Input formats handled:
+ *   - "Poppins" -> "\"Poppins\", sans-serif"
+ *   - "Noto Sans JP" -> "\"Noto Sans JP\", sans-serif"
+ *   - "'Poppins', sans-serif" -> "\"Poppins\", sans-serif"
+ *   - "\"Poppins\", sans-serif" -> "\"Poppins\", sans-serif" (already correct)
+ *   - "Poppins, sans-serif" -> "\"Poppins\", sans-serif"
+ */
+export function normalizeFontFamily(fontFamily) {
+  if (!fontFamily) return null;
+
+  // Trim whitespace
+  let font = fontFamily.trim();
+
+  // If already in ClickFunnels format (starts with escaped quote or actual quote char for the font name)
+  if (font.startsWith('"') && font.includes(',')) {
+    // Already has quotes, return as-is
+    return font;
+  }
+
+  // Remove surrounding single or double quotes if present
+  font = font.replace(/^['"]|['"]$/g, '');
+
+  // Check if it has a fallback already (contains comma)
+  if (font.includes(',')) {
+    // Extract the primary font name
+    const parts = font.split(',');
+    const primaryFont = parts[0].trim().replace(/^['"]|['"]$/g, '');
+    const fallback = parts.slice(1).map(p => p.trim()).join(', ') || 'sans-serif';
+
+    return `"${primaryFont}", ${fallback}`;
+  }
+
+  // Just a font name, add quotes and fallback
+  return `"${font}", sans-serif`;
+}
+
+/**
+ * Parse font-family from inline style value
+ * Returns the normalized ClickFunnels format
+ */
+export function parseFontFamily(value) {
+  if (!value) return null;
+  return normalizeFontFamily(value);
+}