@innovastudio/contentbox 1.4.1 → 1.4.3

package/public/contentbox/contentbox.esm.js

@@ -77537,7 +77537,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77573,7 +77574,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77608,7 +77610,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77693,7 +77696,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77710,7 +77714,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77819,7 +77824,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77836,7 +77842,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77895,7 +77902,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77912,7 +77920,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77974,7 +77983,8 @@ class Rte {
               pop.style.top = this.rteTool.style.top; //(top - (h/2) + 20) + 'px';
 
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -78202,7 +78212,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = top - h / 2 + 20 + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -78228,7 +78239,8 @@ class Rte {
                 } else if (this.builder.opts.toolbar === 'right') {
                   pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                   pop.style.left = 'auto';
-                  const viewportWidth = window.innerWidth;
+                  const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                   pop.style.right = viewportWidth - left + 9 + 'px';
                 } else {
                   pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px'; 
@@ -78245,7 +78257,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = top - h / 2 + 20 + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -78270,7 +78283,8 @@ class Rte {
                 } else if (this.builder.opts.toolbar === 'right') {
                   pop.style.top = parseInt(this.elementRteMoreOptions.style.top) + this.elementRteMoreOptions.offsetHeight - h + 'px';
                   pop.style.left = 'auto';
-                  const viewportWidth = window.innerWidth;
+                  const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                   pop.style.right = viewportWidth - left + 9 + 'px';
                 } else {
                   pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px'; 
@@ -78389,22 +78403,20 @@ class Rte {
 
       this.builder.setZoomOnArea(); // hide tools
 
-      /*
-      let tools = this.builderStuff.querySelectorAll('.is-tool');
-      Array.prototype.forEach.call(tools, (tool) => {
-          tool.style.display = '';
+      let tools = this.builder.doc.querySelectorAll('.is-tool');
+      Array.prototype.forEach.call(tools, tool => {
+        tool.style.display = '';
       });
-       let tool = this.builderStuff.querySelector('.is-column-tool');
+      let tool = this.builder.doc.querySelector('.is-column-tool');
       tool.style.display = 'none';
-       tools = this.builder.doc.querySelectorAll('.is-row-tool');
-      tools.forEach(tool=>{
-          tool.style.display = 'none';
+      tools = this.builder.doc.querySelectorAll('.is-row-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
       });
-       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-      tools.forEach(tool=>{
-          tool.style.opacity = 0;
+      tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+      tools.forEach(tool => {
+        tool.style.opacity = 0;
       });
-      */
 
       if (this.builder.onZoom) {
         let val = this.inpZoomSlider.value;
@@ -78426,23 +78438,27 @@ class Rte {
           });
         } // show & reposition
 
-        /*
+
         this.builder.elmTool.repositionElementTool();
-         let col = this.builder.activeCol;
-        let tool = this.builderStuff.querySelector('.is-column-tool');
+        let col = this.builder.activeCol;
+        let tool = this.builder.doc.querySelector('.is-column-tool');
         tool.style.display = '';
-        tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
-        tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
-         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
-        tools.forEach(tool=>{
-            tool.style.display = '';
+        tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+        tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        let tools = this.builder.doc.querySelectorAll('.is-row-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
         });
-         tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
-        tools.forEach(tool=>{
-            tool.style.opacity = '';
+        tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
+        tools.forEach(tool => {
+          tool.style.opacity = '';
         });
-        */
 
+        if (this.builder.onZoomEnd) {
+          let val = this.rteZoomSlider.value;
+          let scale = val / 100;
+          this.builder.onZoomEnd(scale);
+        }
 
         if (this.builder.onZoomEnd) {
           let val = this.inpZoomSlider.value;
@@ -78467,6 +78483,82 @@ class Rte {
         const h = pop.offsetHeight;
 
         if (!dom.hasClass(pop, 'active')) {
+          // Get realtime status
+          const elm = this.builder.activeElement;
+          let btns = pop.querySelectorAll('.rte-fontsize-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          const arrSizes = this.builder.opts.fontSizeClassValues;
+
+          for (var i = 0; i <= arrSizes.length - 1; i++) {
+            if (dom.hasClass(elm, 'size-' + arrSizes[i])) {
+              // Get current class
+              const btns = pop.querySelectorAll('.rte-fontsize-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+
+                if (parseInt(num) === arrSizes[i]) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          }
+
+          btns = pop.querySelectorAll('.rte-lineheight-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          let classes = this.builder.cssClasses.leading;
+
+          for (let i = 0; i < Object.keys(classes).length; i++) {
+            let className = Object.values(classes)[i];
+
+            if (dom.hasClass(elm, className)) {
+              const btns = pop.querySelectorAll('.rte-lineheight-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+                let val;
+                if (className === classes.leading_10) val = '1';
+                if (className === classes.leading_12) val = '1.2';
+                if (className === classes.leading_14) val = '1.4';
+                if (className === classes.leading_16) val = '1.6';
+                if (className === classes.leading_18) val = '1.8';
+                if (className === classes.leading_20) val = '2';
+                if (className === classes.leading_22) val = '2.2';
+
+                if (num === val) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          }
+
+          btns = pop.querySelectorAll('.rte-letterspacing-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          classes = this.builder.cssClasses.tracking;
+
+          for (let i = 0; i < Object.keys(classes).length; i++) {
+            let className = Object.values(classes)[i];
+
+            if (dom.hasClass(elm, className)) {
+              const btns = pop.querySelectorAll('.rte-letterspacing-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+                let val;
+                if (className === classes.tracking_025) val = '1';
+                if (className === classes.tracking_050) val = '2';
+
+                if (num === val) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          } // /Get realtime status
+
+
           this.util.showRtePop(pop, () => {
             if (this.builder.opts.toolbar === 'left') {
               pop.style.top = top - h / 2 + 20 + 'px';
@@ -78475,7 +78567,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -78492,7 +78585,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -79233,6 +79327,10 @@ class Rte {
           currentFontSize = Number(window.getComputedStyle(container).getPropertyValue('font-size').match(/\d+/)[0]);
         }
 
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-fontsize-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
         dom.execCommand('font-size', currentFontSize + 1 + 'px', (ok, container) => {
           // 1px is dummy so that it won't be cleaned in util.js (checkStyleIfSameAsParent) because of same size
           if (!ok) {
@@ -79278,6 +79376,10 @@ class Rte {
         util.restoreSelection(); //a must
 
         this.builder.uo.saveForUndo();
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-lineheight-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
 
         if (this.builder.useCssClasses) {
           const selection = dom.getSelection();
@@ -79459,6 +79561,10 @@ class Rte {
         util.restoreSelection(); //a must
 
         this.builder.uo.saveForUndo();
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-letterspacing-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
 
         if (this.builder.useCssClasses) {
           const selection = dom.getSelection();
@@ -79512,6 +79618,7 @@ class Rte {
             }
           }
 
+          if (this.builder.activeElement) this.builder.activeElement.style.letterSpacing = '';
           if (newClassName === classes.tracking_000) newClassName = ''; // clear for normal tracking
 
           dom.execCommandClass(newClassName, classes);
@@ -79689,7 +79796,7 @@ class Rte {
   //         } else if(this.builder.opts.toolbar === 'right') {
   //             pop.style.top = (parseInt(this.rteTool.style.top) + this.rteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
   //             pop.style.left = 'auto';
-  //             const viewportWidth = window.innerWidth;
+  //             const viewportWidth = document.body.clientWidth;//window.innerWidth;
   //             pop.style.right = (viewportWidth - left + 9) + 'px';  
   //         } else {
   //             pop.style.top = (top + 54 - 6) + 'px';
@@ -79725,7 +79832,8 @@ class Rte {
         } else if (this.builder.opts.toolbar === 'right') {
           pop.style.top = top - h / 2 + 20 + 'px';
           pop.style.left = 'auto';
-          const viewportWidth = window.innerWidth;
+          const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
           pop.style.right = viewportWidth - left + 9 + 'px';
         } else {
           pop.style.top = top + 54 - 6 + 'px';
@@ -79751,7 +79859,8 @@ class Rte {
           } else if (this.builder.opts.toolbar === 'right') {
             pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
             pop.style.left = 'auto';
-            const viewportWidth = window.innerWidth;
+            const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
             pop.style.right = viewportWidth - left + 9 + 'px';
           } else {
             pop.style.top = top + 54 - 6 + 'px';
@@ -79816,7 +79925,8 @@ class Rte {
       pop.style.top = parseFloat(this.rteTool.style.top) + this.rteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
 
       pop.style.left = 'auto';
-      const viewportWidth = window.innerWidth;
+      const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
       pop.style.right = viewportWidth - left + 9 + 'px';
     } else {
       const adj = 0;
@@ -79841,7 +79951,7 @@ class Rte {
   //         } else if(this.builder.opts.toolbar === 'right') {
   //             pop.style.top = (parseInt(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
   //             pop.style.left = 'auto';
-  //             const viewportWidth = window.innerWidth;
+  //             const viewportWidth = document.body.clientWidth;//window.innerWidth;
   //             pop.style.right = (viewportWidth - left + 9) + 'px';  
   //         } else {
   //             pop.style.top = (top + 54 - 6) + 'px';
@@ -79890,7 +80000,8 @@ class Rte {
       pop.style.top = parseFloat(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
 
       pop.style.left = 'auto';
-      const viewportWidth = window.innerWidth;
+      const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
       pop.style.right = viewportWidth - left + 9 + 'px';
     } else {
       const adj = 0;
@@ -81721,7 +81832,8 @@ class Rte {
   }
 
   positionToolbar() {
-    const viewportWidth = window.innerWidth;
+    const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
     const viewportHeight = window.innerHeight;
 
     if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
@@ -82147,6 +82259,7 @@ function isAChildOf(parent, child) {
 class Lightbox {
   constructor(builder) {
     this.builder = builder;
+    this.arrow = this.builder.lightboxArrow;
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     this.util = util;
@@ -82161,42 +82274,76 @@ class Lightbox {
     // } 
     // this.builderStuff = builderStuff;
 
-    this.id = this.makeid();
+    this.id = this.makeid(); // let html = `
+    //     <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;">
+    //             <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+    //             <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    //             </div>
+    //         </div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    //         <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
+    //             <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
+    //         </button>
+    //         <div class="lightbox-content" style="width:100%;"></div>
+    //     </div>
+    //     <svg width="0" height="0" style="position:absolute;display:none;">
+    //         <defs>
+    //             <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    //                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+    //             </symbol>
+    //         </defs>
+    //     </svg>
+    // `;
+
     let html = `
-            <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;">
-                    <div class="embed-responsive embed-responsive-16by9" style="width:100%;">
-                    <iframe tabindex="0" width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+                <div class="is-lightbox lightbox-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                    <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button">
+                        <svg><use xlink:href="#__${this.id}svgLightboxClose"></use></svg>
+                    </button>
+
+                    <div class="lightbox-content" style="width:100%;">
                     </div>
+
+                    <button class="cmd-lightbox-prev" title="${util.out('Previous')}" type="button" style="top:50%;left:3px;">
+                        <svg><use xlink:href="#__${this.id}svgLightboxLeft"></use></svg>
+                    </button>
+                    <button class="cmd-lightbox-next" title="${util.out('Next')}" type="button" style="top:50%;left:auto;right:3px">
+                        <svg><use xlink:href="#__${this.id}svgLightboxRight"></use></svg>
+                    </button>
                 </div>
-            </div>
-            <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
-                    <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
-                </button>
-                <div class="lightbox-content" style="width:100%;"></div>
-            </div>
-            <svg width="0" height="0" style="position:absolute;display:none;">
-                <defs>
-                    <symbol viewBox="0 0 24 24" id="_${this.id}svgIconClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
-                    </symbol>
-                </defs>
-            </svg>
-        `;
+
+                <svg width="0" height="0" style="position:absolute;display:none;">
+                    <defs>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxClose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                        </symbol>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxLeft" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="15 6 9 12 15 18"></polyline>
+                        </symbol>
+                        <symbol viewBox="0 0 24 24" id="__${this.id}svgLightboxRight" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <polyline points="9 6 15 12 9 18"></polyline>
+                        </symbol>
+                    </defs>
+                </svg>
+            `;
     dom.appendHtml(this.builderStuff, html);
 
     const close = () => {
-      let lightbox = document.querySelector('.is-lightbox.active');
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
       dom.removeClass(lightbox, 'active');
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
       btnClose.style.opacity = 0;
@@ -82208,28 +82355,78 @@ class Lightbox {
           iframe.setAttribute('src', 'about:blank');
         }
 
+        const div = lightbox.querySelector('.lightbox-content');
+        if (lightbox.querySelector('video')) div.innerHTML = '';
         lightbox.style.display = '';
         this.builder.preserveSelection = false;
         if (this.elmFocus) this.elmFocus.focus();
       }, 300);
     };
 
-    const handleItemKeyDown = e => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    const prev = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          let prevIndex;
+          prevIndex = (currentIndex - 1) % list.length;
+
+          if (prevIndex === -1) {
+            prevIndex = list.length - 1;
+          }
+
+          this.openThen(list[prevIndex]);
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.focus();
+        }
+      });
+    };
 
+    const next = () => {
+      const list = this.getList();
+      let lightbox = document.querySelector('.is-lightbox.lightbox-edit.active');
+      let url = lightbox.getAttribute('data-url');
+      list.forEach(item => {
+        if (url === item.url) {
+          const currentIndex = list.indexOf(item);
+          const nextIndex = (currentIndex + 1) % list.length;
+          this.openThen(list[nextIndex]);
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.focus();
+        }
+      });
+    };
+
+    const handleItemKeyDown = e => {
       if (e.keyCode === 27) {
         // escape key
         close();
-      } else if (e.which === 9 && !e.shiftKey) {
-        // tab key pressed
+        e.preventDefault();
+      }
+      /*else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed
         let lightbox = document.querySelector('.is-lightbox.active');
         const btnClose = lightbox.querySelector('.cmd-lightbox-close');
         btnClose.focus();
+        e.preventDefault();
+      }*/
+
+
+      if (this.arrow) {
+        if (e.which === 37 && !e.shiftKey) {
+          // left
+          prev();
+        }
+
+        if (e.which === 39 && !e.shiftKey) {
+          // right
+          next();
+        }
       }
     };
 
-    const lightboxes = this.builderStuff.querySelectorAll('.lightbox-externalvideo-edit,.lightbox-video-edit,.lightbox-image-edit');
+    const lightboxes = this.builderStuff.querySelectorAll('div.lightbox-edit');
     lightboxes.forEach(lightbox => {
       lightbox.addEventListener('keydown', handleItemKeyDown);
       const btnClose = lightbox.querySelector('.cmd-lightbox-close');
@@ -82247,6 +82444,32 @@ class Lightbox {
         e.preventDefault();
         e.stopImmediatePropagation();
       });
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      if (btnPrev) btnPrev.addEventListener('click', e => {
+        prev();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnPrev) btnPrev.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          prev();
+          e.preventDefault();
+        }
+      });
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      if (btnNext) btnNext.addEventListener('click', e => {
+        next();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      });
+      if (btnNext) btnNext.addEventListener('keydown', e => {
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          // enter or spacebar key
+          next();
+          e.preventDefault();
+        }
+      });
     }); // this.init();
   } //constructor
 
@@ -82302,21 +82525,89 @@ class Lightbox {
   */
 
 
+  openThen(item) {
+    if (item.type === 'image') {
+      this.programmatically = true;
+      this.openImage(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'video') {
+      this.programmatically = true;
+      this.openVideo(item.url, item.theme, item.color);
+    }
+
+    if (item.type === 'externalvideo') {
+      this.programmatically = true;
+      this.openExternalVideo(item.url, item.theme, item.color);
+    }
+  }
+
   openImage(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-image-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.add('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<img src="${url}">`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<img src="${url}">`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<img src="${url}">`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82328,34 +82619,82 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-video-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-video-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
+    }
+
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.add('lightbox-video');
+    lightbox.classList.remove('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
     const div = lightbox.querySelector('.lightbox-content');
-    div.innerHTML = `<video class="is-video-bg" playsinline controls autoplay width="100%">
-            <source src="${url}" type="video/mp4">
-        </video>`;
+
+    if (!this.programmatically) {
+      div.innerHTML = `<video playsinline controls autoplay width="100%">
+                <source src="${url}" type="video/mp4">
+            </video>`;
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
+      setTimeout(() => {
+        div.innerHTML = `<video playsinline controls autoplay width="100%">
+                    <source src="${url}" type="video/mp4">
+                </video>`;
+        div.style.opacity = '1';
+      }, 200);
+    }
 
     if (theme === 'light') {
       dom.addClass(lightbox, 'light');
@@ -82367,29 +82706,65 @@ class Lightbox {
 
     lightbox.style.display = 'flex';
     if (!window.frameElement) document.body.style.overflowY = 'hidden';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
-      setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   openExternalVideo(url, theme, color) {
     const dom = this.dom;
-    if (document.activeElement) this.elmFocus = document.activeElement;
+
+    if (this.builder.doc.activeElement) {
+      this.elmFocus = this.builder.doc.activeElement;
+
+      if (!this.programmatically) {
+        const parent = this.builder.doc.activeElement.closest('[data-gallery]');
+        this.parent = parent;
+      }
+    }
+
     this.builder.preserveSelection = true;
-    let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo-edit'); // in case opened in an iframe (ex. preview)
+    let lightbox = document.querySelector('.is-lightbox.lightbox-edit'); // in case opened in an iframe (ex. preview)
 
     if (window.frameElement && !lightbox) {
-      lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo-edit');
+      lightbox = parent.document.querySelector('.is-lightbox.lightbox-edit');
     }
 
-    const btnClose = lightbox.querySelector('.cmd-lightbox-close');
-    btnClose.style.opacity = 0;
+    if (!this.programmatically) {
+      const list = this.getList();
+      const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+      btnPrev.style.opacity = 0;
+      const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+      btnNext.style.opacity = 0;
+      btnPrev.style.display = 'none';
+      btnNext.style.display = 'none';
+
+      if (list.length > 1 && this.arrow) {
+        btnPrev.style.display = 'flex';
+        btnNext.style.display = 'flex';
+        setTimeout(() => {
+          const btnPrev = lightbox.querySelector('.cmd-lightbox-prev');
+          btnPrev.style.opacity = 1;
+          const btnNext = lightbox.querySelector('.cmd-lightbox-next');
+          btnNext.style.opacity = 1;
+        }, 500);
+      }
+
+      const btnClose = lightbox.querySelector('.cmd-lightbox-close');
+      btnClose.style.opacity = 0;
+      setTimeout(() => {
+        dom.addClass(lightbox, 'active');
+        setTimeout(() => {
+          btnClose.style.opacity = 1;
+        }, 450);
+      }, 10);
+    }
+
+    lightbox.setAttribute('data-url', url);
+    lightbox.classList.remove('lightbox-video');
+    lightbox.classList.add('lightbox-externalvideo');
+    lightbox.classList.remove('lightbox-image');
     if (color) lightbox.style.backgroundColor = color;
 
     if (theme === 'light') {
@@ -82400,22 +82775,37 @@ class Lightbox {
       dom.removeClass(lightbox, 'light');
     }
 
-    const iframe = lightbox.querySelector('iframe');
-    url = this.getIframeVideoUrl(url);
-    if (url !== '') iframe.setAttribute('src', url);
-    lightbox.style.display = 'flex';
-    if (!window.frameElement) document.body.style.overflowY = 'hidden';
     const div = lightbox.querySelector('.lightbox-content');
-    div.style.width = div.offsetHeight * 16 / 9 + 'px';
-    setTimeout(() => {
-      dom.addClass(lightbox, 'active');
+
+    if (!this.programmatically) {
+      div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>`;
+      const iframe = lightbox.querySelector('iframe');
+      url = this.getIframeVideoUrl(url);
+      if (url !== '') iframe.setAttribute('src', url);
+    } else {
+      div.style.transition = 'all 200ms ease';
+      div.style.opacity = '0';
       setTimeout(() => {
-        btnClose.style.opacity = 1;
-      }, 450);
-    }, 10);
+        div.innerHTML = `<div class="embed-responsive embed-responsive-16by9" style="width:100%;">
+                    <iframe width="560" height="315" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>`;
+        div.style.opacity = '1';
+        const iframe = lightbox.querySelector('iframe');
+        url = this.getIframeVideoUrl(url);
+        if (url !== '') iframe.setAttribute('src', url);
+      }, 200);
+    }
+
+    lightbox.style.display = 'flex';
+    if (!window.frameElement) document.body.style.overflowY = 'hidden'; // const div = lightbox.querySelector('.lightbox-content');
+    // div.style.width=((div.offsetHeight*16)/9) + 'px';
+
     lightbox.focus({
       preventScroll: true
     });
+    this.programmatically = false;
   }
 
   getIframeVideoUrl(src) {
@@ -82459,6 +82849,88 @@ class Lightbox {
     return text + text2;
   }
 
+  getList() {
+    const arrGallery = [];
+    let blockClickables = this.builder.doc.querySelectorAll('.block-click,.button-click,.is-lightbox');
+
+    if (this.parent) {
+      blockClickables = this.parent.querySelectorAll('.block-click,.button-click,.is-lightbox');
+    }
+
+    blockClickables.forEach(block => {
+      if (!this.parent) {
+        if (block.closest('[data-gallery')) return;
+      }
+
+      let url;
+      let extension;
+
+      if (block.tagName.toLowerCase() === 'a') {
+        url = block.getAttribute('href');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      } else if (block.getAttribute('data-modal-url')) {
+        url = block.getAttribute('data-modal-url');
+        extension = url.split('.').pop().split('?')[0].split('#')[0];
+      }
+
+      let theme = block.getAttribute('data-modal-theme');
+      if (!theme) theme = 'light';
+      const color = block.getAttribute('data-modal-color');
+
+      if (url) {
+        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
+          arrGallery.push({
+            type: 'image',
+            url: url,
+            theme: theme,
+            color: color
+          });
+        } else if (extension === 'mp4') {
+          arrGallery.push({
+            type: 'video',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        } else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
+          arrGallery.push({
+            type: 'externalvideo',
+            url: url,
+            theme: 'dark',
+            color: color
+          });
+        }
+      }
+
+      if (block.getAttribute('data-modal-image')) {
+        url = block.getAttribute('data-modal-image');
+        arrGallery.push({
+          type: 'image',
+          url: url,
+          theme: theme,
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-video')) {
+        url = block.getAttribute('data-modal-video');
+        arrGallery.push({
+          type: 'video',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      } else if (block.getAttribute('data-modal-externalvideo')) {
+        url = block.getAttribute('data-modal-externalvideo');
+        arrGallery.push({
+          type: 'externalvideo',
+          url: url,
+          theme: 'dark',
+          color: color
+        });
+      }
+    });
+    return arrGallery;
+  }
+
 } //Lightbox
 
 class ShortcutInfo {
@@ -83078,6 +83550,13 @@ class Resize {
       pane: col,
       onResize: (width, height) => {
         this.builder.util.hideControls();
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
 
         if (width) {
           col.style.flex = 'none';
@@ -83101,16 +83580,29 @@ class Resize {
             // Adjust to max
             // percentage = (max / row.offsetWidth) * 100;
             // Or make others auto
-            let numOfCols = 1;
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
-              numOfCols++;
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
 
             if (numOfCols === 1) {
@@ -83140,6 +83632,14 @@ class Resize {
         }
       },
       resizeEnd: () => {
+        let numOfCols = 1;
+        Array.from(col.parentNode.children).map(item => {
+          if (item.classList.contains('is-row-tool')) return;
+          if (item.classList.contains('is-rowadd-tool')) return;
+          if (item === col) return;
+          numOfCols++;
+        });
+
         if (col.style.width) {
           col.style.width = col.offsetWidth + 'px'; // change from % to px
 
@@ -83168,10 +83668,25 @@ class Resize {
               if (item.classList.contains('is-row-tool')) return;
               if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item === col) return; // item.style.width = '100%';
+              if (item === col) return; // // item.style.width = '100%';
+              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // item.style.flex = '';
 
-              if (!item.getAttribute('data-module')) item.style.width = '100%';
-              item.style.flex = '';
+              if (numOfCols === 2) {
+                if (!item.getAttribute('data-module')) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              } else {
+                // if(!item.getAttribute('data-module') && !item.style.width) {
+                //     item.style.width = '100%';
+                //     item.style.flex = '';
+                // }
+                if (!item.getAttribute('data-module') && item === col.nextElementSibling) {
+                  item.style.width = '100%';
+                  item.style.flex = '';
+                }
+              }
             });
           } // /adjust others
           // New: Final fix (if column resized exceeds its max)
@@ -83225,12 +83740,11 @@ class Resize {
             item.style.height = '';
             item.style.minHeight = '';
           });
-        } // To position columnTool correctly, add delay.
+        } // // To position columnTool correctly, add delay.
+        // setTimeout(()=>{
+        //     col.click();
+        // },30);
 
-
-        setTimeout(() => {
-          col.click();
-        }, 30);
       }
     });
   }
@@ -84380,6 +84894,7 @@ class ContentBuilder {
       //set -1 for no max (use original image width)
       zoom: 1,
       useLightbox: false,
+      lightboxArrow: true,
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
 
@@ -85098,8 +85613,8 @@ class ContentBuilder {
 
       if (!(b || j || m || n || target.tagName.toLowerCase() === 'img')) {
         let imageTool = document.querySelector('#divImageTool');
-        imageTool.style.display = '';
-        this.activeImage = null;
+        imageTool.style.display = ''; // this.activeImage =  null; // Commented => Additional (to prevent lost focus)
+
         let imageResizer = document.querySelector('#divImageResizer');
         imageResizer.style.display = 'none'; // moveable
 
@@ -85117,9 +85632,14 @@ class ContentBuilder {
       if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
         if (!this.dom.getSelected()) {
-          util.clearActiveCell();
-          util.clearControls();
+          if (!document.querySelector('.is-modal.active')) {
+            // Additional (to prevent lost focus)
+            util.clearActiveCell();
+            util.clearControls();
+          }
         }
+
+        this.element.hyperlink.buttonEditor.hide();
       } // Button Modal
 
 
@@ -85859,7 +86379,8 @@ class ContentBuilder {
   }
 
   selectAsset(s) {
-    let extension = s.split('.').pop();
+    let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
+
     extension = extension.toLowerCase();
     let ok = false;
 
@@ -86754,7 +87275,7 @@ class ContentBuilder {
 
     if (elm.getAttribute('data-modal-url')) {
       url = elm.getAttribute('data-modal-url');
-      let extension = url.split('.').pop();
+      let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
 
       if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
         this.lightbox.openImage(url, theme, color);
@@ -86871,7 +87392,8 @@ class ContentBuilder {
               return false;
             }
 
-            let extension = url.split('.').pop();
+            let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
+
             let theme = link.getAttribute('data-modal-theme');
             if (!theme) theme = 'light';
             const color = elm.getAttribute('data-modal-color');
@@ -89220,6 +89742,7 @@ class ContentBox {
   constructor(settings = {}) {
     const defaults = {
       wrapper: '.is-wrapper',
+      previewURL: 'preview.html',
       sectionHoverOutline: false,
       useSidebar: true,
       disableLoadingStatus: false,
@@ -89294,6 +89817,7 @@ class ContentBox {
       }],
       disableConfig: false,
       useLightbox: true,
+      lightboxArrow: true,
       themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css'], ['#0088dc', 'colored', 'contentbuilder/themes/colored-blue.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue6.css'], ['#0a4d92', 'colored', 'contentbuilder/themes/colored-darkblue.css'], ['#96af16', 'colored', 'contentbuilder/themes/colored-green.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-orange.css'], ['#b92ea6', 'colored', 'contentbuilder/themes/colored-magenta.css'], ['#e73171', 'colored', 'contentbuilder/themes/colored-pink.css'], ['#782ec5', 'colored', 'contentbuilder/themes/colored-purple.css'], ['#ed2828', 'colored', 'contentbuilder/themes/colored-red.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow.css'], ['#13b34b', 'colored', 'contentbuilder/themes/colored-green4.css'], ['#333333', 'colored-dark', 'contentbuilder/themes/colored-dark.css'], ['#dbe5f5', 'light', 'contentbuilder/themes/light-blue.css'], ['#fbe6f2', 'light', 'contentbuilder/themes/light-pink.css'], ['#dcdaf3', 'light', 'contentbuilder/themes/light-purple.css'], ['#ffe9e0', 'light', 'contentbuilder/themes/light-red.css'], ['#fffae5', 'light', 'contentbuilder/themes/light-yellow.css'], ['#ddf3dc', 'light', 'contentbuilder/themes/light-green.css'], ['#c7ebfd', 'light', 'contentbuilder/themes/light-blue2.css'], ['#ffd5f2', 'light', 'contentbuilder/themes/light-pink2.css'], ['#eadafb', 'light', 'contentbuilder/themes/light-purple2.css'], ['#c5d4ff', 'light', 'contentbuilder/themes/light-blue3.css'], ['#ffefb1', 'light', 'contentbuilder/themes/light-yellow2.css'], ['#fefefe', 'light', 'contentbuilder/themes/light-gray3.css'], ['#e5e5e5', 'light', 'contentbuilder/themes/light-gray2.css'], ['#dadada', 'light', 'contentbuilder/themes/light-gray.css'], ['#3f4ec9', 'colored', 'contentbuilder/themes/colored-blue2.css'], ['#6779d9', 'colored', 'contentbuilder/themes/colored-blue4.css'], ['#10b9d7', 'colored', 'contentbuilder/themes/colored-blue3.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue5.css'], ['#e92f94', 'colored', 'contentbuilder/themes/colored-pink3.css'], ['#a761d9', 'colored', 'contentbuilder/themes/colored-purple2.css'], ['#f9930f', 'colored', 'contentbuilder/themes/colored-yellow2.css'], ['#f3522b', 'colored', 'contentbuilder/themes/colored-red3.css'], ['#36b741', 'colored', 'contentbuilder/themes/colored-green2.css'], ['#00c17c', 'colored', 'contentbuilder/themes/colored-green3.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink2.css'], ['#ff6d13', 'colored', 'contentbuilder/themes/colored-orange2.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red2.css'], ['#646464', 'colored', 'contentbuilder/themes/colored-gray.css'], ['#3f4ec9', 'dark', 'contentbuilder/themes/dark-blue.css'], ['#0b4d92', 'dark', 'contentbuilder/themes/dark-blue2.css'], ['#006add', 'dark', 'contentbuilder/themes/dark-blue3.css'], ['#5f3ebf', 'dark', 'contentbuilder/themes/dark-purple.css'], ['#e92f69', 'dark', 'contentbuilder/themes/dark-pink.css'], ['#4c4c4c', 'dark', 'contentbuilder/themes/dark-gray.css'], ['#ed2828', 'dark', 'contentbuilder/themes/dark-red.css'], ['#006add', 'colored', 'contentbuilder/themes/colored-blue8.css'], ['#ff7723', 'colored', 'contentbuilder/themes/colored-orange3.css'], ['#ff5722', 'colored', 'contentbuilder/themes/colored-red5.css'], ['#f13535', 'colored', 'contentbuilder/themes/colored-red4.css'], ['#00bd79', 'colored', 'contentbuilder/themes/colored-green5.css'], ['#557ae9', 'colored', 'contentbuilder/themes/colored-blue7.css'], ['#fb3279', 'colored', 'contentbuilder/themes/colored-pink4.css']],
       backgroundColor: '#f1f1f1',
       imageselect: '',
@@ -91807,6 +92331,7 @@ class ContentBox {
       //     }, 100);
       // },
       useLightbox: this.settings.useLightbox,
+      lightboxArrow: this.settings.lightboxArrow,
       themes: this.settings.themes,
       moduleConfig: this.settings.moduleConfig,
       onImageSelectClick: this.settings.onImageSelectClick,