@accelerated-agency/visual-editor 0.5.4 → 0.5.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 (3) hide show
  1. package/dist/vite.cjs +471 -79
  2. package/dist/vite.js +471 -79
  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;
@@ -4434,6 +4667,8 @@ function stateChangeToChainSet(c) {
4434
4667
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4435
4668
  case 'pp-video-src':
4436
4669
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4670
+ case 'pp-video-poster':
4671
+ return { selector: c.selector, type: 'attribute', attribute: 'poster', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4437
4672
  case 'pp-youtube-id':
4438
4673
  return { selector: c.selector, type: 'attribute', attribute: 'data-youtube-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4439
4674
  case 'pp-vimeo-id':
@@ -4912,7 +5147,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
4912
5147
  }
4913
5148
 
4914
5149
  // \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) {
5150
+ function selectElement(el, options) {
4916
5151
  beginSuppressIframeMutationDirty();
4917
5152
  try {
4918
5153
  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
@@ -4926,7 +5161,7 @@ function selectElement(el) {
4926
5161
  document.getElementById('bc-path').textContent = buildSelector(el);
4927
5162
  document.getElementById('bc-path').style.color = 'var(--accent-txt)';
4928
5163
  document.getElementById('no-sel').style.display = 'none';
4929
- renderRightPanel(el);
5164
+ renderRightPanel(el, options);
4930
5165
  updateSelectionToolbar();
4931
5166
  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
4932
5167
  var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
@@ -5724,6 +5959,25 @@ function isFormControlElement(el) {
5724
5959
  return tag === 'input' || tag === 'textarea' || tag === 'select';
5725
5960
  }
5726
5961
 
5962
+ function shouldShowInnerContentFields(el) {
5963
+ if (!el || el.nodeType !== 1) return false;
5964
+ var tag = (el.tagName || '').toLowerCase();
5965
+ if (tag === 'input' || tag === 'textarea' || tag === 'video') return false;
5966
+ if (isEmbeddedVideoIframe(el)) return false;
5967
+ return true;
5968
+ }
5969
+
5970
+ function elementHasHtmlChildren(el) {
5971
+ if (!el || el.nodeType !== 1) return false;
5972
+ try {
5973
+ var nodes = el.childNodes;
5974
+ for (var i = 0; i < nodes.length; i++) {
5975
+ if (nodes[i].nodeType === 1) return true;
5976
+ }
5977
+ } catch(_) {}
5978
+ return false;
5979
+ }
5980
+
5727
5981
  function getFormControlValue(el) {
5728
5982
  if (!isFormControlElement(el)) return '';
5729
5983
  try {
@@ -5865,12 +6119,7 @@ function buildAnchorContentFieldsHtml(el) {
5865
6119
  'Rel',
5866
6120
  '<input class="pr-inp" id="pp-rel" type="text" value="'+esc(el.getAttribute('rel')||'')+'" placeholder="noopener noreferrer">'
5867
6121
  ) +
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
- ) +
6122
+ pr('Title', '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">') +
5874
6123
  pr2(
5875
6124
  'Hreflang',
5876
6125
  '<input class="pr-inp" id="pp-hreflang" type="text" value="'+esc(el.getAttribute('hreflang')||'')+'" placeholder="en">',
@@ -6090,8 +6339,122 @@ function removeSizesEntry(i) {
6090
6339
  }
6091
6340
  }
6092
6341
 
6342
+ // \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
6343
+ var _videoEl = null;
6344
+
6345
+ function renderVideoSection(el) {
6346
+ _videoEl = el;
6347
+ var sel = buildSelector(el);
6348
+ var src = getVideoSrc(el);
6349
+ var html = '';
6350
+
6351
+ if (src) {
6352
+ html += '<video class="video-preview" src="'+esc(src)+'" controls muted></video>';
6353
+ }
6354
+
6355
+ html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
6356
+ html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
6357
+
6358
+ document.getElementById('acc-body-video').innerHTML = html;
6359
+
6360
+ var srcInp = document.getElementById('pp-video-src');
6361
+ if (srcInp) srcInp.addEventListener('input', function() {
6362
+ var orig = getOriginalValue('pp-video-src', el);
6363
+ setVideoSrc(el, srcInp.value);
6364
+ var prev = document.querySelector('.video-preview');
6365
+ if (prev) {
6366
+ prev.src = srcInp.value;
6367
+ prev.style.display = srcInp.value ? '' : 'none';
6368
+ } else if (srcInp.value) {
6369
+ renderVideoSection(el);
6370
+ }
6371
+ logChange(sel, 'pp-video-src', srcInp.value, el, orig);
6372
+ });
6373
+ var posterInp = document.getElementById('pp-video-poster');
6374
+ if (posterInp) posterInp.addEventListener('input', function() {
6375
+ var orig = el.getAttribute('poster') || '';
6376
+ if (posterInp.value) el.setAttribute('poster', posterInp.value);
6377
+ else el.removeAttribute('poster');
6378
+ var prev = document.querySelector('.video-preview');
6379
+ if (prev) prev.poster = posterInp.value;
6380
+ logChange(sel, 'pp-video-poster', posterInp.value, el, orig);
6381
+ });
6382
+ }
6383
+
6384
+ // \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
6385
+ var _youtubeEl = null;
6386
+ var _vimeoEl = null;
6387
+
6388
+ function renderYoutubeSection(el) {
6389
+ _youtubeEl = el;
6390
+ var sel = buildSelector(el);
6391
+ var id = getYoutubeVideoId(el);
6392
+ var html = '';
6393
+
6394
+ if (id) {
6395
+ 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>';
6396
+ }
6397
+
6398
+ html += pr('YouTube video ID', '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(id)+'" placeholder="dQw4w9WgXcQ">');
6399
+
6400
+ document.getElementById('acc-body-youtube').innerHTML = html;
6401
+
6402
+ var idInp = document.getElementById('pp-youtube-id');
6403
+ if (idInp) idInp.addEventListener('input', function() {
6404
+ var orig = getOriginalValue('pp-youtube-id', el);
6405
+ setYoutubeVideoId(el, idInp.value);
6406
+ var normalized = normalizeYoutubeVideoId(idInp.value);
6407
+ var prev = document.querySelector('#acc-body-youtube .embed-preview');
6408
+ if (prev) {
6409
+ if (normalized) {
6410
+ prev.src = 'https://www.youtube.com/embed/' + normalized;
6411
+ prev.style.display = '';
6412
+ } else {
6413
+ prev.style.display = 'none';
6414
+ }
6415
+ } else if (normalized) {
6416
+ renderYoutubeSection(el);
6417
+ }
6418
+ logChange(sel, 'pp-youtube-id', idInp.value, el, orig);
6419
+ });
6420
+ }
6421
+
6422
+ function renderVimeoSection(el) {
6423
+ _vimeoEl = el;
6424
+ var sel = buildSelector(el);
6425
+ var id = getVimeoVideoId(el);
6426
+ var html = '';
6427
+
6428
+ if (id) {
6429
+ 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>';
6430
+ }
6431
+
6432
+ html += pr('Vimeo video ID', '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(id)+'" placeholder="76979871">');
6433
+
6434
+ document.getElementById('acc-body-vimeo').innerHTML = html;
6435
+
6436
+ var idInp = document.getElementById('pp-vimeo-id');
6437
+ if (idInp) idInp.addEventListener('input', function() {
6438
+ var orig = getOriginalValue('pp-vimeo-id', el);
6439
+ setVimeoVideoId(el, idInp.value);
6440
+ var normalized = normalizeVimeoVideoId(idInp.value);
6441
+ var prev = document.querySelector('#acc-body-vimeo .embed-preview');
6442
+ if (prev) {
6443
+ if (normalized) {
6444
+ prev.src = 'https://player.vimeo.com/video/' + normalized;
6445
+ prev.style.display = '';
6446
+ } else {
6447
+ prev.style.display = 'none';
6448
+ }
6449
+ } else if (normalized) {
6450
+ renderVimeoSection(el);
6451
+ }
6452
+ logChange(sel, 'pp-vimeo-id', idInp.value, el, orig);
6453
+ });
6454
+ }
6455
+
6093
6456
  // \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) {
6457
+ function renderRightPanel(el, options) {
6095
6458
  if (!el) return;
6096
6459
  var cs = el.ownerDocument.defaultView.getComputedStyle(el);
6097
6460
  var tag = el.tagName.toLowerCase();
@@ -6102,17 +6465,51 @@ function renderRightPanel(el) {
6102
6465
  document.getElementById('el-info').style.display = '';
6103
6466
  document.getElementById('rp-accordion').style.display = '';
6104
6467
 
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
6468
+ // \u2500\u2500 Image / video accordions (show matching section at top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6106
6469
  var imgSec = document.getElementById('acc-image');
6107
6470
  if (tag === 'img') {
6108
6471
  imgSec.style.display = '';
6109
- if (!imgSec.classList.contains('open')) imgSec.classList.add('open');
6110
6472
  renderImageSection(el);
6111
6473
  } else {
6112
6474
  imgSec.style.display = 'none';
6475
+ imgSec.classList.remove('open');
6113
6476
  _imageEl = null;
6114
6477
  }
6115
6478
 
6479
+ var videoSec = document.getElementById('acc-video');
6480
+ if (tag === 'video') {
6481
+ videoSec.style.display = '';
6482
+ renderVideoSection(el);
6483
+ } else {
6484
+ videoSec.style.display = 'none';
6485
+ videoSec.classList.remove('open');
6486
+ _videoEl = null;
6487
+ }
6488
+
6489
+ var youtubeSec = document.getElementById('acc-youtube');
6490
+ if (isYoutubeVideoElement(el)) {
6491
+ youtubeSec.style.display = '';
6492
+ renderYoutubeSection(el);
6493
+ } else {
6494
+ youtubeSec.style.display = 'none';
6495
+ youtubeSec.classList.remove('open');
6496
+ _youtubeEl = null;
6497
+ }
6498
+
6499
+ var vimeoSec = document.getElementById('acc-vimeo');
6500
+ if (isVimeoVideoElement(el)) {
6501
+ vimeoSec.style.display = '';
6502
+ renderVimeoSection(el);
6503
+ } else {
6504
+ vimeoSec.style.display = 'none';
6505
+ vimeoSec.classList.remove('open');
6506
+ _vimeoEl = null;
6507
+ }
6508
+
6509
+ var activeAccSection =
6510
+ (options && options.preferredAccSection) ||
6511
+ getTypeDefaultAccSection(el);
6512
+
6116
6513
  // \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
6514
  document.getElementById('acc-body-typography').innerHTML =
6118
6515
  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 +6615,6 @@ function renderRightPanel(el) {
6218
6615
  if (tag==='img') attrHtml +=
6219
6616
  pr('Src', '<input class="pr-inp" id="pp-src" type="url" value="'+esc(el.getAttribute('src')||'')+'">') +
6220
6617
  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
6618
  document.getElementById('acc-body-attributes').innerHTML = attrHtml;
6224
6619
 
6225
6620
  // \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 +6625,21 @@ function renderRightPanel(el) {
6230
6625
  subLbl('Value') +
6231
6626
  '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
6232
6627
  }
6233
- if (tag==='input') {
6628
+ if (tag==='input' || tag==='textarea') {
6234
6629
  contentHtml +=
6235
6630
  subLbl('Placeholder') +
6236
6631
  '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
6237
6632
  }
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>';
6633
+ if (shouldShowInnerContentFields(el)) {
6634
+ if (elementHasHtmlChildren(el)) {
6635
+ contentHtml +=
6636
+ subLbl('Inner HTML') +
6637
+ '<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>';
6638
+ } else {
6639
+ contentHtml +=
6640
+ subLbl('Inner Text') +
6641
+ '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>';
6642
+ }
6259
6643
  }
6260
6644
  document.getElementById('acc-body-content').innerHTML = contentHtml;
6261
6645
 
@@ -6311,15 +6695,11 @@ function renderRightPanel(el) {
6311
6695
  ['pp-href', function(v){setOptionalAnchorAttr(el,'href',v)}],
6312
6696
  ['pp-target', function(v){setOptionalAnchorAttr(el,'target',v)}],
6313
6697
  ['pp-rel', function(v){setOptionalAnchorAttr(el,'rel',v)}],
6314
- ['pp-download', function(v){setOptionalAnchorAttr(el,'download',v)}],
6315
6698
  ['pp-link-title', function(v){setOptionalAnchorAttr(el,'title',v)}],
6316
6699
  ['pp-hreflang', function(v){setOptionalAnchorAttr(el,'hreflang',v)}],
6317
6700
  ['pp-link-type', function(v){setOptionalAnchorAttr(el,'type',v)}],
6318
6701
  ['pp-referrerpolicy', function(v){setOptionalAnchorAttr(el,'referrerpolicy',v)}],
6319
6702
  ['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
6703
  ['pp-alt', function(v){el.setAttribute('alt',v)}],
6324
6704
  ['pp-ph', function(v){el.setAttribute('placeholder',v)}],
6325
6705
  ];
@@ -6347,6 +6727,11 @@ function renderRightPanel(el) {
6347
6727
  }
6348
6728
  });
6349
6729
  wireContentFieldSync(el, sel);
6730
+ requestAnimationFrame(function() {
6731
+ requestAnimationFrame(function() {
6732
+ openAccSection(activeAccSection);
6733
+ });
6734
+ });
6350
6735
  }
6351
6736
 
6352
6737
  function wireContentFieldSync(el, sel) {
@@ -6364,11 +6749,11 @@ function wireContentFieldSync(el, sel) {
6364
6749
  logChange(sel, 'pp-value', valueInp.value, el, orig);
6365
6750
  } else if (changedId === 'pp-text') {
6366
6751
  el.innerText = textInp.value;
6367
- htmlInp.value = el.innerHTML;
6752
+ if (htmlInp) htmlInp.value = el.innerHTML;
6368
6753
  logChange(sel, 'pp-text', textInp.value, el, orig);
6369
6754
  } else {
6370
6755
  el.innerHTML = htmlInp.value;
6371
- textInp.value = el.innerText;
6756
+ if (textInp) textInp.value = el.innerText;
6372
6757
  logChange(sel, 'pp-html', htmlInp.value, el, orig);
6373
6758
  }
6374
6759
  } finally {
@@ -6379,9 +6764,11 @@ function wireContentFieldSync(el, sel) {
6379
6764
  valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
6380
6765
  valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
6381
6766
  }
6382
- if (textInp && htmlInp) {
6767
+ if (textInp) {
6383
6768
  textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
6384
6769
  textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
6770
+ }
6771
+ if (htmlInp) {
6385
6772
  htmlInp.addEventListener('input', function() { applyContentChange('pp-html'); });
6386
6773
  htmlInp.addEventListener('change', function() { applyContentChange('pp-html'); });
6387
6774
  }
@@ -7009,10 +7396,11 @@ function insertHtml(html, options) {
7009
7396
  } catch(_) {}
7010
7397
  htmlStr = firstEl.outerHTML;
7011
7398
  }
7012
- if (firstEl) selectElement(firstEl);
7013
- var accSection = options && options.defaultAccSection;
7014
- if (accSection) {
7015
- requestAnimationFrame(function() { focusDesignAccordionSection(accSection); });
7399
+ if (firstEl) {
7400
+ if (currentMainTab !== 'design') switchMainTab('design');
7401
+ selectElement(firstEl, {
7402
+ preferredAccSection: options && options.defaultAccSection,
7403
+ });
7016
7404
  }
7017
7405
  if (activeVarId) {
7018
7406
  var insertRow = {
@@ -7086,7 +7474,9 @@ function renderSidebar(filter) {
7086
7474
  croFiltered.forEach(function(sec) {
7087
7475
  var item = document.createElement('div'); item.className = 'sec-item';
7088
7476
  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); };
7477
+ item.onclick = function() {
7478
+ insertHtml(sec.html, { defaultAccSection: sec.defaultAccSection || 'content' });
7479
+ };
7090
7480
  secTab.appendChild(item);
7091
7481
  });
7092
7482
  }
@@ -7099,7 +7489,9 @@ function renderSidebar(filter) {
7099
7489
  if (!hasVv) { hasVv = true; var sh = document.createElement('div'); sh.className = 'cg-hdr'; sh.textContent = 'Bootstrap Sections'; secTab.appendChild(sh); }
7100
7490
  var sel = document.createElement('div'); sel.className = 'sec-item';
7101
7491
  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);
7492
+ sel.onclick = (function(s){ return function(){
7493
+ insertHtml(s.html || '', { defaultAccSection: 'content' });
7494
+ }; })(sec);
7103
7495
  secTab.appendChild(sel);
7104
7496
  }
7105
7497
  }