@innovastudio/contentbox 1.6.91 → 1.6.93

package/public/contentbox/contentbox.esm.js

@@ -13193,6 +13193,11 @@ class PanelBox {
                         <button title="${out('Increase')}" data-content-size="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
                     </div>
 
+                    <label class="label checkbox mt-3" style="margin-bottom:15px">
+                        <input type="checkbox" class="chk-lock-contentsize" />
+                        <span>${out('Lock Content Size')}</span>
+                    </label>
+
                     <div class="flex">
                         <div class="mr-4">
                             <div class="label mt-2">${out('Position')}:</div>
@@ -13729,6 +13734,11 @@ class PanelBox {
     chkParallax.addEventListener('click', () => {
       let isParallax = chkParallax.checked;
       this.box.parallaxContent(isParallax);
+    });
+    const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
+    chkLockContentSize.addEventListener('click', () => {
+      let isLockContentSize = chkLockContentSize.checked;
+      this.box.lockContentSize(isLockContentSize);
     }); // Text
 
     const btnTextAlign = panel.querySelectorAll('[data-align]');
@@ -14285,6 +14295,16 @@ class PanelBox {
           chkParallax.checked = true;
         }
       }
+    } // Lock Content Size
+
+
+    const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
+    chkLockContentSize.checked = false;
+
+    if (container) {
+      if (container.classList.contains('v3')) {
+        chkLockContentSize.checked = true;
+      }
     } // Text Color
 
 
@@ -27883,10 +27903,10 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-video');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<video style="width: 100%;" loop="" autoplay="">
+      let html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
                 <source src="${builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
       if (builder.opts.snippetSampleVideo) {
-        html = `<video style="width: 100%;" loop="" autoplay="">
+        html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
                     <source src="${builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
       }
       util.addContent(html, mode);
@@ -31723,15 +31743,15 @@ class Util$1 {
       } else {
         newelement.click();
       }
-      const builderStuff = this.builder.builderStuff;
-      let quickadd = builderStuff.querySelector('.quickadd');
-      this.hidePop(quickadd);
 
       // LATER: auto scroll
 
       // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool. 
     }
 
+    const builderStuff = this.builder.builderStuff;
+    let quickadd = builderStuff.querySelector('.quickadd');
+    if (quickadd) this.hidePop(quickadd);
     if (this.builder.useCssClasses) {
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
@@ -41026,6 +41046,16 @@ class HtmlUtil {
             imgUrl = convertMediaUrl(imgUrl);
             elm.setAttribute('href', `${imgUrl}`);
           }
+          if (elm.tagName.toLowerCase() === 'a') {
+            //lightbox
+            let s = elm.getAttribute('href');
+            let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
+            extension = extension.toLowerCase();
+            if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4' || extension === 'mp3') {
+              let mediaUrl = convertMediaUrl(s);
+              elm.setAttribute('href', `${mediaUrl}`);
+            }
+          }
         }
       });
     }
@@ -44265,6 +44295,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
         block.offsetWidth / 2;
         let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
         let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
+        if (y < 0) y = 15; // if block is not fully loaded, block height may be incorrect (y can be negative). Adjust to 15%.
         block.style.top = y + '%';
         block.style.left = x + '%';
         block.removeAttribute('data-new-dummy');
@@ -72780,28 +72811,33 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-          const handleImageToolClickOut = e => {
-            let elm = e.target;
-            if (!elm) return;
-            if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
-              // click outside
-
-              // hide
-              this.hideImageTool();
-              document.removeEventListener('click', handleImageToolClickOut);
-              if (this.builder.iframeDocument) {
-                this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+
+          /*
+          const handleImageToolClickOut = e =>{
+              let elm = e.target;
+              if(!elm) return;
+              if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && 
+                  !elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
+                  !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
+                  !elm.closest('img')) { // click outside
+                  
+                  // hide
+                  this.hideImageTool();
+                   document.removeEventListener('click', handleImageToolClickOut);
+                  if(this.builder.iframeDocument) {
+                      this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+                  }
+                  this.builder.handleImageToolClickOut_=false;
               }
-              this.builder.handleImageToolClickOut_ = false;
-            }
           };
-          if (!this.builder.handleImageToolClickOut_) {
-            document.addEventListener('click', handleImageToolClickOut);
-            if (this.builder.iframeDocument) {
-              this.builder.doc.addEventListener('click', handleImageToolClickOut);
-            }
-            this.builder.handleImageToolClickOut_ = true;
+          if(!this.builder.handleImageToolClickOut_) {
+              document.addEventListener('click', handleImageToolClickOut);
+              if(this.builder.iframeDocument) {
+                  this.builder.doc.addEventListener('click', handleImageToolClickOut);
+              }
+              this.builder.handleImageToolClickOut_=true;
           }
+          */
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';
@@ -72815,6 +72851,28 @@ class Image$1 {
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox) movControlBox.style.display = 'none';
         }
+        const handleImageToolClickOut = e => {
+          let elm = e.target;
+          if (!elm) return;
+          if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
+            // click outside
+
+            // hide
+            this.hideImageTool();
+            document.removeEventListener('click', handleImageToolClickOut);
+            if (this.builder.iframeDocument) {
+              this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+            }
+            this.builder.handleImageToolClickOut_ = false;
+          }
+        };
+        if (!this.builder.handleImageToolClickOut_) {
+          document.addEventListener('click', handleImageToolClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.addEventListener('click', handleImageToolClickOut);
+          }
+          this.builder.handleImageToolClickOut_ = true;
+        }
         if (this.builder.canvas) ; else {
           let prog = false;
           if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
@@ -73168,7 +73226,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <span>${util.out('Border Color')}</span>:
+                                    <span>${util.out('Border Style')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -73358,7 +73416,7 @@ class ButtonEditor {
 
                         <div class="flex flex-col" style="margin:15px 0 0">
                             <div>
-                                <span>${util.out('Border Color')}</span>:
+                                <span>${util.out('Border Style')}</span>:
                             </div>
                             <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                 <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -76954,6 +77012,12 @@ class Video {
         } else {
           inpAutoplay.checked = false;
         }
+        const inpMuted = videoModal.querySelector('.input-video-muted');
+        if (video.hasAttribute('muted')) {
+          inpMuted.checked = true;
+        } else {
+          inpMuted.checked = false;
+        }
         util.showModal(videoModal, true, () => {
           btn.removeAttribute('data-focus');
           btn.focus();
@@ -76997,6 +77061,9 @@ class Video {
                     <label style="display:block;margin-top:5px;">
                         <input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" />  ${util.out('Autoplay')}&nbsp;
                     </label>
+                    <label style="display:block;margin-top:5px;">
+                        <input class="input-video-muted" id="__input_video_muted" type="checkbox" />  ${util.out('Muted')}&nbsp;
+                    </label>
                     
                     <div style="text-align:right;margin-top:14px;">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -77075,6 +77142,11 @@ class Video {
         } else {
           video.removeAttribute('autoplay');
         }
+        if (videoModal.querySelector('.input-video-muted').checked) {
+          video.setAttribute('muted', '');
+        } else {
+          video.removeAttribute('muted');
+        }
         if (videoModal.querySelector('.input-url').value !== '') {
           let url = videoModal.querySelector('.input-url').value;
           let source = video.querySelector('source');
@@ -77726,8 +77798,8 @@ class RowTool {
     const builderStuff = this.builder.builderStuff;
     let rowtool = row.querySelector('.is-row-tool');
     if (!rowtool) {
-      let html = `<div class="is-tool is-row-tool">
-                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
+      let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
+                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
                 <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
@@ -89900,6 +89972,10 @@ class ColorPicker {
       const poppicker = builderStuff.querySelector('.pop-picker');
       poppicker.style.display = 'flex';
       poppicker.style.opacity = 0;
+      if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines 
+      else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
+      else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
+
       const pickr = Pickr.create({
         el: '._pop-colpick',
         theme: 'nano',
@@ -93788,6 +93864,10 @@ class Rte {
     btnRteColor.forEach(btn => {
       btn.addEventListener('click', () => {
         const pop = this.rteColorPicker;
+        const numOfColors = this.builder.colors.length;
+        if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
+        else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
+
         if (!dom.hasClass(pop, 'active')) {
           this.util.showRtePop(pop, () => {
             const top = btn.getBoundingClientRect().top;
@@ -94717,15 +94797,15 @@ class Rte {
         activeCol = this.builder.activeCol;
         spans = activeCol.querySelectorAll('span');
         Array.prototype.forEach.call(spans, span => {
-          let attr = span.getAttribute('data-keep');
+          let attr = span.hasAttribute('data-keep');
           if (!attr) {
             span.outerHTML = span.innerHTML;
           }
         });
         Array.prototype.forEach.call(spans, span => {
-          let attr = span.getAttribute('data-keep');
+          let attr = span.hasAttribute('data-keep');
           if (attr) {
-            dom.removeAttribute(span, 'data-keep');
+            span.removeAttribute('data-keep');
           }
         });
         this.getState();
@@ -108468,8 +108548,6 @@ Important: Do not change the 'div.is-container' element!
   }
 }
 
-// import RecordRTC  from 'recordrtc';
-// import Recorder from 'opus-recorder'; // Using Recorder
 const dom$i = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -108817,6 +108895,9 @@ class Dictation {
     dom$i.appendHtml(builderStuff, html);
     const modalCommand = builderStuff.querySelector('.page-command');
     this.modalCommand = modalCommand;
+    new Draggable$2({
+      selector: '.is-modal.page-command .is-draggable'
+    });
     const modalCommandList = builderStuff.querySelector('.commandlist');
     this.modalCommandList = modalCommandList;
     const modalConfig = builderStuff.querySelector('.commandconfig');
@@ -115298,6 +115379,8 @@ class Editable {
     this.handleEditStart = this.handleEditStart.bind(this);
     this.handleMouseClick = this.handleMouseClick.bind(this);
     this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
     this.setup();
   }
   setup() {
@@ -115306,6 +115389,7 @@ class Editable {
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
   refresh() {
@@ -115313,23 +115397,49 @@ class Editable {
     this.elements.forEach(element => {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     });
     this.elements.forEach(element => {
       element.addEventListener('dblclick', this.handleEditStart);
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
+  handleMouseDown(event) {
+    const currentTarget = event.currentTarget;
+    this.lastClickTime = false;
+    if (!currentTarget.classList.contains('active')) return;
+    if (currentTarget.classList.contains('editable')) return;
+    currentTarget.addEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    this.lastClickTime = now;
+  }
+  handleMouseUp(event) {
+    if (!this.lastClickTime) return;
+    const currentTarget = event.currentTarget;
+    currentTarget.removeEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    const lastClickTime = this.lastClickTime || now;
+    const timeDiff = now - lastClickTime;
+    if (timeDiff < 300 && timeDiff > 0) {
+      // Less than 300ms since the last touch, enable editing
+      this.handleEditStart(event);
+    }
+    this.lastClickTime = now;
+  }
   destroy(element) {
     if (element) {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     } else {
       this.elements = this.doc.querySelectorAll(this.selector);
       this.elements.forEach(element => {
         element.removeEventListener('dblclick', this.handleEditStart);
         element.removeEventListener('touchstart', this.handleTouchStart);
+        element.removeEventListener('mousedown', this.handleMouseDown);
       });
     }
   }
@@ -115642,6 +115752,8 @@ class EditableBlocks {
     target.style.zIndex = newZIndex;
   }
   selectStart(block) {
+    if (block.classList.contains('editable')) return; // do not proceed if in editing mode
+
     if (block.classList.contains('is-shape')) return; // do not clone if block is shape
 
     if (!this.clone) return;
@@ -117853,6 +117965,7 @@ class ContentBuilder {
       outlineMode: '',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       elementTool: true,
       elementHighlight: true,
@@ -120626,7 +120739,118 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     //     let outlineStyle = localStorage.getItem('_outlinestyle');
     //     this.preferences.setOutlineStyle(outlineStyle);
     // } 
-    if (this.preferences) this.preferences.initBuilder(builder);
+    if (this.preferences) this.preferences.initBuilder(builder);else {
+      const setColumnTool = hidecolumntool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        if (hidecolumntool) {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.setAttribute('hidecolumntool', '');
+          });
+        } else {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.removeAttribute('hidecolumntool');
+          });
+        }
+      };
+      setColumnTool(!this.columnTool);
+      const setElementTool = hideelementtool => {
+        const builderStuff = this.builderStuff;
+        if (hideelementtool) {
+          builderStuff.setAttribute('hideelementtool', '');
+        } else {
+          builderStuff.removeAttribute('hideelementtool', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (hideelementtool) {
+            contentStuff.setAttribute('hideelementtool', '');
+          } else {
+            contentStuff.removeAttribute('hideelementtool', '');
+          }
+        }
+      };
+      setElementTool(!this.elementTool);
+      const setOutline = hideoutline => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideoutline) {
+            builder.setAttribute('hideoutline', '');
+          } else {
+            builder.removeAttribute('hideoutline');
+          }
+        });
+      };
+      setOutline(!this.rowcolOutline);
+      const setOutlineStyle = outlineStyle => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (outlineStyle === 'grayoutline') {
+            builder.setAttribute('grayoutline', '');
+          } else {
+            builder.removeAttribute('grayoutline');
+          }
+        });
+      };
+      setOutlineStyle(this.outlineStyle);
+      const setElementHighlight = hideelementhighlight => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideelementhighlight) {
+            builder.setAttribute('hideelementhighlight', '');
+          } else {
+            builder.removeAttribute('hideelementhighlight', '');
+          }
+        });
+      };
+      setElementHighlight(!this.elementHighlight);
+      const setToolStyle = toolStyle => {
+        const builderStuff = this.builderStuff;
+        if (toolStyle === 'gray') {
+          builderStuff.setAttribute('gray', '');
+        } else {
+          builderStuff.removeAttribute('gray', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (toolStyle === 'gray') {
+            contentStuff.setAttribute('gray', '');
+          } else {
+            contentStuff.removeAttribute('gray', '');
+          }
+        }
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (toolStyle === 'gray') {
+            builder.setAttribute('gray', '');
+          } else {
+            builder.removeAttribute('gray');
+          }
+        });
+      };
+      setToolStyle(this.toolStyle);
+      const setSnippetAddTool = hidesnippetaddtool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hidesnippetaddtool) {
+            builder.setAttribute('hidesnippetaddtool', '');
+          } else {
+            builder.removeAttribute('hidesnippetaddtool', '');
+          }
+        });
+      };
+      setSnippetAddTool(!this.snippetAddTool);
+      const setRowToolPosition = rowTool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (rowTool === 'right') {
+            builder.removeAttribute('leftrowtool');
+          } else {
+            builder.setAttribute('leftrowtool', '');
+          }
+        });
+      };
+      setRowToolPosition(this.rowTool);
+    }
 
     // Apply behavior on each row
     const rows = this.dom.elementChildren(builder);
@@ -122895,8 +123119,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 512;
-    const height = 512;
+    const width = this.ai_width; //768;
+    const height = this.ai_height; //512;
     const img = new Image();
     img.src = src;
     img.crossOrigin = 'anonymous';
@@ -122928,6 +123152,47 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       callback(result.url);
     };
   }
+  getOrientation(width, height) {
+    const aspectRatio = width / height;
+    const predefinedRatios = [{
+      ratio: '1:1',
+      value: 1 / 1
+    }, {
+      ratio: '4:5',
+      value: 4 / 5
+    }, {
+      ratio: '2:3',
+      value: 2 / 3
+    }, {
+      ratio: '9:16',
+      value: 9 / 16
+    }, {
+      ratio: '4:7',
+      value: 4 / 7
+    }, {
+      ratio: '5:4',
+      value: 5 / 4
+    }, {
+      ratio: '3:2',
+      value: 3 / 2
+    }, {
+      ratio: '16:9',
+      value: 16 / 9
+    }, {
+      ratio: '7:4',
+      value: 7 / 4
+    }];
+    let closestRatio = predefinedRatios[0].ratio;
+    let smallestDifference = Math.abs(aspectRatio - predefinedRatios[0].value);
+    for (let i = 1; i < predefinedRatios.length; i++) {
+      const difference = Math.abs(aspectRatio - predefinedRatios[i].value);
+      if (difference < smallestDifference) {
+        smallestDifference = difference;
+        closestRatio = predefinedRatios[i].ratio;
+      }
+    }
+    return closestRatio;
+  }
   async generateImage(prompt, callback) {
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
@@ -122937,12 +123202,82 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     let steps = this.imageSteps || 25;
     let guidance = this.imageGuidance || 7.5;
     let scheduler = this.imageScheduler || 'dpmsolver++';
+    let width = 768;
+    let height = 512;
+    if (this.activeImage) {
+      // check selected image dimension
+      const activeImage = this.activeImage;
+      const w = activeImage.offsetWidth;
+      const h = activeImage.offsetHeight;
+      const ratio = this.getOrientation(w, h);
+      if (model === 'flux-schnell') {
+        if (ratio === '1:1') {
+          width = 1024;
+          height = 1024;
+        } else if (ratio === '4:5') {
+          width = 768;
+          height = 960;
+        } else if (ratio === '2:3') {
+          width = 768;
+          height = 1152;
+        } else if (ratio === '9:16') {
+          width = 720;
+          height = 1280;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 960;
+          height = 768;
+        } else if (ratio === '3:2') {
+          width = 1152;
+          height = 768;
+        } else if (ratio === '16:9') {
+          width = 1280;
+          height = 720;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      } else {
+        if (ratio === '1:1') {
+          width = 512;
+          height = 512;
+        } else if (ratio === '4:5') {
+          width = 512;
+          height = 640;
+        } else if (ratio === '2:3') {
+          width = 512;
+          height = 768;
+        } else if (ratio === '9:16') {
+          width = 576;
+          height = 1024;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 640;
+          height = 512;
+        } else if (ratio === '3:2') {
+          width = 768;
+          height = 512;
+        } else if (ratio === '16:9') {
+          width = 1024;
+          height = 576;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      }
+    }
+    this.ai_width = width;
+    this.ai_height = height;
     const messages = {
       model,
       prompt: prompt,
       negative_prompt,
-      width: 512,
-      height: 512,
+      width: this.ai_width,
+      height: this.ai_height,
       steps,
       guidance,
       scheduler,
@@ -122968,10 +123303,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         return;
       }
       const imageUrl = result.url;
-      if (this.imageAutoUpscale) {
-        this.upscaleImage(imageUrl, callback);
-      } else {
+      if (this.activeImage) {
+        // selectable image on content doesn't need tp be upscaled
         callback(imageUrl);
+      } else {
+        if (this.imageAutoUpscale) {
+          this.upscaleImage(imageUrl, callback);
+        } else {
+          callback(imageUrl);
+        }
       }
     } catch (error) {
       if (error.name === 'AbortError') ; else {
@@ -123635,18 +123975,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
 
     if (this.dom.textSelection()) {
-      if (e.keyCode === '38') {
+      if (e.keyCode === 38) {
         // Up arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '40') {
+      } else if (e.keyCode === 40) {
         // Down arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '37') {
+      } else if (e.keyCode === 37) {
         // Left arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '39') {
+      } else if (e.keyCode === 39) {
         // Right arrow
         this.util.saveSelection();
+      } else if (e.keyCode === 13) {
+        // Enter
+        this.util.saveSelection();
       }
     }
 
@@ -138817,6 +139160,18 @@ class Box {
     this.builder.onChange();
   }
 
+  lockContentSize(isLock) {
+    this.builder.editor.saveForUndo();
+    let activeBox = this.builder.activeBox;
+    let container = activeBox.querySelector('.is-builder');
+
+    if (isLock) {
+      container.classList.add('v3');
+    } else {
+      container.classList.remove('v3');
+    }
+  }
+
   parallaxContent(isParallax) {
     this.builder.editor.saveForUndo();
     let activeBox = this.builder.activeBox;
@@ -154981,6 +155336,7 @@ class ContentBox {
       rowTool: 'right',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       mobileSimpleEdit: false,
       clearPreferences: false,
@@ -158537,6 +158893,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       rowTool: this.settings.rowTool,
       toolStyle: this.settings.toolStyle,
       outlineStyle: this.settings.outlineStyle,
+      rowHandle: this.settings.rowHandle,
       snippetAddTool: this.settings.snippetAddTool,
       mobileSimpleEdit: this.settings.mobileSimpleEdit,
       clearPreferences: this.settings.clearPreferences,
@@ -160273,65 +160630,93 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
 
   boxRender() {
+    if (!this.linksWithClickListeners) {
+      this.linksWithClickListeners = new Set();
+    }
+
+    const links = this.wrapperEl.querySelectorAll('.is-box .is-overlay a'); // eg. slider links
+
+    links.forEach(link => {
+      let url = link.getAttribute('href');
+
+      if (url.indexOf('#') === 0 || link.classList.contains('glightbox')) ; else {
+        if (!this.linksWithClickListeners.has(link)) {
+          link.addEventListener('click', e => {
+            // Will go to the link
+            const answer = window.confirm(out('Do you really want to leave?')); // Cancel the navigation and stay on the same page
+
+            if (!answer) {
+              e.preventDefault();
+            }
+
+            e.stopImmediatePropagation();
+          });
+          this.linksWithClickListeners.add(link); // Mark the listener as added
+        }
+      }
+    });
     const navbar = this.doc.querySelector('.is-section-navbar');
 
     if (navbar) {
       const links = navbar.querySelectorAll('a');
       links.forEach(link => {
-        link.addEventListener('click', e => {
-          let url = link.getAttribute('href');
-
-          if (url) {
-            if (url.indexOf('#') === 0) {
-              // Will go to bookmark
-              if (url.indexOf('#section') === 0) {
-                let num = url.replace('#section', '');
-
-                if (!isNaN(parseInt(num))) {
-                  let sections = this.doc.querySelectorAll('.is-section');
-                  let gotoSection;
-                  let x = 0;
-                  sections.forEach(function (section) {
-                    if (!dom.hasClass(section, 'is-section-navbar')) {
-                      if (x === num - 1) {
-                        gotoSection = section;
+        if (!this.linksWithClickListeners.has(link)) {
+          link.addEventListener('click', e => {
+            let url = link.getAttribute('href');
+
+            if (url) {
+              if (url.indexOf('#') === 0) {
+                // Will go to bookmark
+                if (url.indexOf('#section') === 0) {
+                  let num = url.replace('#section', '');
+
+                  if (!isNaN(parseInt(num))) {
+                    let sections = this.doc.querySelectorAll('.is-section');
+                    let gotoSection;
+                    let x = 0;
+                    sections.forEach(function (section) {
+                      if (!dom.hasClass(section, 'is-section-navbar')) {
+                        if (x === num - 1) {
+                          gotoSection = section;
+                        }
+
+                        x++;
                       }
+                    });
 
-                      x++;
+                    if (gotoSection) {
+                      this.scrollTo(gotoSection);
                     }
-                  });
 
-                  if (gotoSection) {
-                    this.scrollTo(gotoSection);
+                    e.preventDefault();
                   }
+                } else {
+                  try {
+                    let bookmark = this.doc.querySelector(url);
 
-                  e.preventDefault();
-                }
-              } else {
-                try {
-                  let bookmark = this.doc.querySelector(url);
-
-                  if (bookmark) {
-                    this.scrollTo(bookmark);
-                    e.preventDefault();
+                    if (bookmark) {
+                      this.scrollTo(bookmark);
+                      e.preventDefault();
+                    }
+                  } catch (e) {// Do Nothing
                   }
-                } catch (e) {// Do Nothing
                 }
+              } else {
+                // Prevent to go to the link
+                if (e.target.closest('#is-menu-toggle')) return;
+                e.preventDefault();
+                e.stopImmediatePropagation();
               }
             } else {
-              // Prevent to go to the link
-              if (e.target.closest('#is-menu-toggle')) return;
-              e.preventDefault();
-              e.stopImmediatePropagation();
-            }
-          } else {
-            if (link.closest('.is-menu-search')) ; else {
-              if (!e.target.getAttribute('href')) return;
-              e.preventDefault();
-              e.stopImmediatePropagation();
+              if (link.closest('.is-menu-search')) ; else {
+                if (!e.target.getAttribute('href')) return;
+                e.preventDefault();
+                e.stopImmediatePropagation();
+              }
             }
-          }
-        });
+          });
+          this.linksWithClickListeners.add(link); // Mark the listener as added
+        }
       });
     }
   } // box
@@ -160498,7 +160883,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     '</div>');
     */
 
-    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Change Background') + '" title="' + out('Change Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select') + '" title="' + out('Select') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
+    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Upload Background') + '" title="' + out('Upload Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select Background') + '" title="' + out('Select Background') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
     let info = box.querySelector('.is-box-info');
     if (info) info.parentNode.removeChild(info);