@innovastudio/contentbuilder 1.4.146 → 1.4.148

package/public/contentbuilder/contentbuilder.esm.js

@@ -10355,6 +10355,14 @@ class HtmlUtil {
       this.builder.opts.onRender();
     }
     if (mode === 'full') {
+      // freeform
+      if (this.builder.docContainer) {
+        this.builder.loadHTML(html);
+        util.clearControls();
+        this.builder.hideModal(modal);
+        return;
+      }
+
       // area.innerHTML = html;
       area.innerHTML = '';
       // Use createContextualFragment() to make embedded script executable
@@ -11204,6 +11212,23 @@ class HtmlUtil {
         elms = tmp.querySelectorAll('[data-html-25]');
         dom$k.removeAttributes(elms, 'data-html-25');
       }
+
+      // freeform
+      elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
+      dom$k.removeElements(elms);
+      elms = tmp.querySelectorAll('.is-block');
+      Array.prototype.forEach.call(elms, elm => {
+        dom$k.removeClass(elm, 'active');
+        dom$k.removeClass(elm, 'multi');
+        dom$k.removeClass(elm, 'editable');
+        dom$k.removeClass(elm, 'fluid');
+        dom$k.removeClass(elm, 'cloned');
+        elm.removeAttribute('data-fluid-val');
+        elm.removeAttribute('data-fluid');
+      });
+      tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
+      // tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
+
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     }
@@ -13287,26 +13312,26 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div class="flex">
-            <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
+      let html = `<div>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
             </div>`;
       if (builder.opts.emailMode) {
-        html = '<div class="flex"><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
+        html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
       }
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div class="flex">
+      let html = `<div>
                 <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
                 <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
             </div>`;
       if (builder.opts.emailMode) {
-        html = `<div class="flex">
-                    <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
-                    <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
-                </div>`;
+        html = `<div>
+                <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
+                <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
+            </div>`;
       }
       util.addContent(html, mode);
     });
@@ -14530,7 +14555,7 @@ Insipred by: https://www.kirupa.com/html5/drag.htm
 */
 
 let initialX, initialY, currentX, currentY, xOffset, yOffset, dragActive, activeDraggableBox;
-class Draggable$1 {
+class Draggable$2 {
   constructor(opts = {}) {
     this.opts = opts;
     const elms = document.querySelectorAll(this.opts.selector);
@@ -14694,7 +14719,7 @@ const renderGridEditor = builder => {
   //<button title="${util.out('Element Tool')}" class="cell-elmtool"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></button>
 
   dom.appendHtml(builderStuff, html);
-  new Draggable$1({
+  new Draggable$2({
     selector: '.is-draggable'
   });
   const grideditor = document.querySelector('.grideditor');
@@ -28675,7 +28700,7 @@ function dragControlCondition(moveable, e) {
   return false;
 }
 
-var Rotatable = {
+var Rotatable$1 = {
   name: "rotatable",
   canPinch: true,
   props: {
@@ -28814,7 +28839,7 @@ var Rotatable = {
         datas.startValue = rotatation * Math.PI / 180;
       }
     }, fillTransformStartEvent(e)), {
-      dragStart: Draggable.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
+      dragStart: Draggable$1.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
     }));
     var result = triggerEvent(moveable, "onRotateStart", params);
     datas.isRotate = result !== false;
@@ -32515,7 +32540,7 @@ var Snappable = {
  * @description Draggable refers to the ability to drag and move targets.
  */
 
-var Draggable = {
+var Draggable$1 = {
   name: "draggable",
   props: {
     draggable: Boolean,
@@ -33403,7 +33428,7 @@ function fillTransformEvent(moveable, nextTransform, delta, isPinch, e) {
   fillOriginalTransform(e, nextTransform);
   return {
     transform: nextTransform,
-    drag: Draggable.drag(moveable, setCustomDrag(e, moveable.state, delta, isPinch, false))
+    drag: Draggable$1.drag(moveable, setCustomDrag(e, moveable.state, delta, isPinch, false))
   };
 }
 
@@ -35300,7 +35325,7 @@ var Pinchable = makeAble("pinchable", {
  * @description Resizable indicates whether the target's width and height can be increased or decreased.
  */
 
-var Resizable = {
+var Resizable$1 = {
   name: "resizable",
   ableGroup: "size",
   canPinch: true,
@@ -35445,7 +35470,7 @@ var Resizable = {
       setOrigin: function (origin) {
         datas.transformOrigin = origin;
       },
-      dragStart: Draggable.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
+      dragStart: Draggable$1.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
     });
     var result = triggerEvent(moveable, "onResizeStart", params);
 
@@ -35630,7 +35655,7 @@ var Resizable = {
       dist: [distWidth, distHeight],
       delta: delta,
       isPinch: !!isPinch,
-      drag: Draggable.drag(moveable, setCustomDrag(e, moveable.state, inverseDelta, !!isPinch, false))
+      drag: Draggable$1.drag(moveable, setCustomDrag(e, moveable.state, inverseDelta, !!isPinch, false))
     });
     triggerEvent(moveable, "onResize", params);
     return params;
@@ -36222,7 +36247,7 @@ var Scalable = {
       setRatio: setRatio,
       setFixedDirection: setFixedDirection
     }, fillTransformStartEvent(e)), {
-      dragStart: Draggable.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
+      dragStart: Draggable$1.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
     }));
     var result = triggerEvent(moveable, "onScaleStart", params);
 
@@ -39365,7 +39390,7 @@ var OriginDraggable = {
     var datas = e.datas;
     setDragStart(moveable, e);
     var params = fillParams(moveable, e, {
-      dragStart: Draggable.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
+      dragStart: Draggable$1.dragStart(moveable, new CustomGesto().dragStart([0, 0], e))
     });
     var result = triggerEvent(moveable, "onDragOriginStart", params);
     datas.startOrigin = moveable.state.transformOrigin;
@@ -39428,7 +39453,7 @@ var OriginDraggable = {
       dist: dist,
       delta: delta,
       transformOrigin: transformOrigin,
-      drag: Draggable.drag(moveable, setCustomDrag(e, moveable.state, dragDelta, !!isPinch, false))
+      drag: Draggable$1.drag(moveable, setCustomDrag(e, moveable.state, dragDelta, !!isPinch, false))
     });
     triggerEvent(moveable, "onDragOrigin", params);
     return params;
@@ -41840,13 +41865,13 @@ var edgeDraggable = makeAble("edgeDraggable", {
     return hasClass(target, prefix("direction")) && hasClass(target, prefix("line"));
   },
   dragControlStart: function (moveable, e) {
-    return Draggable.dragStart(moveable, getDraggableEvent(e));
+    return Draggable$1.dragStart(moveable, getDraggableEvent(e));
   },
   dragControl: function (moveable, e) {
-    return Draggable.drag(moveable, getDraggableEvent(e));
+    return Draggable$1.drag(moveable, getDraggableEvent(e));
   },
   dragControlEnd: function (moveable, e) {
-    return Draggable.dragEnd(moveable, getDraggableEvent(e));
+    return Draggable$1.dragEnd(moveable, getDraggableEvent(e));
   },
   dragGroupControlCondition: function (moveable, e) {
     if (!moveable.props.edgeDraggable || !e.inputEvent) {
@@ -41857,16 +41882,16 @@ var edgeDraggable = makeAble("edgeDraggable", {
     return hasClass(target, prefix("direction")) && hasClass(target, prefix("line"));
   },
   dragGroupControlStart: function (moveable, e) {
-    return Draggable.dragGroupStart(moveable, getDraggableEvent(e));
+    return Draggable$1.dragGroupStart(moveable, getDraggableEvent(e));
   },
   dragGroupControl: function (moveable, e) {
-    return Draggable.dragGroup(moveable, getDraggableEvent(e));
+    return Draggable$1.dragGroup(moveable, getDraggableEvent(e));
   },
   dragGroupControlEnd: function (moveable, e) {
-    return Draggable.dragGroupEnd(moveable, getDraggableEvent(e));
+    return Draggable$1.dragGroupEnd(moveable, getDraggableEvent(e));
   },
   unset: function (moveable) {
-    return Draggable.unset(moveable);
+    return Draggable$1.unset(moveable);
   }
 });
 /**
@@ -41890,7 +41915,7 @@ var IndividualGroupable = {
   },
   events: {}
 };
-var MOVEABLE_ABLES = [BeforeRenderable, Default, Snappable, Pinchable, Draggable, edgeDraggable, Rotatable, Resizable, Scalable, Warpable, Scrollable, Padding, Origin, OriginDraggable, Clippable, Roundable, Groupable, IndividualGroupable, Clickable, DragArea, Renderable];
+var MOVEABLE_ABLES = [BeforeRenderable, Default, Snappable, Pinchable, Draggable$1, edgeDraggable, Rotatable$1, Resizable$1, Scalable, Warpable, Scrollable, Padding, Origin, OriginDraggable, Clippable, Roundable, Groupable, IndividualGroupable, Clickable, DragArea, Renderable];
 var MOVEABLE_EVENTS_PROPS_MAP = /*#__PURE__*/MOVEABLE_ABLES.reduce(function (current, able) {
   return __assign$2(__assign$2({}, current), "events" in able ? able.events : {});
 }, {});
@@ -52087,7 +52112,7 @@ class ColorPicker {
       });
     };
     setupTabKeys(pickcolor);
-    new Draggable$1({
+    new Draggable$2({
       selector: '#' + this.id + ' .is-draggable'
     });
     let tmp = document.createElement('div');
@@ -52952,7 +52977,7 @@ class GradientPicker {
       });
     };
     setupTabKeys(pickGradient);
-    new Draggable$1({
+    new Draggable$2({
       selector: '#' + this.id + ' .is-draggable'
     });
     const colorPicker = new ColorPicker({
@@ -75403,7 +75428,2106 @@ class Similarity {
   }
 }
 
-// import ControlPanel from './controlpanel.js';
+class Common {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.onDuplicate = options && options.onDuplicate || null;
+  }
+  transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4) {
+    this.matrix3d = new Matrix3D();
+    return this.matrix3d.transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4);
+  }
+  applyPercentage(block) {
+    const rect = this.getRect(block);
+    const container = block.parentNode;
+    let isChildBlock = false;
+    if (block.parentNode.matches(this.selector)) {
+      // child block
+      isChildBlock = true;
+    }
+
+    // const containerRect = container.getBoundingClientRect(); // if container has top/left
+    const containerRect = this.getRect(container); // if container has top/left
+    const left = (rect.left - containerRect.left) / container.offsetWidth * 100;
+    const top = (rect.top - containerRect.top) / container.offsetHeight * 100;
+    let isBlockFixed = block.classList.contains('block-steady');
+    if (isBlockFixed) {
+      let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top);
+      if (isNaN(dividerTop)) {
+        // there is possibility of 0/0
+        dividerTop = 1;
+      }
+      block.style.top = `calc((100% - ${block.offsetHeight}px)/${dividerTop})`;
+      if (isChildBlock) {
+        block.style.top = top + '%';
+      }
+      let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left);
+      if (isNaN(dividerLeft)) {
+        // there is possibility of 0/0
+        dividerLeft = 1;
+      }
+      // if(rect.left-containerRect.left===0) { // dividerLeft = Infinity
+      //     dividerLeft=1; 
+      // }
+      block.style.left = `calc((100% - ${block.offsetWidth}px)/${dividerLeft})`;
+      if (isChildBlock) {
+        block.style.left = left + '%';
+      }
+    } else {
+      const width = block.offsetWidth / container.offsetWidth * 100;
+      const height = block.offsetHeight / container.offsetHeight * 100;
+      block.style.width = width + '%';
+      block.style.height = height + '%';
+      block.style.top = top + '%';
+      block.style.left = left + '%';
+    }
+  }
+  applyPixels(block) {
+    const rect = this.getRect(block);
+    const containerRect = this.getRect(block.parentNode); // if container has top/left
+    block.style.left = rect.left - containerRect.left + 'px';
+    block.style.top = rect.top - containerRect.top + 'px';
+    block.style.width = block.offsetWidth + 'px';
+  }
+  updateHeight(block) {
+    if (!block.parentNode) return;
+    let clonedDiv = block.cloneNode(true);
+    clonedDiv.style.position = 'absolute';
+    clonedDiv.style.top = '-9999px';
+    clonedDiv.style.left = '-9999px';
+    block.parentNode.appendChild(clonedDiv);
+    clonedDiv.style.height = '';
+    setTimeout(() => {
+      let clonedDivHeight = clonedDiv.offsetHeight;
+      if (block.offsetHeight <= clonedDivHeight) {
+        block.style.height = clonedDivHeight + 'px';
+        setTimeout(() => {
+          block.parentNode.removeChild(clonedDiv);
+        }, 10);
+      } else {
+        block.parentNode.removeChild(clonedDiv);
+      }
+    }, 10);
+  }
+  duplicate() {
+    const block = this.doc.querySelector(this.selector + '.active');
+    if (!block) return;
+    if (this.onDuplicate) this.onDuplicate(block);
+  }
+  getRect(element) {
+    let group = element.parentNode.closest(this.selector);
+    if (element.closest(this.selector) && group) {
+      let transform = group.style.transform;
+      if (transform.includes('rotate')) {
+        // Create a temporary element with the same dimensions and position
+        const tempGroup = this.doc.createElement('div');
+        tempGroup.style.position = 'absolute';
+        tempGroup.style.width = group.offsetWidth + 'px';
+        tempGroup.style.height = group.offsetHeight + 'px';
+        tempGroup.style.left = group.style.left;
+        tempGroup.style.top = group.style.top;
+        // tempGroup.style.border ='red 1px solid';
+        group.parentNode.appendChild(tempGroup);
+        // const wrapperRect = tempGroup.getBoundingClientRect(); // Get the unrotated position
+
+        // Create a temporary element with the same dimensions and position
+        const tempElement = this.doc.createElement('div');
+        tempElement.style.position = 'absolute';
+        tempElement.style.width = element.offsetWidth + 'px';
+        tempElement.style.height = element.offsetHeight + 'px';
+        tempElement.style.left = element.style.left;
+        tempElement.style.top = element.style.top;
+        // tempElement.style.border ='green 1px solid';
+        tempGroup.appendChild(tempElement);
+        const tempRect = tempElement.getBoundingClientRect(); // Get the unrotated position
+
+        // let top = tempRect.top - wrapperRect.top;
+        // let left = tempRect.left - wrapperRect.left;
+
+        setTimeout(() => {
+          tempElement.parentNode.removeChild(tempElement);
+          tempGroup.parentNode.removeChild(tempGroup);
+        }, 0);
+        return tempRect;
+      }
+    }
+    const rect = element.getBoundingClientRect();
+    const transform = this.win.getComputedStyle(element).getPropertyValue('transform');
+    if (transform !== 'none') {
+      // Create a temporary element with the same dimensions and position
+      const tempElement = this.doc.createElement('div');
+      tempElement.style.position = 'absolute';
+      tempElement.style.width = element.offsetWidth + 'px';
+      tempElement.style.height = element.offsetHeight + 'px';
+      tempElement.style.left = element.style.left;
+      tempElement.style.top = element.style.top;
+      // tempElement.style.border ='green 1px solid';
+      element.parentNode.appendChild(tempElement);
+
+      // Get the unrotated position of the temporary element
+      const tempRect = tempElement.getBoundingClientRect();
+      setTimeout(() => {
+        tempElement.parentNode.removeChild(tempElement);
+      }, 1);
+      return tempRect;
+    } else {
+      return rect;
+    }
+  }
+  getTranslateValues(transformString) {
+    // Regular expression to match the translate values in the transform string
+    const regex = /translate\((-?\d+\.?\d*)px, (-?\d+\.?\d*)px\)/;
+
+    // Use the regular expression to extract x and y values
+    const match = transformString.match(regex);
+
+    // If there's a match, return an object with x and y values
+    if (match) {
+      const [, x, y] = match.map(parseFloat);
+      return {
+        x,
+        y
+      };
+    }
+
+    // If no match, return null or handle it as needed
+    return null;
+  }
+  group(className = 'is-block', groupClassName = 'is-group') {
+    let top = Infinity;
+    let left = Infinity;
+    let bottom = -Infinity;
+    let right = -Infinity;
+
+    // Check group
+    let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
+    if (blocks.length <= 1) return;
+
+    // Check if there is selected block that is part of other group
+    let ok = true;
+    blocks.forEach(block => {
+      if (block.parentNode.matches(this.selector)) {
+        // TODO: detach block
+        alert('One or more blocks belong to another group.');
+        ok = false;
+      }
+    });
+    if (!ok) return;
+    blocks.forEach(block => {
+      let elms = block.querySelectorAll(this.selector);
+      if (elms.length > 0) {
+        elms.forEach(elm => elm.classList.add('active'));
+        this.unGroup(block);
+      }
+    });
+    blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
+    blocks.forEach(block => {
+      if (!block.parentNode.matches(this.selector)) {
+        const rect = this.getRect(block);
+        let blockTop = rect.top;
+        let blockLeft = rect.left;
+        let blockWidth = block.offsetWidth;
+        let blockHeight = block.offsetHeight;
+        top = Math.min(top, blockTop);
+        left = Math.min(left, blockLeft);
+        bottom = Math.max(bottom, blockTop + blockHeight);
+        right = Math.max(right, blockLeft + blockWidth);
+      }
+    });
+    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.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)) {
+        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';
+        group.appendChild(block);
+        this.applyPercentage(block);
+      }
+    });
+    this.applyPercentage(group);
+    blocks.forEach(block => {
+      block.classList.remove('active');
+    });
+    group.classList.add('active');
+    blocks = group.querySelectorAll(this.selector);
+    blocks.forEach(target => {
+      // Remove all breakpoints
+      let attributesToRemove = [];
+      const attributes = target.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attributeName = attributes[i].name;
+        if (attributeName.includes('data--y-') || attributeName.includes('data--x-') || attributeName.includes('data--w-') || attributeName.includes('data--h-')) {
+          attributesToRemove.push(attributeName);
+        }
+      }
+      attributesToRemove.forEach(attr => {
+        target.removeAttribute(attr);
+      });
+
+      // Make/save current inline style as default
+      target.removeAttribute('data-breakpoint');
+      target.setAttribute('data--y', target.style.top);
+      target.setAttribute('data--x', target.style.left);
+      target.setAttribute('data--w', target.style.width);
+      target.setAttribute('data--h', target.style.height);
+    });
+    return group;
+  }
+  unGroup(element) {
+    let group;
+    if (element) group = element;else {
+      let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
+      blocks.forEach(block => {
+        if (block.querySelector(this.selector)) {
+          // this block is a group
+          this.unGroup(block);
+        }
+      });
+      return;
+    }
+    if (!group) return;
+    if (!group.querySelector(this.selector)) return;
+    this.applyPixels(group);
+    const rect = this.getRect(group);
+    const top = rect.top;
+    const left = rect.left;
+    const container = group.parentNode;
+    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';
+      container.appendChild(block);
+
+      // Remove all breakpoints
+      let attributesToRemove = [];
+      const attributes = block.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attributeName = attributes[i].name;
+        if (attributeName.includes('data--y-') || attributeName.includes('data--x-') || attributeName.includes('data--w-') || attributeName.includes('data--h-')) {
+          attributesToRemove.push(attributeName);
+        }
+      }
+      attributesToRemove.forEach(attr => {
+        block.removeAttribute(attr);
+      });
+      // Make/save current inline style as default
+      block.removeAttribute('data-breakpoint');
+      block.setAttribute('data--y', block.style.top);
+      block.setAttribute('data--x', block.style.left);
+      block.setAttribute('data--w', block.style.width);
+      block.setAttribute('data--h', block.style.height);
+      this.applyPercentage(block);
+    });
+    group.parentElement.removeChild(group);
+  }
+  addBreakpoint() {
+    const viewportWidth = this.win.innerWidth;
+    this.doc.body.setAttribute('data-breakpoint', viewportWidth);
+  }
+
+  /*
+  clearBreakpoint(target) { 
+       let breakpoint = target.getAttribute('data-breakpoint');
+      if(!breakpoint) return;
+      if(target.hasAttribute('data--y-'+breakpoint)) {
+          target.removeAttribute('data--y-'+breakpoint);
+          let top = target.getAttribute('data--y');
+          if(top) target.style.top = top;
+      }
+      if(target.hasAttribute('data--x-'+breakpoint)) {
+          target.removeAttribute('data--x-'+breakpoint);
+          let left = target.getAttribute('data--x');
+          if(left) target.style.left = left;
+      }
+      if(target.hasAttribute('data--w-'+breakpoint)) {
+          target.removeAttribute('data--w-'+breakpoint);
+          let width = target.getAttribute('data--w');
+          if(width) target.style.width = width;
+      }
+      if(target.hasAttribute('data--h-'+breakpoint)) {
+          target.removeAttribute('data--h-'+breakpoint);
+          let height = target.getAttribute('data--h');
+          if(height) target.style.height = height;
+      }
+      target.removeAttribute('data-breakpoint');
+       // reset
+      let top = target.getAttribute('data--y');
+      if(top)target.style.top = top;
+      let left = target.getAttribute('data--x');
+      if(left) target.style.left = left;
+      let width = target.getAttribute('data--w');
+      if(width) target.style.width = width;
+      let height = target.getAttribute('data--h');
+      if(height) target.style.height = height;
+  }
+  */
+
+  clearBreakpoint(target) {
+    let attributesToRemove = [];
+    const attributes = target.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+      const attributeName = attributes[i].name;
+      if (attributeName.includes('data--y-') || attributeName.includes('data--x-') || attributeName.includes('data--w-') || attributeName.includes('data--h-') || attributeName.includes('data--transform-') || attributeName.includes('data--matrix-')) {
+        attributesToRemove.push(attributeName);
+      }
+    }
+    attributesToRemove.forEach(attr => {
+      target.removeAttribute(attr);
+    });
+    target.removeAttribute('data-breakpoint');
+
+    // reset
+    let top = target.getAttribute('data--y');
+    if (top) target.style.top = top;
+    let left = target.getAttribute('data--x');
+    if (left) target.style.left = left;
+    let width = target.getAttribute('data--w');
+    if (width) target.style.width = width;
+    let height = target.getAttribute('data--h');
+    if (height) target.style.height = height;
+  }
+  clearAllBreakpoints(container) {
+    // REVIEW (Currently not used)
+    const elements = container.querySelectorAll(this.selector);
+    elements.forEach(target => {
+      let attributesToRemove = [];
+      const attributes = target.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attributeName = attributes[i].name;
+        if (attributeName.includes('data--y-') || attributeName.includes('data--x-') || attributeName.includes('data--w-') || attributeName.includes('data--h-') || attributeName.includes('data--transform-') || attributeName.includes('data--matrix-')) {
+          attributesToRemove.push(attributeName);
+        }
+      }
+      attributesToRemove.forEach(attr => {
+        target.removeAttribute(attr);
+      });
+    });
+    elements.forEach(target => {
+      let y = target.getAttribute('data--y');
+      let x = target.getAttribute('data--x');
+      let w = target.getAttribute('data--w');
+      let h = target.getAttribute('data--h');
+      if (y) target.style.top = y;
+      if (x) target.style.left = x;
+      if (w) target.style.width = w;
+      if (h) target.style.height = h;
+    });
+  }
+  getBreakpoints(target) {
+    let breakpoints = [];
+    const attributes = target.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+      const attributeName = attributes[i].name;
+      if (attributeName.includes('data--y-') || attributeName.includes('data--x-') || attributeName.includes('data--w-') || attributeName.includes('data--h-')) {
+        let val = attributeName.replace('data--y-', '');
+        val = val.replace('data--x-', '');
+        val = val.replace('data--w-', '');
+        val = val.replace('data--h-', '');
+        if (!breakpoints.includes(val)) breakpoints.push(val);
+      }
+    }
+    return breakpoints;
+  }
+  getSelectedBlock() {
+    const blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && !elm.classList.contains('cloned'));
+    if (blocks.length === 1) {
+      const block = blocks[0];
+      return block;
+    }
+    return false;
+  }
+  checkOverlap(target) {
+    const targetRect = target.getBoundingClientRect();
+    const blocks = Array.from(target.parentNode.querySelectorAll(this.selector)).filter(elm => !elm.classList.contains('cloned'));
+    let overlappedBlocks = [];
+    for (const block of blocks) {
+      if (block !== target) {
+        const blockRect = block.getBoundingClientRect();
+        if (targetRect.top < blockRect.bottom && targetRect.bottom > blockRect.top && targetRect.left < blockRect.right && targetRect.right > blockRect.left) {
+          overlappedBlocks.push(block);
+        }
+      }
+    }
+    return overlappedBlocks;
+  }
+}
+class Matrix3D {
+  adj(m) {
+    return [m[4] * m[8] - m[5] * m[7], m[2] * m[7] - m[1] * m[8], m[1] * m[5] - m[2] * m[4], m[5] * m[6] - m[3] * m[8], m[0] * m[8] - m[2] * m[6], m[2] * m[3] - m[0] * m[5], m[3] * m[7] - m[4] * m[6], m[1] * m[6] - m[0] * m[7], m[0] * m[4] - m[1] * m[3]];
+  }
+  multmm(a, b) {
+    const c = Array(9);
+    for (var i = 0; i != 3; ++i) {
+      for (var j = 0; j != 3; ++j) {
+        var cij = 0;
+        for (var k = 0; k != 3; ++k) {
+          cij += a[3 * i + k] * b[3 * k + j];
+        }
+        c[3 * i + j] = cij;
+      }
+    }
+    return c;
+  }
+  multmv(m, v) {
+    return [m[0] * v[0] + m[1] * v[1] + m[2] * v[2], m[3] * v[0] + m[4] * v[1] + m[5] * v[2], m[6] * v[0] + m[7] * v[1] + m[8] * v[2]];
+  }
+  pdbg(m, v) {
+    const r = this.multmv(m, v);
+    return r + ' (' + r[0] / r[2] + ', ' + r[1] / r[2] + ')';
+  }
+  basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) {
+    const m = [x1, x2, x3, y1, y2, y3, 1, 1, 1];
+    const v = this.multmv(this.adj(m), [x4, y4, 1]);
+    return this.multmm(m, [v[0], 0, 0, 0, v[1], 0, 0, 0, v[2]]);
+  }
+  general2DProjection(x1s, y1s, x1d, y1d, x2s, y2s, x2d, y2d, x3s, y3s, x3d, y3d, x4s, y4s, x4d, y4d) {
+    const s = this.basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s);
+    const d = this.basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d);
+    return this.multmm(d, this.adj(s));
+  }
+  project(m, x, y) {
+    const v = this.multmv(m, [x, y, 1]);
+    return [v[0] / v[2], v[1] / v[2]];
+  }
+  transform2d(element, x1, y1, x2, y2, x3, y3, x4, y4) {
+    const w = element.offsetWidth,
+      h = element.offsetHeight;
+    let t = this.general2DProjection(0, 0, x1, y1, w, 0, x2, y2, 0, h, x3, y3, w, h, x4, y4);
+    for (let i = 0; i != 9; ++i) t[i] = t[i] / t[8];
+    t = [t[0], t[3], 0, t[6], t[1], t[4], 0, t[7], 0, 0, 1, 0, t[2], t[5], 0, t[8]];
+    t = 'matrix3d(' + t.join(', ') + ')';
+    return t;
+  }
+}
+class Ruler {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    const rulerHTML = `
+            <div class="ruler horizontal-ruler" id="horizontal-ruler-top"></div>
+            <div class="ruler horizontal-ruler" id="horizontal-ruler-bottom"></div>
+            <div class="ruler horizontal-ruler" id="horizontal-ruler-middle"></div>
+            <div class="ruler vertical-ruler" id="vertical-ruler-left"></div>
+            <div class="ruler vertical-ruler" id="vertical-ruler-right"></div>
+            <div class="ruler vertical-ruler" id="vertical-ruler-center"></div>
+        `;
+    if (!this.doc.getElementById('horizontal-ruler-top')) this.doc.body.insertAdjacentHTML('beforeend', rulerHTML);
+    this.horizontalRulerTop = this.doc.getElementById('horizontal-ruler-top');
+    this.horizontalRulerBottom = this.doc.getElementById('horizontal-ruler-bottom');
+    this.horizontalRulerMiddle = this.doc.getElementById('horizontal-ruler-middle');
+    this.verticalRulerLeft = this.doc.getElementById('vertical-ruler-left');
+    this.verticalRulerRight = this.doc.getElementById('vertical-ruler-right');
+    this.verticalRulerCenter = this.doc.getElementById('vertical-ruler-center');
+    this.setup();
+  }
+  setup() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+  }
+  refresh() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+  }
+  destroy() {
+    [this.horizontalRulerTop, this.horizontalRulerBottom, this.verticalRulerLeft, this.verticalRulerRight].forEach(elm => {
+      if (elm.parentNode) elm.parentNode.removeChild(elm);
+    });
+  }
+  hideRulers() {
+    this.horizontalRulerTop.style.top = '-1000px';
+    this.horizontalRulerBottom.style.top = '-1000px';
+    this.horizontalRulerMiddle.style.top = '-1000px';
+    this.verticalRulerLeft.style.left = '-1000px';
+    this.verticalRulerRight.style.left = '-1000px';
+    this.verticalRulerCenter.style.left = '-1000px';
+    this.rulerTop = null;
+    this.rulerLeft = null;
+    this.rulerRight = null;
+  }
+  updateRulers(block) {
+    // if(block.querySelector(this.selector)) return; // group (because updateRules also calls parent group if child block is dragged)
+
+    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 rect = block.getBoundingClientRect();
+    const top = rect.top;
+    const bottom = top + block.offsetHeight;
+    const left = rect.left;
+    const right = left + block.offsetWidth;
+    const center = left + block.offsetWidth / 2;
+    const middle = top + block.offsetHeight / 2;
+    this.rulerTop = null;
+    this.rulerLeft = null;
+    this.rulerRight = null;
+    let containerTop = 0;
+    const container = block.parentNode;
+    if (container) {
+      this.elements = container.querySelectorAll(this.selector);
+      containerTop = this.win.scrollY;
+    }
+    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 rect = element.getBoundingClientRect();
+        const otherTop = rect.top;
+        const otherBottom = rect.top + element.offsetHeight;
+        const otherLeft = rect.left;
+        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) {
+          this.horizontalRulerTop.style.top = containerTop + otherTop + 'px';
+          let val = otherTop;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+        if (otherBottom - 4 <= top && top <= otherBottom + 4) {
+          this.horizontalRulerTop.style.top = containerTop + otherBottom + 'px';
+          let val = otherBottom;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+
+        // block bottom
+        if (otherTop - 4 <= bottom && bottom <= otherTop + 4) {
+          this.horizontalRulerBottom.style.top = containerTop + otherTop + 'px';
+          let val = otherTop - block.offsetHeight;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+        if (otherBottom - 4 <= bottom && bottom <= otherBottom + 4) {
+          this.horizontalRulerBottom.style.top = containerTop + otherBottom + 'px';
+          let val = otherBottom - block.offsetHeight;
+          if (this.rulerTop === null) this.rulerTop = val;
+        }
+
+        // block left
+        if (otherLeft - 4 <= left && left <= otherLeft + 4) {
+          this.verticalRulerLeft.style.left = otherLeft + 'px';
+          this.verticalRulerLeft.style.top = containerTop + 'px'; // adj
+
+          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.style.top = containerTop + 'px'; // adj
+
+          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.style.top = containerTop + 'px'; // adj
+
+          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.style.top = containerTop + 'px'; // adj
+
+          let val = otherRight;
+          if (this.rulerRight === null) this.rulerRight = val;
+        }
+      }
+    });
+
+    // Edges
+    const conRect = block.parentNode.getBoundingClientRect();
+    const conTop = conRect.top;
+    const conBottom = conRect.top + block.parentNode.offsetHeight;
+    const conLeft = conRect.left;
+    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
+    if (conTop - 4 <= top && top <= conTop + 4) {
+      this.horizontalRulerTop.style.top = containerTop + conTop + 'px';
+      let val = conTop;
+      if (this.rulerTop === null) this.rulerTop = val;
+    }
+    // block bottom
+    if (conBottom - 4 <= bottom && bottom <= conBottom + 4) {
+      this.horizontalRulerBottom.style.top = containerTop + conBottom - 3 + 'px'; // -3 is an adjustment to make the line visible
+
+      let val = conBottom - block.offsetHeight;
+      if (this.rulerTop === null) this.rulerTop = val;
+    }
+    // block left
+    if (conLeft - 4 <= left && left <= conLeft + 4) {
+      this.verticalRulerLeft.style.left = conLeft + 2 + 'px'; // +3 is an adjustment
+      this.verticalRulerLeft.style.top = containerTop + 'px';
+      let val = conLeft;
+      if (this.rulerLeft === null) this.rulerLeft = val;
+    }
+    // block right
+    if (conRight - 4 <= right && right <= conRight + 4) {
+      this.verticalRulerRight.style.left = conRight - 2 + 'px'; // -2 is an adjustment
+      this.verticalRulerRight.style.top = containerTop + 'px';
+      let val = conRight;
+      if (this.rulerRight === null) this.rulerRight = val;
+    }
+  }
+}
+class Rotatable {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.onBeforeChange = options && options.onBeforeChange || null;
+    this.onChange = options && options.onChange || null;
+    this.disableOnMobile = options && options.disableOnMobile || 0;
+    this.centerX = 0;
+    this.centerY = 0;
+    this.initialRotation = 0;
+    this.handleRotateStart = this.handleRotateStart.bind(this);
+    this.handleDblClick = this.handleDblClick.bind(this);
+    this.handleRotateMove = this.handleRotateMove.bind(this);
+    this.handleRotateEnd = this.handleRotateEnd.bind(this);
+    this.setup();
+    this.common = new Common({
+      selector: this.selector
+    });
+  }
+  setup() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      element.querySelectorAll('.rotate-handle').forEach(elm => elm.parentNode.removeChild(elm));
+      const handleHTML = '<div class="rotate-handle" contentEditable="false"><div></div></div>';
+      element.insertAdjacentHTML('afterbegin', handleHTML);
+      const handles = Array.from(element.querySelectorAll('.rotate-handle')).filter(handle => handle.parentElement === element);
+      handles.forEach(handle => {
+        handle.addEventListener('mousedown', this.handleRotateStart);
+        handle.addEventListener('touchstart', this.handleRotateStart, {
+          passive: false
+        });
+        handle.addEventListener('dblclick', this.handleDblClick);
+      });
+    });
+  }
+  refresh() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      let handles = Array.from(element.querySelectorAll('.rotate-handle')).filter(handle => handle.parentElement === element); // only one handle
+      handles.forEach(handle => {
+        handle.removeEventListener('mousedown', this.handleRotateStart);
+        handle.removeEventListener('touchstart', this.handleRotateStart);
+        handle.removeEventListener('dblclick', this.handleDblClick);
+        handle.parentNode.removeChild(handle);
+      });
+      const handleHTML = '<div class="rotate-handle" contentEditable="false"><div></div></div>';
+      element.insertAdjacentHTML('afterbegin', handleHTML);
+      handles = Array.from(element.querySelectorAll('.rotate-handle')).filter(handle => handle.parentElement === element); // only one handle
+      handles.forEach(handle => {
+        handle.addEventListener('mousedown', this.handleRotateStart);
+        handle.addEventListener('touchstart', this.handleRotateStart, {
+          passive: false
+        });
+        handle.addEventListener('dblclick', this.handleDblClick);
+      });
+    });
+  }
+  destroy(block) {
+    if (block) {
+      this.elements = this.doc.querySelectorAll(this.selector);
+      this.elements.forEach(element => {
+        if (element === block) {
+          const handles = Array.from(element.querySelectorAll('.rotate-handle')).filter(handle => handle.parentElement === element);
+          handles.forEach(handle => {
+            handle.removeEventListener('mousedown', this.handleRotateStart);
+            handle.removeEventListener('touchstart', this.handleRotateStart);
+            handle.removeEventListener('dblclick', this.handleDblClick);
+            handle.parentNode.removeChild(handle);
+          });
+        }
+      });
+    } else {
+      this.elements = this.doc.querySelectorAll(this.selector);
+      this.elements.forEach(element => {
+        const handles = Array.from(element.querySelectorAll('.rotate-handle')).filter(handle => handle.parentElement === element);
+        handles.forEach(handle => {
+          handle.removeEventListener('mousedown', this.handleRotateStart);
+          handle.removeEventListener('touchstart', this.handleRotateStart);
+          handle.removeEventListener('dblclick', this.handleDblClick);
+          handle.parentNode.removeChild(handle);
+        });
+      });
+    }
+  }
+  handleDblClick(event) {
+    if (this.onBeforeChange) this.onBeforeChange();
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const block = event.target.parentNode;
+    const transform = block.style.transform;
+    if (transform.includes('rotate')) block.style.transform = '';
+    this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
+    if (this.clonedTarget) this.clonedTarget.style.transform = '';
+    if (this.onChange) this.onChange();
+  }
+  handleRotateStart(event) {
+    const viewportWidth = this.win.innerWidth;
+    if (viewportWidth <= this.disableOnMobile) return;
+    if (event.type === 'touchstart' && event.touches.length !== 1) {
+      return; // Do nothing if more than one touch point is detected
+    }
+
+    if (event.type === 'mousedown' && event.button !== 0) {
+      return; // Do nothing if the right mouse button is clicked
+    }
+
+    event.preventDefault();
+    this.target = event.target.parentNode; // block
+
+    this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
+    this.dragStartTimeout = setTimeout(() => {
+      // Set a timeout before starting the drag (to differentiate from click)
+
+      if (event.type === 'mousedown') {
+        this.startRotation(event.clientX, event.clientY);
+      } else if (event.type === 'touchstart') {
+        const touch = event.touches[0];
+        this.startRotation(touch.clientX, touch.clientY);
+      }
+      this.doc.addEventListener('mousemove', this.handleRotateMove);
+      this.doc.addEventListener('touchmove', this.handleRotateMove);
+    }, 120);
+    this.doc.addEventListener('mouseup', this.handleRotateEnd);
+    this.doc.addEventListener('touchend', this.handleRotateEnd);
+  }
+  handleRotateMove() {
+    let clientX, clientY;
+    if (event.type === 'mousemove') {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    } else if (event.type === 'touchmove') {
+      const touch = event.touches[0];
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    }
+    this.updateRotation(clientX, clientY);
+  }
+  handleRotateEnd() {
+    clearTimeout(this.dragStartTimeout);
+    this.doc.removeEventListener('mousemove', this.handleRotateMove);
+    this.doc.removeEventListener('touchmove', this.handleRotateMove);
+    this.doc.removeEventListener('mouseup', this.handleRotateEnd);
+    this.doc.removeEventListener('touchend', this.handleRotateEnd);
+    if (this.onChange) this.onChange();
+  }
+  getCurrentRotation(transform) {
+    const match = transform.match(/rotate\(([-+]?\d*\.?\d*)deg\)/);
+    return match ? parseFloat(match[1]) : 0;
+  }
+  startRotation() {
+    if (this.onBeforeChange) this.onBeforeChange();
+    const target = this.target;
+    const rect = target.getBoundingClientRect();
+    this.centerX = rect.left + rect.width / 2;
+    this.centerY = rect.top + rect.height / 2;
+
+    // Store the initial rotation
+    if (target.parentNode.matches(this.selector)) {
+      const currentTransform = target.style.transform;
+      let currentRotation = this.getCurrentRotation(currentTransform);
+      this.initialRotation = currentRotation;
+      const parentTransform = target.parentNode.style.transform;
+      let parentRotation = this.getCurrentRotation(parentTransform);
+      if (parentRotation) {
+        this.initialRotation = parentRotation;
+      }
+    } else {
+      this.initialRotation = 0; // If no child blocks
+    }
+  }
+
+  updateRotation(x, y) {
+    const target = this.target;
+    const angle = Math.atan2(y - this.centerY, x - this.centerX);
+    const degrees = angle * (180 / Math.PI);
+    const initialRotation = this.initialRotation || 0;
+    target.style.transform = `rotate(${degrees - initialRotation}deg)`;
+    if (this.clonedTarget) this.clonedTarget.style.transform = `rotate(${degrees - initialRotation}deg)`;
+  }
+}
+class Resizable {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.onBeforeChange = options && options.onBeforeChange || null;
+    this.onChange = options && options.onChange || null;
+    this.disableOnMobile = options && options.disableOnMobile || 0;
+    this.isResizing = false;
+    this.resizeHandle = null;
+    this.startX = 0;
+    this.startY = 0;
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.startResizing = this.startResizing.bind(this);
+    this.handleResizeMove = this.handleResizeMove.bind(this);
+    this.handleResizeEnd = this.handleResizeEnd.bind(this);
+    this.setup();
+    this.ruler = new Ruler({
+      selector: this.selector,
+      doc: this.doc,
+      win: this.win
+    });
+    this.common = new Common({
+      selector: this.selector,
+      doc: this.doc,
+      win: this.win
+    });
+  }
+  setup() {
+    this.elements.forEach(element => {
+      element.querySelectorAll('.handle').forEach(elm => elm.parentNode.removeChild(elm));
+      const handleHTML = `
+            <div class="handle top-left"></div>
+            <div class="handle top-right"></div>
+            <div class="handle bottom-left"></div>
+            <div class="handle bottom-right"></div>
+            
+            <div class="handle top"></div>
+            <div class="handle bottom"></div>
+            <div class="handle left"></div>
+            <div class="handle right"></div>`;
+      element.insertAdjacentHTML('afterbegin', handleHTML);
+      const handles = Array.from(element.querySelectorAll('.handle')).filter(handle => handle.parentElement === element);
+      handles.forEach(handle => {
+        handle.addEventListener('mousedown', this.startResizing);
+        handle.addEventListener('touchstart', this.startResizing, {
+          passive: false
+        });
+      });
+    });
+  }
+  refresh() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      let handles = Array.from(element.querySelectorAll('.handle')).filter(handle => handle.parentElement === element);
+      handles.forEach(handle => {
+        handle.removeEventListener('mousedown', this.startResizing);
+        handle.removeEventListener('touchstart', this.startResizing);
+        handle.parentNode.removeChild(handle);
+      });
+      const handleHTML = `
+                <div class="handle top-left"></div>
+                <div class="handle top-right"></div>
+                <div class="handle bottom-left"></div>
+                <div class="handle bottom-right"></div>
+            
+                <div class="handle top"></div>
+                <div class="handle bottom"></div>
+                <div class="handle left"></div>
+                <div class="handle right"></div>`;
+      element.insertAdjacentHTML('afterbegin', handleHTML);
+      handles = Array.from(element.querySelectorAll('.handle')).filter(handle => handle.parentElement === element);
+      handles.forEach(handle => {
+        handle.addEventListener('mousedown', this.startResizing);
+        handle.addEventListener('touchstart', this.startResizing, {
+          passive: false
+        });
+      });
+    });
+    this.ruler.refresh();
+  }
+  destroy(block) {
+    if (block) {
+      const handles = Array.from(block.querySelectorAll('.handle')).filter(handle => handle.parentElement === block);
+      handles.forEach(handle => {
+        handle.removeEventListener('mousedown', this.startResizing);
+        handle.removeEventListener('touchstart', this.startResizing);
+        handle.parentNode.removeChild(handle);
+      });
+    } else {
+      const handles = this.doc.querySelectorAll('.handle');
+      handles.forEach(handle => {
+        handle.removeEventListener('mousedown', this.startResizing);
+        handle.removeEventListener('touchstart', this.startResizing);
+        handle.parentNode.removeChild(handle);
+      });
+      this.ruler.destroy();
+    }
+  }
+  startResizing(event) {
+    const viewportWidth = this.win.innerWidth;
+    if (viewportWidth <= this.disableOnMobile) return;
+    if (event.type === 'touchstart' && event.touches.length !== 1) {
+      return; // Do nothing if more than one touch point is detected
+    }
+
+    if (event.type === 'mousedown' && event.button !== 0) {
+      return; // Do nothing if the right mouse button is clicked
+    }
+
+    this.target = event.target.parentNode; // block
+
+    this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragStartTimeout = setTimeout(() => {
+      // Set a timeout before starting the drag (to differentiate from click)
+
+      if (this.onBeforeChange) this.onBeforeChange();
+      const handle = event.target.closest('.handle');
+      this.isResizing = true;
+      this.resizeHandle = handle.classList[1];
+      if (event.type === 'mousedown') {
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+      } else if (event.type === 'touchstart') {
+        const touch = event.touches[0];
+        this.startX = touch.clientX;
+        this.startY = touch.clientY;
+      }
+
+      //Initial
+      this.initialWidth = parseFloat(getComputedStyle(this.target).width);
+      this.initialHeight = parseFloat(getComputedStyle(this.target).height);
+      const containerRect = this.common.getRect(this.target.parentNode);
+      const rect = this.common.getRect(this.target);
+      this.initialLeft = rect.left - containerRect.left;
+      this.initialTop = rect.top - containerRect.top;
+      this.common.applyPixels(this.target);
+    }, 120);
+    this.doc.addEventListener('mousemove', this.handleResizeMove);
+    this.doc.addEventListener('mouseup', this.handleResizeEnd);
+    this.doc.addEventListener('touchmove', this.handleResizeMove);
+    this.doc.addEventListener('touchend', this.handleResizeEnd);
+  }
+  handleResizeMove(event) {
+    if (this.isResizing) {
+      let deltaX, deltaY;
+      if (event.type === 'mousemove') {
+        deltaX = event.clientX - this.startX;
+        deltaY = event.clientY - this.startY;
+      } else if (event.type === 'touchmove') {
+        const touch = event.touches[0];
+        deltaX = touch.clientX - this.startX;
+        deltaY = touch.clientY - this.startY;
+      }
+      this.target.style.minWidth = ''; // to ensure no resize limit
+      if (this.clonedTarget) this.clonedTarget.style.minWidth = '';
+      switch (this.resizeHandle) {
+        case 'top-left':
+          this.resizeTopLeft(deltaX, deltaY);
+          break;
+        case 'top-right':
+          this.resizeTopRight(deltaX, deltaY);
+          break;
+        case 'bottom-left':
+          this.resizeBottomLeft(deltaX, deltaY);
+          break;
+        case 'bottom-right':
+          this.resizeBottomRight(deltaX, deltaY);
+          break;
+        case 'top':
+          this.resizeTop(deltaY);
+          break;
+        case 'left':
+          this.resizeLeft(deltaX);
+          break;
+        case 'bottom':
+          this.resizeBottom(deltaY);
+          break;
+        case 'right':
+          this.resizeRight(deltaX);
+          break;
+      }
+      this.ruler.updateRulers(this.target);
+    }
+  }
+  handleResizeEnd() {
+    clearTimeout(this.dragStartTimeout);
+    this.stopResizing();
+    this.doc.removeEventListener('mousemove', this.handleResizeMove);
+    this.doc.removeEventListener('mouseup', this.handleResizeEnd);
+    this.doc.removeEventListener('touchmove', this.handleResizeMove);
+    this.doc.removeEventListener('touchend', this.handleResizeEnd);
+    this.ruler.hideRulers();
+  }
+  resizeTopLeft(deltaX, deltaY) {
+    this.target.style.left = this.initialLeft + deltaX + 'px';
+    this.target.style.top = this.initialTop + deltaY + 'px';
+    this.target.style.width = this.initialWidth - deltaX + 'px';
+    this.target.style.height = this.initialHeight - deltaY + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
+      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
+      this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
+    }
+  }
+  resizeTopRight(deltaX, deltaY) {
+    this.target.style.width = this.initialWidth + deltaX + 'px';
+    this.target.style.top = this.initialTop + deltaY + 'px';
+    this.target.style.height = this.initialHeight - deltaY + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
+      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
+    }
+  }
+  resizeBottomLeft(deltaX, deltaY) {
+    this.target.style.width = this.initialWidth - deltaX + 'px';
+    this.target.style.height = this.initialHeight + deltaY + 'px';
+    this.target.style.left = this.initialLeft + deltaX + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
+      this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
+      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
+    }
+  }
+  resizeBottomRight(deltaX, deltaY) {
+    this.target.style.width = this.initialWidth + deltaX + 'px';
+    this.target.style.height = this.initialHeight + deltaY + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
+      this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
+    }
+  }
+  resizeTop(deltaY) {
+    this.target.style.top = this.initialTop + deltaY + 'px';
+    this.target.style.height = this.initialHeight - deltaY + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
+    }
+  }
+  resizeBottom(deltaY) {
+    this.target.style.height = this.initialHeight + deltaY + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
+    }
+  }
+  resizeLeft(deltaX) {
+    this.target.style.width = this.initialWidth - deltaX + 'px';
+    this.target.style.left = this.initialLeft + deltaX + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
+      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
+    }
+  }
+  resizeRight(deltaX) {
+    this.target.style.width = this.initialWidth + deltaX + 'px';
+    if (this.clonedTarget) {
+      this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
+    }
+  }
+  stopResizing() {
+    if (this.isResizing) {
+      if (this.target) {
+        this.updateBlockStyle(this.target);
+        if (this.clonedTarget) this.updateBlockStyle(this.clonedTarget);
+      }
+      this.isResizing = false;
+    }
+  }
+  updateBlockStyle(target) {
+    if (target.querySelector(this.selector)) ; else {
+      // this.common.updateHeight(target);
+      if (target.classList.contains('height-auto')) target.style.height = '';
+    }
+
+    // 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 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.ruler.rulerRight !== null) {
+        // If so, keep the left position
+        // target.style.left = newLeft + 'px';
+
+        // And update the width to align with vertical right ruler
+        const rect = target.getBoundingClientRect();
+        target.style.width = this.ruler.rulerRight - rect.left + 'px';
+      }
+    } 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 container has top/left
+        const containerRect = target.parentNode.getBoundingClientRect();
+        this.ruler.rulerLeft = this.ruler.rulerLeft - containerRect.left;
+
+        // 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';
+      }
+    }
+
+    // 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;
+      // }
+
+      if (breakpoint && breakpoint < 1920) {
+        target.setAttribute('data--y-' + breakpoint, target.style.top);
+        target.setAttribute('data--x-' + breakpoint, target.style.left);
+        target.setAttribute('data--w-' + breakpoint, target.style.width);
+        target.setAttribute('data--h-' + breakpoint, target.style.height);
+      } else {
+        target.setAttribute('data--y', target.style.top);
+        target.setAttribute('data--x', target.style.left);
+        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 (this.onChange) this.onChange();
+  }
+}
+class Draggable {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.onDelete = options && options.onDelete || null;
+    this.onBeforeChange = options && options.onBeforeChange || null;
+    this.onChange = options && options.onChange || null;
+    this.onSelectStart = options && options.onSelectStart || null;
+    this.onSelectClear = options && options.onSelectClear || null;
+    this.disableOnMobile = options && options.disableOnMobile || 0;
+    this.onMultipleSelect = options && options.onMultipleSelect || null;
+    this.onSelectBlock = options && options.onSelectBlock || null;
+    this.isDragging = false;
+    this.startX = 0;
+    this.startY = 0;
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDragMove = this.handleDragMove.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.setup();
+    this.ruler = new Ruler({
+      selector: this.selector,
+      doc: this.doc,
+      win: this.win
+    });
+    this.common = new Common({
+      selector: this.selector,
+      doc: this.doc,
+      win: this.win
+    });
+  }
+  setup() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      element.addEventListener('mousedown', this.handleDragStart);
+      element.addEventListener('touchstart', this.handleDragStart, {
+        passive: false
+      });
+    });
+    this.doc.addEventListener('mousedown', this.handleSelect);
+    this.doc.addEventListener('touchstart', this.handleSelect, {
+      passive: false
+    });
+    this.doc.addEventListener('keydown', this.handleKeyDown);
+  }
+  refresh() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      element.removeEventListener('mousedown', this.handleDragStart);
+      element.removeEventListener('touchstart', this.handleDragStart);
+    });
+    this.elements.forEach(element => {
+      element.addEventListener('mousedown', this.handleDragStart);
+      element.addEventListener('touchstart', this.handleDragStart, {
+        passive: false
+      });
+    });
+    this.ruler.refresh();
+  }
+  destroy() {
+    this.ruler.destroy();
+    this.elements.forEach(element => {
+      element.removeEventListener('mousedown', this.handleDragStart);
+      element.removeEventListener('touchstart', this.handleDragStart);
+    });
+    this.doc.removeEventListener('mousedown', this.handleSelect);
+    this.doc.removeEventListener('touchstart', this.handleSelect);
+    this.doc.removeEventListener('keydown', this.handleKeyDown);
+    const blocks = this.doc.querySelectorAll(this.selector);
+    blocks.forEach(elm => elm.classList.remove('active'));
+  }
+  disableDrag(block) {
+    this.elements.forEach(element => {
+      if (block === element) {
+        element.removeEventListener('mousedown', this.handleDragStart);
+        element.removeEventListener('touchstart', this.handleDragStart);
+      }
+    });
+  }
+  enableDrag(block) {
+    this.elements.forEach(element => {
+      if (block === element) {
+        element.addEventListener('mousedown', this.handleDragStart);
+        element.addEventListener('touchstart', this.handleDragStart, {
+          passive: false
+        });
+      }
+    });
+  }
+  handleDragStart(event) {
+    const viewportWidth = this.win.innerWidth;
+    if (viewportWidth <= this.disableOnMobile) return;
+    if (event.target.classList.contains('rotate-handle')) return;
+    if (event.type === 'touchstart' && event.touches.length !== 1) {
+      return; // Do nothing if more than one touch point is detected
+    }
+
+    if (event.type === 'mousedown' && event.button !== 0) {
+      return; // Do nothing if the right mouse button is clicked
+    }
+
+    const currentTarget = event.currentTarget;
+    const clickedBlock = event.target.closest(this.selector);
+    if (currentTarget !== clickedBlock) {
+      // Triggered Group click by child block click
+      return; // Return here, so that when block events are working, group events won't
+    }
+
+    this.clickedBlock = clickedBlock;
+    this.dragStartTimeout = setTimeout(() => {
+      // Set a timeout before starting the drag (to differentiate from click)
+
+      if (event.type === 'mousedown') {
+        this.startDragging(event.clientX, event.clientY, currentTarget);
+      } else if (event.type === 'touchstart') {
+        const touch = event.touches[0];
+        this.startDragging(touch.clientX, touch.clientY, currentTarget);
+      }
+      this.doc.addEventListener('mousemove', this.handleDragMove);
+      this.doc.addEventListener('touchmove', this.handleDragMove);
+    }, 120);
+    this.doc.addEventListener('mouseup', this.handleDragEnd);
+    this.doc.addEventListener('touchend', this.handleDragEnd);
+  }
+  startDragging(startX, startY) {
+    if (this.onBeforeChange) this.onBeforeChange();
+    this.isDragging = true;
+    const blocks = this.doc.querySelectorAll(this.selector + '.active');
+    blocks.forEach(target => {
+      // const containerRect = target.parentNode.getBoundingClientRect(); // if container has top/left
+      const containerRect = this.common.getRect(target.parentNode); // if container has top/left
+      const rect = this.common.getRect(target);
+      const x = startX - rect.left + containerRect.left;
+      const y = startY - rect.top + containerRect.top;
+      target.setAttribute('data-startx', x);
+      target.setAttribute('data-starty', y);
+      this.common.applyPixels(target);
+    });
+    this.clickedBlock = this.common.getSelectedBlock();
+  }
+  handleDragMove(event) {
+    let clientX, clientY;
+    if (event.type === 'mousemove') {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    } else if (event.type === 'touchmove') {
+      const touch = event.touches[0];
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    }
+    if (this.isDragging) {
+      // Allows dragging multiple selected blocks
+
+      let blocks = this.doc.querySelectorAll(this.selector + '.active');
+      blocks.forEach(target => {
+        this.updatePosition(clientX, clientY, target);
+      });
+
+      // Ruler works for single block selection only
+      if (this.clickedBlock) this.ruler.updateRulers(this.clickedBlock);
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  updatePosition(x, y, target) {
+    if (this.isDragging) {
+      const startX = target.getAttribute('data-startx');
+      const startY = target.getAttribute('data-starty');
+      const newX = x - startX;
+      const newY = y - startY;
+      target.style.left = newX + 'px';
+      target.style.top = newY + 'px';
+    }
+  }
+  handleDragEnd() {
+    clearTimeout(this.dragStartTimeout);
+    if (this.isDragging) {
+      this.doc.removeEventListener('mousemove', this.handleDragMove);
+      this.doc.removeEventListener('touchmove', this.handleDragMove);
+    }
+    this.doc.removeEventListener('mouseup', this.handleDragEnd);
+    this.doc.removeEventListener('touchend', this.handleDragEnd);
+    this.stopDragging();
+    this.ruler.hideRulers();
+    let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && !elm.classList.contains('multi'));
+    if (blocks.length === 1) {
+      const block = blocks[0];
+      if (this.onSelectStart) this.onSelectStart(block); // on first block select (before clone) 
+    }
+  }
+
+  stopDragging() {
+    if (this.isDragging) {
+      const blocks = this.doc.querySelectorAll(this.selector + '.active');
+      blocks.forEach(target => {
+        this.updateBlockStyle(target);
+      });
+      this.isDragging = false;
+    }
+  }
+  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';
+    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);
+    const breakpoint = this.doc.body.getAttribute('data-breakpoint');
+
+    // const screenWidth = window.innerWidth;
+    // let defaultPoint;
+    // if(screenWidth<=1920) {
+    //     defaultPoint = 1366;
+    // } else {
+    //     defaultPoint = 1900;
+    // }
+
+    if (breakpoint && breakpoint < 1920) {
+      target.setAttribute('data--y-' + breakpoint, target.style.top);
+      target.setAttribute('data--x-' + breakpoint, target.style.left);
+      target.setAttribute('data--w-' + breakpoint, target.style.width);
+      target.setAttribute('data--h-' + breakpoint, target.style.height);
+    } else {
+      target.setAttribute('data--y', target.style.top);
+      target.setAttribute('data--x', target.style.left);
+      target.setAttribute('data--w', target.style.width);
+      target.setAttribute('data--h', target.style.height);
+    }
+    target.removeAttribute('data-prev'); // reset
+    target.removeAttribute('data-fluid');
+    if (this.onChange) this.onChange();
+  }
+  handleSelect(event) {
+    const element = event.target;
+    if (element.classList.contains('rotate-handle')) return;
+    const block = element.closest(this.selector);
+    if (block) {
+      if (block.classList.contains('active')) {
+        let actualBlock = block.classList.contains('clone') ? this.doc.querySelector(this.selector + '.cloned') : null;
+        if (!actualBlock) actualBlock = block;
+        if (this.onSelectBlock) this.onSelectBlock(actualBlock);
+        return; // if clicked block is active
+      }
+      // if(block.parentNode.classList.contains('active')) return; // if group is active
+
+      if (block.matches(this.selector) && block.querySelector(this.selector)) {
+        // if group is clicked, remove active childe's blocks
+        block.querySelectorAll(this.selector).forEach(elm => elm.classList.remove('active'));
+      }
+      if (event.shiftKey || this.doc.body.classList.contains('multi-select')) {
+        // multi select
+        block.classList.add('active');
+        if (this.onMultipleSelect) this.onMultipleSelect();
+      } else {
+        if (this.onSelectClear) this.onSelectClear();
+        this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
+        block.classList.add('active');
+        let actualBlock = block.classList.contains('clone') ? this.doc.querySelector(this.selector + '.cloned') : null;
+        if (!actualBlock) actualBlock = block;
+        if (this.onSelectBlock) this.onSelectBlock(actualBlock);
+      }
+      if (!block.parentNode) return; // just in case
+
+      // Higlight parent group if current child block is clicked
+      if (block.parentNode.matches(this.selector)) {
+        block.parentNode.classList.add('block-active');
+      } else {
+        this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
+      }
+    } else {
+      if (event.target.closest('.keep-selection')) return;
+
+      // // Make empty height set with value
+      // // if(this.clickedBlock) this.common.updateHeight(this.clickedBlock);
+      // // Check
+      // if(this.clickedBlock && !this.clickedBlock.classList.contains('clone')) {
+      //     this.common.updateHeight(this.clickedBlock);
+      // }
+
+      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();
+    }
+
+    // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
+    let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && !elm.classList.contains('clone'));
+    if (blocks.length > 1) {
+      blocks.forEach(block => {
+        block.classList.add('multi');
+      });
+    } else {
+      const elms = this.doc.querySelectorAll('.multi');
+      elms.forEach(elm => elm.classList.remove('multi'));
+    }
+  }
+  delete() {
+    let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && elm.classList.contains('editable'));
+    if (blocks.length > 0) return;
+    if (this.onBeforeChange) this.onBeforeChange();
+    blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
+    blocks.forEach(element => {
+      element.removeEventListener('mousedown', this.handleDragStart);
+      element.removeEventListener('touchstart', this.handleDragStart);
+      if (this.onDelete) this.onDelete(element);
+      element.parentNode.removeChild(element);
+    });
+    if (this.onChange) this.onChange();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Delete' || event.key === 'Backspace' || event.keyCode === 46) {
+      this.delete();
+    }
+  }
+}
+class Editable {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.controlSelector = options && options.controlSelector || null;
+    this.onEditStart = options && options.onEditStart || null;
+    this.onEditEnd = options && options.onEditEnd || null;
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.onContentClick = options && options.onContentClick || null;
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.handleEditStart = this.handleEditStart.bind(this);
+    this.handleMouseClick = this.handleMouseClick.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.setup();
+  }
+  setup() {
+    this.elements.forEach(element => {
+      element.addEventListener('dblclick', this.handleEditStart);
+      element.addEventListener('touchstart', this.handleTouchStart, {
+        passive: false
+      });
+    });
+  }
+  refresh() {
+    this.elements = this.doc.querySelectorAll(this.selector);
+    this.elements.forEach(element => {
+      element.removeEventListener('dblclick', this.handleEditStart);
+      element.removeEventListener('touchstart', this.handleTouchStart);
+    });
+    this.elements.forEach(element => {
+      element.addEventListener('dblclick', this.handleEditStart);
+      element.addEventListener('touchstart', this.handleTouchStart, {
+        passive: false
+      });
+    });
+  }
+  destroy(element) {
+    if (element) {
+      element.removeEventListener('dblclick', this.handleEditStart);
+      element.removeEventListener('touchstart', this.handleTouchStart);
+    } else {
+      this.elements = this.doc.querySelectorAll(this.selector);
+      this.elements.forEach(element => {
+        element.removeEventListener('dblclick', this.handleEditStart);
+        element.removeEventListener('touchstart', this.handleTouchStart);
+      });
+    }
+  }
+  handleEditStart(event) {
+    const currentTarget = event.currentTarget;
+    if (currentTarget.querySelector(this.selector)) {
+      // if group, no edit needed
+      return;
+    }
+    const block = event.target.closest(this.selector);
+    if (currentTarget !== block) {
+      // Triggered Group click by child block click
+      return; // Return here, so that when block events are working, group events won't
+    }
+
+    if (block.parentNode.matches(this.selector) && block.parentNode.classList.contains('active')) {
+      // if group is active, no edit needed
+      return;
+    }
+    this.clickedBlock = currentTarget;
+
+    // currentTarget.classList.add('editable');
+    // currentTarget.setAttribute('contentEditable', true);
+    // currentTarget.style.cursor = 'auto'; // Change cursor to normal
+    // currentTarget.focus();
+    // this.placeCursorAtEnd(currentTarget);
+
+    this.elements.forEach(element => {
+      if (currentTarget === element) {
+        element.removeEventListener('dblclick', this.handleEditStart);
+        element.removeEventListener('touchstart', this.handleTouchStart);
+        const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
+        if (clonedTarget) {
+          clonedTarget.removeEventListener('dblclick', this.handleEditStart);
+          clonedTarget.removeEventListener('touchstart', this.handleTouchStart);
+          this.clickedBlock = clonedTarget;
+        }
+      }
+    });
+    this.doc.addEventListener('mousedown', this.handleMouseClick);
+    this.doc.addEventListener('touchstart', this.handleMouseClick, {
+      passive: false
+    });
+    if (this.onEditStart) this.onEditStart(currentTarget);
+  }
+  handleTouchStart(event) {
+    // Handle Double Tab
+    if (event.touches.length === 1) {
+      const now = new Date().getTime();
+      const lastTouchTime = this.lastTouchTime || now;
+      const timeDiff = now - lastTouchTime;
+      if (timeDiff < 300 && timeDiff > 0) {
+        // Less than 300ms since the last touch, consider it a double-tap
+        this.handleDoubleTap(event);
+      }
+      this.lastTouchTime = now;
+    }
+  }
+  handleDoubleTap(event) {
+    this.handleEditStart(event);
+  }
+  handleMouseClick(event) {
+    const element = event.target;
+    if (element.closest(this.selector) === this.clickedBlock || this.controlSelector && element.closest(this.controlSelector)) {
+      // Do Nothing
+      // Continue editing
+      if (element.parentNode.matches(this.selector)) {
+        if (this.onContentClick) this.onContentClick(event);
+        // this.doc.querySelectorAll('.elm-active').forEach(elm=>elm.classList.remove('elm-active'));
+        // element.classList.add('elm-active');
+      }
+    } else {
+      let clickedBlock = this.clickedBlock;
+
+      // currentTarget.classList.remove('editable');
+      // clickedBlock.removeAttribute('contentEditable');
+      // clickedBlock.style.cursor = '';
+
+      if (this.onEditEnd) this.onEditEnd(this.clickedBlock);
+      this.elements.forEach(element => {
+        if (clickedBlock === element) {
+          element.addEventListener('dblclick', this.handleEditStart);
+          element.addEventListener('touchstart', this.handleTouchStart, {
+            passive: false
+          });
+        }
+      });
+      this.doc.removeEventListener('mousedown', this.handleMouseClick);
+      this.doc.removeEventListener('touchstart', this.handleMouseClick);
+
+      // this.doc.querySelectorAll('.elm-active').forEach(elm=>elm.classList.remove('elm-active'));
+    }
+  }
+
+  quitEditable(block) {
+    if (this.onEditEnd) this.onEditEnd(block);
+    block.addEventListener('dblclick', this.handleEditStart);
+    block.addEventListener('touchstart', this.handleTouchStart, {
+      passive: false
+    });
+    this.doc.removeEventListener('mousedown', this.handleMouseClick);
+    this.doc.removeEventListener('touchstart', this.handleMouseClick);
+  }
+  placeCursorAtEnd(element) {
+    const range = this.doc.createRange();
+    const sel = this.win.getSelection();
+    range.setStart(element, element.childNodes.length);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}
+class BlockSelector {
+  constructor(options) {
+    this.selector = options && options.selector || '.is-block';
+    this.parentSelector = options && options.parentSelector || 'body';
+    this.doc = options && options.doc || document;
+    this.win = options && options.win || window;
+    this.disableOnMobile = options && options.disableOnMobile || 0;
+    this.onMultipleSelect = options && options.onMultipleSelect || null;
+    this.isDragging = false;
+    this.startCoords = {
+      x: 0,
+      y: 0
+    };
+    const handleHTML = `
+        <div class="selection-rectangle"></div>`;
+    this.doc.body.insertAdjacentHTML('afterbegin', handleHTML);
+    this.selectionRect = this.doc.querySelector('.selection-rectangle');
+    const styleHTML = `
+        <style id="styleSelector">
+            .selection-rectangle {
+                position: absolute;
+                border: 1px solid #c2e2ff;
+                pointer-events: none;
+                display: none;
+                background-color: #a9c4e442;
+                z-index:1
+            }
+        <style>
+        `;
+    const elmStyle = this.doc.querySelector('#styleSelector');
+    if (!elmStyle) this.doc.head.insertAdjacentHTML('beforeend', styleHTML);
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDragMove = this.handleDragMove.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.doc.addEventListener('mousedown', this.handleDragStart);
+    this.doc.addEventListener('touchstart', this.handleDragStart, {
+      passive: false
+    });
+  }
+  destroy() {
+    const elmStyle = this.doc.querySelector('#styleSelector');
+    if (elmStyle) elmStyle.parentNode.removeChild(elmStyle);
+    const selectionRect = this.doc.querySelector('.selection-rectangle');
+    if (selectionRect) selectionRect.parentNode.removeChild(selectionRect);
+    this.doc.removeEventListener('mousedown', this.handleDragStart);
+    this.doc.removeEventListener('touchstart', this.handleDragStart);
+  }
+  handleDragStart(event) {
+    const viewportWidth = this.win.innerWidth;
+    if (viewportWidth <= this.disableOnMobile) return;
+    if (event.type === 'touchstart' && event.touches.length !== 1) {
+      return; // Do nothing if more than one touch point is detected
+    }
+
+    if (event.type === 'mousedown' && event.button !== 0) {
+      return; // Do nothing if the right mouse button is clicked
+    }
+
+    if (event.target.closest(this.selector)) return;
+    if (!event.target.closest(this.parentSelector)) return;
+    if (event.target.closest('.keep-selection')) return;
+    this.dragStartTimeout = setTimeout(() => {
+      // Set a timeout before starting the drag (to differentiate from click)
+
+      this.isDragging = true;
+      let clientX, clientY;
+      if (event.type === 'mousedown') {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else if (event.type === 'touchstart') {
+        const touch = event.touches[0];
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      }
+      this.startCoords = {
+        x: clientX,
+        y: clientY
+      };
+      this.updateSelectionRect(this.startCoords, this.startCoords);
+      this.doc.addEventListener('mousemove', this.handleDragMove);
+      this.doc.addEventListener('touchmove', this.handleDragMove);
+      this.doc.body.style.userSelect = 'none';
+    }, 100);
+    this.doc.addEventListener('mouseup', this.handleDragEnd);
+    this.doc.addEventListener('touchend', this.handleDragEnd);
+  }
+  handleDragMove(event) {
+    if (!this.isDragging) return;
+    if (event.target.closest('.keep-selection')) return;
+    let clientX, clientY;
+    if (event.type === 'mousemove') {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    } else if (event.type === 'touchmove') {
+      const touch = event.touches[0];
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    }
+    this.updateSelectionRect(this.startCoords, {
+      x: clientX,
+      y: clientY
+    });
+    this.selectBlocksInArea(this.startCoords, {
+      x: clientX,
+      y: clientY
+    });
+  }
+  handleDragEnd() {
+    clearTimeout(this.dragStartTimeout);
+    this.isDragging = false;
+    this.selectionRect.style.display = 'none';
+    this.doc.removeEventListener('mousemove', this.handleDragMove);
+    this.doc.removeEventListener('touchmove', this.handleDragMove);
+    this.doc.removeEventListener('mouseup', this.handleDragEnd);
+    this.doc.removeEventListener('touchend', this.handleDragEnd);
+    this.doc.body.style.userSelect = '';
+    const elms = this.doc.querySelectorAll(this.selector + '.active');
+    if (elms.length > 1) this.onMultipleSelect();
+  }
+  updateSelectionRect(start, end) {
+    const minX = Math.min(start.x, end.x);
+    const minY = Math.min(start.y, end.y) + this.win.scrollY;
+    const width = Math.abs(start.x - end.x);
+    const height = Math.abs(start.y - end.y);
+    this.selectionRect.style.left = `${minX}px`;
+    this.selectionRect.style.top = `${minY}px`;
+    this.selectionRect.style.width = `${width}px`;
+    this.selectionRect.style.height = `${height}px`;
+    this.selectionRect.style.display = 'block';
+  }
+  selectBlocksInArea(start, end) {
+    const blocks = this.doc.querySelectorAll(this.selector);
+    blocks.forEach(block => {
+      const rect = block.getBoundingClientRect();
+      if (rect.left < Math.max(start.x, end.x) && rect.right > Math.min(start.x, end.x) && rect.top < Math.max(start.y, end.y) && rect.bottom > Math.min(start.y, end.y)) {
+        if (block.parentNode.matches(this.selector)) ; else {
+          block.classList.add('active');
+          let elms = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && !elm.classList.contains('clone'));
+          if (elms.length > 1) block.classList.add('multi');
+        }
+      } else {
+        block.classList.remove('active');
+        block.classList.remove('multi');
+      }
+    });
+  }
+  unSelect() {
+    const blocks = this.doc.querySelectorAll(this.selector);
+    blocks.forEach(elm => elm.classList.remove('active'));
+  }
+}
+class EditableBlocks {
+  constructor(options = {}) {
+    const defaults = {
+      selector: '.is-block',
+      parentSelector: 'body',
+      // controlSelector: '.is-tool',
+      doc: document,
+      win: window,
+      // onBeforeChange: () => {},
+      // onChange: () => {},
+      // onContentClick: () => {},
+      // onEditStart: () => {},
+      // onEditEnd: () => {},
+      // onDuplicate: () => {},
+      // onSelectBlock:  (block) => {},
+      // onUnSelectBlock: () => {},
+      // onMultipleSelect: () => {},
+      disableOnMobile: 0,
+      rotate: true,
+      clone: true
+      // onDelete: () = {}
+    };
+
+    Object.assign(this, defaults, options);
+    this.init();
+  }
+  checkOverlap(target) {
+    return this.common.checkOverlap(target);
+  }
+  forward(target) {
+    let newZIndex;
+    if (!target.style.zIndex) {
+      newZIndex = 1;
+    } else {
+      newZIndex = parseInt(target.style.zIndex) + 1;
+    }
+    target.style.zIndex = newZIndex;
+  }
+  backward(target) {
+    let newZIndex;
+    if (!target.style.zIndex) {
+      newZIndex = 0;
+    } else {
+      if (parseInt(target.style.zIndex) - 1 < 0) newZIndex = 0;else newZIndex = parseInt(target.style.zIndex) - 1;
+    }
+    target.style.zIndex = newZIndex;
+  }
+  selectStart(block) {
+    if (block.classList.contains('is-shape')) return; // do not clone if block is shape
+
+    if (!this.clone) return;
+    const viewportWidth = this.win.innerWidth;
+    if (block.closest('.autolayout') && viewportWidth <= 760) {
+      return;
+    }
+    if (block.classList.contains('is-group')) return; // do not clone if block is shape
+
+    if (!block.classList.contains('clone')) {
+      let clonedDiv = block.cloneNode(true);
+      clonedDiv.classList.add('clone');
+      block.parentNode.appendChild(clonedDiv);
+      block.classList.add('cloned');
+      this.refresh();
+    }
+  }
+  selectClear() {
+    this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
+    this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
+  }
+  setMultiSelect(multiSelect) {
+    if (multiSelect) this.doc.body.classList.add('multi-select');else this.doc.body.classList.remove('multi-select');
+  }
+  init() {
+    this.doc.body.classList.add('editableblocks');
+    this.draggable = new Draggable({
+      selector: this.selector,
+      disableOnMobile: this.disableOnMobile,
+      doc: this.doc,
+      win: this.win,
+      onDelete: element => {
+        if (this.rotatable) this.rotatable.destroy(element);
+        this.resizable.destroy(element);
+        this.editable.destroy(element);
+        if (this.onDelete) this.onDelete();
+      },
+      onBeforeChange: () => {
+        if (this.onBeforeChange) this.onBeforeChange();
+      },
+      onChange: () => {
+        if (this.onChange) this.onChange();
+      },
+      onMultipleSelect: this.onMultipleSelect,
+      onSelectStart: block => {
+        // for cloning
+        this.selectStart(block);
+      },
+      onSelectClear: () => {
+        // for removing clones
+        this.selectClear();
+        if (this.onUnselectBlock) this.onUnselectBlock();
+      },
+      onSelectBlock: this.onSelectBlock
+    });
+    this.resizable = new Resizable({
+      selector: this.selector,
+      disableOnMobile: this.disableOnMobile,
+      doc: this.doc,
+      win: this.win,
+      onBeforeChange: () => {
+        if (this.onBeforeChange) this.onBeforeChange();
+      },
+      onChange: () => {
+        if (this.onChange) this.onChange();
+      }
+    });
+    if (this.rotate) {
+      this.rotatable = new Rotatable({
+        selector: this.selector,
+        disableOnMobile: this.disableOnMobile,
+        doc: this.doc,
+        win: this.win,
+        onBeforeChange: () => {
+          if (this.onBeforeChange) this.onBeforeChange();
+        },
+        onChange: () => {
+          if (this.onChange) this.onChange();
+        }
+      });
+    }
+    this.editable = new Editable({
+      selector: this.selector,
+      controlSelector: this.controlSelector,
+      doc: this.doc,
+      win: this.win,
+      onContentClick: this.onContentClick,
+      onEditStart: block => {
+        if (block.classList.contains('clone')) {
+          const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
+          this.onEditStart(clonedTarget);
+          this.selectClear();
+
+          // Disable drag during editing
+          if (!this.draggable) return;
+          this.draggable.disableDrag(clonedTarget);
+          return;
+        }
+        this.onEditStart(block);
+
+        // Disable drag during editing
+        if (!this.draggable) return;
+        this.draggable.disableDrag(block);
+      },
+      onEditEnd: block => {
+        this.onEditEnd(block);
+
+        // Enable drag
+        if (!this.draggable) return;
+        this.draggable.enableDrag(block);
+      }
+    });
+    this.blockSelector = new BlockSelector({
+      selector: this.selector,
+      parentSelector: this.parentSelector,
+      disableOnMobile: this.disableOnMobile,
+      onMultipleSelect: this.onMultipleSelect,
+      doc: this.doc,
+      win: this.win
+    });
+    this.common = new Common({
+      selector: this.selector,
+      doc: this.doc,
+      win: this.win,
+      onDuplicate: this.onDuplicate
+    });
+  }
+  duplicate() {
+    this.common.duplicate();
+    this.refresh();
+  }
+  delete() {
+    this.draggable.delete();
+  }
+  getBreakpoints(block) {
+    return this.common.getBreakpoints(block);
+  }
+  placeCursorAtEnd(block) {
+    this.editable.placeCursorAtEnd(block);
+  }
+  quitEditable(block) {
+    this.editable.quitEditable(block);
+  }
+  destroy() {
+    if (!this.draggable) return;
+    this.draggable.destroy();
+    this.resizable.destroy();
+    if (this.rotatable) this.rotatable.destroy();
+    this.editable.destroy();
+    this.blockSelector.destroy();
+    this.draggable = null;
+    this.doc.body.classList.remove('editableblocks');
+  }
+  refresh() {
+    // Call refresh() whenever blocks are added 
+    this.draggable.refresh();
+    this.resizable.refresh();
+    if (this.rotatable) this.rotatable.refresh();
+    this.editable.refresh();
+  }
+  addBlock(html, container) {
+    this.selectClear(); // clear clones
+    this.blockSelector.unSelect(); // clear active
+
+    const parser = new DOMParser();
+    let doc = parser.parseFromString(html, 'text/html');
+    const block = doc.querySelector('.is-block');
+    block.classList.add('block-dummy');
+    html = doc.body.innerHTML;
+    container.insertAdjacentHTML('beforeend', html);
+    const newBlock = document.querySelector('.block-dummy');
+    if (newBlock) {
+      newBlock.classList.remove('block-dummy');
+      if (this.onAddBlock) this.onAddBlock(newBlock);
+      newBlock.classList.add('active');
+    }
+    this.refresh();
+  }
+  group() {
+    const group = this.common.group('is-block', 'is-group');
+    this.refresh();
+    return group;
+  }
+  unGroup() {
+    this.common.unGroup();
+  }
+  addBreakpoint() {
+    this.common.addBreakpoint();
+  }
+  clearBreakpoint(target) {
+    this.common.clearBreakpoint(target);
+    if (target.classList.contains('cloned')) {
+      const cloneTarget = this.doc.querySelector(this.selector + '.clone');
+      this.common.clearBreakpoint(cloneTarget);
+    }
+  }
+  clearAllBreakpoints(container) {
+    this.common.clearAllBreakpoints(container);
+  }
+  isMultiSelect() {
+    // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
+    let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active') && !elm.classList.contains('clone'));
+    if (blocks.length > 1) return true;
+    return false;
+  }
+}
 
 class ContentBuilder {
   constructor(opts = {}) {
@@ -75644,9 +77768,11 @@ class ContentBuilder {
       defaultEmailSnippetCategory: 14,
       undoRedoStyles: false,
       // specialElementClasses: ['sl-wrapper', 'sl-overlay'] // specify elements that when clicked will not affect the builder interface (active selection). Usefull for external code, ex lightbox, etc. 
-      // onUndo: function () { },
-      // onRedo: function () { }
 
+      // freeform
+      onUndo: function () {},
+      onRedo: function () {},
+      onBlockCanvasAdd: function () {},
       /*
       Deprecated:
       snippetSampleImage: '',
@@ -76528,6 +78654,26 @@ class ContentBuilder {
       this.colTool.lockIndicator.style.display = '';
       return ret;
     };
+
+    // freeform
+    let oldOnBlockCanvasAdd = this.opts.onBlockCanvasAdd;
+    this.opts.onBlockCanvasAdd = () => {
+      let ret = oldOnBlockCanvasAdd.apply(this, arguments);
+      if (this.eb) this.eb.refresh();
+      return ret;
+    };
+    let oldOnUndo = this.opts.onUndo;
+    this.opts.onUndo = () => {
+      let ret = oldOnUndo.apply(this, arguments);
+      if (this.eb) this.eb.refresh();
+      return ret;
+    };
+    let oldOnRedo = this.opts.onRedo;
+    this.opts.onRedo = () => {
+      let ret = oldOnRedo.apply(this, arguments);
+      if (this.eb) this.eb.refresh();
+      return ret;
+    };
     this.elmTool = new ElementTool(this); // Render Element Tool
 
     // Render controls or behavior for handling element editing
@@ -76595,6 +78741,68 @@ class ContentBuilder {
     }
     */
 
+    // freeform
+    if (this.canvas) this.eb = new EditableBlocks({
+      doc: this.doc,
+      win: this.win,
+      selector: '.is-block',
+      controlSelector: '.is-tool,.is-pop,.is-modal,#divImageResizer,.is-rte-tool,is-elementrte-tool,.is-rte-pop,.keep-selection',
+      parentSelector: '.box-canvas',
+      rotate: true,
+      // disableOnMobile: 760,
+      onBeforeChange: () => {
+        this.uo.saveForUndo();
+      },
+      onChange: () => {
+        this.opts.onChange();
+      },
+      onEditStart: block => {
+        block.classList.add('editable');
+        const cols = block.querySelectorAll('[data-click="true"]'); // or [contentEditable="true"]
+        if (cols.length > 0) {
+          let col = cols[cols.length - 1];
+          if (col.lastElementChild) col.lastElementChild.click();
+        }
+      },
+      onEditEnd: block => {
+        block.classList.remove('editable');
+        this.util.clearActiveCell();
+        this.util.clearPops();
+        this.hideElementTools();
+      },
+      onDuplicate: block => {
+        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 = '';
+          block.parentNode.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'));
+      },
+      onAddBlock: block => {
+        const builder = block.querySelector(this.container);
+        this.applyBehaviorOn(builder);
+      },
+      onMultipleSelect: this.onMultipleSelect,
+      onDelete: this.onDelete,
+      onSelectBlock: this.onSelectBlock,
+      onUnselectBlock: this.onUnselectBlock
+    });
     if (this.iframe) {
       this.win.addEventListener('scroll', this.doWindowScroll = () => {
         this.util.hidePops();
@@ -77415,6 +79623,13 @@ class ContentBuilder {
     this.setZoomOnControl(builder);
   }
   html(area) {
+    if (this.docContainer) {
+      // freeform
+
+      const docContainer = this.doc.querySelector(this.docContainer);
+      const html = this.readHtml(docContainer, false, true);
+      return html;
+    }
     const util = this.util;
     const htmlutil = new HtmlUtil(this);
     if (area) ; else {
@@ -77481,7 +79696,87 @@ class ContentBuilder {
   simpleColorPicker(onPick, mode) {
     return this.colorClassPicker.open(onPick, mode);
   }
+
+  // freeform
+  refresh() {
+    if (this.eb) this.eb.refresh();
+  }
+  group() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.group();
+    this.opts.onChange();
+  }
+  unGroup() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.unGroup();
+    this.opts.onChange();
+  }
+  delete() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.delete();
+    this.opts.onChange();
+  }
+  forward(target) {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.forward(target);
+    this.opts.onChange();
+  }
+  backward(target) {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.backward(target);
+    this.opts.onChange();
+  }
+  enableShape() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.enableShape();
+    this.opts.onChange();
+  }
+  removeShape() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.removeShape();
+    this.opts.onChange();
+  }
+  addBlock(html, blockContainer) {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.addBlock(html, blockContainer);
+    this.opts.onChange();
+    this.opts.onRender();
+  }
+  duplicate() {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.duplicate();
+    this.opts.onChange();
+    this.opts.onRender();
+  }
+  addBreakpoint() {
+    if (!this.eb) return;
+    this.eb.addBreakpoint();
+  }
+  getBreakpoints(target) {
+    if (!this.eb) return;
+    return this.eb.getBreakpoints(target);
+  }
+  clearBreakpoint(target) {
+    if (!this.eb) return;
+    this.uo.saveForUndo();
+    this.eb.clearBreakpoint(target);
+    this.opts.onChange();
+  }
+  quitEditable(target) {
+    if (!this.eb) return;
+    this.eb.quitEditable(target);
+  }
   destroy() {
+    if (this.eb) this.eb.destroy();
     this.doc.body.classList.remove('data-editor');
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);
@@ -78103,7 +80398,7 @@ class ContentBuilder {
             this.opts.onPluginsLoaded();
           }
           this.tooltip.setAll();
-          new Draggable$1({
+          new Draggable$2({
             selector: '.is-draggable'
           }); //draggable for plugins
 
@@ -78164,7 +80459,7 @@ class ContentBuilder {
             this.opts.onPluginsLoaded();
           }
           this.tooltip.setAll();
-          new Draggable$1({
+          new Draggable$2({
             selector: '.is-draggable'
           }); //draggable for plugins
 
@@ -78320,7 +80615,7 @@ class ContentBuilder {
   }
 
   draggable(selector) {
-    new Draggable$1({
+    new Draggable$2({
       selector: selector
     });
   }
@@ -78331,7 +80626,7 @@ class ContentBuilder {
       embeddedModal = this.builderStuff.querySelector(selector);
     }
     this.showModal(embeddedModal, overlayStay, cancelCallback, animated, overflowHidden);
-    new Draggable$1({
+    new Draggable$2({
       selector: '.is-draggable'
     });
     return embeddedModal;
@@ -78457,6 +80752,10 @@ class ContentBuilder {
   // /Plugins related
 
   viewHtml(area) {
+    if (this.docContainer) {
+      // freeform
+      area = this.doc.querySelector(this.docContainer);
+    }
     const htmlutil = new HtmlUtil(this);
     htmlutil.view('full', area);
   }
@@ -78503,6 +80802,20 @@ class ContentBuilder {
     return false;
   }
   loadHtml(html, area) {
+    if (this.docContainer) {
+      // freeform
+      const docContainer = this.doc.querySelector(this.docContainer);
+      let range = this.doc.createRange();
+      docContainer.innerHTML = '';
+      docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
+
+      const builders = docContainer.querySelectorAll(this.container);
+      builders.forEach(builder => {
+        this.applyBehaviorOn(builder);
+      });
+      this.refresh();
+      return;
+    }
     const util = this.util;
     if (area) ; else {
       const builders = this.doc.querySelectorAll(this.opts.container);
@@ -78561,6 +80874,7 @@ class ContentBuilder {
   // }
   loadHTML(html) {
     //backward
+
     this.loadHtml(html);
   }
   async setUIColor(mode, csslink) {