@innovastudio/contentbuilder 1.5.15 → 1.5.16

package/public/contentbuilder/contentbuilder.esm.js

@@ -11527,7 +11527,7 @@ class HtmlUtil {
       elm.removeAttribute('grideditor');
       elm.removeAttribute('gridoutline');
     });
-    elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
+    elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool,.h-ruler,.v-ruler');
     elms.forEach(elm => {
       if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
         elm.previousSibling.remove();
@@ -11904,6 +11904,8 @@ class UndoRedo {
     dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
     dom.removeElements(tmp.querySelectorAll('.ovl'));
     dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
+    dom.removeElements(tmp.querySelectorAll('.h-ruler'));
+    dom.removeElements(tmp.querySelectorAll('.v-ruler'));
 
     // freeform
     elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
@@ -12562,11 +12564,11 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
             </symbol>
 
-            <symbol id="icon-duplicate" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-duplicate2" 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 d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
             </symbol>
-            <symbol id="icon-duplicate2" 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 d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
+            <symbol id="icon-duplicate" 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 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-trash" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -64525,7 +64527,7 @@ class Rte {
       let html_elementrte = '';
       for (j = 0; j < builder.opts.elementButtons.length; j++) {
         btn = builder.opts.elementButtons[j].toLowerCase();
-        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:16px;height:16px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_elementrte += '<div class="rte-separator"></div>';
         } else {
           html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -64701,6 +64703,9 @@ class Rte {
                     <div style="padding-top:4px">
                         <input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
                     </div>
+                    <div style="display:flex;justify-content:flex-end">
+                        <button title="${util.out('Reset')}" class="reset-zoom" style="background:transparent;padding:0;height:27px;text-decoration:underline">${util.out('Reset')}</button>
+                    </div>
                 </div>
             </div>
 
@@ -65879,6 +65884,16 @@ class Rte {
       showTools();
     });
 
+    // Reset Zoom
+    const btnResetZoom = builderStuff.querySelector('.reset-zoom');
+    btnResetZoom.addEventListener('click', () => {
+      this.builder.opts.zoom = 1;
+      localStorage.setItem('_zoom', 1); // Save
+
+      // setZoomOnArea
+      this.builder.setZoomOnArea();
+    });
+
     // Zoom Modal
     this.inpZoomSlider.onfocus = () => {
       if (this.builder.onZoomStart) {
@@ -73397,7 +73412,6 @@ class ContentStuff {
             <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>
         </div>
         
-
         <div class="is-locked-indicator">
             <svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
         </div>
@@ -73891,6 +73905,35 @@ class ContentStuff {
         }
         .is-tool.is-element-tool .elm-settings { display: none; }
 
+        /* is-block-tool 
+
+        .is-tool.is-block-tool {
+            background: rgba(243, 243, 243, 0.9);
+            border-radius: 3px;
+            overflow: hidden;
+            top: 3px;
+            right: 3px;
+            left: auto;
+            width: 25px;
+        } 
+        .is-tool.is-block-tool button {
+            width: 25px; 
+            height: 25px;
+            background: transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .is-tool.is-block-tool svg {
+            width: 14px;
+            height: 14px;
+            fill: #000;
+        }
+        .is-block.active:not(.multi):not(.editable) .is-block-tool {
+            display:flex;
+        }
+        */
+
         /* is-column-tool */
 
         .is-tool.is-column-tool {
@@ -81759,7 +81802,25 @@ class Common {
   applyPercentage(block) {
     const zoom = this.zoom;
     const rect = this.getRect(block);
-    const container = block.parentNode;
+    const container = block.closest('.box-canvas');
+    const containerRect = this.getRect(container); // if container has top/left
+
+    this.horizontalRulerTop = container.querySelector('.h-ruler-top');
+    this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
+    this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
+    this.verticalRulerLeft = container.querySelector('.v-ruler-left');
+    this.verticalRulerRight = container.querySelector('.v-ruler-right');
+    this.verticalRulerCenter = container.querySelector('.v-ruler-center');
+
+    // Check Edges
+    let topTouched = false;
+    let bottomTouched = false;
+    let leftTouched = false;
+    let rightTouched = false;
+    if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
+    if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
+    if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
+    if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
     let isChildBlock = false;
     if (block.parentNode.matches(this.selector)) {
       // child block
@@ -81767,7 +81828,7 @@ class Common {
     }
 
     // const containerRect = container.getBoundingClientRect(); // if container has top/left
-    const containerRect = this.getRect(container); // if container has top/left
+    // const containerRect = this.getRect(container); // if container has top/left
     let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
     let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
     let isBlockFixed = block.classList.contains('block-steady');
@@ -81806,6 +81867,35 @@ class Common {
       block.style.left = left / zoom + '%';
       if (block.classList.contains('height-auto')) block.style.height = '';
     }
+
+    // Check
+
+    block.style.right = ''; //reset
+    block.style.bottom = ''; //reset
+
+    if (topTouched) block.style.top = 0;
+    // if(topTouched && bottomTouched) block.style.height = '100%';
+    if (leftTouched) block.style.left = 0;
+    // if(leftTouched && rightTouched) block.style.width = '100%';
+
+    if (topTouched && bottomTouched) {
+      block.style.top = 0;
+      block.style.bottom = 0;
+      block.style.height = '';
+    }
+    if (leftTouched && rightTouched) {
+      block.style.left = 0;
+      block.style.right = 0;
+      block.style.width = '';
+    }
+    if (bottomTouched && !topTouched) {
+      block.style.bottom = 0;
+      block.style.height = '';
+    }
+    if (rightTouched && !leftTouched) {
+      block.style.right = 0;
+      block.style.width = '';
+    }
   }
   applyPixels(block) {
     const zoom = this.zoom;
@@ -81960,15 +82050,16 @@ class Common {
         right = Math.max(right, blockLeft + blockWidth);
       }
     });
+    const container = blocks[0].parentNode;
+    const containerRect = this.getRect(container);
     const group = this.doc.createElement('div');
     group.classList.add(className);
     group.classList.add(groupClassName);
     group.classList.add('block-steady');
-    group.style.top = top + 'px';
-    group.style.left = left + 'px';
+    group.style.top = top - containerRect.top + 'px';
+    group.style.left = left - containerRect.left + 'px';
     group.style.width = right + 1 - left + 'px';
     group.style.height = bottom + 1 - top + 'px';
-    const container = blocks[0].parentNode;
     container.appendChild(group);
     blocks.forEach(block => {
       if (!block.parentNode.matches(this.selector)) {
@@ -81977,8 +82068,8 @@ class Common {
         let blockLeft = parseFloat(block.style.left) || 0;
 
         // Adjust position relative to the group div
-        block.style.top = blockTop - top + 'px';
-        block.style.left = blockLeft - left + 'px';
+        block.style.top = blockTop - top + containerRect.top + 'px';
+        block.style.left = blockLeft - left + containerRect.left + 'px';
         group.appendChild(block);
         this.applyPercentage(block);
       }
@@ -82033,14 +82124,15 @@ class Common {
     const top = rect.top;
     const left = rect.left;
     const container = group.parentNode;
+    const containerRect = this.getRect(container);
     group.querySelectorAll(this.selector).forEach(block => {
       this.applyPixels(block);
       let blockTop = parseFloat(block.style.top) || 0;
       let blockLeft = parseFloat(block.style.left) || 0;
 
       // Adjust position relative to the group div
-      block.style.top = blockTop + top + 'px';
-      block.style.left = blockLeft + left + 'px';
+      block.style.top = blockTop + top - containerRect.top + 'px';
+      block.style.left = blockLeft + left - containerRect.left + 'px';
       container.appendChild(block);
 
       // Remove all breakpoints
@@ -82252,10 +82344,23 @@ class Ruler {
     this.zoom = scale;
   }
   setup() {
-    this.elements = this.doc.querySelectorAll(this.selector);
+    // this.elements = this.doc.querySelectorAll(this.selector);
+    this.refresh();
   }
   refresh() {
     this.elements = this.doc.querySelectorAll(this.selector);
+    const rulerHTML = `
+            <div class="ruler h-ruler h-ruler-top""></div>
+            <div class="ruler h-ruler h-ruler-bottom"></div>
+            <div class="ruler h-ruler h-ruler-middle"></div>
+            <div class="ruler v-ruler v-ruler-left"></div>
+            <div class="ruler v-ruler v-ruler-right"></div>
+            <div class="ruler v-ruler v-ruler-center"></div>
+        `;
+    const containers = this.doc.querySelectorAll('.box-canvas');
+    containers.forEach(container => {
+      if (!container.querySelector('.h-ruler-top')) container.insertAdjacentHTML('beforeend', rulerHTML);
+    });
   }
   destroy() {
     [this.horizontalRulerTop, this.horizontalRulerBottom, this.verticalRulerLeft, this.verticalRulerRight].forEach(elm => {
@@ -82263,6 +82368,18 @@ class Ruler {
     });
   }
   hideRulers() {
+    this.horizontalRulerTop.classList.remove('active');
+    this.horizontalRulerBottom.classList.remove('active');
+    this.horizontalRulerMiddle.classList.remove('active');
+    this.verticalRulerLeft.classList.remove('active');
+    this.verticalRulerRight.classList.remove('active');
+    this.verticalRulerCenter.classList.remove('active');
+    this.rulerTop = null;
+    this.rulerBottom = null; //new
+    this.rulerLeft = null;
+    this.rulerRight = null;
+  }
+  hideRulers_bak() {
     this.horizontalRulerTop.style.top = '-1000px';
     this.horizontalRulerBottom.style.top = '-1000px';
     this.horizontalRulerMiddle.style.top = '-1000px';
@@ -82270,10 +82387,207 @@ class Ruler {
     this.verticalRulerRight.style.left = '-1000px';
     this.verticalRulerCenter.style.left = '-1000px';
     this.rulerTop = null;
+    this.rulerBottom = null; //new
     this.rulerLeft = null;
     this.rulerRight = null;
   }
   updateRulers(block) {
+    const container = block.closest('.box-canvas');
+    this.horizontalRulerTop = container.querySelector('.h-ruler-top');
+    this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
+    this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
+    this.verticalRulerLeft = container.querySelector('.v-ruler-left');
+    this.verticalRulerRight = container.querySelector('.v-ruler-right');
+    this.verticalRulerCenter = container.querySelector('.v-ruler-center');
+    let transform = block.style.transform;
+    if (transform.includes('rotate') || transform.includes('matrix3d')) return;
+    let parentTransform = block.parentNode.style.transform;
+    if (parentTransform.includes('rotate')) return;
+    this.hideRulers();
+    const top = block.offsetTop;
+    const bottom = top + block.offsetHeight;
+    const left = block.offsetLeft;
+    const right = left + block.offsetWidth;
+    const center = left + block.offsetWidth / 2;
+    const middle = top + block.offsetHeight / 2;
+    this.rulerTop = null;
+    this.rulerBottom = null; //new
+    this.rulerLeft = null;
+    this.rulerRight = null;
+    this.elements = container.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
+
+      if (block.contains(element)) return; // In case of group moving
+
+      let transform = element.style.transform;
+      let parentTransform = element.parentNode.style.transform;
+      if (!transform.includes('rotate') && !parentTransform.includes('rotate') && !transform.includes('matrix3d') && !parentTransform.includes('matrix3d') && element !== block && !element.classList.contains('cloned')) {
+        const otherTop = element.offsetTop;
+        const otherBottom = otherTop + element.offsetHeight;
+        const otherLeft = element.offsetLeft;
+        const otherRight = otherLeft + element.offsetWidth;
+        const otherMiddle = otherTop + element.offsetHeight / 2;
+        const otherCenter = otherLeft + element.offsetWidth / 2;
+
+        // block top
+        if (otherTop - 4 <= top && top <= otherTop + 4) {
+          this.horizontalRulerTop.style.top = otherTop + 'px';
+          this.horizontalRulerTop.classList.add('active');
+          let val = otherTop;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+        if (otherBottom - 4 <= top && top <= otherBottom + 4) {
+          this.horizontalRulerTop.style.top = otherBottom + 'px';
+          this.horizontalRulerTop.classList.add('active');
+          let val = otherBottom;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+
+        // block bottom
+        if (otherTop - 4 <= bottom && bottom <= otherTop + 4) {
+          /*
+                              _____
+          ___________________|__x__|__ rulerBottom
+          | other |
+           */
+          this.horizontalRulerBottom.style.top = otherTop + 'px';
+          this.horizontalRulerBottom.classList.add('active');
+          if (this.rulerBottom === null) this.rulerBottom = element.offsetTop; // new
+        }
+
+        if (otherBottom - 4 <= bottom && bottom <= otherBottom + 4) {
+          /*
+                              _____
+          | other |__________|__x__|__ rulerBottom
+          
+          */
+          this.horizontalRulerBottom.style.top = otherBottom + 'px';
+          this.horizontalRulerBottom.classList.add('active');
+          if (this.rulerBottom === null) this.rulerBottom = element.offsetTop + element.offsetHeight; // new
+        }
+
+        // block middle
+        if (this.rulerTop === null && this.rulerBottom === null) {
+          if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
+            this.horizontalRulerMiddle.style.top = otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
+            this.horizontalRulerMiddle.classList.add('active');
+            let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
+            if (this.rulerTop === null) this.rulerTop = val;
+          }
+        }
+
+        // block left
+        if (otherLeft - 4 <= left && left <= otherLeft + 4) {
+          this.verticalRulerLeft.style.left = otherLeft + 'px';
+          this.verticalRulerLeft.classList.add('active');
+          let val = otherLeft;
+          if (this.rulerLeft === null) this.rulerLeft = val;
+        }
+        if (otherRight - 4 <= left && left <= otherRight + 4) {
+          this.verticalRulerLeft.style.left = otherRight + 'px';
+          this.verticalRulerLeft.classList.add('active');
+          let val = otherRight;
+          if (this.rulerLeft === null) this.rulerLeft = val;
+        }
+
+        // block right
+        if (otherLeft - 4 <= right && right <= otherLeft + 4) {
+          this.verticalRulerRight.style.left = otherLeft + 'px';
+          this.verticalRulerRight.classList.add('active');
+          let val = otherLeft;
+          if (this.rulerRight === null) this.rulerRight = val;
+        }
+        if (otherRight - 4 <= right && right <= otherRight + 4) {
+          this.verticalRulerRight.style.left = otherRight + 'px';
+          this.verticalRulerRight.classList.add('active');
+          let val = otherRight;
+          if (this.rulerRight === null) this.rulerRight = val;
+        }
+
+        // block center
+        if (this.rulerLeft === null && this.rulerRight === null) {
+          if (otherCenter - 4 <= center && center <= otherCenter + 4) {
+            this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
+            this.verticalRulerCenter.classList.add('active');
+            let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
+            if (this.rulerLeft === null) this.rulerLeft = val;
+          }
+        }
+      }
+    });
+
+    // Edges
+    const conTop = 0;
+    const conBottom = container.offsetHeight;
+    const conLeft = 0;
+    const conRight = container.offsetWidth;
+    const conCenter = container.offsetWidth / 2;
+    const conMiddle = container.offsetHeight / 2;
+
+    // block top
+    this.horizontalRulerTop.removeAttribute('data-topTouched');
+    if (conTop - 4 <= top && top <= conTop + 4) {
+      this.horizontalRulerTop.style.top = conTop + 'px';
+      this.horizontalRulerTop.classList.add('active');
+      let val = conTop;
+      if (this.rulerTop === null) this.rulerTop = val;
+      this.topTouched = true;
+      this.horizontalRulerTop.setAttribute('data-topTouched', 1);
+    }
+
+    // block bottom
+    this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+    if (conBottom - 4 <= bottom && bottom <= conBottom + 4) {
+      this.horizontalRulerBottom.style.top = conBottom - 2 + 'px'; // -2 is an adjustment to make the line visible
+      this.horizontalRulerBottom.classList.add('active');
+      if (this.rulerBottom === null) this.rulerBottom = conBottom; //conRect.height;// or block.parentNode.offsetHeight; // new
+
+      this.bottomTouched = true;
+      this.horizontalRulerBottom.setAttribute('data-bottomTouched', 1);
+    }
+
+    // block middle
+    if (this.rulerTop === null && this.rulerBottom === null) {
+      if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
+        this.horizontalRulerMiddle.style.top = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
+        this.horizontalRulerMiddle.classList.add('active');
+        let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
+        if (this.rulerTop === null) this.rulerTop = val;
+      }
+    }
+
+    // block left
+    this.verticalRulerLeft.removeAttribute('data-leftTouched');
+    if (conLeft - 4 <= left && left <= conLeft + 4) {
+      this.verticalRulerLeft.style.left = conLeft + 0 + 'px'; // +0 is an adjustment
+      this.verticalRulerLeft.classList.add('active');
+      let val = conLeft;
+      if (this.rulerLeft === null) this.rulerLeft = val;
+      this.verticalRulerLeft.setAttribute('data-leftTouched', 1);
+    }
+
+    // block right
+    this.verticalRulerRight.removeAttribute('data-rightTouched');
+    if (conRight - 4 <= right && right <= conRight + 4) {
+      this.verticalRulerRight.style.left = conRight - 2 + 'px'; // -2 is an adjustment
+      this.verticalRulerRight.classList.add('active');
+      let val = conRight;
+      if (this.rulerRight === null) this.rulerRight = val;
+      this.verticalRulerRight.setAttribute('data-rightTouched', 1);
+    }
+
+    // block center
+    if (this.rulerLeft === null && this.rulerRight === null) {
+      if (conCenter - 4 <= center && center <= conCenter + 4) {
+        this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
+        this.verticalRulerCenter.classList.add('active');
+        let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
+        if (this.rulerLeft === null) this.rulerLeft = val;
+      }
+    }
+  }
+  updateRulers_bak(block) {
     // if(block.querySelector(this.selector)) return; // group (because updateRules also calls parent group if child block is dragged)
 
     let transform = block.style.transform;
@@ -82291,6 +82605,7 @@ class Ruler {
     const center = left + block.offsetWidth / 2;
     const middle = top + block.offsetHeight / 2;
     this.rulerTop = null;
+    this.rulerBottom = null; //new
     this.rulerLeft = null;
     this.rulerRight = null;
     let containerTop = 0;
@@ -82314,18 +82629,6 @@ class Ruler {
         const otherRight = rect.left + element.offsetWidth;
         const otherMiddle = rect.top + element.offsetHeight / 2;
         const otherCenter = rect.left + element.offsetWidth / 2;
-        if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
-          this.horizontalRulerMiddle.style.top = containerTop + otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
-          let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
-          if (this.rulerTop === null) this.rulerTop = val;
-        }
-        if (otherCenter - 4 <= center && center <= otherCenter + 4) {
-          this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
-          this.verticalRulerCenter.style.top = containerTop + 'px'; // adj
-
-          let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
-          if (this.rulerLeft === null) this.rulerLeft = val;
-        }
 
         // block top
         if (otherTop - 4 <= top && top <= otherTop + 4) {
@@ -82341,14 +82644,38 @@ class Ruler {
 
         // block bottom
         if (otherTop - 4 <= bottom && bottom <= otherTop + 4) {
+          /*
+                              _____
+          ___________________|__x__|__ rulerBottom
+          | other |
+           */
           this.horizontalRulerBottom.style.top = containerTop + otherTop + 'px';
-          let val = otherTop - block.offsetHeight;
-          if (this.rulerTop === null) this.rulerTop = val;
+
+          // let val = otherTop - block.offsetHeight;
+          // if(this.rulerTop===null) this.rulerTop = val;
+          if (this.rulerBottom === null) this.rulerBottom = element.offsetTop; // new
         }
+
         if (otherBottom - 4 <= bottom && bottom <= otherBottom + 4) {
+          /*
+                              _____
+          | other |__________|__x__|__ rulerBottom
+          
+          */
           this.horizontalRulerBottom.style.top = containerTop + otherBottom + 'px';
-          let val = otherBottom - block.offsetHeight;
-          if (this.rulerTop === null) this.rulerTop = val;
+
+          // let val = otherBottom - block.offsetHeight;
+          // if(this.rulerTop===null) this.rulerTop = val;
+          if (this.rulerBottom === null) this.rulerBottom = element.offsetTop + element.offsetHeight; // new
+        }
+
+        // block middle
+        if (this.rulerTop === null && this.rulerBottom === null) {
+          if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
+            this.horizontalRulerMiddle.style.top = containerTop + otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
+            let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
+            if (this.rulerTop === null) this.rulerTop = val;
+          }
         }
 
         // block left
@@ -82382,6 +82709,17 @@ class Ruler {
           let val = otherRight;
           if (this.rulerRight === null) this.rulerRight = val;
         }
+
+        // block center
+        if (this.rulerLeft === null && this.rulerRight === null) {
+          if (otherCenter - 4 <= center && center <= otherCenter + 4) {
+            this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
+            this.verticalRulerCenter.style.top = containerTop + 'px'; // adj
+
+            let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
+            if (this.rulerLeft === null) this.rulerLeft = val;
+          }
+        }
       }
     });
 
@@ -82393,44 +82731,69 @@ class Ruler {
     const conRight = conRect.left + block.parentNode.offsetWidth;
     const conCenter = conRect.left + block.parentNode.offsetWidth / 2;
     const conMiddle = conRect.top + block.parentNode.offsetHeight / 2;
-    if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
-      this.horizontalRulerMiddle.style.top = containerTop + conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
-      let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
-      if (this.rulerTop === null) this.rulerTop = val;
-    }
-    if (conCenter - 4 <= center && center <= conCenter + 4) {
-      this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
-      this.verticalRulerCenter.style.top = containerTop + 'px';
-      let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
-      if (this.rulerLeft === null) this.rulerLeft = val;
-    }
 
     // block top
+    this.horizontalRulerTop.removeAttribute('data-topTouched');
     if (conTop - 4 <= top && top <= conTop + 4) {
       this.horizontalRulerTop.style.top = containerTop + conTop + 'px';
       let val = conTop;
       if (this.rulerTop === null) this.rulerTop = val;
+      this.topTouched = true;
+      this.horizontalRulerTop.setAttribute('data-topTouched', 1);
     }
+
     // block bottom
+    this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
     if (conBottom - 4 <= bottom && bottom <= conBottom + 4) {
-      this.horizontalRulerBottom.style.top = containerTop + conBottom - 3 + 'px'; // -3 is an adjustment to make the line visible
+      this.horizontalRulerBottom.style.top = containerTop + conBottom - 2 + 'px'; // -2 is an adjustment to make the line visible
 
-      let val = conBottom - block.offsetHeight;
-      if (this.rulerTop === null) this.rulerTop = val;
+      // let val = conBottom - block.offsetHeight;
+      // if(this.rulerTop===null) this.rulerTop = val;
+      if (this.rulerBottom === null) this.rulerBottom = conRect.height; // or block.parentNode.offsetHeight; // new
+
+      this.bottomTouched = true;
+      this.horizontalRulerBottom.setAttribute('data-bottomTouched', 1);
     }
+
+    // block middle
+    if (this.rulerTop === null && this.rulerBottom === null) {
+      if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
+        this.horizontalRulerMiddle.style.top = containerTop + conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
+        let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
+        if (this.rulerTop === null) this.rulerTop = val;
+      }
+    }
+
     // block left
+    this.verticalRulerLeft.removeAttribute('data-leftTouched');
     if (conLeft - 4 <= left && left <= conLeft + 4) {
-      this.verticalRulerLeft.style.left = conLeft + 2 + 'px'; // +3 is an adjustment
-      this.verticalRulerLeft.style.top = containerTop + 'px';
+      this.verticalRulerLeft.style.left = conLeft + 0 + 'px'; // +0 is an adjustment
+      this.verticalRulerLeft.style.top = containerTop + 'px'; // adj
+
       let val = conLeft;
       if (this.rulerLeft === null) this.rulerLeft = val;
+      this.verticalRulerLeft.setAttribute('data-leftTouched', 1);
     }
+
     // block right
+    this.verticalRulerRight.removeAttribute('data-rightTouched');
     if (conRight - 4 <= right && right <= conRight + 4) {
       this.verticalRulerRight.style.left = conRight - 2 + 'px'; // -2 is an adjustment
-      this.verticalRulerRight.style.top = containerTop + 'px';
+      this.verticalRulerRight.style.top = containerTop + 'px'; // adj
+
       let val = conRight;
       if (this.rulerRight === null) this.rulerRight = val;
+      this.verticalRulerRight.setAttribute('data-rightTouched', 1);
+    }
+
+    // block center
+    if (this.rulerLeft === null && this.rulerRight === null) {
+      if (conCenter - 4 <= center && center <= conCenter + 4) {
+        this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
+        this.verticalRulerCenter.style.top = containerTop + 'px';
+        let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
+        if (this.rulerLeft === null) this.rulerLeft = val;
+      }
     }
   }
 }
@@ -82905,38 +83268,129 @@ class Resizable {
     }
 
     // Replace with ruler's alignment
-    if (this.ruler.rulerTop !== null) {
-      target.style.top = this.ruler.rulerTop + 'px';
-      // if container has top/left
-      if (target.parentNode.matches(this.selector)) {
-        const containerRect = target.parentNode.getBoundingClientRect();
-        target.style.top = this.ruler.rulerTop - containerRect.top + 'px';
+
+    if (this.resizeHandle.includes('top')) {
+      if (this.ruler.rulerTop !== null) {
+        //bottom fixed
+        let targetBottom = target.offsetTop + target.offsetHeight;
+        target.style.top = this.ruler.rulerTop + 'px';
+        target.style.height = targetBottom - this.ruler.rulerTop + 'px';
       }
     }
-
-    // If resizing by dragging the right corners (top or bottom)
-    if (this.resizeHandle === 'top-right' || this.resizeHandle === 'bottom-right' || this.resizeHandle === 'right') {
-      // Check if vertical right ruler visible (has value)
+    if (this.resizeHandle.includes('bottom')) {
+      if (this.ruler.rulerBottom !== null) {
+        // top fixed
+        target.style.height = this.ruler.rulerBottom - target.offsetTop + 'px';
+      }
+    }
+    if (this.resizeHandle.includes('left')) {
+      if (this.ruler.rulerLeft !== null) {
+        //right fixed
+        let targetRight = target.offsetLeft + target.offsetWidth;
+        target.style.left = this.ruler.rulerLeft + 'px';
+        target.style.width = targetRight - this.ruler.rulerLeft + 'px';
+      }
+    }
+    if (this.resizeHandle.includes('right')) {
       if (this.ruler.rulerRight !== null) {
-        // If so, keep the left position
-        // target.style.left = newLeft + 'px';
+        //left fixed
+        target.style.width = this.ruler.rulerRight - target.offsetLeft + 'px';
+      }
+    }
 
-        // And update the width to align with vertical right ruler
-        const rect = target.getBoundingClientRect();
-        target.style.width = this.ruler.rulerRight - rect.left + 'px';
+    // Convert px to %
+    this.common.applyPercentage(target);
+    setTimeout(() => {
+      const breakpoint = this.doc.body.getAttribute('data-breakpoint');
+
+      // const screenWidth = window.innerWidth;
+      // let defaultPoint;
+      // if(screenWidth<=1920) {
+      //     defaultPoint = 1366;
+      // } else {
+      //     defaultPoint = 1900;
+      // }
+
+      let largeScreenBreakpoint = 1280; //1920
+      largeScreenBreakpoint = window.innerWidth - 360; //351
+      if (largeScreenBreakpoint < 1280) largeScreenBreakpoint = 1280;
+      let isPrint = false;
+      let elmBox = target.closest('[data-pagesize]');
+      if (elmBox) {
+        if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
+          isPrint = true;
+        }
       }
-    } else if (this.resizeHandle === 'top-left' || this.resizeHandle === 'bottom-left' || this.resizeHandle === 'left') {
-      if (this.ruler.rulerLeft !== null) {
-        const currentRight = this.initialLeft + this.initialWidth;
+      if (isPrint) {
+        target.setAttribute('data--t', target.style.top);
+        target.setAttribute('data--l', target.style.left);
+        target.setAttribute('data--b', target.style.bottom);
+        target.setAttribute('data--r', target.style.right);
+        target.setAttribute('data--w', target.style.width);
+        target.setAttribute('data--h', target.style.height);
+      } else {
+        if (breakpoint && breakpoint < largeScreenBreakpoint) {
+          target.setAttribute('data--t-' + breakpoint, target.style.top);
+          target.setAttribute('data--l-' + breakpoint, target.style.left);
+          target.setAttribute('data--b-' + breakpoint, target.style.bottom);
+          target.setAttribute('data--r-' + breakpoint, target.style.right);
+          if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
+          target.setAttribute('data--h-' + breakpoint, target.style.height);
+        } else {
+          target.setAttribute('data--t', target.style.top);
+          target.setAttribute('data--l', target.style.left);
+          target.setAttribute('data--b', target.style.bottom);
+          target.setAttribute('data--r', target.style.right);
+          target.setAttribute('data--w', target.style.width);
+          target.setAttribute('data--h', target.style.height);
+        }
+      }
+      target.removeAttribute('data-prev'); // reset
+      target.removeAttribute('data-fluid');
+    }, 30); // delay needed since we use updateHeight() previously that has 20ms process
 
-        // if container has top/left
-        const containerRect = target.parentNode.getBoundingClientRect();
-        this.ruler.rulerLeft = this.ruler.rulerLeft - containerRect.left;
+    if (this.onChange) this.onChange();
+  }
+  updateBlockStyle_bak(target) {
+    if (target.querySelector(this.selector)) ; else {
+      // this.common.updateHeight(target);
+      if (target.classList.contains('height-auto')) target.style.height = '';
+    }
 
-        // And update the width to align with vertical left ruler
-        target.style.left = this.ruler.rulerLeft + 'px';
-        let newWidth = currentRight - this.ruler.rulerLeft;
-        target.style.width = newWidth + 'px';
+    // Replace with ruler's alignment
+    const containerRect = this.common.getRect(target.parentNode); // if container has top/left
+
+    if (this.resizeHandle.includes('top')) {
+      if (this.ruler.rulerTop !== null) {
+        //bottom fixed
+        const rect = target.getBoundingClientRect();
+        let targetBottom = rect.top + rect.height;
+        target.style.top = this.ruler.rulerTop - containerRect.top + 'px';
+        target.style.height = targetBottom - this.ruler.rulerTop + 'px';
+      }
+    }
+    if (this.resizeHandle.includes('bottom')) {
+      if (this.ruler.rulerBottom !== null) {
+        // top fixed
+        // const rect = target.getBoundingClientRect();
+        // target.style.height = this.ruler.rulerBottom - rect.top + containerRect.top + 'px'; 
+        target.style.height = this.ruler.rulerBottom - target.offsetTop + 'px';
+      }
+    }
+    if (this.resizeHandle.includes('left')) {
+      if (this.ruler.rulerLeft !== null) {
+        //right fixed
+        const rect = target.getBoundingClientRect();
+        let targetRight = rect.left + rect.width;
+        target.style.left = this.ruler.rulerLeft - containerRect.left + 'px';
+        target.style.width = targetRight - this.ruler.rulerLeft + 'px';
+      }
+    }
+    if (this.resizeHandle.includes('right')) {
+      if (this.ruler.rulerRight !== null) {
+        //left fixed
+        const rect = target.getBoundingClientRect();
+        target.style.width = this.ruler.rulerRight - rect.left + 'px';
       }
     }
 
@@ -83139,6 +83593,10 @@ class Draggable {
       const y = startY - rect.top + containerRect.top;
       target.setAttribute('data-startx', x);
       target.setAttribute('data-starty', y);
+
+      // reset (from applyPercentage bottomTouched)
+      target.style.height = target.offsetHeight + 'px';
+      target.style.bottom = '';
       this.common.applyPixels(target);
     });
     this.clickedBlock = this.common.getSelectedBlock();
@@ -83206,10 +83664,9 @@ class Draggable {
   }
   updateBlockStyle(target) {
     // Replace with ruler's alignment
-    const containerRect = this.common.getRect(target.parentNode); // if container has top/left
-    const initialWidth = parseFloat(getComputedStyle(target).width);
-    if (this.ruler.rulerTop !== null) target.style.top = this.ruler.rulerTop - containerRect.top + 'px';
-    if (this.ruler.rulerLeft !== null) target.style.left = this.ruler.rulerLeft - containerRect.left + 'px';else if (this.ruler.rulerRight !== null) target.style.left = this.ruler.rulerRight - initialWidth - containerRect.left + 'px';
+    if (this.ruler.rulerTop !== null) target.style.top = this.ruler.rulerTop + 'px';
+    if (this.ruler.rulerBottom !== null) target.style.top = this.ruler.rulerBottom - target.offsetHeight + 'px'; //new
+    if (this.ruler.rulerLeft !== null) target.style.left = this.ruler.rulerLeft + 'px';else if (this.ruler.rulerRight !== null) target.style.left = this.ruler.rulerRight - target.offsetWidth + 'px';
     this.doc.querySelectorAll('[data-startx]').forEach(elm => elm.removeAttribute('data-startx'));
     this.doc.querySelectorAll('[data-starty]').forEach(elm => elm.removeAttribute('data-starty'));
     this.common.applyPercentage(target);
@@ -83900,6 +84357,9 @@ class EditableBlocks {
       win: this.win,
       onContentClick: this.onContentClick,
       onEditStart: (event, block) => {
+        const container = block.querySelector('.is-container');
+        if (!container) return; // if block is empty, no edit required
+
         if (block.classList.contains('clone')) {
           const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
           this.onEditStart(event, clonedTarget);
@@ -84070,133 +84530,181 @@ class BlockModal {
                         </div>
                     </div>
 
+                    <div class="label-page-grayscale label checkbox grayscale" style="padding:30px 0 10px;">
+                        <label class="label-checkbox" for="chkPageGrayscale"><input id="chkPageGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
+                    </div>
+
+                    <div style="padding-top:30px;padding-bottom:3px;">${util.out('Auto layout on mobile')}:</div>
+
+                    <label class="switch"><input id="inpAutoLayout" type="checkbox" checked=""><span class="slider round"></span></label>
+
                 </div>
 
-                <div class="modal-content">
+                <div class="modal-content" style="padding:0">
 
-                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                    <div style="display:flex;">
-                        <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    <div class="is-tabs" data-group="blocksettings" style="background-color:transparent">
+                        <a title="${util.out('General')}" id="tabBlockGeneral" href="#" data-content="divBlockGeneral" class="active">${util.out('General')}</a>
+                        <a title="${util.out('More')}" id="tabBlockMore" href="#" data-content="divBlockMore">${util.out('More')}</a>
                     </div>
 
-                    <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
-                    <div>
-                        <div class="asset-block-preview" style="display:none"></div>
-                        <div style="display: flex">
-                            <button title="${util.out('Image')}" class="btn-block-bgimage">
-                                <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
-                                <span>${util.out('Image')}</span>
+                    <div id="divBlockMore" class="is-tab-content" data-group="blocksettings" tabindex="-1" style="padding:25px 25px 28px">
+
+                        <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                            <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                            </button>
+                            <button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                            </button>
+                            <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                                <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
                             </button>
-                            <button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
-                            <button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
-                            <button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
                         </div>
-                    </div>
 
-                    <div class="div-content-textcolor flex flex-col">
-                        <div style="padding-top:20px;padding-bottom:3px;">${util.out('Text Color')}:</div>
-                        <div class="flex flex-row">
-                            <button title="0" data-textcolor="dark">${util.out('Dark')}</button>
-                            <button title="10" data-textcolor="light">${util.out('Light')}</button>
-                            
-                            <button title="${util.out('Clear')}" data-textcolor=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                        <div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
+                        <div class="div-visibility" style="display:flex;">
+                            <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
+                                <span>${util.out('Visible')}</span>
+                            </button>
+                            <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
+                                <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
+                                <span>${util.out('Hidden')}</span>
+                            </button>
                         </div>
+                        
                     </div>
 
-                    <div class="label checkbox grayscale" style="padding:30px 0 10px;">
-                        <label class="label-block-grayscale label-checkbox" for="chkBlockGrayscale"><input id="chkBlockGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
-                    </div>
+                    <div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
 
-                    <button title="${util.out('Remove Content/Text')}" class="btn-clear-text" style="margin-top:20px">
-                        <svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
-                        <span>${util.out('Remove Content/Text')}</span>
-                    </button>
+                        <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                        <div style="display:flex;">
+                            <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
+                            <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                        </div>
 
-                    <button title="${util.out('Clear Breakpoints')}" class="btn-clear-breakpoint" style="margin-top:20px">
-                        <svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
-                        <span>${util.out('Clear Breakpoints')}</span>
-                    </button>
+                        <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
+                        <div>
+                            <div class="asset-block-preview" style="display:none"></div>
+                            <div style="display: flex">
+                                <button title="${util.out('Image')}" class="btn-block-bgimage">
+                                    <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
+                                    <span>${util.out('Image')}</span>
+                                </button>
+                                <button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
+                                <button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                                <button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
+                            </div>
+                        </div>
 
-                    <div style="padding-top:23px;padding-bottom:3px;">${util.out('Lock')}:</div>
+                        <div class="div-content-textcolor flex flex-col">
+                            <div style="padding-top:20px;padding-bottom:3px;">${util.out('Text Color')}:</div>
+                            <div class="flex flex-row">
+                                <button title="0" data-textcolor="dark">${util.out('Dark')}</button>
+                                <button title="10" data-textcolor="light">${util.out('Light')}</button>
+                                
+                                <button title="${util.out('Clear')}" data-textcolor=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                            </div>
+                        </div>
 
-                    <label class="switch"><input id="inpLockBlock" type="checkbox" checked=""><span class="slider round"></span></label>
+                        <div class="label-block-grayscale label checkbox grayscale" style="padding:30px 0 10px;">
+                            <label class="label-checkbox" for="chkBlockGrayscale"><input id="chkBlockGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
+                        </div>
 
-                    <div id="divBlockPos">
+                        <button title="${util.out('Remove Content/Text')}" class="btn-clear-text" style="margin-top:20px">
+                            <svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
+                            <span>${util.out('Remove Content/Text')}</span>
+                        </button>
 
-                        <div class="flex" style="gap:10px">
-                            <div>
-                                <label for="inpBlockTop" class="flex" style="padding:10px 0 3px;">${util.out('Top')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockTop" class="inp-block-top" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockTopUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                        <button title="${util.out('Clear Breakpoints')}" class="btn-clear-breakpoint" style="margin-top:20px">
+                            <svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
+                            <span>${util.out('Clear Breakpoints')}</span>
+                        </button>
+
+                        <div style="padding-top:23px;padding-bottom:3px;">${util.out('Lock')}:</div>
+
+                        <label class="switch"><input id="inpLockBlock" type="checkbox" checked=""><span class="slider round"></span></label>
+
+                        <div id="divBlockPos">
+
+                            <div class="flex" style="gap:10px">
+                                <div>
+                                    <label for="inpBlockTop" class="flex" style="padding:10px 0 3px;">${util.out('Top')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockTop" class="inp-block-top" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockTopUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
-                            <div>
-                                <label for="inpBlockBottom" class="flex" style="padding:10px 0 3px;">${util.out('Bottom')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockBottom" class="inp-block-top" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockBottomUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                                <div>
+                                    <label for="inpBlockBottom" class="flex" style="padding:10px 0 3px;">${util.out('Bottom')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockBottom" class="inp-block-top" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockBottomUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="flex" style="gap:10px">
-                            <div>
-                                <label for="inpBlockLeft" class="flex" style="padding:10px 0 3px;">${util.out('Left')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockLeft" class="inp-block-left" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockLeftUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                            <div class="flex" style="gap:10px">
+                                <div>
+                                    <label for="inpBlockLeft" class="flex" style="padding:10px 0 3px;">${util.out('Left')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockLeft" class="inp-block-left" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockLeftUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
-                            <div>
-                                <label for="inpBlockRight" class="flex" style="padding:10px 0 3px;">${util.out('Right')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockRight" class="inp-block-left" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockRightUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                                <div>
+                                    <label for="inpBlockRight" class="flex" style="padding:10px 0 3px;">${util.out('Right')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockRight" class="inp-block-left" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockRightUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="flex" style="gap:10px">
-                            <div>
-                                <label for="inpBlockWidth" class="flex" style="padding:10px 0 3px;">${util.out('Width')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockWidth" class="inp-block-left" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockWidthUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                            <div class="flex" style="gap:10px">
+                                <div>
+                                    <label for="inpBlockWidth" class="flex" style="padding:10px 0 3px;">${util.out('Width')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockWidth" class="inp-block-left" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockWidthUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
-                            <div>
-                                <label for="inpBlockHeight" class="flex" style="padding:10px 0 3px;">${util.out('Height')}:</label>
-                                <div style="display:flex">
-                                    <input id="inpBlockHeight" class="inp-block-left" type="text" style="width:74px;height:35px">
-                                    <select id="inpBlockHeightUnit">
-                                        <option></option>
-                                        <option>px</option>
-                                        <option>%</option>
-                                    </select>
+                                <div>
+                                    <label for="inpBlockHeight" class="flex" style="padding:10px 0 3px;">${util.out('Height')}:</label>
+                                    <div style="display:flex">
+                                        <input id="inpBlockHeight" class="inp-block-left" type="text" style="width:74px;height:35px">
+                                        <select id="inpBlockHeightUnit">
+                                            <option></option>
+                                            <option>px</option>
+                                            <option>%</option>
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
+
                         </div>
 
                     </div>
@@ -84298,19 +84806,19 @@ class BlockModal {
     const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
     if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
       // Background image
-      const page = this.getPage();
+      let pageOverlay = this.pageOverlay();
       let src = '';
-      if (page) if (page.style.backgroundImage) {
-        if (page.style.backgroundImage.indexOf('url(') !== -1) {
-          src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+      if (pageOverlay) if (pageOverlay.style.backgroundImage) {
+        if (pageOverlay.style.backgroundImage.indexOf('url(') !== -1) {
+          src = pageOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
         }
       }
       this.openImagePicker(src, url => {
-        const page = this.getPage();
+        let pageOverlay = this.pageOverlay();
         this.builder.uo.saveForUndo();
-        page.style.backgroundImage = `url("${url}")`;
-        page.style.backgroundSize = 'cover';
-        page.style.backgroundRepeat = 'no-repeat';
+        pageOverlay.style.backgroundImage = `url("${url}")`;
+        pageOverlay.style.backgroundSize = 'cover';
+        pageOverlay.style.backgroundRepeat = 'no-repeat';
         const div = this.pageImagePreview;
         const btnPageAdjust = modal.querySelector('.btn-page-adjust');
         const btnPageClear = modal.querySelector('.btn-page-clear');
@@ -84341,9 +84849,43 @@ class BlockModal {
     });
     const btnPageAdjust = modal.querySelector('.btn-page-adjust');
     btnPageAdjust.addEventListener('click', () => {
-      let page = this.getPage();
-      this.builder.colTool.openImageAdjust(page, btnPageAdjust);
+      let pageOverlay = this.pageOverlay();
+      this.builder.colTool.openImageAdjust(pageOverlay, btnPageAdjust);
     });
+    const chkPageGrayscale = modal.querySelector('#chkPageGrayscale');
+    chkPageGrayscale.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      let pageOverlay = this.pageOverlay();
+      const checked = chkPageGrayscale.checked;
+      if (checked) {
+        pageOverlay.style.filter = 'grayscale(1)';
+      } else {
+        if (pageOverlay.style.filter) pageOverlay.style.filter = pageOverlay.style.filter.replace('grayscale(1)', '');
+      }
+      this.builder.onChange();
+    });
+
+    // Page Auto Layout
+    const chkAutoLayout = modal.querySelector('#inpAutoLayout');
+    chkAutoLayout.addEventListener(this.builder.isTouchSupport ? 'touchstart' : 'click', () => {
+      const page = this.getPage();
+      if (chkAutoLayout.checked) {
+        page.classList.add('autolayout');
+      } else {
+        page.classList.remove('autolayout');
+      }
+    });
+    if (this.builder.isTouchSupport) {
+      let chkAutoLayoutLabel = chkAutoLayout.parentNode;
+      chkAutoLayoutLabel.addEventListener('touchstart', () => {
+        const page = this.getPage();
+        if (chkAutoLayout.checked) {
+          page.classList.add('autolayout');
+        } else {
+          page.classList.remove('autolayout');
+        }
+      });
+    }
 
     // Block Background Image
 
@@ -84397,7 +84939,7 @@ class BlockModal {
       let blockOverlay = this.blockOverlay();
       this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
     });
-    const chkGrayscale = modal.querySelector('.chk-grayscale');
+    const chkGrayscale = modal.querySelector('#chkBlockGrayscale');
     chkGrayscale.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
       let blockOverlay = this.blockOverlay();
@@ -84624,6 +85166,62 @@ class BlockModal {
         }
       });
     }
+
+    // Responsive Visibility
+
+    let btns = modal.querySelectorAll('.input-device');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const block = this.blockSelected();
+        let elms = modal.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.realtimeVisibility(block);
+      });
+    });
+    let btnVisible = modal.querySelector('.input-visible');
+    let btnHidden = modal.querySelector('.input-hidden');
+    btnVisible.addEventListener('click', () => {
+      const block = this.blockSelected();
+      this.builder.uo.saveForUndo();
+      let divTarget = modal.querySelector('.div-target');
+      let target = this.builder.responsive.readTarget(divTarget);
+      if (target === 'xs') {
+        block.classList.remove('xs-hidden');
+      } else if (target === 'sm') {
+        block.classList.remove('sm-hidden');
+      } else if (target === 'md') {
+        block.classList.remove('md-hidden');
+      } else if (target === '') {
+        block.classList.remove('desktop-hidden');
+      }
+      btnVisible.classList.add('on');
+      btnHidden.classList.remove('on');
+      this.builder.opts.onChange();
+    });
+    btnHidden.addEventListener('click', () => {
+      const block = this.blockSelected();
+      this.builder.uo.saveForUndo();
+      let divTarget = modal.querySelector('.div-target');
+      let target = this.builder.responsive.readTarget(divTarget);
+      if (target === 'xs') {
+        block.classList.add('xs-hidden');
+      } else if (target === 'sm') {
+        block.classList.add('sm-hidden');
+      } else if (target === 'md') {
+        block.classList.add('md-hidden');
+      } else if (target === '') {
+        block.classList.add('desktop-hidden');
+      }
+      btnVisible.classList.remove('on');
+      btnHidden.classList.add('on');
+      this.builder.opts.onChange();
+    });
+    new Tabs({
+      element: modal
+    });
   } // constructor
 
   getPage() {
@@ -84655,6 +85253,16 @@ class BlockModal {
     // this.builder.eb.common.applyPercentage(target);
   }
 
+  pageOverlay() {
+    const page = this.getPage();
+    if (!page) return false;
+    let pageOverlay = page.querySelector('.is-page-overlay');
+    if (!pageOverlay) {
+      page.insertAdjacentHTML('afterbegin', '<div class="is-page-overlay"></div>');
+      pageOverlay = page.querySelector('.is-page-overlay');
+    }
+    return pageOverlay;
+  }
   blockOverlay() {
     const block = this.builder.doc.querySelector('.is-block.active:not(.multi)');
     if (!block) return false;
@@ -84671,6 +85279,7 @@ class BlockModal {
   }
   realtime() {
     const modal = this.modal;
+    if (!modal.classList.contains('active')) return;
     const page = this.getPage();
     const block = this.blockSelected();
     if (block) {
@@ -84713,7 +85322,7 @@ class BlockModal {
       }
 
       // Grayscale
-      const chkGrayscale = modal.querySelector('.chk-grayscale');
+      const chkGrayscale = modal.querySelector('#chkBlockGrayscale');
       chkGrayscale.checked = false;
       if (blockOverlay) {
         if (blockOverlay.style.filter) {
@@ -84864,23 +85473,38 @@ class BlockModal {
         inpHeight.value = '';
         inpHeightUnit.value = '%';
       }
+      this.realtimeVisibility(block);
     } else if (page) {
+      let pageOverlay = this.pageOverlay();
+
       // Background image
       let src = '';
-      if (page) if (page.style.backgroundImage) {
-        if (page.style.backgroundImage.indexOf('url(') !== -1) {
-          src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+      if (pageOverlay) if (pageOverlay.style.backgroundImage) {
+        if (pageOverlay.style.backgroundImage.indexOf('url(') !== -1) {
+          src = pageOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
         }
       }
 
       // Update preview
       this.updatePanelPageImage(src);
 
-      // Show/hide 
+      // Show/hide grayscale
+      const divPageGrayscale = modal.querySelector('.label-page-grayscale');
       if (src === '') {
         this.pageImagePreview.style.display = 'none';
+        divPageGrayscale.style.display = 'none';
       } else {
         this.pageImagePreview.style.display = '';
+        divPageGrayscale.style.display = '';
+      }
+
+      // Grayscale
+      const chkPageGrayscale = modal.querySelector('#chkPageGrayscale');
+      chkPageGrayscale.checked = false;
+      if (pageOverlay.style.filter) {
+        if (pageOverlay.style.filter.indexOf('grayscale') !== -1) {
+          chkPageGrayscale.checked = true;
+        }
       }
 
       // Background color
@@ -84903,6 +85527,58 @@ class BlockModal {
       } else {
         btnPageGradient.style.backgroundImage = '';
       }
+
+      // Page Auto Layout
+      const chkAutoLayout = modal.querySelector('#inpAutoLayout');
+      if (page.classList.contains('autolayout')) {
+        chkAutoLayout.checked = true;
+      } else {
+        chkAutoLayout.checked = false;
+      }
+    }
+  }
+  realtimeVisibility(row, initialOpen) {
+    if (!this.modal) return;
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+      if (modal) {
+        let elms = this.modal.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        if (modal.classList.contains('is-screen-1920')) {
+          this.modal.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.modal.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.modal.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.modal.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.modal.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+    let divTarget = this.modal.querySelector('.div-target');
+    let divVisibility = this.modal.querySelector('.div-visibility');
+    let target = this.builder.responsive.readTarget(divTarget);
+    let valVisibility = this.builder.responsive.getVisibility(row, target);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility);
+
+    // const divColsPerLine = this.modal.querySelector('.div-colsperline');
+    let btns = this.modal.querySelectorAll('.input-colsperline');
+    btns.forEach(btn => {
+      btn.classList.remove('on');
+    });
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
     }
   }
   openImagePicker(currentUrl, callback, btn) {
@@ -84926,17 +85602,17 @@ class BlockModal {
   }
   updatePageImage(src) {
     this.builder.uo.saveForUndo();
-    let page = this.getPage();
-    page.style.backgroundImage = 'url(\'' + src + '\')';
+    let pageOverlay = this.pageOverlay();
+    pageOverlay.style.backgroundImage = 'url(\'' + src + '\')';
 
     // Reset position & filter (grayscale)
-    page.style.filter = '';
-    page.style.backgroundSize = '';
-    page.style.backgroundPosition = '50% 60%';
-    page.removeAttribute('data-bg-xs');
-    page.removeAttribute('data-bg-sm');
-    page.removeAttribute('data-bg-md');
-    page.removeAttribute('data-bg-lg');
+    pageOverlay.style.filter = '';
+    pageOverlay.style.backgroundSize = '';
+    pageOverlay.style.backgroundPosition = '50% 60%';
+    pageOverlay.removeAttribute('data-bg-xs');
+    pageOverlay.removeAttribute('data-bg-sm');
+    pageOverlay.removeAttribute('data-bg-md');
+    pageOverlay.removeAttribute('data-bg-lg');
     this.updatePanelPageImage(src);
     this.builder.onChange();
   }
@@ -84960,6 +85636,16 @@ class BlockModal {
     }
     const btnPageGradient = modal.querySelector('.btn-page-gradient');
     btnPageGradient.style.backgroundImage = '';
+
+    // Show/hide grayscale
+    const divPageGrayscale = modal.querySelector('.label-page-grayscale');
+    if (src === '') {
+      this.pageImagePreview.style.display = 'none';
+      divPageGrayscale.style.display = 'none';
+    } else {
+      this.pageImagePreview.style.display = '';
+      divPageGrayscale.style.display = '';
+    }
   }
   updateImage(src) {
     this.builder.uo.saveForUndo();
@@ -84975,6 +85661,7 @@ class BlockModal {
     blockOverlay.removeAttribute('data-bg-md');
     blockOverlay.removeAttribute('data-bg-lg');
     this.updatePanelImage(src);
+    this.realtime();
     this.builder.onChange();
   }
   updatePanelImage(src) {
@@ -84997,6 +85684,16 @@ class BlockModal {
     }
     const btnGradient = modal.querySelector('.btn-block-gradient');
     btnGradient.style.backgroundImage = '';
+
+    // Show/hide grayscale
+    const divGrayscale = modal.querySelector('.label-block-grayscale');
+    if (src === '') {
+      this.imagePreview.style.display = 'none';
+      divGrayscale.style.display = 'none';
+    } else {
+      this.imagePreview.style.display = '';
+      divGrayscale.style.display = '';
+    }
   }
   show() {
     const modal = this.modal;
@@ -85027,6 +85724,7 @@ class BlockModal {
   }
   showHideControls() {
     const modal = this.modal;
+    if (!modal.classList.contains('active')) return;
     const content1 = modal.querySelector('.modal-none');
     const content2 = modal.querySelector('.modal-content');
     const content3 = modal.querySelector('.modal-page-content');
@@ -85067,6 +85765,60 @@ class BlockModal {
       this.builder.doc.removeEventListener('click', this.handleBlockClick);
     }
   }
+  position() {
+    const dom = this.dom;
+    let elementTool = this.elementTool;
+    let elementMore = this.elementMore;
+    dom.addClass(elementMore, 'transition1');
+    let elmMore = elementTool.querySelector('.elm-more');
+    const viewportHeight = window.innerHeight;
+
+    /*
+    let top, left;
+    if(!this.builder.iframe) {
+        top = elmMore.getBoundingClientRect().top;
+        left = elmMore.getBoundingClientRect().left;
+    } else {
+        let adjY = this.builder.iframe.getBoundingClientRect().top;
+        let adjX = this.builder.iframe.getBoundingClientRect().left;
+         top = elmMore.getBoundingClientRect().top;
+        left = elmMore.getBoundingClientRect().left;
+        top = top + adjY;
+        left = left + adjX;
+    }
+    */
+    const newPos = this.builder.util.getElementPosition(elmMore);
+    let top = newPos.top;
+    let left = newPos.left;
+
+    // elementMore.style.display = 'flex';
+    const btnMore = elementTool.querySelector('.elm-more');
+    this.util.showPop(elementMore, false, btnMore);
+    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.left = left - w / 2 + 10 + 'px';
+      dom.removeClass(elementMore, 'arrow-bottom');
+      dom.removeClass(elementMore, 'arrow-right');
+      dom.removeClass(elementMore, 'arrow-left');
+      dom.removeClass(elementMore, 'center');
+      dom.addClass(elementMore, 'arrow-top');
+      dom.addClass(elementMore, 'center');
+    } else {
+      elementMore.style.top = top + window.pageYOffset - h - 8 + 'px';
+      elementMore.style.left = left - w / 2 + 10 + 'px';
+      dom.removeClass(elementMore, 'arrow-top');
+      dom.removeClass(elementMore, 'arrow-right');
+      dom.removeClass(elementMore, 'arrow-left');
+      dom.removeClass(elementMore, 'center');
+      dom.addClass(elementMore, 'arrow-bottom');
+      dom.addClass(elementMore, 'center');
+    }
+    setTimeout(() => {
+      dom.removeClass(elementMore, 'transition1');
+    }, 300);
+  }
 }
 
 class PageSize {
@@ -85199,12 +85951,19 @@ class PageSize {
       // let h = arr[1].trim();
       if (arr.length === 3) {
         // web
-        const docWidth = docContainer.offsetWidth;
-        const viewportWidth = this.builder.win.innerWidth;
-        if (docWidth < viewportWidth - 50) {
-          // web (container)
-          docContainer.classList.remove('page-web');
-          docContainer.classList.add('page-web-container');
+        let box = docContainer.querySelector('.is-box');
+        if (box) {
+          const boxWidth = box.offsetWidth;
+          const viewportWidth = this.builder.win.innerWidth;
+          if (boxWidth < viewportWidth - 50) {
+            // web (container)
+            docContainer.classList.remove('page-web');
+            docContainer.classList.add('page-web-container');
+          } else {
+            // web (full)
+            docContainer.classList.remove('page-web-container');
+            docContainer.classList.add('page-web');
+          }
         } else {
           // web (full)
           docContainer.classList.remove('page-web-container');
@@ -85293,18 +86052,53 @@ class PageSize {
                 position: relative;
                 flex:none;
                 background: #fff;
-                overflow: hidden;
+                /* overflow: hidden;*/
                 box-shadow: none;
             }
             ${css}
             </style>
+
+            ${html.includes('data-module="codeview"') ? `
+                <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" rel="stylesheet">
+                <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-coy.min.css" rel="stylesheet">
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
+                <style>
+                    :not(pre)>code[class*=language-], pre[class*=language-] {
+                        background-color: #f4f4f4 !important;
+                        padding: 12px 16px !important;
+                    }
+                    pre[class*=language-]:after, pre[class*=language-]:before {
+                        box-shadow: none;
+                    }
+                    :not(pre)>code[class*=language-], pre[class*=language-] {
+                        margin-bottom: 1.2rem;
+                    }
+                    div[data-html] {
+                        min-height: 40px;
+                    }
+                    code[class*=language-], pre[class*=language-] {
+                        text-shadow: none;
+                    }
+                </style>
+            ` : ''}
         </head>
         <body class="print">
 
             <div class="is-page">${html}</div>
 
             <script>
-                window.print();
+                var docReady = function(fn) {
+                    var stateCheck = setInterval(function() {
+                        if (document.readyState !== "complete") return;
+                        clearInterval(stateCheck);
+                        try {
+                            fn()
+                        } catch (e) {}
+                    }, 1);
+                };
+                docReady(function() {
+                    window.print();
+                });
             </script>
         </body>
         </html>
@@ -85389,6 +86183,9 @@ class PageSize {
                         width: ${docWidth};
                         height: ${docHeight};
                     } 
+                    .hide-on-print {
+                        display: none !important;
+                    }
                 }
                 @page {
                     size:${docWidth} ${docHeight};; 
@@ -85409,6 +86206,9 @@ class PageSize {
                         width: ${w}; 
                         height: ${h};
                     } 
+                    .hide-on-print {
+                        display: none !important;
+                    }
                 }
                 @page {
                     size:${w} ${h};
@@ -85678,7 +86478,7 @@ class ContentBuilder {
         style: 'width:180px;height:112.5px'
       }, {
         title: 'Web (container)',
-        pagesize: '800px,1000px,web',
+        pagesize: '1000px,1000px,web',
         style: 'width:180px;height:112.5px'
       }, {
         title: '8.27x5.52',
@@ -86519,6 +87319,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (window.data_basic) {
       // if snippet file included
       this.opts.snippetJSON = window.data_basic;
+      if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
+        if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
+          this.opts.snippetJSON.snippets.splice(i, 1);
+        }
+      }
+
       // if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
       if (this.opts.snippetPath === '') {
         this.opts.snippetPath = window._snippets_path;
@@ -86566,12 +87372,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       // this.iconButtons = ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'pageoptions', 'print', 'zoom', 'html'];
       // this.iconButtonsMore = [];
 
-      this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'html', 'zoom', 'more'];
-      this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'aiassistant', 'snippets', 'pageoptions', 'print', 'preferences'];
-      this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'blocksettings', 'html', 'zoom', 'more'];
-      this.elementButtonsMore = ['aiassistant', 'snippets', 'pageoptions', 'print', 'preferences'];
-      this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'html', 'zoom', 'more'];
-      this.iconButtonsMore = ['aiassistant', 'snippets', 'pageoptions', 'print', 'preferences'];
+      this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'pageoptions', 'print', 'html', 'more'];
+      this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'aiassistant', 'snippets', 'preferences'];
+      this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html', 'more'];
+      this.elementButtonsMore = ['aiassistant', 'snippets', 'preferences'];
+      this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'pageoptions', 'print', 'html', 'more'];
+      this.iconButtonsMore = ['aiassistant', 'snippets', 'preferences'];
       if (!this.docContainer && this.container !== '.is-container') {
         this.docContainer = this.container;
         this.container = '.is-container';
@@ -87083,6 +87889,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           this.rte.hideBlockButtons();
           this.rte.positionToolbar();
         }
+        if (this.blockmodal) {
+          setTimeout(() => {
+            this.blockmodal.showHideControls();
+          }, 30);
+        }
       },
       onSelectBlock: block => {
         if (this.onSelectBlock) this.onSelectBlock(block);
@@ -87238,6 +88049,57 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         }
       });
+
+      // Copy & Paste Block
+      document.addEventListener('keydown', e => {
+        if ((e.ctrlKey || e.metaKey) && e.which === 67) {
+          //CTRL-C
+          const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
+          if (activeBlock) {
+            this.copyBlock = activeBlock;
+          }
+        }
+      });
+      document.addEventListener('keydown', e => {
+        if ((e.ctrlKey || e.metaKey) && e.which === 86) {
+          //CTRL-V
+
+          const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
+          let block = this.copyBlock;
+          if (box && block) {
+            if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
+            const focusedElement = e.target;
+            const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
+            if (isEditable) return;
+            this.uo.saveForUndo();
+            let block = this.copyBlock;
+            const builder = block.querySelector(this.container);
+            let html = '';
+            if (builder) {
+              html = this.readHtml(builder);
+            }
+            let clonedDiv = block.cloneNode(true);
+            clonedDiv.style.top = '20%';
+            clonedDiv.style.left = '20%';
+            if (builder) {
+              const cloneBuilder = clonedDiv.querySelector(this.container);
+              cloneBuilder.innerHTML = '';
+              box.appendChild(clonedDiv);
+              const range = document.createRange();
+              cloneBuilder.appendChild(range.createContextualFragment(html));
+              this.applyBehaviorOn(cloneBuilder);
+              cloneBuilder.click();
+            } else {
+              block.parentNode.appendChild(clonedDiv);
+            }
+            block.classList.remove('active');
+            this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
+            this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
+            this.eb.refresh();
+            this.opts.onChange();
+          }
+        }
+      });
     }
     let previousWidth = this.win.innerWidth;
     let timer;
@@ -87667,6 +88529,22 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             top: 0;
             left: -1000px;
         }
+        .h-ruler {
+            top:0;
+            left:-100vw;
+            width: 300vw;
+            height:2px;
+            display:none;
+        }
+        .h-ruler.active { display: block }
+        .v-ruler {
+            top:0;
+            left:0;
+            width:2px;
+            height: 100%;
+            display:none;
+        }
+        .v-ruler.active { display: block }
         
         /* Resize Handles */
         .handle {
@@ -87841,16 +88719,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         @media (max-width: 760px) {
             .is-box.autolayout .is-block > .rotate-handle,
             .is-box.autolayout .is-block > .handle {
-            display: none;
+                display: none;
             }
         
             /* NEW */
-            .is-block.clone {
+            .is-box.autolayout .is-block.clone {
                 display:none;
             }
-            .is-block.cloned {
+            .is-box.autolayout .is-block.cloned {
                 outline: var(--is-outline);
             }
+            .is-box.box-select {
+                outline: none !important;
+            }
         }
         
         .is-block.locked .handle,
@@ -88517,7 +89398,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.setZoomOnControl(builder);
   }
   html(area) {
-    if (this.docContainer) {
+    if (this.docContainer && !area) {
       // freeform
 
       const docContainer = this.doc.querySelector(this.docContainer);
@@ -88625,7 +89506,33 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   }
   refresh() {
     if (this.eb) this.eb.refresh();
+
+    /*
+    // Add block tool
+    let html = `
+    <div class="is-tool is-block-tool">
+        <button type="button" tabindex="-1" title="${this.util.out('Settings')}" class="block-settings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
+    </div>
+    `;
+    let blocks = this.doc.querySelectorAll('.is-block');
+    blocks.forEach(block => {
+        let tool = block.querySelector('.is-block-tool');
+        if(tool) tool.remove();
+        block.insertAdjacentHTML('beforeend', html);
+        tool = block.querySelector('.is-block-tool');
+        tool.addEventListener('click',(e)=>{
+            if(document.querySelector('.is-modal.editblock.active')) {
+                this.blockmodal.hide();
+            } else {
+                this.blockmodal.show();
+            }
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        });
+    });
+    */
   }
+
   group() {
     if (!this.eb) return;
     this.uo.saveForUndo();
@@ -88780,6 +89687,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                 <!--
                 <button type="button" tabindex="-1" class="box-settings" title="${this.util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                 -->
+                <button type="button" tabindex="-1" class="box-duplicate" title="${this.util.out('Duplicate')}"><svg class="is-icon-flex" style="width:14px;height:14px"><use xlink:href="#icon-duplicate"></use></svg></button>
                 <button type="button" tabindex="-1" class="box-remove" title="${this.util.out('Remove')}"><svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg></button>
             </div>
             <div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
@@ -88830,6 +89738,57 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             });
             this.opts.onChange();
           });
+          const btnDuplicate = box.querySelector('.is-canvas-tool .box-duplicate');
+          btnDuplicate.addEventListener('click', e => {
+            this.eb.selectClear(); // clear clone
+
+            // clear active
+            const box = e.target.closest('.is-box');
+            const block = box.querySelector('.is-block.active');
+            if (block) block.classList.remove('active');
+            this.uo.saveForUndo();
+            let copiedBox = box.cloneNode(true);
+            copiedBox.setAttribute('data-box-copied', '1');
+            let parent = box.parentNode;
+            parent.insertBefore(copiedBox, box.nextElementSibling);
+            let newBox = docContainer.querySelector('[data-box-copied]');
+            newBox.removeAttribute('data-box-copied');
+
+            // Code Blocks Handling
+            let codeBlocks = newBox.querySelectorAll('[data-module]');
+            codeBlocks.forEach(element => {
+              let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
+              html = html.replace(/{id}/g, this.util.makeId());
+              //Fill the block with original code
+              this.html(element, html);
+            });
+            newBox.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center'
+            });
+            this.applyBehaviorCanvas();
+
+            // ContentBuilder Handling
+            let containers = newBox.querySelectorAll('.is-builder');
+            containers.forEach(container => {
+              let containerHtml = this.html(container);
+              let range = document.createRange();
+              container.innerHTML = '';
+              container.appendChild(range.createContextualFragment(containerHtml));
+              container.removeAttribute('data-sort'); //important (ContentBuilder cleanup for the container)
+              this.applyBehaviorOn(container);
+            });
+            this.eb.refresh();
+            this.opts.onChange();
+
+            // Change selection
+            setTimeout(() => {
+              box.classList.remove('box-select');
+              const prevBox = docContainer.querySelector('.box-select');
+              if (prevBox) prevBox.classList.remove('box-select');
+              newBox.classList.add('box-select');
+            }, 30);
+          });
           const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
           btnRemove.addEventListener('click', e => {
             const box = e.target.closest('.is-box');
@@ -89896,6 +90855,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     script.async = true;
     script.onload = () => {
       this.opts.snippetJSON = window.data_basic;
+      if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
+        if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
+          this.opts.snippetJSON.snippets.splice(i, 1);
+        }
+      }
+
       // if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
       if (this.opts.snippetPath === '') {
         this.opts.snippetPath = window._snippets_path;
@@ -89922,7 +90887,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         html = `
                 <div class="is-box box-canvas autolayout">
                     <div class="is-block block-steady height-auto" style="top: calc(50% - 357px); left: calc(50% - 348px); width: 696px;" data--t="calc(50% - 357px)" data--l="calc(50% - 348px)" data--b="" data--r="" data--w="696px" data--h="">
-                        <div class="is-container leading-12 size-17">
+                        <div class="is-container">
                             ${html}
                         </div>
                         <div class="is-block-overlay"></div>
@@ -91494,6 +92459,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
               if (this.opts.emailMode) bSnippet = false;
 
+              // check if is block
+              let isBlock = false;
+              if (html.includes('"is-block')) {
+                isBlock = true;
+                bSnippet = false;
+              }
+
               // Convert snippet into your defined 12 columns grid   
               var rowClass = this.opts.row; //row
               var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
@@ -91540,24 +92512,26 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                 this.dom.removeClass(itemEl, 'snippet-item');
                 let bw = '';
                 if (this.page && this.page === '.is-wrapper') {
-                  bw = '800px';
+                  bw = '760px';
                 } else {
                   if (occurrences === 2) {
-                    bw = '800px';
+                    bw = '760px';
                   } else if (occurrences >= 3) {
-                    bw = '800px';
+                    bw = '760px';
                   } else {
                     bw = '540px';
                   }
                 }
                 const blockTemplate = `
                                 <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
-                                    <div class="is-container container-new leading-12 size-17">
+                                    <div class="is-container container-new">
                                     [%CONTENT%]
                                     </div>
                                 </div>
                                 `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
                 itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
+              } else if (isBlock) {
+                itemEl.outerHTML = html;
               } else {
                 // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
                 // Can only be inserted after current row or last row (not on column or element).
@@ -91590,19 +92564,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                 itemEl.appendChild(range.createContextualFragment(html));
                 let bw = '';
                 if (this.page && this.page === '.is-wrapper') {
-                  bw = '800px';
+                  bw = '760px';
                 } else {
                   if (occurrences === 2) {
-                    bw = '800px';
+                    bw = '760px';
                   } else if (occurrences >= 3) {
-                    bw = '800px';
+                    bw = '760px';
                   } else {
                     bw = '540px';
                   }
                 }
                 const blockTemplate = `
                                 <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
-                                    <div class="is-container container-new leading-12 size-17">
+                                    <div class="is-container container-new">
                                     [%CONTENT%]
                                     </div>
                                 </div>