@innovastudio/contentbox 1.6.113 → 1.6.114

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.113",
+  "version": "1.6.114",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.112",
+    "@innovastudio/contentbuilder": "^1.5.113",
     "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');
@@ -77635,6 +77692,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 +77874,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 +77897,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 +77983,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 +78017,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 +78110,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 +78135,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 +107301,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 +123036,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 +123109,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 +123199,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 +123263,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.'));