cf-pagetree-parser 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cf-pagetree-parser.js +58 -2
  2. package/package.json +1 -1
  3. package/src/index.js +2 -1
  4. package/src/parsers/button.js +4 -0
  5. package/src/parsers/form.js +16 -0
  6. package/src/parsers/interactive.js +16 -1
  7. package/src/parsers/list.js +4 -0
  8. package/src/parsers/media.js +16 -0
package/dist/cf-pagetree-parser.js CHANGED
@@ -1872,6 +1872,9 @@ function parseButton(element, parentId, index) {
1872
1872
  const mainTextId = generateId();
1873
1873
  const subTextId = generateId();
1874
1874
 
1875
+ // Get element-id for scroll-to/show-hide targeting
1876
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
1877
+
1875
1878
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
1876
1879
  const spacing = parseSpacing(wrapperStyles);
1877
1880
 
@@ -1994,6 +1997,7 @@ function parseButton(element, parentId, index) {
1994
1997
  parentId,
1995
1998
  fractionalIndex: generateFractionalIndex(index),
1996
1999
  attrs: {
2000
+ ...(elementId ? { id: elementId } : {}),
1997
2001
  style: {
1998
2002
  'text-align': textAlign,
1999
2003
  },
@@ -2170,6 +2174,9 @@ function parseButton(element, parentId, index) {
2170
2174
  function parseImage(element, parentId, index) {
2171
2175
  const id = generateId();
2172
2176
 
2177
+ // Get element-id for scroll-to/show-hide targeting
2178
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2179
+
2173
2180
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2174
2181
  const spacing = parseSpacing(wrapperStyles);
2175
2182
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -2198,6 +2205,7 @@ function parseImage(element, parentId, index) {
2198
2205
  parentId,
2199
2206
  fractionalIndex: generateFractionalIndex(index),
2200
2207
  attrs: {
2208
+ ...(elementId ? { id: elementId } : {}),
2201
2209
  alt,
2202
2210
  style: {
2203
2211
  'text-align': textAlign,
@@ -2266,6 +2274,9 @@ function parseImage(element, parentId, index) {
2266
2274
  function parseIcon(element, parentId, index) {
2267
2275
  const id = generateId();
2268
2276
 
2277
+ // Get element-id for scroll-to/show-hide targeting
2278
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2279
+
2269
2280
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2270
2281
  const spacing = parseSpacing(wrapperStyles);
2271
2282
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -2301,6 +2312,7 @@ function parseIcon(element, parentId, index) {
2301
2312
  parentId,
2302
2313
  fractionalIndex: generateFractionalIndex(index),
2303
2314
  attrs: {
2315
+ ...(elementId ? { id: elementId } : {}),
2304
2316
  style: {},
2305
2317
  ...animationAttrs,
2306
2318
  },
@@ -2349,6 +2361,9 @@ function parseIcon(element, parentId, index) {
2349
2361
  function parseVideo(element, parentId, index) {
2350
2362
  const id = generateId();
2351
2363
 
2364
+ // Get element-id for scroll-to/show-hide targeting
2365
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2366
+
2352
2367
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2353
2368
  const spacing = parseSpacing(wrapperStyles);
2354
2369
 
@@ -2372,6 +2387,7 @@ function parseVideo(element, parentId, index) {
2372
2387
  parentId,
2373
2388
  fractionalIndex: generateFractionalIndex(index),
2374
2389
  attrs: {
2390
+ ...(elementId ? { id: elementId } : {}),
2375
2391
  'data-video-type': videoType,
2376
2392
  'data-skip-background-settings': background.color ? 'false' : 'true',
2377
2393
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
@@ -2423,6 +2439,9 @@ function parseVideo(element, parentId, index) {
2423
2439
  function parseDivider(element, parentId, index) {
2424
2440
  const id = generateId();
2425
2441
 
2442
+ // Get element-id for scroll-to/show-hide targeting
2443
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2444
+
2426
2445
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2427
2446
  const spacing = parseSpacing(wrapperStyles);
2428
2447
 
@@ -2468,6 +2487,7 @@ function parseDivider(element, parentId, index) {
2468
2487
  parentId,
2469
2488
  fractionalIndex: generateFractionalIndex(index),
2470
2489
  attrs: {
2490
+ ...(elementId ? { id: elementId } : {}),
2471
2491
  style: {},
2472
2492
  },
2473
2493
  params: {
@@ -2527,6 +2547,9 @@ function parseDivider(element, parentId, index) {
2527
2547
  function parseInput(element, parentId, index) {
2528
2548
  const id = generateId();
2529
2549
 
2550
+ // Get element-id for scroll-to/show-hide targeting
2551
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2552
+
2530
2553
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2531
2554
  const spacing = parseSpacing(wrapperStyles);
2532
2555
 
@@ -2569,6 +2592,7 @@ function parseInput(element, parentId, index) {
2569
2592
  parentId,
2570
2593
  fractionalIndex: generateFractionalIndex(index),
2571
2594
  attrs: {
2595
+ ...(elementId ? { id: elementId } : {}),
2572
2596
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
2573
2597
  type: inputType === 'phone_number' ? 'tel' : (inputType === 'email' ? 'email' : 'text'),
2574
2598
  style: {
@@ -2687,6 +2711,9 @@ function parseInput(element, parentId, index) {
2687
2711
  function parseTextArea(element, parentId, index) {
2688
2712
  const id = generateId();
2689
2713
 
2714
+ // Get element-id for scroll-to/show-hide targeting
2715
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2716
+
2690
2717
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2691
2718
  const spacing = parseSpacing(wrapperStyles);
2692
2719
 
@@ -2728,6 +2755,7 @@ function parseTextArea(element, parentId, index) {
2728
2755
  parentId,
2729
2756
  fractionalIndex: generateFractionalIndex(index),
2730
2757
  attrs: {
2758
+ ...(elementId ? { id: elementId } : {}),
2731
2759
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
2732
2760
  style: {
2733
2761
  width,
@@ -2844,6 +2872,9 @@ function parseTextArea(element, parentId, index) {
2844
2872
  function parseSelectBox(element, parentId, index) {
2845
2873
  const id = generateId();
2846
2874
 
2875
+ // Get element-id for scroll-to/show-hide targeting
2876
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
2877
+
2847
2878
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
2848
2879
  const spacing = parseSpacing(wrapperStyles);
2849
2880
 
@@ -2912,6 +2943,7 @@ function parseSelectBox(element, parentId, index) {
2912
2943
  parentId,
2913
2944
  fractionalIndex: generateFractionalIndex(index),
2914
2945
  attrs: {
2946
+ ...(elementId ? { id: elementId } : {}),
2915
2947
  style: {
2916
2948
  width,
2917
2949
  'margin-top': marginTop.value,
@@ -3017,6 +3049,9 @@ function parseSelectBox(element, parentId, index) {
3017
3049
  function parseCheckbox(element, parentId, index) {
3018
3050
  const id = generateId();
3019
3051
 
3052
+ // Get element-id for scroll-to/show-hide targeting
3053
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
3054
+
3020
3055
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
3021
3056
  const spacing = parseSpacing(wrapperStyles);
3022
3057
 
@@ -3056,6 +3091,7 @@ function parseCheckbox(element, parentId, index) {
3056
3091
  parentId,
3057
3092
  fractionalIndex: generateFractionalIndex(index),
3058
3093
  attrs: {
3094
+ ...(elementId ? { id: elementId } : {}),
3059
3095
  style: {},
3060
3096
  },
3061
3097
  params: {
@@ -3168,6 +3204,9 @@ function parseBulletList(element, parentId, index) {
3168
3204
  const id = generateId();
3169
3205
  const contentEditableId = generateId();
3170
3206
 
3207
+ // Get element-id for scroll-to/show-hide targeting
3208
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
3209
+
3171
3210
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
3172
3211
  const spacing = parseSpacing(wrapperStyles);
3173
3212
 
@@ -3295,6 +3334,7 @@ function parseBulletList(element, parentId, index) {
3295
3334
  parentId,
3296
3335
  fractionalIndex: generateFractionalIndex(index),
3297
3336
  attrs: {
3337
+ ...(elementId ? { id: elementId } : {}),
3298
3338
  style: {},
3299
3339
  },
3300
3340
  params: {
@@ -3513,6 +3553,9 @@ function parseBulletList(element, parentId, index) {
3513
3553
  function parseProgressBar(element, parentId, index) {
3514
3554
  const id = generateId();
3515
3555
 
3556
+ // Get element-id for scroll-to/show-hide targeting
3557
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
3558
+
3516
3559
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
3517
3560
  const spacing = parseSpacing(wrapperStyles);
3518
3561
 
@@ -3556,6 +3599,7 @@ function parseProgressBar(element, parentId, index) {
3556
3599
  parentId,
3557
3600
  fractionalIndex: generateFractionalIndex(index),
3558
3601
  attrs: {
3602
+ ...(elementId ? { id: elementId } : {}),
3559
3603
  style: {},
3560
3604
  },
3561
3605
  params: {
@@ -3635,6 +3679,9 @@ function parseProgressBar(element, parentId, index) {
3635
3679
  function parseVideoPopup(element, parentId, index) {
3636
3680
  const id = generateId();
3637
3681
 
3682
+ // Get element-id for scroll-to/show-hide targeting
3683
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
3684
+
3638
3685
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
3639
3686
  const spacing = parseSpacing(wrapperStyles);
3640
3687
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -3673,6 +3720,7 @@ function parseVideoPopup(element, parentId, index) {
3673
3720
  parentId,
3674
3721
  fractionalIndex: generateFractionalIndex(index),
3675
3722
  attrs: {
3723
+ ...(elementId ? { id: elementId } : {}),
3676
3724
  alt: alt || 'Video thumbnail',
3677
3725
  },
3678
3726
  params: {
@@ -3750,6 +3798,9 @@ function parseVideoPopup(element, parentId, index) {
3750
3798
  function parseCountdown(element, parentId, index) {
3751
3799
  const id = generateId();
3752
3800
 
3801
+ // Get element-id for scroll-to/show-hide targeting
3802
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
3803
+
3753
3804
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
3754
3805
  const spacing = parseSpacing(wrapperStyles);
3755
3806
 
@@ -3823,6 +3874,10 @@ function parseCountdown(element, parentId, index) {
3823
3874
  version: 0,
3824
3875
  parentId,
3825
3876
  fractionalIndex: generateFractionalIndex(index),
3877
+ attrs: {
3878
+ ...(elementId ? { id: elementId } : {}),
3879
+ style: {},
3880
+ },
3826
3881
  params: {
3827
3882
  type: 'countdown',
3828
3883
  countdown_opts: {
@@ -3947,7 +4002,7 @@ function parseCountdown(element, parentId, index) {
3947
4002
 
3948
4003
  // Apply spacing
3949
4004
  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
3950
- Object.assign(node.attrs || (node.attrs = {}), { style: spacingAttrs.style });
4005
+ Object.assign(node.attrs.style, spacingAttrs.style);
3951
4006
  Object.assign(node.params, spacingParams);
3952
4007
 
3953
4008
  // Apply border to amount container
@@ -4467,7 +4522,8 @@ function parsePageTree(rootElement = null) {
4467
4522
  }
4468
4523
 
4469
4524
  // Extract page settings from data attributes
4470
- const textColorRaw = rootElement.getAttribute("data-text-color") || "#334155";
4525
+ // Support both 'color' (simple) and 'text-color' (explicit) for page text color
4526
+ const textColorRaw = rootElement.getAttribute("data-color") || rootElement.getAttribute("data-text-color") || "#334155";
4471
4527
  const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
4472
4528
  const textColor = normalizeColor(textColorRaw);
4473
4529
  const linkColor = normalizeColor(linkColorRaw);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cf-pagetree-parser",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "Parse FunnelWind HTML to ClickFunnels PageTree JSON",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/index.js CHANGED
@@ -221,7 +221,8 @@ export function parsePageTree(rootElement = null) {
221
221
  }
222
222
 
223
223
  // Extract page settings from data attributes
224
- const textColorRaw = rootElement.getAttribute("data-text-color") || "#334155";
224
+ // Support both 'color' (simple) and 'text-color' (explicit) for page text color
225
+ const textColorRaw = rootElement.getAttribute("data-color") || rootElement.getAttribute("data-text-color") || "#334155";
225
226
  const linkColorRaw = rootElement.getAttribute("data-link-color") || "#3b82f6";
226
227
  const textColor = normalizeColor(textColorRaw);
227
228
  const linkColor = normalizeColor(linkColorRaw);
package/src/parsers/button.js CHANGED
@@ -40,6 +40,9 @@ export function parseButton(element, parentId, index) {
40
40
  const mainTextId = generateId();
41
41
  const subTextId = generateId();
42
42
 
43
+ // Get element-id for scroll-to/show-hide targeting
44
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
45
+
43
46
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
44
47
  const spacing = parseSpacing(wrapperStyles);
45
48
 
@@ -162,6 +165,7 @@ export function parseButton(element, parentId, index) {
162
165
  parentId,
163
166
  fractionalIndex: generateFractionalIndex(index),
164
167
  attrs: {
168
+ ...(elementId ? { id: elementId } : {}),
165
169
  style: {
166
170
  'text-align': textAlign,
167
171
  },
package/src/parsers/form.js CHANGED
@@ -34,6 +34,9 @@ import {
34
34
  export function parseInput(element, parentId, index) {
35
35
  const id = generateId();
36
36
 
37
+ // Get element-id for scroll-to/show-hide targeting
38
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
39
+
37
40
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
38
41
  const spacing = parseSpacing(wrapperStyles);
39
42
 
@@ -76,6 +79,7 @@ export function parseInput(element, parentId, index) {
76
79
  parentId,
77
80
  fractionalIndex: generateFractionalIndex(index),
78
81
  attrs: {
82
+ ...(elementId ? { id: elementId } : {}),
79
83
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
80
84
  type: inputType === 'phone_number' ? 'tel' : (inputType === 'email' ? 'email' : 'text'),
81
85
  style: {
@@ -194,6 +198,9 @@ export function parseInput(element, parentId, index) {
194
198
  export function parseTextArea(element, parentId, index) {
195
199
  const id = generateId();
196
200
 
201
+ // Get element-id for scroll-to/show-hide targeting
202
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
203
+
197
204
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
198
205
  const spacing = parseSpacing(wrapperStyles);
199
206
 
@@ -235,6 +242,7 @@ export function parseTextArea(element, parentId, index) {
235
242
  parentId,
236
243
  fractionalIndex: generateFractionalIndex(index),
237
244
  attrs: {
245
+ ...(elementId ? { id: elementId } : {}),
238
246
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
239
247
  style: {
240
248
  width,
@@ -351,6 +359,9 @@ export function parseTextArea(element, parentId, index) {
351
359
  export function parseSelectBox(element, parentId, index) {
352
360
  const id = generateId();
353
361
 
362
+ // Get element-id for scroll-to/show-hide targeting
363
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
364
+
354
365
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
355
366
  const spacing = parseSpacing(wrapperStyles);
356
367
 
@@ -419,6 +430,7 @@ export function parseSelectBox(element, parentId, index) {
419
430
  parentId,
420
431
  fractionalIndex: generateFractionalIndex(index),
421
432
  attrs: {
433
+ ...(elementId ? { id: elementId } : {}),
422
434
  style: {
423
435
  width,
424
436
  'margin-top': marginTop.value,
@@ -524,6 +536,9 @@ export function parseSelectBox(element, parentId, index) {
524
536
  export function parseCheckbox(element, parentId, index) {
525
537
  const id = generateId();
526
538
 
539
+ // Get element-id for scroll-to/show-hide targeting
540
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
541
+
527
542
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
528
543
  const spacing = parseSpacing(wrapperStyles);
529
544
 
@@ -563,6 +578,7 @@ export function parseCheckbox(element, parentId, index) {
563
578
  parentId,
564
579
  fractionalIndex: generateFractionalIndex(index),
565
580
  attrs: {
581
+ ...(elementId ? { id: elementId } : {}),
566
582
  style: {},
567
583
  },
568
584
  params: {
package/src/parsers/interactive.js CHANGED
@@ -33,6 +33,9 @@ import {
33
33
  export function parseProgressBar(element, parentId, index) {
34
34
  const id = generateId();
35
35
 
36
+ // Get element-id for scroll-to/show-hide targeting
37
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
38
+
36
39
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
37
40
  const spacing = parseSpacing(wrapperStyles);
38
41
 
@@ -76,6 +79,7 @@ export function parseProgressBar(element, parentId, index) {
76
79
  parentId,
77
80
  fractionalIndex: generateFractionalIndex(index),
78
81
  attrs: {
82
+ ...(elementId ? { id: elementId } : {}),
79
83
  style: {},
80
84
  },
81
85
  params: {
@@ -155,6 +159,9 @@ export function parseProgressBar(element, parentId, index) {
155
159
  export function parseVideoPopup(element, parentId, index) {
156
160
  const id = generateId();
157
161
 
162
+ // Get element-id for scroll-to/show-hide targeting
163
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
164
+
158
165
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
159
166
  const spacing = parseSpacing(wrapperStyles);
160
167
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -193,6 +200,7 @@ export function parseVideoPopup(element, parentId, index) {
193
200
  parentId,
194
201
  fractionalIndex: generateFractionalIndex(index),
195
202
  attrs: {
203
+ ...(elementId ? { id: elementId } : {}),
196
204
  alt: alt || 'Video thumbnail',
197
205
  },
198
206
  params: {
@@ -270,6 +278,9 @@ export function parseVideoPopup(element, parentId, index) {
270
278
  export function parseCountdown(element, parentId, index) {
271
279
  const id = generateId();
272
280
 
281
+ // Get element-id for scroll-to/show-hide targeting
282
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
283
+
273
284
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
274
285
  const spacing = parseSpacing(wrapperStyles);
275
286
 
@@ -343,6 +354,10 @@ export function parseCountdown(element, parentId, index) {
343
354
  version: 0,
344
355
  parentId,
345
356
  fractionalIndex: generateFractionalIndex(index),
357
+ attrs: {
358
+ ...(elementId ? { id: elementId } : {}),
359
+ style: {},
360
+ },
346
361
  params: {
347
362
  type: 'countdown',
348
363
  countdown_opts: {
@@ -467,7 +482,7 @@ export function parseCountdown(element, parentId, index) {
467
482
 
468
483
  // Apply spacing
469
484
  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
470
- Object.assign(node.attrs || (node.attrs = {}), { style: spacingAttrs.style });
485
+ Object.assign(node.attrs.style, spacingAttrs.style);
471
486
  Object.assign(node.params, spacingParams);
472
487
 
473
488
  // Apply border to amount container
package/src/parsers/list.js CHANGED
@@ -29,6 +29,9 @@ export function parseBulletList(element, parentId, index) {
29
29
  const id = generateId();
30
30
  const contentEditableId = generateId();
31
31
 
32
+ // Get element-id for scroll-to/show-hide targeting
33
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
34
+
32
35
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
33
36
  const spacing = parseSpacing(wrapperStyles);
34
37
 
@@ -156,6 +159,7 @@ export function parseBulletList(element, parentId, index) {
156
159
  parentId,
157
160
  fractionalIndex: generateFractionalIndex(index),
158
161
  attrs: {
162
+ ...(elementId ? { id: elementId } : {}),
159
163
  style: {},
160
164
  },
161
165
  params: {
package/src/parsers/media.js CHANGED
@@ -35,6 +35,9 @@ import {
35
35
  export function parseImage(element, parentId, index) {
36
36
  const id = generateId();
37
37
 
38
+ // Get element-id for scroll-to/show-hide targeting
39
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
40
+
38
41
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
39
42
  const spacing = parseSpacing(wrapperStyles);
40
43
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -63,6 +66,7 @@ export function parseImage(element, parentId, index) {
63
66
  parentId,
64
67
  fractionalIndex: generateFractionalIndex(index),
65
68
  attrs: {
69
+ ...(elementId ? { id: elementId } : {}),
66
70
  alt,
67
71
  style: {
68
72
  'text-align': textAlign,
@@ -131,6 +135,9 @@ export function parseImage(element, parentId, index) {
131
135
  export function parseIcon(element, parentId, index) {
132
136
  const id = generateId();
133
137
 
138
+ // Get element-id for scroll-to/show-hide targeting
139
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
140
+
134
141
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
135
142
  const spacing = parseSpacing(wrapperStyles);
136
143
  const textAlign = parseTextAlign(wrapperStyles['text-align']);
@@ -166,6 +173,7 @@ export function parseIcon(element, parentId, index) {
166
173
  parentId,
167
174
  fractionalIndex: generateFractionalIndex(index),
168
175
  attrs: {
176
+ ...(elementId ? { id: elementId } : {}),
169
177
  style: {},
170
178
  ...animationAttrs,
171
179
  },
@@ -214,6 +222,9 @@ export function parseIcon(element, parentId, index) {
214
222
  export function parseVideo(element, parentId, index) {
215
223
  const id = generateId();
216
224
 
225
+ // Get element-id for scroll-to/show-hide targeting
226
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
227
+
217
228
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
218
229
  const spacing = parseSpacing(wrapperStyles);
219
230
 
@@ -237,6 +248,7 @@ export function parseVideo(element, parentId, index) {
237
248
  parentId,
238
249
  fractionalIndex: generateFractionalIndex(index),
239
250
  attrs: {
251
+ ...(elementId ? { id: elementId } : {}),
240
252
  'data-video-type': videoType,
241
253
  'data-skip-background-settings': background.color ? 'false' : 'true',
242
254
  'data-skip-shadow-settings': shadow ? 'false' : 'true',
@@ -288,6 +300,9 @@ export function parseVideo(element, parentId, index) {
288
300
  export function parseDivider(element, parentId, index) {
289
301
  const id = generateId();
290
302
 
303
+ // Get element-id for scroll-to/show-hide targeting
304
+ const elementId = element.getAttribute('id') || element.getAttribute('data-element-id');
305
+
291
306
  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
292
307
  const spacing = parseSpacing(wrapperStyles);
293
308
 
@@ -333,6 +348,7 @@ export function parseDivider(element, parentId, index) {
333
348
  parentId,
334
349
  fractionalIndex: generateFractionalIndex(index),
335
350
  attrs: {
351
+ ...(elementId ? { id: elementId } : {}),
336
352
  style: {},
337
353
  },
338
354
  params: {