@innovastudio/contentbox 1.6.108 → 1.6.110

package/public/contentbox/contentbox.esm.js

@@ -11531,34 +11531,38 @@ class PanelImage {
 
     let html = `
         <div class="submain">
-            <div class="asset-preview"></div>
 
-            <label class="label mt-3">
-                <div>${out('Source')}:</div>
-                <input type="text" class="inp-src" id="_inp_src_${this.random()}">
-            </label>
+            <div class="div-image-settings">
 
-            <div class="group mt-4">
-                <input class="inp-file" type="file" accept="image/*" 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>
-                <button title="${out('Link')}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>
-                <button title="${out('Edit')}" class="btn-edit"><svg><use xlink:href="#icon-pencil"></use></svg></button>
-            </div>
+                <div class="asset-preview"></div>
 
-            <!--
-            <div class="group">
-                <button title="${out('Align Left')}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>
-                <button title="${out('Align Center')}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>
-                <button title="${out('Align Right')}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>
-                <button title="${out('Align Full')}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>
-            </div>
-            -->
+                <label class="label mt-3">
+                    <div>${out('Source')}:</div>
+                    <input type="text" class="inp-src" id="_inp_src_${this.random()}">
+                </label>
 
-            <label class="label mt-2">
-                <div>${out('Title')}:</div>
-                <input type="text" class="inp-title" id="_inp_title_${this.random()}">
-            </label>
+                <div class="group mt-4">
+                    <input class="inp-file" type="file" accept="image/*" 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>
+                    <button title="${out('Link')}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>
+                    <button title="${out('Edit')}" class="btn-edit"><svg><use xlink:href="#icon-pencil"></use></svg></button>
+                </div>
+
+                <!--
+                <div class="group">
+                    <button title="${out('Align Left')}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>
+                    <button title="${out('Align Center')}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>
+                    <button title="${out('Align Right')}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>
+                    <button title="${out('Align Full')}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>
+                </div>
+                -->
+
+                <label class="label mt-2">
+                    <div>${out('Title')}:</div>
+                    <input type="text" class="inp-title" id="_inp_title_${this.random()}">
+                </label>
+            </div>
         </div>
         `;
     panel.insertAdjacentHTML('beforeend', html);
@@ -11667,6 +11671,14 @@ class PanelImage {
       inpSrc.value = 'image/jpeg (base64)';
     }
 
+    const divSettings = panel.querySelector('.div-image-settings');
+
+    if (img.closest('[data-html]')) {
+      divSettings.style.display = 'none';
+    } else {
+      divSettings.style.display = '';
+    }
+
     const inpTitle = panel.querySelector('.inp-title');
     inpTitle.value = alt;
   }
@@ -11713,28 +11725,32 @@ class PanelVideo {
     this.builder = builder;
     let html = `
         <div class="submain">
-            <div class="asset-preview"></div>
 
-            <label class="label mt-3">
-                <div>${out('Source')}:</div>
-                <input type="text" class="inp-src">
-            </label>
+            <div class="div-video-settings">
 
-            <div class="group mt-4">
-                <input class="inp-file" type="file" accept="video/mp4" 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>
+                <div class="asset-preview"></div>
+                
+                <label class="label mt-3">
+                    <div>${out('Source')}:</div>
+                    <input type="text" class="inp-src">
+                </label>
 
-            <label class="label checkbox mt-4">
-                <input class="inp-video-controls" type="checkbox" />  <span>${out('Show Controls')}</span>
-            </label>
-            <label class="label checkbox mt-2">
-                <input class="inp-video-loop" type="checkbox" />  <span>${out('Loop')}</span>
-            </label>
-            <label class="label checkbox mt-2">
-                <input class="inp-video-autoplay" type="checkbox" />  <span>${out('Autoplay')}</span>
-            </label>
+                <div class="group mt-4">
+                    <input class="inp-file" type="file" accept="video/mp4" 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>
+
+                <label class="label checkbox mt-4">
+                    <input class="inp-video-controls" type="checkbox" />  <span>${out('Show Controls')}</span>
+                </label>
+                <label class="label checkbox mt-2">
+                    <input class="inp-video-loop" type="checkbox" />  <span>${out('Loop')}</span>
+                </label>
+                <label class="label checkbox mt-2">
+                    <input class="inp-video-autoplay" type="checkbox" />  <span>${out('Autoplay')}</span>
+                </label>
+            </div>
 
         </div>
         `;
@@ -11839,7 +11855,22 @@ class PanelVideo {
     const src = source ? source.getAttribute('src') : '';
     this.updatePreview(src);
     const inpSrc = panel.querySelector('.inp-src');
-    inpSrc.value = src;
+
+    if (src.indexOf('base64') === -1) {
+      inpSrc.value = src;
+    } else {
+      // inpSrc.value = '[Image Data]';
+      inpSrc.value = 'video/mp4 (base64)';
+    }
+
+    const divSettings = panel.querySelector('.div-video-settings');
+
+    if (video.closest('[data-html]')) {
+      divSettings.style.display = 'none';
+    } else {
+      divSettings.style.display = '';
+    }
+
     const inpShowControls = panel.querySelector('.inp-video-controls');
 
     if (video.hasAttribute('controls')) {
@@ -12673,7 +12704,7 @@ class PanelCode {
                 </button>
             </div>
             
-            <div class="group flex">
+            <div class="group flex" style="width:100%">
                 <button title="${out('Configure')}" class="btn-editmodule">
                     <svg><use xlink:href="#icon-settings"></use></svg>
                     <span>${out('Configure')}</span>
@@ -27271,6 +27302,14 @@ class Snippets {
                     // }
 
                 }
+
+
+                if(!(parent._cb.win.FormViewer)){
+                    const result = snippets.filter((item)=>{
+                        return !(item.type === 'form');
+                    });
+                    snippets = [...result];
+                }
                 
 
                 for (let i = 0; i <snippets.length; i++) {
@@ -42499,6 +42538,12 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 12l14 0"></path>
             </symbol>
+            <symbol id="icon-upload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
+                <path d="M7 9l5 -5l5 5"></path>
+                <path d="M12 4l0 12"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -44430,6 +44475,15 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
     builder.opts.snippetJSON.snippets = [...snippets];
   }
+
+  // Exclude form snippet if FormViewer not found.
+  if (!builder.win.FormViewer) {
+    const result = snippets.filter(item => {
+      return !(item.type === 'form');
+    });
+    snippets = [...result];
+  }
+  builder.opts.snippetJSON.snippets = [...snippets];
   let index = 1;
   if (builder.opts.emailMode) {
     builder.opts.snippetJSON.snippets.forEach(item => {
@@ -71888,6 +71942,106 @@ var loadImageOrientation = {exports: {}};
 
 var js$2 = loadImage.exports;
 
+class DragDropImageUploader {
+  constructor(element, builder) {
+    this.element = element;
+    this.builder = builder;
+    this.targetImage = null;
+    this.isAttached = false;
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragLeave = this._onDragLeave.bind(this);
+    this._onDrop = this._onDrop.bind(this);
+  }
+  attach() {
+    if (this.isAttached) return; // Prevent duplicate attachment
+
+    this.element.addEventListener('dragover', this._onDragOver);
+    this.element.addEventListener('dragleave', this._onDragLeave);
+    this.element.addEventListener('drop', this._onDrop);
+    this.isAttached = true;
+  }
+  detach() {
+    if (!this.isAttached) return;
+    this.element.removeEventListener('dragover', this._onDragOver);
+    this.element.removeEventListener('dragleave', this._onDragLeave);
+    this.element.removeEventListener('drop', this._onDrop);
+    this.isAttached = false;
+  }
+  _getImageUnderCursor(e) {
+    const doc = this.element.ownerDocument || document;
+    const range = doc.caretRangeFromPoint ? doc.caretRangeFromPoint(e.clientX, e.clientY) : doc.caretPositionFromPoint(e.clientX, e.clientY);
+    if (!range) return null;
+    const node = range.startContainer.nodeType === 1 ? range.startContainer : range.startContainer.parentElement;
+    if (this.element.getAttribute('id') === 'divImageResizer') {
+      return this.builder.activeImage;
+    }
+    return node.tagName === 'IMG' ? node : node.querySelector && node.querySelector('img');
+  }
+  async _onDrop(e) {
+    e.preventDefault();
+    if (this.targetImage) {
+      this.targetImage.classList.remove('drag-over-image');
+    }
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0 && files[0].type.startsWith('image/')) {
+      const file = files[0];
+      const result = await this._onUpload(file);
+      if (result && this.targetImage) {
+        this.targetImage.setAttribute('src', result.url);
+
+        // finished steps:
+
+        // let imageProgress = document.querySelector('#divImageProgress');
+        // if(imageProgress) imageProgress.style.display = 'none';
+
+        //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+        this.builder.element.image.refreshIfIsModule(this.targetImage);
+        this.builder.element.image.startImageMonitor(this.targetImage);
+
+        //Trigger Change event
+        this.builder.opts.onChange();
+        this.builder.elmTool.refresh();
+        if (this.builder.onImageChange) this.builder.onImageChange();
+      }
+    }
+    this.targetImage = null;
+  }
+  _onDragOver(e) {
+    e.preventDefault();
+    const img = this._getImageUnderCursor(e);
+    if (img) {
+      if (this.targetImage && this.targetImage !== img) {
+        this.targetImage.classList.remove('drag-over-image');
+      }
+      this.targetImage = img;
+      this.targetImage.classList.add('drag-over-image');
+    }
+  }
+  _onDragLeave() {
+    if (this.targetImage) {
+      this.targetImage.classList.remove('drag-over-image');
+      this.targetImage = null;
+    }
+  }
+  _onUpload(file) {
+    return new Promise(resolve => {
+      this.builder.opts.onAssetUpload = url => {
+        resolve({
+          url: url,
+          name: file.name,
+          size: file.size
+        });
+      };
+      const fakeEvent = {
+        target: {
+          files: [file]
+        }
+      };
+      this.builder.opts.onImageUpload(fakeEvent);
+    });
+  }
+}
+
 class Image$1 {
   constructor(builder) {
     this.builder = builder;
@@ -71929,6 +72083,15 @@ class Image$1 {
       this.imageTool = imageTool;
       imageResizer = document.querySelector('#divImageResizer');
       this.imageResizer = imageResizer;
+
+      // upload
+      if (this.builder.opts.onImageUpload) {
+        if (!imageResizer._dragDropUploaderAttached) {
+          imageResizer._dragDropUploaderAttached = true;
+          const uploader = new DragDropImageUploader(imageResizer, this.builder);
+          uploader.attach();
+        }
+      }
       imageResizer.addEventListener('wheel', () => {
         this.hideImageResizer();
       }, {
@@ -72072,20 +72235,70 @@ class Image$1 {
 
       // Browse local image
       let elm = imageTool.querySelector('#fileEmbedImage');
-      dom.addEventListener(elm, 'change', e => {
+      dom.addEventListener(elm, 'change', async e => {
         this.builder.uo.saveForUndo();
         var input = e.target;
         let img = this.builder.activeImage;
+
+        // content scaling
+        let scale = 1;
+        const contentView = document.querySelector('.is-content-view');
+        if (contentView) {
+          const style = window.getComputedStyle(contentView);
+          const transform = style.transform;
+          if (transform.startsWith('matrix(')) {
+            const matrix = new DOMMatrix(transform);
+            if (matrix.b === 0 && matrix.c === 0 && matrix.a === matrix.d) {
+              scale = matrix.a; // only if pure scale()
+            }
+          }
+        }
+
         let imageProgress = builderStuff.querySelector('#divImageProgress');
         imageProgress.style.display = 'table';
-        imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
-        imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
+        imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom * scale + 'px';
+        imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom * scale + 'px';
         const newPos = this.builder.util.getElementPosition(img);
         let top = newPos.top + window.pageYOffset;
         let left = newPos.left + window.pageXOffset;
         imageProgress.style.top = top + 'px';
         imageProgress.style.left = left + 'px';
 
+        // upload
+        const onUpload = async e => {
+          let file = e.target.files[0];
+          return new Promise(resolve => {
+            this.builder.opts.onAssetUpload = url => {
+              resolve({
+                url: url,
+                name: file.name,
+                size: file.size
+              });
+            };
+            this.builder.opts.onImageUpload(e);
+          });
+        };
+        if (this.builder.opts.onImageUpload) {
+          const result = await onUpload(e);
+          img.setAttribute('src', result.url);
+
+          // finished steps:
+
+          imageProgress.style.display = 'none';
+          elm = imageTool.querySelector('#fileEmbedImage');
+          elm.value = ''; //clear input
+
+          //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+          this.refreshIfIsModule(img);
+          this.startImageMonitor(img);
+
+          //Trigger Change event
+          this.builder.opts.onChange();
+          this.builder.elmTool.refresh();
+          if (this.builder.onImageChange) this.builder.onImageChange();
+          return;
+        }
+
         //The #fileEmbedImage triggered 2 times in IE (because of clearInputs below). This makes input.files[0].name returns error on 2nd trigger. Just add try{}!
         try {
           img.setAttribute('data-filename', input.files[0].name); //needed for saveimage.js | 
@@ -72302,7 +72515,7 @@ class Image$1 {
                             <div class="image-larger1 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
-                                    <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                    <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                                     <input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
 
@@ -72325,7 +72538,7 @@ class Image$1 {
                             <div class="image-larger2 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
-                                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                    <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                                     <input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
                             </div>
@@ -72607,9 +72820,113 @@ class Image$1 {
 
       // Apply (crop) image
       elm = modalImageEdit.querySelector('.input-ok');
-      dom.addEventListener(elm, 'click', () => {
+      dom.addEventListener(elm, 'click', async () => {
         this.builder.uo.saveForUndo();
         let img = this.builder.activeImage;
+        if (this.builder.opts.onImageUpload) {
+          let basename, extension, newname, newfilename;
+          let src = img.getAttribute('src');
+          if (src.indexOf('base64') === -1) {
+            let filename = src.substring(src.lastIndexOf('/') + 1);
+            basename = dom.baseName(filename);
+            extension = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+          } else if (img.getAttribute('data-filename')) {
+            let attr = img.getAttribute('data-filename');
+            basename = dom.baseName(attr);
+            extension = attr.substr(attr.lastIndexOf('.') + 1).toLowerCase();
+          } else {
+            basename = util.makeId();
+            extension = 'png';
+            const match = src.match(/^data:image\/(.*?);base64,/);
+            if (match) {
+              extension = match[1]; // e.g., "png", "jpeg", "gif"
+            }
+          }
+
+          if (basename.indexOf('-edit') !== -1) {
+            basename = basename.substr(0, basename.indexOf('-edit'));
+          }
+          newname = basename + '-edit' + util.makeId();
+          newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
+          newfilename = newname + '.' + extension;
+          let base64;
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'webm' || extension === 'webp') {
+            base64 = this.cropper.getCroppedCanvas({
+              fillColor: '#fff',
+              imageSmoothingEnabled: true,
+              imageSmoothingQuality: 'high'
+            }).toDataURL('image/jpeg');
+          } else {
+            base64 = this.cropper.getCroppedCanvas({}).toDataURL();
+          }
+
+          // await this.builder.opts.onBase64Upload(img, base64, newfilename);
+          const getMimeTypeFromFilename = filename => {
+            const ext = filename.split('.').pop().toLowerCase();
+            const mimeTypes = {
+              jpg: 'image/jpeg',
+              jpeg: 'image/jpeg',
+              png: 'image/png',
+              gif: 'image/gif',
+              webp: 'image/webp',
+              svg: 'image/svg+xml',
+              pdf: 'application/pdf',
+              txt: 'text/plain',
+              mp3: 'audio/mpeg',
+              mp4: 'video/mp4',
+              mov: 'video/quicktime',
+              wav: 'audio/wav',
+              json: 'application/json'
+              // add more as needed
+            };
+
+            return mimeTypes[ext] || 'application/octet-stream';
+          };
+          const base64ToFile = (base64, filename) => {
+            const mimeType = getMimeTypeFromFilename(filename);
+            const byteString = atob(base64.split(',')[1]);
+            const byteArray = new Uint8Array(byteString.length);
+            for (let i = 0; i < byteString.length; i++) {
+              byteArray[i] = byteString.charCodeAt(i);
+            }
+            return new File([byteArray], filename, {
+              type: mimeType
+            });
+          };
+          const onUpload = file => {
+            return new Promise(resolve => {
+              this.builder.opts.onAssetUpload = url => {
+                resolve({
+                  url: url,
+                  name: file.name,
+                  size: file.size
+                });
+              };
+              const fakeEvent = {
+                target: {
+                  files: [file]
+                }
+              };
+              this.builder.opts.onImageUpload(fakeEvent);
+            });
+          };
+          const file = base64ToFile(base64, newfilename);
+          const result = await onUpload(file);
+          img.setAttribute('src', result.url);
+
+          // finished steps:
+
+          //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+          this.refreshIfIsModule(img);
+
+          //Trigger Change event
+          this.builder.opts.onChange();
+          util.hideModal(modalImageEdit);
+          this.builder.elmTool.refresh();
+          if (this.builder.onImageChange) this.builder.onImageChange();
+          return;
+        }
         let attr = img.getAttribute('data-filename');
         let extension = 'jpg';
         if (attr) {
@@ -75360,7 +75677,7 @@ class Hyperlink {
                         <div class="div-anyfile-upload is-btn classic" style="position: relative; flex: 0 0 auto; width: 50px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                             <form class="form-upload-larger" target="frameTargetAnyfileUpload" method="post" action="${this.builder.opts.fileHandler}" enctype="multipart/form-data" style="overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                 <input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
-                                <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                                 <input type="file" onclick="blur()" tabindex="0" class="input-anyfile-upload" name="fileImage" accept="*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
                             </form>
                             <iframe tabindex="-1" id="frameTargetAnyfileUpload" name="frameTargetAnyfileUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
@@ -76357,6 +76674,9 @@ class Module {
       let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
       result = await result.text();
       result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
+
+      // Replace assets path
+      result = result.replace(/="assets\//g, '="' + this.builder.settings.assetPath);
       iframe.srcdoc = result;
       setTimeout(() => {
         iframe.style.opacity = '';
@@ -77346,7 +77666,7 @@ class Video {
                         <div class="video-larger1 input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                             <form class="form-upload-larger" target="frameTargetVideoUpload" method="post" action="${this.builder.opts.videoHandler}" 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="hidRefId5" name="hidRefId" type="hidden" value="" />
-                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                                 <input title="${util.out('Select')}" id="fileVideo1" name="fileImage" type="file" accept="video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
@@ -77579,7 +77899,7 @@ class Audio {
                         <div class="audio-file-upload input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                             <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 class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <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;">
                             </form>
 
@@ -79599,7 +79919,7 @@ class ColumnTool {
                         <div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                             <form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
                                 <input id="hidRefId3" name="hidRefId" type="hidden" value="">
-                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                                 <input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
@@ -80455,7 +80775,9 @@ class ColumnTool {
                                 <div class="image-larger4 is-btn classic" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                                     <form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                         <input id="hidRefId4" name="hidRefId" type="hidden" value="">
-                                        <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                        
+                                        <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
+                                        
                                         <input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
                                     </form>
 
@@ -94378,7 +94700,7 @@ class Rte {
     });
 
     const btnInsertImageOk = modalInsertImage.querySelector('.input-ok');
-    dom.addEventListener(btnInsertImageOk, 'click', () => {
+    dom.addEventListener(btnInsertImageOk, 'click', async () => {
       if (!this.builder.activeCol) {
         util.hideModal(modalInsertImage);
         return;
@@ -94394,7 +94716,76 @@ class Rte {
       }
       if (val === '') return;
       let fileToInsert = modalInsertImage.querySelector('#imgInsertImagePreview').getAttribute('data-filename');
-      util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
+      if (this.builder.opts.onImageUpload && val.indexOf('base64') !== -1) {
+        let basename, extension, newname, newfilename;
+        basename = dom.baseName(fileToInsert);
+        extension = fileToInsert.substr(fileToInsert.lastIndexOf('.') + 1).toLowerCase();
+        if (basename.indexOf('-edit') !== -1) {
+          basename = basename.substr(0, basename.indexOf('-edit'));
+        }
+        newname = basename + '-edit' + util.makeId();
+        newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
+        newfilename = newname + '.' + extension;
+        let base64 = val;
+
+        // await this.builder.opts.onBase64Upload(img, base64, newfilename);
+        const getMimeTypeFromFilename = filename => {
+          const ext = filename.split('.').pop().toLowerCase();
+          const mimeTypes = {
+            jpg: 'image/jpeg',
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            gif: 'image/gif',
+            webp: 'image/webp',
+            svg: 'image/svg+xml',
+            pdf: 'application/pdf',
+            txt: 'text/plain',
+            mp3: 'audio/mpeg',
+            mp4: 'video/mp4',
+            mov: 'video/quicktime',
+            wav: 'audio/wav',
+            json: 'application/json'
+            // add more as needed
+          };
+
+          return mimeTypes[ext] || 'application/octet-stream';
+        };
+        const base64ToFile = (base64, filename) => {
+          const mimeType = getMimeTypeFromFilename(filename);
+          const byteString = atob(base64.split(',')[1]);
+          const byteArray = new Uint8Array(byteString.length);
+          for (let i = 0; i < byteString.length; i++) {
+            byteArray[i] = byteString.charCodeAt(i);
+          }
+          return new File([byteArray], filename, {
+            type: mimeType
+          });
+        };
+        const onUpload = file => {
+          return new Promise(resolve => {
+            this.builder.opts.onAssetUpload = url => {
+              resolve({
+                url: url,
+                name: file.name,
+                size: file.size
+              });
+            };
+            const fakeEvent = {
+              target: {
+                files: [file]
+              }
+            };
+            this.builder.opts.onImageUpload(fakeEvent);
+          });
+        };
+        const file = base64ToFile(base64, newfilename);
+        const result = await onUpload(file);
+        val = result.url;
+      }
+
+      // util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
+      util.pasteHtmlAtCaret('<img src="' + val + '" alt="" />', false);
       util.hideModal(modalInsertImage);
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
@@ -100793,7 +101184,7 @@ class SaveImages {
     const images = area.querySelectorAll('img');
     Array.prototype.forEach.call(images, img => {
       let src = img.getAttribute('src');
-      if (typeof src !== typeof undefined && src !== false) {
+      if (typeof src !== typeof undefined && src !== false && img.getAttribute('data-filename')) {
         if (src.indexOf('base64') !== -1) {
           // let customcode = false;
           // if(dom.parentsHasAttribute(img, 'data-html')){
@@ -106506,7 +106897,7 @@ class MediaPicker {
                     <div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                         <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
                             <input name="hidRefId" class="input-ref-id" type="hidden" value="">
-                            <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                            <svg style="width:16px;height:16px;"><use xlink:href="#icon-upload"></use></svg>
                             <input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                         </form>
                         <iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
@@ -109466,6 +109857,9 @@ class Dictation {
     this.modalConfig = modalConfig;
     const btnConfig = builderStuff.querySelector('.cmd-command-config');
     const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
+    if (!this.builder.settings.enableDictation) {
+      btnDictation.style.display = 'none';
+    }
     const btnClear = builderStuff.querySelector('.cmd-clear-command');
     const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
     const btnCommandList = builderStuff.querySelector('.cmd-command-list');
@@ -118475,7 +118869,7 @@ class ContentBuilder {
       // Option for self-hosted fonts:
       // fontPath: 'assets/cssfonts/', // If set, will be used
 
-      snippetModal: false,
+      snippetModal: true,
       snippetModalLeft: false,
       snippetData: 'assets/minimalist-blocks/snippetlist.html',
       // Deprecated
@@ -118755,7 +119149,7 @@ class ContentBuilder {
       maxEmbedImageWidth: 1600,
       //set -1 for no max (use original image width)
       zoom: 1,
-      useLightbox: false,
+      useLightbox: true,
       lightboxArrow: true,
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
@@ -119144,6 +119538,7 @@ class ContentBuilder {
       sendCommandUrl: '',
       // http://localhost:8081/answer
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
+      enableDictation: false,
       onlineDemo: false,
       autoSendDelay: 4000,
       autoEditBlock: false,
@@ -119549,6 +119944,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
     this.settings = this.opts; // Backward compatible
 
+    if (this.isContentBox) {
+      this.settings.snippetModal = false;
+    }
+
     // freeform
     if (this.canvas && !this.isContentBox) {
       /*
@@ -121281,6 +121680,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   applyBehaviorOn(builder) {
     const util = this.util;
 
+    // upload
+    if (this.opts.onImageUpload) {
+      if (!builder._dragDropUploaderAttached) {
+        builder._dragDropUploaderAttached = true;
+        const uploader = new DragDropImageUploader(builder, this);
+        uploader.attach();
+      }
+    }
+
     //Make absolute
     if (this.opts.absolutePath) {
       let links = builder.querySelectorAll('a');
@@ -156153,8 +156561,26 @@ class ContentBox {
            designPathReplace: ['assets/', 'https://.../assets/'], // Only if needed
       */
       // New Template System:  => this will replace the previous approach (designUrl1, designUrl2, designPath, designPathReplace & defaultDesignCategory)
-      templates: [],
-      // ver.5.3
+      // templates: [], // ver.5.3
+      templates: [{
+        url: 'assets/templates-simple/templates.js',
+        path: 'assets/templates-simple/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: 'assets/templates-quick/templates.js',
+        path: 'assets/templates-quick/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: 'assets/templates-animated/templates.js',
+        path: 'assets/templates-animated/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }],
 
       /*
       Example:
@@ -156348,7 +156774,7 @@ class ContentBox {
       blockCodeEditorHeight: '45vh',
       blockCodeEditorMaxWidth: '960px',
       assetRefresh: false,
-      slider: '',
+      slider: 'glide',
       navbar: false,
       screenMode: 'fullview',
       onRender: function () {},
@@ -160232,6 +160658,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             z-index: 2;
         }
 
+        .is-wrapper .drag-over-image {
+            outline: #a2f0ce 3px solid;
+        }
+
         /*
         .is-wrapper.is-edit {
             min-height: 100vh;