@innovastudio/contentbox 1.6.113 → 1.6.115

package/index.d.ts

@@ -123,6 +123,9 @@ interface ContentBoxOptions {
 
     onRender?: () => void;
     onChange?: () => void;
+    onStart?: () => void;
+
+    simpleEditingBreakpoint?: string;
 
     onImageBrowseClick?: () => void;
     onImageSettingClick?: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.113",
+  "version": "1.6.115",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,6 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.112",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -11664,11 +11664,13 @@ class PanelImage {
     this.updatePreview(src);
     const inpSrc = panel.querySelector('.inp-src');
 
-    if (src.indexOf('base64') === -1) {
-      inpSrc.value = src;
-    } else {
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
       // inpSrc.value = '[Image Data]';
-      inpSrc.value = 'image/jpeg (base64)';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
     }
 
     const divSettings = panel.querySelector('.div-image-settings');
@@ -11686,7 +11688,16 @@ class PanelImage {
   updateImageSrc(src) {
     this.builder.editor.saveForUndo();
     const inpSrc = this.panel.querySelector('.inp-src');
-    inpSrc.value = src;
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    }
+
     this.updatePreview(src);
     this.refreshImage(src);
     this.builder.editor.onChange();
@@ -11856,11 +11867,13 @@ class PanelVideo {
     this.updatePreview(src);
     const inpSrc = panel.querySelector('.inp-src');
 
-    if (src.indexOf('base64') === -1) {
-      inpSrc.value = src;
-    } else {
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
       // inpSrc.value = '[Image Data]';
-      inpSrc.value = 'video/mp4 (base64)';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
     }
 
     const divSettings = panel.querySelector('.div-video-settings');
@@ -11899,7 +11912,16 @@ class PanelVideo {
   updateVideoSrc(src) {
     this.builder.editor.saveForUndo();
     const inpSrc = this.panel.querySelector('.inp-src');
-    inpSrc.value = src;
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    }
+
     this.updatePreview(src);
     this.refreshVideo(src);
     this.builder.editor.onChange();
@@ -11947,7 +11969,7 @@ class PanelAudio {
             </label>
 
             <div class="group mt-4">
-                <input class="inp-file" type="file" accept="audio/mp3" style="display:none"/>
+                <input class="inp-file" type="file" accept="audio/*" style="display:none"/>
                 <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
                 <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
             </div>
@@ -12017,13 +12039,30 @@ class PanelAudio {
     const src = source ? source.getAttribute('src') : '';
     this.updatePreview(src);
     const inpSrc = panel.querySelector('.inp-src');
-    inpSrc.value = src;
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    }
   }
 
   updateAudioSrc(src) {
     this.builder.editor.saveForUndo();
     const inpSrc = this.panel.querySelector('.inp-src');
-    inpSrc.value = src;
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    }
+
     this.updatePreview(src);
     this.refreshAudio(src);
     this.builder.editor.onChange();
@@ -14161,7 +14200,16 @@ class PanelBox {
       }
     }
     const inpSrc = panel.querySelector('.inp-src');
-    inpSrc.value = src; // Show/hide grayscale
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    } // Show/hide grayscale
+
 
     const divGrayscale = panel.querySelector('.label.grayscale');
 
@@ -14674,7 +14722,16 @@ class PanelBox {
     this.imagePreview.innerHTML = previewHtml;
     const panel = this.panel;
     const inpSrc = panel.querySelector('.inp-src');
-    inpSrc.value = src; // Show/hide image-related controls
+
+    if (src.startsWith('data:')) {
+      const mime = src.split(';')[0].slice(5); // e.g., "image/png"
+      // inpSrc.value = '[Image Data]';
+
+      inpSrc.value = `${mime} (base64)`;
+    } else {
+      inpSrc.value = src;
+    } // Show/hide image-related controls
+
 
     const btnClear = panel.querySelector('.btn-clear');
     const btnAdjust = panel.querySelector('.btn-adjust');
@@ -14685,7 +14742,9 @@ class PanelBox {
       btnClear.style.display = 'none';
       btnAdjust.style.display = 'none';
       btnAccordionImage.style.display = 'none';
+      btnAccordionImage.setAttribute('aria-expanded', 'false');
       btnAccordionImage.nextElementSibling.style.display = 'none';
+      btnAccordionImage.nextElementSibling.setAttribute('aria-hidden', 'true');
       divStackBg.style.display = 'none';
     } else {
       btnClear.style.display = '';
@@ -26462,7 +26521,7 @@ class Snippets {
     const snippetPath = this.builder.opts.snippetPath;
     let snippetCategoriesString = '[';
     for (let i = 0; i < this.builder.opts.snippetCategories.length; i++) {
-      snippetCategoriesString += `[${this.builder.opts.snippetCategories[i][0]},'${util.out(this.builder.opts.snippetCategories[i][1])}'],`;
+      snippetCategoriesString += `[${this.builder.opts.snippetCategories[i][0]},'${util.out(this.builder.opts.snippetCategories[i][1]).replaceAll('\'', '\\\'')}'],`;
     }
     snippetCategoriesString += ']';
     const defaultSnippetCategory = this.builder.opts.defaultSnippetCategory;
@@ -27785,7 +27844,7 @@ const renderQuickAdd = builder => {
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);">Read More</a>
             </div>`;
       if (builder.opts.emailMode) {
         html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
@@ -27796,8 +27855,8 @@ const renderQuickAdd = builder => {
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
             </div>`;
       if (builder.opts.emailMode) {
         html = `<div>
@@ -27870,8 +27929,8 @@ const renderQuickAdd = builder => {
       let html = builder.opts.formTemplate.trim() || `
 				<div class="row">
                     <div class="column" data-noedit 
-                    data-dialog-width="1600px" 
-                    data-dialog-height="85vh" 
+                    data-dialog-width="1800px" 
+                    data-dialog-height="93vh" 
                     data-module="form-builder" 
                     data-module-desc="Form Builder" 
                     data-html="
@@ -44342,7 +44401,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   builder.opts.snippetCategories.forEach(item => {
     const jsonItem = {};
     jsonItem.value = item[0];
-    jsonItem.label = item[1];
+    jsonItem.label = util.out(item[1]);
     snippetList.push(jsonItem);
   });
   const inpSnippet = new CustomSelect('.inp-snippets', {
@@ -75053,86 +75112,86 @@ class ButtonEditor {
 
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-7 border-current hover:border-current font-normal leading-14 rounded-full tracking-wide">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 border-current hover:border-current font-normal leading-14 rounded-full tracking-wide">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-7 text-black leading-14 rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 text-black leading-14 rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-7 border-current hover:border-current font-normal leading-14 tracking-wide rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-7 border-current hover:border-current font-normal leading-14 tracking-wide rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-17 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-7 font-normal leading-14 border-transparent rounded-full size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     }, /* square */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 tracking-wide rounded" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-6 border-current hover:border-current font-normal leading-14 tracking-wide rounded" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-17 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded size-18 tracking-wide hover:border-transparent" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded ml-0 mt-1 size-17 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 px-6 font-normal leading-14 border-transparent rounded ml-0 mt-1 size-18 tracking-wide hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     }, /* MEDIUM */
 
@@ -75144,7 +75203,7 @@ class ButtonEditor {
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
@@ -75186,7 +75245,7 @@ class ButtonEditor {
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-wide" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
@@ -75231,7 +75290,7 @@ class ButtonEditor {
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-12 uppercase text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-75" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-12 uppercase text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-75" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
@@ -75273,7 +75332,7 @@ class ButtonEditor {
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-11 uppercase text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-75" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 size-16 px-11 uppercase text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-75" style="color: rgb(0, 0, 0); background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
@@ -77635,6 +77694,12 @@ class Video {
         let source = video.querySelector('source');
         let url = '';
         if (source) url = source.getAttribute('src');
+
+        // base64 handling: save the value and display "[Image Data]"
+        if (url.startsWith('data:')) {
+          this.builder.base64Data = url;
+          url = '[Image Data]';
+        }
         videoModal.querySelector('.input-url').value = url;
         const inpShowControls = videoModal.querySelector('.input-video-controls');
         if (video.hasAttribute('controls')) {
@@ -77811,6 +77876,12 @@ class Video {
         }
         if (videoModal.querySelector('.input-url').value !== '') {
           let url = videoModal.querySelector('.input-url').value;
+
+          // base64 handling: Apply base64 data
+          if (url === '[Image Data]') {
+            url = this.builder.base64Data;
+            this.builder.base64Data = '';
+          }
           let source = video.querySelector('source');
           if (url !== source.getAttribute('src')) {
             if (source) source.setAttribute('src', url);
@@ -77828,6 +77899,8 @@ class Video {
       });
       let btnCancel = videoModal.querySelector('.input-cancel');
       dom.addEventListener(btnCancel, 'click', () => {
+        // base64 handling: Clear previously saved base64 data
+        this.builder.base64Data = '';
         this.builder.hideModal(videoModal);
       });
     }
@@ -77912,6 +77985,12 @@ class Audio {
         if (source) url = source.getAttribute('src');
         this.renderPanel();
         const audioModal = this.audioModal;
+
+        // base64 handling: save the value and display "[Image Data]"
+        if (url.startsWith('data:')) {
+          this.builder.base64Data = url;
+          url = '[Image Data]';
+        }
         audioModal.querySelector('.input-url').value = url;
         util.showModal(audioModal, true, () => {
           btn.removeAttribute('data-focus');
@@ -77940,7 +78019,7 @@ class Audio {
                             <form class="form-upload-larger" target="frameTargetAudioUpload" method="post" action="${this.builder.opts.audioHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
                                 <input id="hidRefAudio" name="hidRefId" type="hidden" value="" />
                                 <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
-                                <input title="${util.out('Select')}" id="fileAudio1" name="fileImage" type="file" accept="audio/mp3" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                <input title="${util.out('Select')}" id="fileAudio1" name="fileImage" type="file" accept="audio/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
                             <iframe tabindex="0" id="frameTargetAudioUpload" name="frameTargetAudioUpload" tabIndex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
@@ -78033,6 +78112,12 @@ class Audio {
         if (audioModal.querySelector('.input-url').value !== '') {
           let url = audioModal.querySelector('.input-url').value;
 
+          // base64 handling: Apply base64 data
+          if (url === '[Image Data]') {
+            url = this.builder.base64Data;
+            this.builder.base64Data = '';
+          }
+
           //Render
           let source = audio.querySelector('source');
           if (url !== source.getAttribute('src')) {
@@ -78052,6 +78137,8 @@ class Audio {
       });
       let btnCancel = audioModal.querySelector('.input-cancel');
       dom.addEventListener(btnCancel, 'click', () => {
+        // base64 handling: Clear previously saved base64 data
+        this.builder.base64Data = '';
         this.builder.hideModal(audioModal);
       });
     }
@@ -107216,12 +107303,20 @@ class MediaPicker {
     const btnImageOk = modalMediaSelect.querySelector('.input-ok');
     dom.addEventListener(btnImageOk, 'click', () => {
       const inpSrc = modalMediaSelect.querySelector('.input-src');
-      const url = inpSrc.value;
+      let url = inpSrc.value;
+
+      // base64 handling: Apply base64 data
+      if (url === '[Image Data]') {
+        url = this.builder.base64Data;
+        this.builder.base64Data = '';
+      }
       if (this.builder.mediaSelectedCallback) this.builder.mediaSelectedCallback(url);
       this.builder.hideModal(modalMediaSelect);
     });
     const btnImageCancel = modalMediaSelect.querySelector('.input-cancel');
     dom.addEventListener(btnImageCancel, 'click', () => {
+      // base64 handling: Clear previously saved base64 data
+      this.builder.base64Data = '';
       this.builder.hideModal(modalMediaSelect);
     });
   }
@@ -122943,7 +123038,14 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     Array.prototype.forEach.call(forms, formUpload => {
       if (this.dom.hasClass(formUpload, 'please-wait')) {
         this.dom.removeClass(formUpload, 'please-wait');
-        if (s) formUpload.parentNode.parentNode.querySelector('input[type="text"]').value = s;
+        if (s) {
+          // base64 handling: save the value and display "[Image Data]"
+          if (s.startsWith('data:')) {
+            this.base64Data = s;
+            s = '[Image Data]';
+          }
+          formUpload.parentNode.parentNode.querySelector('input[type="text"]').value = s;
+        }
         formUpload.parentNode.parentNode.querySelector('input[type="file"]').value = '';
       }
     });
@@ -123009,7 +123111,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         alert(this.util.out('Please select an mp4 file.'));
       }
     } else if (this.targetAssetType === 'audio') {
-      if (extension === 'mp3') {
+      if (extension === 'mp3' || extension === 'wav') {
         ok = true;
       } else {
         alert(this.util.out('Please select an mp3 file.'));
@@ -123099,7 +123201,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           ok = true;
         } else if (targetAssetType === 'video' && ext === 'mp4') {
           ok = true;
-        } else if (targetAssetType === 'audio' && ext === 'mp3') {
+        } else if (targetAssetType === 'audio' && (ext === 'mp3' || ext === 'wav')) {
           ok = true;
         } else if (targetAssetType === 'media' && (s.includes('base64') || ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
           ok = true;
@@ -123163,7 +123265,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             alert(out('Please select an image file.'));
           }
         } else if (targetAssetType === 'audio') {
-          if (extension === 'mp3') {
+          if (extension === 'mp3' || extension === 'wav') {
             ok = true;
           } else {
             alert(out('Please select an mp3 file.'));
@@ -140970,16 +141072,18 @@ class Box {
       alert(err);
       return;
     }
-
+    /*
     let activeBox;
-
-    if (this.builder.targetBox) {
-      activeBox = this.builder.targetBox;
-      this.targetBox = null;
+    if(this.builder.targetBox) {
+        activeBox = this.builder.targetBox;
+         this.targetBox = null;
     } else {
-      activeBox = this.builder.activeBox;
-    }
+        activeBox = this.builder.activeBox;
+    } 
+    */
 
+
+    let activeBox = this.builder.activeBox;
     this.builder.editor.saveForUndo();
     let overlay = activeBox.querySelector('.is-overlay');
 
@@ -160387,6 +160491,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
   editorSetup() {
     this.editor = new ContentBuilder({
+      quickAddButtons: this.settings.quickAddButtons,
       assetManagerBasePath: this.settings.assetManagerBasePath || '',
       assetAbsoluteBasePath: this.settings.assetAbsoluteBasePath || '',
       metadata: this.settings.metadata,