cf-pagetree-parser 1.0.3 → 1.0.5

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

@@ -1622,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);
 
@@ -1716,6 +1719,7 @@ function parseTextElement(
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },
@@ -1868,6 +1872,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);
 
@@ -1990,6 +1997,7 @@ function parseButton(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         'text-align': textAlign,
       },
@@ -2166,6 +2174,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']);
@@ -2194,6 +2205,7 @@ function parseImage(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt,
       style: {
         'text-align': textAlign,
@@ -2262,6 +2274,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']);
@@ -2297,6 +2312,7 @@ function parseIcon(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
       ...animationAttrs,
     },
@@ -2345,6 +2361,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);
 
@@ -2368,6 +2387,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',
@@ -2419,6 +2439,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);
 
@@ -2464,6 +2487,7 @@ function parseDivider(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -2523,6 +2547,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);
 
@@ -2565,6 +2592,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: {
@@ -2683,6 +2711,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);
 
@@ -2724,6 +2755,7 @@ function parseTextArea(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       'data-skip-shadow-settings': shadow ? 'false' : 'true',
       style: {
         width,
@@ -2840,6 +2872,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);
 
@@ -2908,6 +2943,7 @@ function parseSelectBox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {
         width,
         'margin-top': marginTop.value,
@@ -3013,6 +3049,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);
 
@@ -3052,6 +3091,7 @@ function parseCheckbox(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3164,6 +3204,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);
 
@@ -3291,6 +3334,7 @@ function parseBulletList(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3509,6 +3553,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);
 
@@ -3552,6 +3599,7 @@ function parseProgressBar(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       style: {},
     },
     params: {
@@ -3631,6 +3679,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']);
@@ -3669,6 +3720,7 @@ function parseVideoPopup(element, parentId, index) {
     parentId,
     fractionalIndex: generateFractionalIndex(index),
     attrs: {
+      ...(elementId ? { id: elementId } : {}),
       alt: alt || 'Video thumbnail',
     },
     params: {
@@ -3746,6 +3798,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);
 
@@ -3819,6 +3874,10 @@ function parseCountdown(element, parentId, index) {
     version: 0,
     parentId,
     fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      ...(elementId ? { id: elementId } : {}),
+      style: {},
+    },
     params: {
       type: 'countdown',
       countdown_opts: {
@@ -3943,7 +4002,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
@@ -4463,11 +4522,13 @@ 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);
-  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/package.json

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

package/src/index.js

@@ -221,11 +221,13 @@ 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);
-  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/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);
 
@@ -563,6 +578,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);
 
@@ -156,6 +159,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

@@ -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,
     },