cf-pagetree-parser 1.0.7 → 1.0.9

package/dist/cf-pagetree-parser.js

@@ -958,6 +958,90 @@ function parseContentNode(element, parseChildren) {
   return node;
 }
 
+/**
+ * Split rows whose columns' total span exceeds 12 into multiple rows.
+ * ClickFunnels renders all columns in a row side-by-side regardless of mdNum,
+ * so a row with e.g. 7 span-12 columns displays them all horizontally.
+ * This groups columns into batches that fit within 12 and creates separate rows.
+ */
+function splitOverflowingRows(rows, sectionId) {
+  const result = [];
+
+  for (const row of rows) {
+    if (row.type !== 'RowContainer/V1' || !row.children || row.children.length <= 1) {
+      result.push(row);
+      continue;
+    }
+
+    const totalSpan = row.children.reduce((sum, col) => sum + (col.params?.mdNum || 12), 0);
+    if (totalSpan <= 12) {
+      result.push(row);
+      continue;
+    }
+
+    // Group columns so each group's total span ≤ 12
+    const groups = [];
+    let currentGroup = [];
+    let currentSpan = 0;
+
+    for (const col of row.children) {
+      const colSpan = col.params?.mdNum || 12;
+      if (currentSpan + colSpan > 12 && currentGroup.length > 0) {
+        groups.push(currentGroup);
+        currentGroup = [];
+        currentSpan = 0;
+      }
+      currentGroup.push(col);
+      currentSpan += colSpan;
+    }
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+
+    // First group stays in the original row
+    row.children = groups[0].map((col, idx) => {
+      col.parentId = row.id;
+      col.fractionalIndex = generateFractionalIndex(idx);
+      return col;
+    });
+    result.push(row);
+
+    // Additional groups get new RowContainers with the same styling
+    for (let g = 1; g < groups.length; g++) {
+      const extraId = generateId();
+      const extraRow = {
+        type: row.type,
+        id: extraId,
+        version: 0,
+        parentId: sectionId,
+        fractionalIndex: '',
+        attrs: JSON.parse(JSON.stringify(row.attrs)),
+        params: JSON.parse(JSON.stringify(row.params)),
+        selectors: JSON.parse(JSON.stringify(row.selectors)),
+        children: groups[g].map((col, idx) => {
+          col.parentId = extraId;
+          col.fractionalIndex = generateFractionalIndex(idx);
+          return col;
+        }),
+      };
+      // Continuation rows should not duplicate the original row's margin-top
+      if (extraRow.attrs.style) {
+        extraRow.attrs.style['margin-top'] = 0;
+      }
+      // Remove any element-id to avoid duplicate IDs in the page
+      delete extraRow.attrs.id;
+      result.push(extraRow);
+    }
+  }
+
+  // Re-index all rows with proper fractional indices
+  result.forEach((row, idx) => {
+    row.fractionalIndex = generateFractionalIndex(idx);
+  });
+
+  return result;
+}
+
 /**
  * Parse SectionContainer
  */
@@ -1126,6 +1210,11 @@ function parseSectionContainer(element, parentId, index, parseChildren) {
     }
   });
 
+  // Split rows whose column spans exceed 12 into multiple rows.
+  // ClickFunnels renders all columns in a row side-by-side, so a row with
+  // e.g. 7 span-12 columns would display them all horizontally instead of stacking.
+  node.children = splitOverflowingRows(node.children, id);
+
   return node;
 }
 
@@ -1724,6 +1813,7 @@ function parseTextElement(
     // 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"]',
@@ -4465,6 +4555,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,
@@ -4515,6 +4606,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.7",
+  "version": "1.0.9",
   "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/layout.js

@@ -71,6 +71,90 @@ export function parseContentNode(element, parseChildren) {
   return node;
 }
 
+/**
+ * Split rows whose columns' total span exceeds 12 into multiple rows.
+ * ClickFunnels renders all columns in a row side-by-side regardless of mdNum,
+ * so a row with e.g. 7 span-12 columns displays them all horizontally.
+ * This groups columns into batches that fit within 12 and creates separate rows.
+ */
+function splitOverflowingRows(rows, sectionId) {
+  const result = [];
+
+  for (const row of rows) {
+    if (row.type !== 'RowContainer/V1' || !row.children || row.children.length <= 1) {
+      result.push(row);
+      continue;
+    }
+
+    const totalSpan = row.children.reduce((sum, col) => sum + (col.params?.mdNum || 12), 0);
+    if (totalSpan <= 12) {
+      result.push(row);
+      continue;
+    }
+
+    // Group columns so each group's total span ≤ 12
+    const groups = [];
+    let currentGroup = [];
+    let currentSpan = 0;
+
+    for (const col of row.children) {
+      const colSpan = col.params?.mdNum || 12;
+      if (currentSpan + colSpan > 12 && currentGroup.length > 0) {
+        groups.push(currentGroup);
+        currentGroup = [];
+        currentSpan = 0;
+      }
+      currentGroup.push(col);
+      currentSpan += colSpan;
+    }
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+
+    // First group stays in the original row
+    row.children = groups[0].map((col, idx) => {
+      col.parentId = row.id;
+      col.fractionalIndex = generateFractionalIndex(idx);
+      return col;
+    });
+    result.push(row);
+
+    // Additional groups get new RowContainers with the same styling
+    for (let g = 1; g < groups.length; g++) {
+      const extraId = generateId();
+      const extraRow = {
+        type: row.type,
+        id: extraId,
+        version: 0,
+        parentId: sectionId,
+        fractionalIndex: '',
+        attrs: JSON.parse(JSON.stringify(row.attrs)),
+        params: JSON.parse(JSON.stringify(row.params)),
+        selectors: JSON.parse(JSON.stringify(row.selectors)),
+        children: groups[g].map((col, idx) => {
+          col.parentId = extraId;
+          col.fractionalIndex = generateFractionalIndex(idx);
+          return col;
+        }),
+      };
+      // Continuation rows should not duplicate the original row's margin-top
+      if (extraRow.attrs.style) {
+        extraRow.attrs.style['margin-top'] = 0;
+      }
+      // Remove any element-id to avoid duplicate IDs in the page
+      delete extraRow.attrs.id;
+      result.push(extraRow);
+    }
+  }
+
+  // Re-index all rows with proper fractional indices
+  result.forEach((row, idx) => {
+    row.fractionalIndex = generateFractionalIndex(idx);
+  });
+
+  return result;
+}
+
 /**
  * Parse SectionContainer
  */
@@ -239,6 +323,11 @@ export function parseSectionContainer(element, parentId, index, parseChildren) {
     }
   });
 
+  // Split rows whose column spans exceed 12 into multiple rows.
+  // ClickFunnels renders all columns in a row side-by-side, so a row with
+  // e.g. 7 span-12 columns would display them all horizontally instead of stacking.
+  node.children = splitOverflowingRows(node.children, id);
+
   return node;
 }
 

package/src/parsers/text.js

@@ -90,6 +90,7 @@ function parseTextElement(
     // 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"]',