@innovastudio/contentbuilder 1.5.80 → 1.5.82

package/public/contentbuilder/contentbuilder.esm.js

@@ -6299,8 +6299,8 @@ class Util {
         const newPos = this.getElementPosition(btnCellMore);
         let top = newPos.top;
         let left = newPos.left;
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
+        columnMore.style.top = top + 35 + window.pageYOffset + 'px';
+        columnMore.style.left = left - 7 + window.pageXOffset + 'px';
         setTimeout(() => {
           columnMore.classList.remove('transition1');
         }, 300);
@@ -15561,7 +15561,7 @@ const prepareSvgIcons = builder => {
                 <path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
             </symbol>
 
-            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
@@ -15639,7 +15639,7 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -15818,7 +15818,7 @@ const prepareSvgIcons = builder => {
                 <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -15833,6 +15833,47 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 12l14 0"></path>
             </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -16871,8 +16912,8 @@ class RowTool$1 {
     }
     */
     const newPos = this.builder.util.getElementPosition(elm);
-    let top = newPos.top;
-    let left = newPos.left;
+    let top = newPos.top + window.pageYOffset;
+    let left = newPos.left + window.pageXOffset;
 
     // const w = rowMore.offsetWidth; 
     rowMore.style.top = top - 8 + 'px';
@@ -45235,12 +45276,14 @@ class Image$1 {
       let html = `
                 <div id="divImageTool" class="is-tool">
                     <div role="button" tabindex="0" class="image-embed" style="${this.builder.opts.imageEmbed ? '' : 'display:none;'}width:40px;height:40px;overflow:hidden;">
-                        <div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 14px;height: 14px;"><use xlink:href="#ion-image"></use></svg></div>
+                        <div style="position:absolute;width:100%;height:100%;">
+                            <svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 16px;height: 16px;"><use xlink:href="#ion-image"></use></svg>
+                        </div>
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
-                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
+                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-folder2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
                     <div>
@@ -46402,28 +46445,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';
@@ -46437,6 +46485,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 {
@@ -48553,10 +48623,18 @@ class Hyperlink {
     let linkTool = builderStuff.querySelector('#divLinkTool');
     if (!linkTool) {
       let html = `<div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49148,9 +49226,15 @@ class Button {
     let buttonTool = builderStuff.querySelector('#divButtonTool');
     if (!buttonTool) {
       let html = `<div id="divButtonTool" class="is-tool">
-                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49282,8 +49366,8 @@ class Spacer {
     if (!spacerTool) {
       let html = `
             <div id="divSpacerTool" class="is-tool is-spacer-tool">
-                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49443,7 +49527,7 @@ class Module {
       let html = `
             <div class="is-tool is-module-tool">
                 <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49693,7 +49777,7 @@ class Code {
     if (!codeTool) {
       let html = `
             <div class="is-tool is-code-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49821,7 +49905,7 @@ class Iframe {
     if (!iframeTool) {
       let html = `
             <div class="is-tool is-iframe-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -49981,7 +50065,7 @@ class Table {
       //<div class="is-modal-bar is-draggable" style="background:#f9f9f9;"></div>
       let html = `
             <div class="is-tool is-table-tool">
-                <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -50539,7 +50623,7 @@ class Video {
     if (!videoTool) {
       let html = `
             <div class="is-tool is-video-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -50796,7 +50880,7 @@ class Audio {
     if (!audioTool) {
       let html = `
             <div class="is-tool is-audio-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -50989,7 +51073,7 @@ class Svg {
     if (!svgTool) {
       let html = `
             <div class="is-tool is-svg-tool">
-                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -51362,16 +51446,22 @@ 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>
-                <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>
+      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" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></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>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
             </div>
             <div class="is-tool is-col-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(row, html);
@@ -51773,7 +51863,7 @@ class RowTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -53258,17 +53348,7 @@ class ColumnTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="cell-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
-                    
-                    <!--
-                    <button title="${util.out('Lock')}" class="cell-locking">
-                        <svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
-                    </button>
-                    <button title="${util.out('Settings')}" class="cell-settings">
-                        <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
-                        <span>${util.out('Settings')}</span>
-                    </button>
-                    -->
+                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -60249,18 +60329,27 @@ class ElementTool {
     let elementMore = builderStuff.querySelector('.elmmore');
     if (!elementTool) {
       let html = `<div class="is-tool is-element-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                    <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                    <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+                </button>
             </div>
+
             <div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
                     <button type="button" title="${util.out('Move Up')}" class="elm-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
                     <button type="button" title="${util.out('Move Down')}" class="elm-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
                     <button type="button" title="${util.out('Duplicate')}" class="elm-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
                     ${this.builder.opts.elementEditor ? `
-                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                     ` : ''} 
                 </div>
             </div>
@@ -60311,7 +60400,7 @@ class ElementTool {
       const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = quickadd.offsetHeight;
       if (viewportHeight - top > h) {
-        quickadd.style.top = top + window.pageYOffset + 27 + 'px';
+        quickadd.style.top = top + window.pageYOffset + 42 + 'px';
         quickadd.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(quickadd, 'arrow-bottom');
         dom.removeClass(quickadd, 'arrow-right');
@@ -60476,7 +60565,7 @@ class ElementTool {
       const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = elementMore.offsetHeight;
       if (viewportHeight - top > h) {
-        elementMore.style.top = top + window.pageYOffset + 27 + 'px';
+        elementMore.style.top = top + window.pageYOffset + 42 + 'px';
         elementMore.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(elementMore, 'arrow-bottom');
         dom.removeClass(elementMore, 'arrow-right');
@@ -60772,6 +60861,9 @@ class ElementTool {
         }
       }
     }
+    if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
+      activeElement = this.builder.activeIframe.closest('.embed-responsive');
+    }
     this.builder.activeElement = activeElement;
     if (activeElement) {
       let elm = activeElement;
@@ -78367,54 +78459,83 @@ class ContentStuff {
   constructor(builder) {
     this.builder = builder;
     const util = builder.util;
-    const html = `<div class="is-tool is-column-tool">
+    const html = `
+        <!-- not used -->
+        <div class="is-tool is-column-tool">
             <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
         </div>
+        <!-- /not used -->
+
         <div class="is-tool is-element-tool">
-            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+            </button>
         </div>
 
         <div id="divButtonTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+            </button>
+            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+            </button>
+            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
         </div>
+
         <div class="is-tool is-code-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
+
         <div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
         </div>
+
         <div class="is-tool is-iframe-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-module-tool">
-            <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-            <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+        <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-svg-tool">
-            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div id="divSpacerTool" class="is-tool is-spacer-tool">
-            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
         </div>
         <div class="is-tool is-table-tool">
-            <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-video-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-audio-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;background:none;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>    
         </div>
         
         <div class="is-locked-indicator">
@@ -78534,7 +78655,7 @@ class ContentStuff {
             <symbol viewBox="0 0 512 512" id="ion-volume-medium">
                 <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -78545,6 +78666,64 @@ class ContentStuff {
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
             </symbol>
+
+
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </symbol>
+            <symbol id="icon-plus2" 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="M12 5l0 14"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-minus" 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="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
             </defs>
         </svg>
 
@@ -78738,6 +78917,9 @@ class ContentStuff {
         }
 
         /* Tool */
+
+
+        /*
         .is-tool.is-video-tool,
         .is-tool.is-audio-tool,
         .is-tool.is-iframe-tool {
@@ -78797,6 +78979,111 @@ class ContentStuff {
         .is-tool.is-table-tool:hover {
             z-index:10001 !important
         }
+        */
+
+
+        .is-tool.is-video-tool, 
+        .is-tool.is-audio-tool,
+        .is-tool.is-iframe-tool {
+            background: rgba(255, 255, 255, 0.97) !important;
+            border: transparent 1px solid;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+        }
+
+        .is-tool.is-video-tool > div, 
+        .is-tool.is-video-tool > button, 
+        .is-tool.is-audio-tool > div, 
+        .is-tool.is-audio-tool > button, 
+        .is-tool.is-iframe-tool > div, 
+        .is-tool.is-iframe-tool > button {
+            width: 35px !important;
+            height: 35px !important;
+            background: transparent;
+        }
+
+        .is-tool.is-video-tool svg, 
+        .is-tool.is-audio-tool svg, 
+        .is-tool.is-iframe-tool svg {
+            width: 17px;
+            height: 17px;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+        .is-tool.is-spacer-tool {
+            border: none;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+            overflow: hidden;
+        }
+        .is-tool.is-spacer-tool > button {
+            width: 40px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.97) !important;
+        }
+        .is-tool.is-spacer-tool > button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-table-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+        }
+        .is-tool.is-table-tool:hover {
+            z-index: 10001 !important;
+        }
+        .is-tool.is-table-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-table-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-code-tool, .is-tool.is-module-tool, .is-tool.is-svg-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+        }
+        .is-tool.is-code-tool > button, .is-tool.is-module-tool > button, .is-tool.is-svg-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-code-tool > button svg, .is-tool.is-module-tool > button svg, .is-tool.is-svg-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool#divLinkTool, .is-tool#divButtonTool {
+            background: rgba(255, 255, 255, 0.95) !important;
+            box-shadow: none;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            margin-top: -10px;
+            margin-left: 7px;
+        }
+        .is-tool#divLinkTool button, .is-tool#divButtonTool button {
+            width: 37px;
+            height: 37px;
+            background: transparent !important;
+        }
+        .is-tool#divLinkTool button svg, .is-tool#divButtonTool button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+
 
 
         .dot {
@@ -78890,19 +79177,25 @@ class ContentStuff {
         /* is-element-tool */
 
         .is-tool.is-element-tool {
-            background: rgba(243, 243, 243, 0.9);
             border-radius: 3px;
             overflow: hidden;
+            margin-top: 10px;
+            margin-left: 0px;
+            border-radius: 100px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            background-color: rgba(255, 255, 255, 0.97) !important;
         } 
         .is-tool.is-element-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 32px;
+            height: 31px;
             background: transparent;
+            color: #111;
         }
         .is-tool.is-element-tool svg {
             width: 14px;
             height: 14px;
-            fill: #111;
+            fill: #111 !important;
+            color: #111 !important;
         }
         .is-tool.is-element-tool .elm-more svg {
             width: 11px;
@@ -78974,8 +79267,8 @@ class ContentStuff {
         }
 
         .is-tool.is-row-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 28px; 
+            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -79107,10 +79400,11 @@ class ContentStuff {
             box-shadow: none;
             border-radius: 2px;
             overflow: hidden;
+            top: -3px !important;
         }
         .is-tool.is-col-tool button {
-            width: 25px;
-            height: 25px;
+            width: 28px;
+            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -79133,6 +79427,9 @@ class ContentStuff {
             width: 14px;
             height: 14px;
         }
+        .is-tool.is-col-tool svg * { /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
         
         .is-builder[gray] .is-tool.is-col-tool {
@@ -79246,6 +79543,9 @@ class ContentStuff {
             width: 19px;
             height: 19px;
         }
+        .is-tool.is-row-tool svg * {  /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
 
 
@@ -82112,8 +82412,6 @@ Important: Do not change the 'div.is-container' element!
   }
 }
 
-// import RecordRTC  from 'recordrtc';
-// import Recorder from 'opus-recorder'; // Using Recorder
 const dom = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -82461,6 +82759,9 @@ class Dictation {
     dom.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');
@@ -88942,6 +89243,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() {
@@ -88950,6 +89253,7 @@ class Editable {
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
   refresh() {
@@ -88957,23 +89261,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);
       });
     }
   }
@@ -89286,6 +89616,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;
@@ -91497,6 +91829,7 @@ class ContentBuilder {
       outlineMode: '',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       elementTool: true,
       elementHighlight: true,
@@ -94270,7 +94603,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);
@@ -96539,8 +96983,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 768;
-    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';
@@ -96572,6 +97016,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
@@ -96581,12 +97066,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: 768,
-      height: 512,
+      width: this.ai_width,
+      height: this.ai_height,
       steps,
       guidance,
       scheduler,
@@ -96612,10 +97167,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 {