@innovastudio/contentbuilder 1.5.112 → 1.5.114

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.112",
+  "version": "1.5.114",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -10,7 +10,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;
@@ -1333,7 +1333,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>';
@@ -1344,8 +1344,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>
@@ -1418,8 +1418,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="
@@ -17890,7 +17890,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', {
@@ -48601,86 +48601,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 */
 
@@ -48692,7 +48692,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: `
@@ -48734,7 +48734,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: `
@@ -48779,7 +48779,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: `
@@ -48821,7 +48821,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: `
@@ -51183,6 +51183,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')) {
@@ -51359,6 +51365,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);
@@ -51376,6 +51388,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);
       });
     }
@@ -51460,6 +51474,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');
@@ -51488,7 +51508,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>
@@ -51581,6 +51601,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')) {
@@ -51600,6 +51626,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);
       });
     }
@@ -80764,12 +80792,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);
     });
   }
@@ -96491,7 +96527,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 = '';
       }
     });
@@ -96557,7 +96600,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.'));
@@ -96647,7 +96690,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;
@@ -96711,7 +96754,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.'));