@innovastudio/contentbuilder 1.5.20 → 1.5.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.20",
+  "version": "1.5.21",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -81959,7 +81959,7 @@ class Common {
 
     if (topTouched && bottomTouched) {
       block.style.top = 0;
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (leftTouched && rightTouched) {
@@ -81968,13 +81968,21 @@ class Common {
       block.style.width = '';
     }
     if (bottomTouched && !topTouched) {
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (rightTouched && !leftTouched) {
       block.style.right = 0;
       block.style.width = '';
     }
+
+    // reset
+    setTimeout(() => {
+      this.horizontalRulerTop.removeAttribute('data-topTouched');
+      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      this.verticalRulerRight.removeAttribute('data-rightTouched');
+    }, 10);
   }
   applyPixels(block) {
     const zoom = this.zoom;
@@ -83804,6 +83812,15 @@ class Draggable {
     if (this.onChange) this.onChange();
   }
   handleSelect(event) {
+    if (!this.doc.querySelector(this.selector + '.active')) {
+      // Make the current scrollbar state (visible or not) to stay during the block select (drag or resize)
+      let scrollbar = this.doc.documentElement.scrollHeight > this.doc.documentElement.clientHeight;
+      if (!scrollbar) {
+        this.doc.body.style.overflowY = 'hidden';
+      } else {
+        this.doc.body.style.overflowY = 'scroll';
+      }
+    }
     const element = event.target;
     if (element.classList.contains('rotate-handle')) return;
     const block = element.closest(this.selector);
@@ -83853,6 +83870,9 @@ class Draggable {
       this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
       this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
       if (this.onSelectClear) this.onSelectClear();
+
+      // Return back the scrollbar state when clicking on page (not block)
+      this.doc.body.style.overflowY = ''; // see handleSelect()
     }
 
     // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles