@accelerated-agency/visual-editor 0.5.4 → 0.5.6

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 (3) hide show
  1. package/dist/vite.cjs +472 -87
  2. package/dist/vite.js +472 -87
  3. package/package.json +1 -1
package/dist/vite.cjs CHANGED
@@ -1082,7 +1082,7 @@ margin-right:4px;
1082
1082
  }
1083
1083
  .sec-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.12)}
1084
1084
  .sec-thumb{
1085
- background:var(--bg-sub);height:72px;display:flex;align-items:center;
1085
+ background:var(--bg-sub);height:auto;display:flex;align-items:center;
1086
1086
  justify-content:center;font-size:22px;border-bottom:1px solid var(--border);
1087
1087
  overflow:hidden;
1088
1088
  }
@@ -1108,6 +1108,21 @@ margin-right:4px;
1108
1108
  #el-info-sel{font-size:10px;color:var(--accent-txt);font-family:var(--font-mono);margin-top:2px;word-break:break-all;opacity:.8}
1109
1109
 
1110
1110
  /* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1111
+ #tab-design.rp-pane.active{
1112
+ display:flex;
1113
+ flex-direction:column;
1114
+ min-height:0;
1115
+ overflow-y:auto;
1116
+ overflow-x:hidden;
1117
+ }
1118
+ #rp-accordion.rp-accordion{
1119
+ flex:1;
1120
+ min-height:0;
1121
+ overflow-y:auto;
1122
+ overflow-x:hidden;
1123
+ }
1124
+ #rp-accordion.rp-accordion::-webkit-scrollbar{width:3px}
1125
+ #rp-accordion.rp-accordion::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
1111
1126
  .acc-section{border-bottom:1px solid var(--border-sub)}
1112
1127
  .acc-hd{
1113
1128
  display:flex;align-items:center;padding:11px 14px;cursor:pointer;
@@ -1236,6 +1251,16 @@ select.pr-inp{cursor:pointer;background:#fff}
1236
1251
  }
1237
1252
  .img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
1238
1253
 
1254
+ /* \u2500\u2500 Video properties panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1255
+ .video-preview{
1256
+ width:100%;height:120px;object-fit:contain;border:1px solid var(--border);
1257
+ border-radius:6px;background:#000;margin-bottom:8px;display:block
1258
+ }
1259
+ .embed-preview{
1260
+ width:100%;aspect-ratio:16/9;border:1px solid var(--border);
1261
+ border-radius:6px;background:#000;margin-bottom:8px;display:block;border:none
1262
+ }
1263
+
1239
1264
  /* \u2500\u2500 Right panel main tabs (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1240
1265
  #main-tabs{
1241
1266
  display:flex;
@@ -1377,9 +1402,56 @@ select.pr-inp{cursor:pointer;background:#fff}
1377
1402
  .history-remove{
1378
1403
  margin-top:2px;
1379
1404
  }
1405
+
1406
+ /* \u2500\u2500 Minimum screen size gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1407
+ #ve-min-screen-notice{
1408
+ display:none;
1409
+ position:fixed;
1410
+ inset:0;
1411
+ z-index:99999;
1412
+ flex-direction:column;
1413
+ align-items:center;
1414
+ justify-content:center;
1415
+ gap:12px;
1416
+ padding:24px;
1417
+ text-align:center;
1418
+ background:#f1f5f9;
1419
+ color:#404040;
1420
+ }
1421
+ #ve-min-screen-notice .ve-min-screen-icon{
1422
+ font-size:40px;
1423
+ color:#737373;
1424
+ line-height:1;
1425
+ }
1426
+ #ve-min-screen-notice .ve-min-screen-title{
1427
+ font-size:18px;
1428
+ font-weight:600;
1429
+ color:#262626;
1430
+ max-width:420px;
1431
+ }
1432
+ #ve-min-screen-notice .ve-min-screen-desc{
1433
+ font-size:14px;
1434
+ color:#737373;
1435
+ max-width:420px;
1436
+ line-height:1.5;
1437
+ }
1438
+ @media (max-width:1100px){
1439
+ #app,
1440
+ #custom-css-modal{
1441
+ display:none!important;
1442
+ }
1443
+ #ve-min-screen-notice{
1444
+ display:flex;
1445
+ }
1446
+ }
1380
1447
  </style>
1381
1448
  </head>
1382
1449
  <body class="mode-editor">
1450
+ <div id="ve-min-screen-notice" aria-live="polite">
1451
+ <div class="ve-min-screen-icon"><i class="bi bi-display"></i></div>
1452
+ <div class="ve-min-screen-title">Please switch to greater or bigger screen to use Visual Editor</div>
1453
+ <div class="ve-min-screen-desc">The Visual Editor requires a screen width of at least 1100px.</div>
1454
+ </div>
1383
1455
  <div id="app">
1384
1456
  <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
1385
1457
  <div id="toolbar">
@@ -1601,13 +1673,13 @@ select.pr-inp{cursor:pointer;background:#fff}
1601
1673
  <!-- Left-tab controls moved here -->
1602
1674
  <div class="lp-tabs-container section-components-tabs-container">
1603
1675
  <div class="lp-tabs">
1604
- <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
1676
+ <div class="lp-tab active" onclick="switchSectionComponentsTab('components')">Components</div>
1605
1677
  <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
1606
1678
  </div>
1607
1679
  <div class="lp-tab close-section-components-panel collapsed" onclick="toggleSectionComponentsBody()" title="Toggle components list"><i class="bi bi-chevron-down"></i></div>
1608
1680
  </div>
1609
1681
  <div class="lp-body collapsed">
1610
- <div id="tab-components" class="tab-pane"></div>
1682
+ <div id="tab-components" class="tab-pane active"></div>
1611
1683
  <div id="tab-sections" class="tab-pane"></div>
1612
1684
  </div>
1613
1685
  </div>
@@ -1629,15 +1701,33 @@ select.pr-inp{cursor:pointer;background:#fff}
1629
1701
  <div class="ns-icon"><i class="bi bi-cursor-text"></i></div>
1630
1702
  Click any element on the page to edit its properties
1631
1703
  </div>
1632
- <div id="rp-accordion" style="display:none">
1704
+ <div id="rp-accordion" class="rp-accordion" style="display:none">
1633
1705
 
1634
1706
  <!-- Image section \u2014 only shown when an <img> is selected -->
1635
- <div class="acc-section open" id="acc-image" style="display:none">
1707
+ <div class="acc-section" id="acc-image" style="display:none">
1636
1708
  <div class="acc-hd" onclick="toggleAcc('image')">Image<i class="bi bi-chevron-right acc-arrow"></i></div>
1637
1709
  <div class="acc-body" id="acc-body-image"></div>
1638
1710
  </div>
1639
1711
 
1640
- <div class="acc-section open" id="acc-content">
1712
+ <!-- Video section \u2014 only shown when a <video> is selected -->
1713
+ <div class="acc-section" id="acc-video" style="display:none">
1714
+ <div class="acc-hd" onclick="toggleAcc('video')">Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1715
+ <div class="acc-body" id="acc-body-video"></div>
1716
+ </div>
1717
+
1718
+ <!-- YouTube section \u2014 only shown when a YouTube iframe is selected -->
1719
+ <div class="acc-section" id="acc-youtube" style="display:none">
1720
+ <div class="acc-hd" onclick="toggleAcc('youtube')">YouTube Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1721
+ <div class="acc-body" id="acc-body-youtube"></div>
1722
+ </div>
1723
+
1724
+ <!-- Vimeo section \u2014 only shown when a Vimeo iframe is selected -->
1725
+ <div class="acc-section" id="acc-vimeo" style="display:none">
1726
+ <div class="acc-hd" onclick="toggleAcc('vimeo')">Vimeo Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1727
+ <div class="acc-body" id="acc-body-vimeo"></div>
1728
+ </div>
1729
+
1730
+ <div class="acc-section" id="acc-content">
1641
1731
  <div class="acc-hd" onclick="toggleAcc('content')">HTML Content<i class="bi bi-chevron-right acc-arrow"></i></div>
1642
1732
  <div class="acc-body" id="acc-body-content"></div>
1643
1733
  </div>
@@ -1819,27 +1909,91 @@ function renderCroSectionThumb(sec) {
1819
1909
  }
1820
1910
 
1821
1911
  var BASE_COMPONENTS = [
1822
- { name:'Heading', icon:'bi-type-h1', defaultAccSection:'typography', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1823
- { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'typography', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1912
+ { name:'Heading', icon:'bi-type-h1', defaultAccSection:'content', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1913
+ { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'content', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1824
1914
  { name:'Image', icon:'bi-image', defaultAccSection:'image', html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="display:block;max-width:100%;height:auto;border-radius:8px">' },
1825
- { name:'Button', icon:'bi-hand-index', defaultAccSection:'background', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1826
- { name:'Link', icon:'bi-link-45deg', defaultAccSection:'typography', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1915
+ { name:'Button', icon:'bi-hand-index', defaultAccSection:'content', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1916
+ { name:'Link', icon:'bi-link-45deg', defaultAccSection:'content', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1827
1917
  { name:'Divider', icon:'bi-dash-lg', defaultAccSection:'background', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
1828
- { name:'List', icon:'bi-list-ul', defaultAccSection:'typography', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1829
- { name:'Video', icon:'bi-play-circle', defaultAccSection:'content', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1830
- { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'content', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1831
- { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'content', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1918
+ { name:'List', icon:'bi-list-ul', defaultAccSection:'content', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1919
+ { name:'Video', icon:'bi-play-circle', defaultAccSection:'video', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1920
+ { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'youtube', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1921
+ { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'vimeo', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1832
1922
  { name:'Form', icon:'bi-ui-radios', defaultAccSection:'content', html:'<form style="padding:16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;max-width:400px;box-sizing:border-box"><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Name</label><input type="text" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Email</label><input type="email" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><button type="submit" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Submit</button></form>' },
1833
- { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'size', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1834
- { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'size', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1835
- { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'size', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1836
- { name:'Card', icon:'bi-card-text', defaultAccSection:'shadow', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1837
- { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'background', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1838
- { name:'Badge', icon:'bi-tag', defaultAccSection:'typography', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1923
+ { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'content', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1924
+ { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'content', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1925
+ { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'content', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1926
+ { name:'Card', icon:'bi-card-text', defaultAccSection:'content', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1927
+ { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'content', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1928
+ { name:'Badge', icon:'bi-tag', defaultAccSection:'content', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1839
1929
  { name:'Container', icon:'bi-layout-three-columns', defaultAccSection:'spacing', html:'<div style="width:100%;max-width:960px;margin:0 auto;padding:16px;box-sizing:border-box"><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 1</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 2</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 3</p></div></div></div>' },
1840
1930
  { name:'2 Cols', icon:'bi-layout-split', defaultAccSection:'spacing', html:'<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;box-sizing:border-box"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Left column</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Right column</p></div></div>' },
1841
1931
  ];
1842
1932
 
1933
+ var baseComponentAccRegistry = null;
1934
+
1935
+ function buildBaseComponentAccRegistry() {
1936
+ if (baseComponentAccRegistry) return baseComponentAccRegistry;
1937
+ var matchers = [];
1938
+ var tagFallback = {};
1939
+
1940
+ BASE_COMPONENTS.forEach(function(comp) {
1941
+ var section = comp.defaultAccSection || 'content';
1942
+ var html = String(comp.html || '').trim();
1943
+ if (!html) return;
1944
+ var tagMatch = html.match(/^<([a-z0-9-]+)/i);
1945
+ if (!tagMatch) return;
1946
+ var rootTag = tagMatch[1].toLowerCase();
1947
+ var matcher = { tag: rootTag, section: section };
1948
+
1949
+ if (rootTag === 'div') {
1950
+ if (html.indexOf('role="alert"') >= 0) matcher.role = 'alert';
1951
+ else if (html.indexOf('repeat(2') >= 0) matcher.gridCols = 2;
1952
+ else if (html.indexOf('repeat(3') >= 0) matcher.gridCols = 3;
1953
+ }
1954
+
1955
+ if (matcher.role || matcher.gridCols) matchers.push(matcher);
1956
+ else if (tagFallback[rootTag] === undefined) tagFallback[rootTag] = section;
1957
+ });
1958
+
1959
+ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(tag) {
1960
+ if (tagFallback[tag] === undefined) tagFallback[tag] = tagFallback.h2 || 'content';
1961
+ });
1962
+ if (tagFallback.ol === undefined) tagFallback.ol = tagFallback.ul || 'content';
1963
+
1964
+ baseComponentAccRegistry = { matchers: matchers, tagFallback: tagFallback };
1965
+ return baseComponentAccRegistry;
1966
+ }
1967
+
1968
+ function matchesBaseComponentAccMatcher(el, matcher) {
1969
+ if (!el || !matcher || el.tagName.toLowerCase() !== matcher.tag) return false;
1970
+ if (matcher.role) return el.getAttribute('role') === matcher.role;
1971
+ if (matcher.gridCols) {
1972
+ var style = (el.getAttribute('style') || '').toLowerCase();
1973
+ return style.indexOf('grid-template-columns') >= 0 &&
1974
+ style.indexOf('repeat(' + matcher.gridCols) >= 0;
1975
+ }
1976
+ return true;
1977
+ }
1978
+
1979
+ function getTypeDefaultAccSection(el) {
1980
+ if (!el) return 'content';
1981
+ if (isYoutubeVideoElement(el)) return 'youtube';
1982
+ if (isVimeoVideoElement(el)) return 'vimeo';
1983
+
1984
+ var registry = buildBaseComponentAccRegistry();
1985
+ var i;
1986
+ for (i = 0; i < registry.matchers.length; i++) {
1987
+ if (matchesBaseComponentAccMatcher(el, registry.matchers[i])) {
1988
+ return registry.matchers[i].section;
1989
+ }
1990
+ }
1991
+
1992
+ var tag = el.tagName.toLowerCase();
1993
+ if (registry.tagFallback[tag]) return registry.tagFallback[tag];
1994
+ return 'content';
1995
+ }
1996
+
1843
1997
  // \u2500\u2500 PostMessage bridge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
1844
1998
  var CHANNEL = 'vvveb-bridge';
1845
1999
 
@@ -2549,6 +2703,9 @@ function toggleSectionComponentsBody() {
2549
2703
  if (!body) return;
2550
2704
  var collapsed = body.classList.toggle('collapsed');
2551
2705
  if (toggle) toggle.classList.toggle('collapsed', collapsed);
2706
+ if (!collapsed) {
2707
+ switchSectionComponentsTab(currentSectionComponentsTab || 'components');
2708
+ }
2552
2709
  }
2553
2710
 
2554
2711
  function toggleSectionComponentsPanel(forceVisible) {
@@ -2578,24 +2735,97 @@ function handleAddElementClick(e) {
2578
2735
  }
2579
2736
 
2580
2737
  // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
2738
+ function closeAllAccSections(exceptName) {
2739
+ var sections = document.querySelectorAll('#rp-accordion .acc-section');
2740
+ for (var i = 0; i < sections.length; i++) {
2741
+ var sec = sections[i];
2742
+ var id = sec.id || '';
2743
+ var name = id.replace(/^acc-/, '');
2744
+ if (exceptName && name === exceptName) continue;
2745
+ sec.classList.remove('open');
2746
+ }
2747
+ }
2748
+
2749
+ function getRpAccordion() {
2750
+ return document.getElementById('rp-accordion');
2751
+ }
2752
+
2753
+ function scrollRpAccordionContainerToTop() {
2754
+ var accordion = getRpAccordion();
2755
+ if (!accordion) return;
2756
+
2757
+ try {
2758
+ accordion.scrollIntoView({ block: 'start', inline: 'nearest' });
2759
+ } catch(_) {
2760
+ try { accordion.scrollIntoView(true); } catch(__) {}
2761
+ }
2762
+
2763
+ var node = accordion.parentElement;
2764
+ while (node) {
2765
+ try {
2766
+ var style = window.getComputedStyle(node);
2767
+ var canScroll = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
2768
+ node.scrollHeight > node.clientHeight;
2769
+ if (canScroll) {
2770
+ var ar = accordion.getBoundingClientRect();
2771
+ var nr = node.getBoundingClientRect();
2772
+ node.scrollTop = Math.max(0, node.scrollTop + (ar.top - nr.top));
2773
+ break;
2774
+ }
2775
+ } catch(_) {}
2776
+ node = node.parentElement;
2777
+ }
2778
+ }
2779
+
2780
+ function scrollOpenAccSectionIntoView(sec) {
2781
+ var accordion = getRpAccordion();
2782
+ if (!accordion) return;
2783
+ var openSec =
2784
+ (sec && sec.classList.contains('open') && sec.style.display !== 'none')
2785
+ ? sec
2786
+ : accordion.querySelector('.acc-section.open');
2787
+ if (!openSec || openSec.style.display === 'none') return;
2788
+
2789
+ function doScroll() {
2790
+ scrollRpAccordionContainerToTop();
2791
+ var ar = accordion.getBoundingClientRect();
2792
+ var sr = openSec.getBoundingClientRect();
2793
+ accordion.scrollTop = Math.max(0, accordion.scrollTop + (sr.top - ar.top));
2794
+ }
2795
+
2796
+ requestAnimationFrame(function() {
2797
+ doScroll();
2798
+ requestAnimationFrame(function() {
2799
+ doScroll();
2800
+ setTimeout(doScroll, 0);
2801
+ });
2802
+ });
2803
+ }
2804
+
2805
+ function openAccSection(name, options) {
2806
+ if (!name) return null;
2807
+ var sec = document.getElementById('acc-' + name);
2808
+ if (!sec || sec.style.display === 'none') return null;
2809
+ closeAllAccSections(name);
2810
+ sec.classList.add('open');
2811
+ if (!options || options.scroll !== false) scrollOpenAccSectionIntoView(sec);
2812
+ return sec;
2813
+ }
2814
+
2581
2815
  function toggleAcc(name) {
2582
2816
  var sec = document.getElementById('acc-' + name);
2583
- if (sec) sec.classList.toggle('open');
2817
+ if (!sec || sec.style.display === 'none') return;
2818
+ if (sec.classList.contains('open')) {
2819
+ sec.classList.remove('open');
2820
+ return;
2821
+ }
2822
+ openAccSection(name);
2584
2823
  }
2585
2824
 
2586
2825
  function focusDesignAccordionSection(name) {
2587
2826
  if (!name) return;
2588
2827
  if (currentMainTab !== 'design') switchMainTab('design');
2589
- var sec = document.getElementById('acc-' + name);
2590
- if (!sec || sec.style.display === 'none') return;
2591
- sec.classList.add('open');
2592
- requestAnimationFrame(function() {
2593
- try {
2594
- sec.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
2595
- } catch(_) {
2596
- sec.scrollIntoView(true);
2597
- }
2598
- });
2828
+ openAccSection(name);
2599
2829
  }
2600
2830
 
2601
2831
  // \u2500\u2500 Main tab switching (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2670,6 +2900,7 @@ var PROP_META = {
2670
2900
  'pp-referrerpolicy': {label:'Referrer policy', cssProp:null},
2671
2901
  'pp-src': {label:'Src', cssProp:null},
2672
2902
  'pp-video-src': {label:'Src', cssProp:null},
2903
+ 'pp-video-poster': {label:'Poster', cssProp:null},
2673
2904
  'pp-youtube-id': {label:'YouTube video ID', cssProp:null},
2674
2905
  'pp-vimeo-id': {label:'Vimeo video ID', cssProp:null},
2675
2906
  'pp-alt': {label:'Alt', cssProp:null},
@@ -2705,6 +2936,7 @@ function getOriginalValue(inputId, el) {
2705
2936
  case 'pp-referrerpolicy': return el.getAttribute('referrerpolicy') || '';
2706
2937
  case 'pp-src': return el.getAttribute('src') || '';
2707
2938
  case 'pp-video-src': return getVideoSrc(el);
2939
+ case 'pp-video-poster': return el.getAttribute('poster') || '';
2708
2940
  case 'pp-youtube-id': return getYoutubeVideoId(el);
2709
2941
  case 'pp-vimeo-id': return getVimeoVideoId(el);
2710
2942
  case 'pp-alt': return el.getAttribute('alt') || '';
@@ -2854,6 +3086,7 @@ function revertChangeOnDom(change) {
2854
3086
  case 'pp-referrerpolicy': orig ? el.setAttribute('referrerpolicy', orig) : el.removeAttribute('referrerpolicy'); break;
2855
3087
  case 'pp-src': orig ? el.setAttribute('src', orig) : el.removeAttribute('src'); break;
2856
3088
  case 'pp-video-src': orig ? setVideoSrc(el, orig) : setVideoSrc(el, ''); break;
3089
+ case 'pp-video-poster': orig ? el.setAttribute('poster', orig) : el.removeAttribute('poster'); break;
2857
3090
  case 'pp-youtube-id': orig ? setYoutubeVideoId(el, orig) : setYoutubeVideoId(el, ''); break;
2858
3091
  case 'pp-vimeo-id': orig ? setVimeoVideoId(el, orig) : setVimeoVideoId(el, ''); break;
2859
3092
  case 'pp-alt': orig ? el.setAttribute('alt', orig) : el.removeAttribute('alt'); break;
@@ -3657,20 +3890,13 @@ function handleLoadExperiment(data) {
3657
3890
  ? data.conversionProxyBaseUrl
3658
3891
  : '').trim().replace(/\\/+$/, '');
3659
3892
  var proxyPath = '/api/conversion-proxy';
3660
- // Keep iframe navigation same-origin for DOM access (selection/editing).
3661
- // If conversionProxyBaseUrl is provided, middleware delegates upstream fetches
3662
- // server-side while browser URLs stay local.
3663
- var proxyRoot = proxyPath;
3893
+ var proxyRoot = conversionProxyBaseUrl ? (conversionProxyBaseUrl + proxyPath) : proxyPath;
3664
3894
  var trackingMarkersParam = extraTrackingMarkers.length
3665
3895
  ? '&trackingMarkers=' + encodeURIComponent(JSON.stringify(extraTrackingMarkers))
3666
3896
  : '';
3667
- var conversionProxyBaseUrlParam = conversionProxyBaseUrl
3668
- ? '&conversionProxyBaseUrl=' + encodeURIComponent(conversionProxyBaseUrl)
3669
- : '';
3670
3897
  var proxyUrl = proxyRoot + '?password=' + encodeURIComponent(data.editorPassword || '') +
3671
3898
  '&url=' + encodeURIComponent(pageUrl) +
3672
3899
  '&strictObserverFreeze=' + encodeURIComponent(data && data.strictObserverFreeze ? '1' : '0') +
3673
- conversionProxyBaseUrlParam +
3674
3900
  trackingMarkersParam;
3675
3901
 
3676
3902
  // Parent often re-posts load-experiment when React re-renders (new object identity) or
@@ -4434,6 +4660,8 @@ function stateChangeToChainSet(c) {
4434
4660
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4435
4661
  case 'pp-video-src':
4436
4662
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4663
+ case 'pp-video-poster':
4664
+ return { selector: c.selector, type: 'attribute', attribute: 'poster', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4437
4665
  case 'pp-youtube-id':
4438
4666
  return { selector: c.selector, type: 'attribute', attribute: 'data-youtube-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4439
4667
  case 'pp-vimeo-id':
@@ -4912,7 +5140,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
4912
5140
  }
4913
5141
 
4914
5142
  // \u2500\u2500 Element selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
4915
- function selectElement(el) {
5143
+ function selectElement(el, options) {
4916
5144
  beginSuppressIframeMutationDirty();
4917
5145
  try {
4918
5146
  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
@@ -4926,7 +5154,7 @@ function selectElement(el) {
4926
5154
  document.getElementById('bc-path').textContent = buildSelector(el);
4927
5155
  document.getElementById('bc-path').style.color = 'var(--accent-txt)';
4928
5156
  document.getElementById('no-sel').style.display = 'none';
4929
- renderRightPanel(el);
5157
+ renderRightPanel(el, options);
4930
5158
  updateSelectionToolbar();
4931
5159
  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
4932
5160
  var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
@@ -5724,6 +5952,25 @@ function isFormControlElement(el) {
5724
5952
  return tag === 'input' || tag === 'textarea' || tag === 'select';
5725
5953
  }
5726
5954
 
5955
+ function shouldShowInnerContentFields(el) {
5956
+ if (!el || el.nodeType !== 1) return false;
5957
+ var tag = (el.tagName || '').toLowerCase();
5958
+ if (tag === 'input' || tag === 'textarea' || tag === 'video') return false;
5959
+ if (isEmbeddedVideoIframe(el)) return false;
5960
+ return true;
5961
+ }
5962
+
5963
+ function elementHasHtmlChildren(el) {
5964
+ if (!el || el.nodeType !== 1) return false;
5965
+ try {
5966
+ var nodes = el.childNodes;
5967
+ for (var i = 0; i < nodes.length; i++) {
5968
+ if (nodes[i].nodeType === 1) return true;
5969
+ }
5970
+ } catch(_) {}
5971
+ return false;
5972
+ }
5973
+
5727
5974
  function getFormControlValue(el) {
5728
5975
  if (!isFormControlElement(el)) return '';
5729
5976
  try {
@@ -5865,12 +6112,7 @@ function buildAnchorContentFieldsHtml(el) {
5865
6112
  'Rel',
5866
6113
  '<input class="pr-inp" id="pp-rel" type="text" value="'+esc(el.getAttribute('rel')||'')+'" placeholder="noopener noreferrer">'
5867
6114
  ) +
5868
- pr2(
5869
- 'Download',
5870
- '<input class="pr-inp" id="pp-download" type="text" value="'+esc(el.getAttribute('download')||'')+'" placeholder="filename">',
5871
- 'Title',
5872
- '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">'
5873
- ) +
6115
+ pr('Title', '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">') +
5874
6116
  pr2(
5875
6117
  'Hreflang',
5876
6118
  '<input class="pr-inp" id="pp-hreflang" type="text" value="'+esc(el.getAttribute('hreflang')||'')+'" placeholder="en">',
@@ -6090,8 +6332,122 @@ function removeSizesEntry(i) {
6090
6332
  }
6091
6333
  }
6092
6334
 
6335
+ // \u2500\u2500 Video section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6336
+ var _videoEl = null;
6337
+
6338
+ function renderVideoSection(el) {
6339
+ _videoEl = el;
6340
+ var sel = buildSelector(el);
6341
+ var src = getVideoSrc(el);
6342
+ var html = '';
6343
+
6344
+ if (src) {
6345
+ html += '<video class="video-preview" src="'+esc(src)+'" controls muted></video>';
6346
+ }
6347
+
6348
+ html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
6349
+ html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
6350
+
6351
+ document.getElementById('acc-body-video').innerHTML = html;
6352
+
6353
+ var srcInp = document.getElementById('pp-video-src');
6354
+ if (srcInp) srcInp.addEventListener('input', function() {
6355
+ var orig = getOriginalValue('pp-video-src', el);
6356
+ setVideoSrc(el, srcInp.value);
6357
+ var prev = document.querySelector('.video-preview');
6358
+ if (prev) {
6359
+ prev.src = srcInp.value;
6360
+ prev.style.display = srcInp.value ? '' : 'none';
6361
+ } else if (srcInp.value) {
6362
+ renderVideoSection(el);
6363
+ }
6364
+ logChange(sel, 'pp-video-src', srcInp.value, el, orig);
6365
+ });
6366
+ var posterInp = document.getElementById('pp-video-poster');
6367
+ if (posterInp) posterInp.addEventListener('input', function() {
6368
+ var orig = el.getAttribute('poster') || '';
6369
+ if (posterInp.value) el.setAttribute('poster', posterInp.value);
6370
+ else el.removeAttribute('poster');
6371
+ var prev = document.querySelector('.video-preview');
6372
+ if (prev) prev.poster = posterInp.value;
6373
+ logChange(sel, 'pp-video-poster', posterInp.value, el, orig);
6374
+ });
6375
+ }
6376
+
6377
+ // \u2500\u2500 YouTube / Vimeo section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6378
+ var _youtubeEl = null;
6379
+ var _vimeoEl = null;
6380
+
6381
+ function renderYoutubeSection(el) {
6382
+ _youtubeEl = el;
6383
+ var sel = buildSelector(el);
6384
+ var id = getYoutubeVideoId(el);
6385
+ var html = '';
6386
+
6387
+ if (id) {
6388
+ html += '<iframe class="embed-preview" src="https://www.youtube.com/embed/'+esc(id)+'" title="YouTube video preview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
6389
+ }
6390
+
6391
+ html += pr('YouTube video ID', '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(id)+'" placeholder="dQw4w9WgXcQ">');
6392
+
6393
+ document.getElementById('acc-body-youtube').innerHTML = html;
6394
+
6395
+ var idInp = document.getElementById('pp-youtube-id');
6396
+ if (idInp) idInp.addEventListener('input', function() {
6397
+ var orig = getOriginalValue('pp-youtube-id', el);
6398
+ setYoutubeVideoId(el, idInp.value);
6399
+ var normalized = normalizeYoutubeVideoId(idInp.value);
6400
+ var prev = document.querySelector('#acc-body-youtube .embed-preview');
6401
+ if (prev) {
6402
+ if (normalized) {
6403
+ prev.src = 'https://www.youtube.com/embed/' + normalized;
6404
+ prev.style.display = '';
6405
+ } else {
6406
+ prev.style.display = 'none';
6407
+ }
6408
+ } else if (normalized) {
6409
+ renderYoutubeSection(el);
6410
+ }
6411
+ logChange(sel, 'pp-youtube-id', idInp.value, el, orig);
6412
+ });
6413
+ }
6414
+
6415
+ function renderVimeoSection(el) {
6416
+ _vimeoEl = el;
6417
+ var sel = buildSelector(el);
6418
+ var id = getVimeoVideoId(el);
6419
+ var html = '';
6420
+
6421
+ if (id) {
6422
+ html += '<iframe class="embed-preview" src="https://player.vimeo.com/video/'+esc(id)+'" title="Vimeo video preview" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
6423
+ }
6424
+
6425
+ html += pr('Vimeo video ID', '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(id)+'" placeholder="76979871">');
6426
+
6427
+ document.getElementById('acc-body-vimeo').innerHTML = html;
6428
+
6429
+ var idInp = document.getElementById('pp-vimeo-id');
6430
+ if (idInp) idInp.addEventListener('input', function() {
6431
+ var orig = getOriginalValue('pp-vimeo-id', el);
6432
+ setVimeoVideoId(el, idInp.value);
6433
+ var normalized = normalizeVimeoVideoId(idInp.value);
6434
+ var prev = document.querySelector('#acc-body-vimeo .embed-preview');
6435
+ if (prev) {
6436
+ if (normalized) {
6437
+ prev.src = 'https://player.vimeo.com/video/' + normalized;
6438
+ prev.style.display = '';
6439
+ } else {
6440
+ prev.style.display = 'none';
6441
+ }
6442
+ } else if (normalized) {
6443
+ renderVimeoSection(el);
6444
+ }
6445
+ logChange(sel, 'pp-vimeo-id', idInp.value, el, orig);
6446
+ });
6447
+ }
6448
+
6093
6449
  // \u2500\u2500 Right panel rendering (accordion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6094
- function renderRightPanel(el) {
6450
+ function renderRightPanel(el, options) {
6095
6451
  if (!el) return;
6096
6452
  var cs = el.ownerDocument.defaultView.getComputedStyle(el);
6097
6453
  var tag = el.tagName.toLowerCase();
@@ -6102,17 +6458,51 @@ function renderRightPanel(el) {
6102
6458
  document.getElementById('el-info').style.display = '';
6103
6459
  document.getElementById('rp-accordion').style.display = '';
6104
6460
 
6105
- // \u2500\u2500 Image section (show + auto-open for <img>) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6461
+ // \u2500\u2500 Image / video accordions (show matching section at top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6106
6462
  var imgSec = document.getElementById('acc-image');
6107
6463
  if (tag === 'img') {
6108
6464
  imgSec.style.display = '';
6109
- if (!imgSec.classList.contains('open')) imgSec.classList.add('open');
6110
6465
  renderImageSection(el);
6111
6466
  } else {
6112
6467
  imgSec.style.display = 'none';
6468
+ imgSec.classList.remove('open');
6113
6469
  _imageEl = null;
6114
6470
  }
6115
6471
 
6472
+ var videoSec = document.getElementById('acc-video');
6473
+ if (tag === 'video') {
6474
+ videoSec.style.display = '';
6475
+ renderVideoSection(el);
6476
+ } else {
6477
+ videoSec.style.display = 'none';
6478
+ videoSec.classList.remove('open');
6479
+ _videoEl = null;
6480
+ }
6481
+
6482
+ var youtubeSec = document.getElementById('acc-youtube');
6483
+ if (isYoutubeVideoElement(el)) {
6484
+ youtubeSec.style.display = '';
6485
+ renderYoutubeSection(el);
6486
+ } else {
6487
+ youtubeSec.style.display = 'none';
6488
+ youtubeSec.classList.remove('open');
6489
+ _youtubeEl = null;
6490
+ }
6491
+
6492
+ var vimeoSec = document.getElementById('acc-vimeo');
6493
+ if (isVimeoVideoElement(el)) {
6494
+ vimeoSec.style.display = '';
6495
+ renderVimeoSection(el);
6496
+ } else {
6497
+ vimeoSec.style.display = 'none';
6498
+ vimeoSec.classList.remove('open');
6499
+ _vimeoEl = null;
6500
+ }
6501
+
6502
+ var activeAccSection =
6503
+ (options && options.preferredAccSection) ||
6504
+ getTypeDefaultAccSection(el);
6505
+
6116
6506
  // \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6117
6507
  document.getElementById('acc-body-typography').innerHTML =
6118
6508
  pr('Color', '<input type="color" class="pr-color" id="pp-color" value="'+esc(rgbToHex(cs.color))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:var(--font-mono)">'+esc(cs.color)+'</span>') +
@@ -6218,8 +6608,6 @@ function renderRightPanel(el) {
6218
6608
  if (tag==='img') attrHtml +=
6219
6609
  pr('Src', '<input class="pr-inp" id="pp-src" type="url" value="'+esc(el.getAttribute('src')||'')+'">') +
6220
6610
  pr('Alt', '<input class="pr-inp" id="pp-alt" type="text" value="'+esc(el.getAttribute('alt')||'')+'">');
6221
- if (tag==='textarea') attrHtml +=
6222
- pr('Placeholder', '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'">');
6223
6611
  document.getElementById('acc-body-attributes').innerHTML = attrHtml;
6224
6612
 
6225
6613
  // \u2500\u2500 HTML Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6230,32 +6618,21 @@ function renderRightPanel(el) {
6230
6618
  subLbl('Value') +
6231
6619
  '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
6232
6620
  }
6233
- if (tag==='input') {
6621
+ if (tag==='input' || tag==='textarea') {
6234
6622
  contentHtml +=
6235
6623
  subLbl('Placeholder') +
6236
6624
  '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
6237
6625
  }
6238
- if (tag==='video') {
6239
- contentHtml +=
6240
- subLbl('Src') +
6241
- '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(getVideoSrc(el))+'" placeholder="https://example.com/video.mp4" style="width:100%;margin-bottom:8px">';
6242
- }
6243
- if (isYoutubeVideoElement(el)) {
6244
- contentHtml +=
6245
- subLbl('YouTube video ID') +
6246
- '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(getYoutubeVideoId(el))+'" placeholder="dQw4w9WgXcQ" style="width:100%;margin-bottom:8px">';
6247
- }
6248
- if (isVimeoVideoElement(el)) {
6249
- contentHtml +=
6250
- subLbl('Vimeo video ID') +
6251
- '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(getVimeoVideoId(el))+'" placeholder="76979871" style="width:100%;margin-bottom:8px">';
6252
- }
6253
- if (tag!=='input' && tag!=='video' && !isEmbeddedVideoIframe(el)) {
6254
- contentHtml +=
6255
- subLbl('Inner Text') +
6256
- '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>' +
6257
- subLbl('Inner HTML') +
6258
- '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6626
+ if (shouldShowInnerContentFields(el)) {
6627
+ if (elementHasHtmlChildren(el)) {
6628
+ contentHtml +=
6629
+ subLbl('Inner HTML') +
6630
+ '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6631
+ } else {
6632
+ contentHtml +=
6633
+ subLbl('Inner Text') +
6634
+ '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>';
6635
+ }
6259
6636
  }
6260
6637
  document.getElementById('acc-body-content').innerHTML = contentHtml;
6261
6638
 
@@ -6311,15 +6688,11 @@ function renderRightPanel(el) {
6311
6688
  ['pp-href', function(v){setOptionalAnchorAttr(el,'href',v)}],
6312
6689
  ['pp-target', function(v){setOptionalAnchorAttr(el,'target',v)}],
6313
6690
  ['pp-rel', function(v){setOptionalAnchorAttr(el,'rel',v)}],
6314
- ['pp-download', function(v){setOptionalAnchorAttr(el,'download',v)}],
6315
6691
  ['pp-link-title', function(v){setOptionalAnchorAttr(el,'title',v)}],
6316
6692
  ['pp-hreflang', function(v){setOptionalAnchorAttr(el,'hreflang',v)}],
6317
6693
  ['pp-link-type', function(v){setOptionalAnchorAttr(el,'type',v)}],
6318
6694
  ['pp-referrerpolicy', function(v){setOptionalAnchorAttr(el,'referrerpolicy',v)}],
6319
6695
  ['pp-src', function(v){el.setAttribute('src',v)}],
6320
- ['pp-video-src', function(v){setVideoSrc(el, v)}],
6321
- ['pp-youtube-id', function(v){setYoutubeVideoId(el, v)}],
6322
- ['pp-vimeo-id', function(v){setVimeoVideoId(el, v)}],
6323
6696
  ['pp-alt', function(v){el.setAttribute('alt',v)}],
6324
6697
  ['pp-ph', function(v){el.setAttribute('placeholder',v)}],
6325
6698
  ];
@@ -6347,6 +6720,11 @@ function renderRightPanel(el) {
6347
6720
  }
6348
6721
  });
6349
6722
  wireContentFieldSync(el, sel);
6723
+ requestAnimationFrame(function() {
6724
+ requestAnimationFrame(function() {
6725
+ openAccSection(activeAccSection);
6726
+ });
6727
+ });
6350
6728
  }
6351
6729
 
6352
6730
  function wireContentFieldSync(el, sel) {
@@ -6364,11 +6742,11 @@ function wireContentFieldSync(el, sel) {
6364
6742
  logChange(sel, 'pp-value', valueInp.value, el, orig);
6365
6743
  } else if (changedId === 'pp-text') {
6366
6744
  el.innerText = textInp.value;
6367
- htmlInp.value = el.innerHTML;
6745
+ if (htmlInp) htmlInp.value = el.innerHTML;
6368
6746
  logChange(sel, 'pp-text', textInp.value, el, orig);
6369
6747
  } else {
6370
6748
  el.innerHTML = htmlInp.value;
6371
- textInp.value = el.innerText;
6749
+ if (textInp) textInp.value = el.innerText;
6372
6750
  logChange(sel, 'pp-html', htmlInp.value, el, orig);
6373
6751
  }
6374
6752
  } finally {
@@ -6379,9 +6757,11 @@ function wireContentFieldSync(el, sel) {
6379
6757
  valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
6380
6758
  valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
6381
6759
  }
6382
- if (textInp && htmlInp) {
6760
+ if (textInp) {
6383
6761
  textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
6384
6762
  textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
6763
+ }
6764
+ if (htmlInp) {
6385
6765
  htmlInp.addEventListener('input', function() { applyContentChange('pp-html'); });
6386
6766
  htmlInp.addEventListener('change', function() { applyContentChange('pp-html'); });
6387
6767
  }
@@ -7009,10 +7389,11 @@ function insertHtml(html, options) {
7009
7389
  } catch(_) {}
7010
7390
  htmlStr = firstEl.outerHTML;
7011
7391
  }
7012
- if (firstEl) selectElement(firstEl);
7013
- var accSection = options && options.defaultAccSection;
7014
- if (accSection) {
7015
- requestAnimationFrame(function() { focusDesignAccordionSection(accSection); });
7392
+ if (firstEl) {
7393
+ if (currentMainTab !== 'design') switchMainTab('design');
7394
+ selectElement(firstEl, {
7395
+ preferredAccSection: options && options.defaultAccSection,
7396
+ });
7016
7397
  }
7017
7398
  if (activeVarId) {
7018
7399
  var insertRow = {
@@ -7086,7 +7467,9 @@ function renderSidebar(filter) {
7086
7467
  croFiltered.forEach(function(sec) {
7087
7468
  var item = document.createElement('div'); item.className = 'sec-item';
7088
7469
  item.innerHTML = '<div class="sec-thumb">'+renderCroSectionThumb(sec)+'</div><div class="sec-info"><div class="sec-name">'+sec.name+'</div>'+(sec.desc?'<div class="sec-desc">'+sec.desc+'</div>':'')+'</div>';
7089
- item.onclick = function() { insertHtml(sec.html); };
7470
+ item.onclick = function() {
7471
+ insertHtml(sec.html, { defaultAccSection: sec.defaultAccSection || 'content' });
7472
+ };
7090
7473
  secTab.appendChild(item);
7091
7474
  });
7092
7475
  }
@@ -7099,7 +7482,9 @@ function renderSidebar(filter) {
7099
7482
  if (!hasVv) { hasVv = true; var sh = document.createElement('div'); sh.className = 'cg-hdr'; sh.textContent = 'Bootstrap Sections'; secTab.appendChild(sh); }
7100
7483
  var sel = document.createElement('div'); sel.className = 'sec-item';
7101
7484
  sel.innerHTML = '<div class="sec-thumb">\u{1F4D0}</div><div class="sec-info"><div class="sec-name">'+snm+'</div></div>';
7102
- sel.onclick = (function(s){ return function(){ insertHtml(s.html||''); }; })(sec);
7485
+ sel.onclick = (function(s){ return function(){
7486
+ insertHtml(s.html || '', { defaultAccSection: 'content' });
7487
+ }; })(sec);
7103
7488
  secTab.appendChild(sel);
7104
7489
  }
7105
7490
  }