@innovastudio/contentbox 1.6.22 → 1.6.23

package/public/contentbox/contentbox.esm.js

@@ -2433,7 +2433,7 @@ class SideBar {
 
                             numberCount++;
 
-                            let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat=""' + item.category + '">' +
+                            let html = '<button tabindex="0" class="active" data-id="' + item.id + '" data-cat="' + item.category + '">' +
                                 '<img class="lzy-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAYAAAAjZdWPAAAEDmlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPpu5syskzoPUpqaSDv41lLRsUtGE2uj+ZbNt3CyTbLRBkMns3Z1pJjPj/KRpKT4UQRDBqOCT4P9bwSchaqvtiy2itFCiBIMo+ND6R6HSFwnruTOzu5O4a73L3PnmnO9+595z7t4LkLgsW5beJQIsGq4t5dPis8fmxMQ6dMF90A190C0rjpUqlSYBG+PCv9rt7yDG3tf2t/f/Z+uuUEcBiN2F2Kw4yiLiZQD+FcWyXYAEQfvICddi+AnEO2ycIOISw7UAVxieD/Cyz5mRMohfRSwoqoz+xNuIB+cj9loEB3Pw2448NaitKSLLRck2q5pOI9O9g/t/tkXda8Tbg0+PszB9FN8DuPaXKnKW4YcQn1Xk3HSIry5ps8UQ/2W5aQnxIwBdu7yFcgrxPsRjVXu8HOh0qao30cArp9SZZxDfg3h1wTzKxu5E/LUxX5wKdX5SnAzmDx4A4OIqLbB69yMesE1pKojLjVdoNsfyiPi45hZmAn3uLWdpOtfQOaVmikEs7ovj8hFWpz7EV6mel0L9Xy23FMYlPYZenAx0yDB1/PX6dledmQjikjkXCxqMJS9WtfFCyH9XtSekEF+2dH+P4tzITduTygGfv58a5VCTH5PtXD7EFZiNyUDBhHnsFTBgE0SQIA9pfFtgo6cKGuhooeilaKH41eDs38Ip+f4At1Rq/sjr6NEwQqb/I/DQqsLvaFUjvAx+eWirddAJZnAj1DFJL0mSg/gcIpPkMBkhoyCSJ8lTZIxk0TpKDjXHliJzZPO50dR5ASNSnzeLvIvod0HG/mdkmOC0z8VKnzcQ2M/Yz2vKldduXjp9bleLu0ZWn7vWc+l0JGcaai10yNrUnXLP/8Jf59ewX+c3Wgz+B34Df+vbVrc16zTMVgp9um9bxEfzPU5kPqUtVWxhs6OiWTVW+gIfywB9uXi7CGcGW/zk98k/kmvJ95IfJn/j3uQ+4c5zn3Kfcd+AyF3gLnJfcl9xH3OfR2rUee80a+6vo7EK5mmXUdyfQlrYLTwoZIU9wsPCZEtP6BWGhAlhL3p2N6sTjRdduwbHsG9kq32sgBepc+xurLPW4T9URpYGJ3ym4+8zA05u44QjST8ZIoVtu3qE7fWmdn5LPdqvgcZz8Ww8BWJ8X3w0PhQ/wnCDGd+LvlHs8dRy6bLLDuKMaZ20tZrqisPJ5ONiCq8yKhYM5cCgKOu66Lsc0aYOtZdo5QCwezI4wm9J/v0X23mlZXOfBjj8Jzv3WrY5D+CsA9D7aMs2gGfjve8ArD6mePZSeCfEYt8CONWDw8FXTxrPqx/r9Vt4biXeANh8vV7/+/16ffMD1N8AuKD/A/8leAvFY9bLAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAtoAMABAAAAAEAAAAaAAAAAHZhQ/wAAABcSURBVFgJ7dLBCcAwEANBx/337IQUsK/FcLD3FQgx9nO+W8NuD9v7z230rVdLOmkQ6HsAjholrXJCWdKAo0ZJq5xQljTgqFHSKieUJQ04apS0ygllSQOOGo2UfgEpPQQwSb0YngAAAABJRU5ErkJggg==" data-src="' + gallery.path + item.thumbnail + '">' +
                                 '<span class="is-overlay"></span>' +
                                 (numbering? (showNumberOnHover?'<div class="is-number">'+(numberCount+'').padStart(3, '0')+'</div>':'<div class="is-number show">'+(numberCount+'').padStart(3, '0')+'</div>') :'') +
@@ -14307,7 +14307,7 @@ class PanelBlock {
                     ${out('Ungroup')}
                 </button>
             </div>
-            <div class="group flex mt-4 div-shape" style="width: 217px;display:none">
+            <div class="group flex mt-4 div-shape" style="width: 217px;display:none;">
                 <button title="${out('Enable Shape')}" class="btn-shape" style="width: 100%">
                     ${out('Enable Shape')}
                 </button>
@@ -14317,9 +14317,10 @@ class PanelBlock {
             </div>
 
             <div class="group editspacing mt-4">
-                <button title="${out('Spacing')}" class="btn-spacing" data-value="">${out('Spacing')}</button>
+                <button title="${out('Spacing')}" class="btn-spacing">${out('Spacing')}</button>
             </div>
 
+
             <!--
             <div class="label flex flex-row">${out('Viewport')}: &nbsp;<span class="val-viewport"></span></div>
 
@@ -14387,12 +14388,14 @@ class PanelBlock {
       this.builder.onChange();
     });
     const btnShape = panel.querySelector('.btn-shape');
+    const btnRemoveShape = panel.querySelector('.btn-unshape');
     if (btnShape) btnShape.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.builder.eb.enableShape();
       this.builder.onChange();
+      btnShape.style.display = 'none';
+      btnRemoveShape.style.display = '';
     });
-    const btnRemoveShape = panel.querySelector('.btn-unshape');
     if (btnRemoveShape) btnRemoveShape.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
       this.builder.eb.removeShape();
@@ -14740,6 +14743,17 @@ class PanelBlock {
       this.divUngroup.style.display = 'none';
     }
 
+    const btnShape = panel.querySelector('.btn-shape');
+    const btnRemoveShape = panel.querySelector('.btn-unshape');
+
+    if (block.classList.contains('is-shape')) {
+      btnShape.style.display = 'none';
+      btnRemoveShape.style.display = '';
+    } else {
+      btnShape.style.display = '';
+      btnRemoveShape.style.display = 'none';
+    }
+
     if (block) {
       if (block.closest('.autolayout')) {
         this.divArrange.style.display = 'none';
@@ -16607,6 +16621,22 @@ class PanelRow {
                     <input type="checkbox" class="chk-reverse" /> <!-- chkReverseColumns -->
                     <span>${out('Reverse Columns')}</span>
                 </label>
+
+                <div class="label mt-4 changedevice">
+                    <span>${out('Column Gap')}:</span>
+                </div>
+                <div class="group colsperline mt-2" style="width:217px;">
+                    <button title="10" data-columngap="10">10</button>
+                    <button title="20" data-columngap="20">20</button>
+                    <button title="30" data-columngap="30">30</button>
+                    <button title="40" data-columngap="40">40</button>
+                    <button title="50" data-columngap="50">50</button>
+                    <button title="60" data-columngap="60">60</button>
+                    <button title="70" data-columngap="70">70</button>
+                    <button title="80" data-columngap="80">80</button>
+                    <button title="90" data-columngap="90">90</button>
+                    <button title="${out('Clear')}" data-columngap="" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
             </div>
 
         </div>
@@ -16787,6 +16817,28 @@ class PanelRow {
           activeRow.classList.remove(prefix + j);
         }
 
+        if (val !== '') activeRow.classList.add(prefix + val);
+        this.builder.onChange();
+      });
+    });
+    const btnColumnGap = panel.querySelectorAll('[data-columngap]');
+    btnColumnGap.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let activeRow = this.builder.controlpanel.activeRow;
+        this.builder.editor.saveForUndo();
+        let val = btn.getAttribute('data-columngap');
+        panel.querySelectorAll('[data-columngap]').forEach(elm => elm.classList.remove('on'));
+        if (val !== '') btn.classList.add('on');
+        let prefix = 'gap-'; // let screenMode = this.builder.screenMode;
+        // if(screenMode==='desktop') prefix = 'gap-';
+        // else if (screenMode==='tablet-landscape') prefix = 'md-gap-';
+        // else if (screenMode==='tablet') prefix = 'sm-gap-';
+        // else if (screenMode==='mobile') prefix = 'xs-gap-';
+
+        for (let j = 1; j <= 9; j++) {
+          activeRow.classList.remove(prefix + j * 10);
+        }
+
         if (val !== '') activeRow.classList.add(prefix + val);
         this.builder.onChange();
       });
@@ -16975,7 +17027,9 @@ class PanelRow {
 
     let valReverse = activeRow.classList.contains(prefix + 'column-reverse');
     const chkReverseColumns = panel.querySelector('.chk-reverse');
-    chkReverseColumns.checked = valReverse; // Responsive
+    chkReverseColumns.checked = valReverse;
+    panel.querySelectorAll('[data-columngap]').forEach(elm => elm.classList.remove('on'));
+    if (activeRow.classList.contains('gap-10')) panel.querySelector('[data-columngap="10"]').classList.add('on');else if (activeRow.classList.contains('gap-20')) panel.querySelector('[data-columngap="20"]').classList.add('on');else if (activeRow.classList.contains('gap-30')) panel.querySelector('[data-columngap="30"]').classList.add('on');else if (activeRow.classList.contains('gap-40')) panel.querySelector('[data-columngap="40"]').classList.add('on');else if (activeRow.classList.contains('gap-50')) panel.querySelector('[data-columngap="50"]').classList.add('on');else if (activeRow.classList.contains('gap-60')) panel.querySelector('[data-columngap="60"]').classList.add('on');else if (activeRow.classList.contains('gap-70')) panel.querySelector('[data-columngap="70"]').classList.add('on');else if (activeRow.classList.contains('gap-80')) panel.querySelector('[data-columngap="80"]').classList.add('on');else if (activeRow.classList.contains('gap-90')) panel.querySelector('[data-columngap="90"]').classList.add('on'); // Responsive
 
     this.realtimeVisibility(activeRow); // More
 
@@ -25137,6 +25191,7 @@ class Dom {
   }
   getScale(container) {
     let matrix = window.getComputedStyle(container).transform;
+    if (matrix === 'none') return 1;
     let values = matrix.split('(')[1];
     values = values.split(')')[0];
     values = values.split(',');
@@ -33352,6 +33407,9 @@ class UndoRedo {
       let wrapper = this.builder.doc.querySelector(this.builder.opts.page);
       // return htmlutil.readHtml(wrapper, false);
       return wrapper.innerHTML;
+    } else if (this.builder.docContainer) {
+      let docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+      return docContainer.innerHTML;
     } else {
       const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
       let html = '';
@@ -33412,12 +33470,18 @@ class UndoRedo {
 
       // Use createContextualFragment() to make embedded script executable
       // https://ghinda.net/article/script-tags/
-      var range = document.createRange();
+      let range = document.createRange();
       wrapper.innerHTML = '';
       wrapper.appendChild(range.createContextualFragment(html));
 
       // applyBehavior (in ContentBox, unUndo will call pageSetup/applyBehavior)
       this.cleaning(wrapper);
+    } else if (this.builder.docContainer) {
+      let docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+      let range = document.createRange();
+      docContainer.innerHTML = '';
+      docContainer.appendChild(range.createContextualFragment(html));
+      this.cleaning(docContainer);
     } else {
       const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
       let n = 0;
@@ -40351,12 +40415,16 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       }
 
       // destroy
-      if (builder.sortableOnCanvas) builder.sortableOnCanvas.forEach(obj => {
-        if (obj) {
-          obj.destroy();
-        }
-      });
+      if (builder.sortableOnCanvas) {
+        builder.sortableOnCanvas.forEach(obj => {
+          if (obj) {
+            obj.destroy();
+          }
+        });
+      }
       if (builder.sortableOnPage) builder.sortableOnPage.destroy();
+      let dummies = builder.doc.querySelectorAll('.block-dummy');
+      dummies.forEach(elm => elm.parentNode.removeChild(elm));
     }
   });
   if (builder.opts.snippetList === '#divSnippetList') {
@@ -40437,6 +40505,22 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   */
 };
 
+function openSnippets(builder) {
+  const snippetPanel = document.querySelector('#divSnippetList');
+  const snippethandle = snippetPanel.querySelector('#divSnippetHandle');
+  snippetPanel.style.cssText = 'transition: all ease 0.8s;';
+  snippetPanel.querySelector('.selectsnippet').style.display = 'block';
+  snippetPanel.querySelector('.is-design-list').style.display = 'block';
+  snippetPanel.classList.add('active');
+  if (builder.opts.sidePanel === 'right') {
+    snippethandle.innerHTML = '<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-ios-arrow-right"></use></svg>';
+  } else {
+    snippethandle.innerHTML = '<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-ios-arrow-left"></use></svg>';
+  }
+  setTimeout(function () {
+    snippetPanel.style.cssText = '';
+  }, 800);
+}
 function toggleSnippets(builder) {
   const dom = builder.dom;
   let snippetPanel = document.querySelector('#divSnippetList');
@@ -68842,7 +68926,7 @@ class Image$1 {
       }
       imageTool.style.top = top + 'px';
       imageTool.style.left = toolLeft + 'px';
-      if (!this.builder.activeImage.hasAttribute('data-noresize')) {
+      if (!this.builder.activeImage.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !this.builder.activeImage.closest('.is-block'))) {
         let imageResizer = this.imageResizer;
         imageResizer.style.top = top + 'px';
         imageResizer.style.left = left + 'px';
@@ -68926,7 +69010,7 @@ class Image$1 {
         imageTool.style.left = toolLeft + 'px';
 
         // Image Resizer
-        if (!elm.hasAttribute('data-noresize')) {
+        if (!elm.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !elm.closest('.is-block'))) {
           let imageResizer = this.imageResizer;
 
           /*
@@ -92960,7 +93044,7 @@ class Resizeable {
     let scale = this.getScale(container);
     if (!scale) {
       const wrapper = container.closest('.is-wrapper');
-      scale = this.getScale(wrapper);
+      if (wrapper) scale = this.getScale(wrapper);else scale = 1;
     }
 
     // Minimum resize
@@ -97575,6 +97659,7 @@ class ContentBuilder {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       shortenHTML: true,
+      imageResizeOnBlock: true,
       simpleEditingBreakpoint: '970px',
       // iframe only
 
@@ -99244,6 +99329,7 @@ class ContentBuilder {
           } else {
             const area = this.doc.querySelector('.is-builder'); // get one of the builder area
             scale = this.dom.getScale(area);
+            if (!scale) scale = 1;
           }
 
           // Make moving draggable item scaled & positioned correctly (due to zoom value)
@@ -99404,11 +99490,17 @@ class ContentBuilder {
 
             // Hide element tool
             this.elmTool.hide();
-            if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
-              if (obj) {
-                obj.destroy();
-              }
-            });
+
+            // // destroy
+            // if(this.sortableOnCanvas) {
+            //     this.sortableOnCanvas.forEach(obj=>{
+            //         if(obj) {
+            //             obj.destroy();
+            //         }
+            //     });
+            //     let dummies = this.doc.querySelectorAll('.block-dummy');
+            //     dummies.forEach(elm=>elm.parentNode.removeChild(elm));
+            // }
 
             // if(this.sortableOnPage) this.sortableOnPage.destroy();
           }
@@ -100508,7 +100600,10 @@ class ContentBuilder {
     if (this.preview) return;
     if (this.opts.snippetList === '#divSnippetList') {
       let snippetPanel = document.querySelector(this.opts.snippetList);
-      if (snippetPanel) return; // do not render if already rendered (just protection)
+      if (snippetPanel) {
+        if (snippetOpen) openSnippets(this);
+        return; // do not render if already rendered (just protection)
+      }
     }
 
     if (this.isScriptAlreadyIncluded(snippetFile)) return;
@@ -102052,13 +102147,21 @@ class ContentBuilder {
   }
 
   sectionDropSetup() {
-    if (this.page) {
-      if (this.page !== '.is-wrapper') return; // only for ContentBox
-      const wrapper = this.doc.querySelector(this.page);
+    if (this.blockContainer) {
       this.sortableOnCanvas = [];
-      const sections = wrapper.querySelectorAll('.is-box.box-canvas');
-      sections.forEach(section => {
-        const obj = new Sortable(section, {
+      let wrapper;
+      let boxes;
+      if (this.page && this.page === '.is-wrapper') {
+        wrapper = this.doc.querySelector(this.page);
+        boxes = wrapper.querySelectorAll('.is-box.box-canvas');
+      } else {
+        boxes = this.doc.querySelectorAll(this.blockContainer);
+      }
+      boxes.forEach(box => {
+        box.insertAdjacentHTML('afterbegin', `
+                <div class="is-block block-dummy" style="top: calc(97.2707% - 149.797px); left: calc(50% - 222px); width: 444px; height: 154px;z-index:-1000;visibility:hidden">
+                </div>`);
+        const obj = new Sortable(box, {
           scroll: true,
           group: 'shared',
           direction: 'horizontal',
@@ -102071,7 +102174,7 @@ class ContentBuilder {
 
               let snippetid = itemEl.getAttribute('data-id');
               let lastBlock;
-              let elements = Array.from(section.querySelectorAll('.is-block')).filter(elm => !elm.parentNode.classList.contains('is-block')); // exclude child blocks
+              let elements = Array.from(box.querySelectorAll('.is-block')).filter(elm => !elm.parentNode.classList.contains('is-block')); // exclude child blocks
               if (elements.length > 0) {
                 lastBlock = elements[elements.length - 1];
               }
@@ -102183,14 +102286,14 @@ class ContentBuilder {
                 itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', itemEl.innerHTML);
               }
               this.activeCol = null;
-              const builders = section.querySelectorAll('.is-container.container-new');
+              const builders = box.querySelectorAll('.is-container.container-new');
               builders.forEach(builder => {
                 const block = builder.parentNode;
                 if (lastBlock) {
                   lastBlock.insertAdjacentElement('afterend', block);
                 } else {
-                  const ovarlay = section.querySelector('.is-overlay');
-                  ovarlay.insertAdjacentElement('afterend', block);
+                  const ovarlay = box.querySelector('.is-overlay');
+                  if (ovarlay) ovarlay.insertAdjacentElement('afterend', block);else box.insertAdjacentElement('afterbegin', block);
                 }
 
                 // After snippet has been added, re-apply behavior on builder areas
@@ -102203,16 +102306,24 @@ class ContentBuilder {
             }
 
             // destroy
-            if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
-              if (obj) {
-                obj.destroy();
-              }
-            });
+            if (this.sortableOnCanvas) {
+              this.sortableOnCanvas.forEach(obj => {
+                if (obj) {
+                  obj.destroy();
+                }
+              });
+              let dummies = this.doc.querySelectorAll('.block-dummy');
+              dummies.forEach(elm => elm.parentNode.removeChild(elm));
+            }
             if (this.sortableOnPage) this.sortableOnPage.destroy();
           }
         });
         this.sortableOnCanvas.push(obj);
       });
+    }
+    if (this.page) {
+      if (this.page !== '.is-wrapper') return; // only for ContentBox
+      const wrapper = this.doc.querySelector(this.page);
       this.sortableOnPage = new Sortable(wrapper, {
         scroll: true,
         group: 'shared',
@@ -102412,11 +102523,15 @@ class ContentBuilder {
           // this.sortableOnPage.option('draggable', '.dummy');
 
           // destroy
-          if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
-            if (obj) {
-              obj.destroy();
-            }
-          });
+          if (this.sortableOnCanvas) {
+            this.sortableOnCanvas.forEach(obj => {
+              if (obj) {
+                obj.destroy();
+              }
+            });
+            let dummies = this.doc.querySelectorAll('.block-dummy');
+            dummies.forEach(elm => elm.parentNode.removeChild(elm));
+          }
           if (this.sortableOnPage) this.sortableOnPage.destroy();
         }
       });
@@ -127658,7 +127773,7 @@ class Common {
     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-')) {
+      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);
       }
     }
@@ -127688,7 +127803,7 @@ class Common {
       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-')) {
+        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);
         }
       }
@@ -128362,7 +128477,17 @@ class Shape {
       target.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
-      this.repositionHandles(target);
+      this.repositionHandles(target); // Like directly call selectBlock (below):
+
+      this.currentTarget = target;
+      this.doc.addEventListener('mousemove', this.handleDragMove);
+      this.doc.addEventListener('touchmove', this.handleDragMove, {
+        passive: false
+      });
+      this.doc.addEventListener('mousedown', this.unSelectBlock);
+      this.doc.addEventListener('touchstart', this.unSelectBlock, {
+        passive: false
+      });
     }
   }
 
@@ -128370,7 +128495,8 @@ class Shape {
     if (target.classList.contains('is-shape')) {
       target.classList.remove('is-shape');
       target.style.transform = '';
-      target.removeAttribute('data-matrix');
+      target.removeAttribute('data--matrix');
+      target.removeAttribute('data--transform');
       target.removeEventListener('mousedown', this.selectBlock);
       target.removeEventListener('touchstart', this.selectBlock);
       target.removeEventListener('dblclick', this.handleEditStart);
@@ -128387,6 +128513,11 @@ class Shape {
       this.line5.style.display = '';
       this.line6.style.display = '';
     }
+
+    this.doc.removeEventListener('mousedown', this.unSelectBlock);
+    this.doc.removeEventListener('touchstart', this.unSelectBlock);
+    this.doc.removeEventListener('mousemove', this.handleDragMove);
+    this.doc.removeEventListener('touchmove', this.handleDragMove);
   }
 
   destroy(element) {
@@ -128467,7 +128598,15 @@ class Shape {
     }; // Current Matrix
 
     let cm;
-    const m = JSON.parse(target.getAttribute('data-matrix'));
+    let m = JSON.parse(target.getAttribute('data--matrix')); // Adaptif
+
+    const breakpoint = target.getAttribute('data--transform-val');
+
+    if (breakpoint && breakpoint < 1920) {
+      if (target.getAttribute('data--matrix-' + breakpoint)) {
+        m = JSON.parse(target.getAttribute('data--matrix-' + breakpoint));
+      }
+    }
 
     if (m) {
       cm = {
@@ -128674,7 +128813,12 @@ class Shape {
       }
     }
 
-    this.repositionHandles(currentTarget);
+    this.repositionHandles(currentTarget); // Clear previous (if any. because when enable() is called, the events are also added)
+
+    this.doc.removeEventListener('mousemove', this.handleDragMove);
+    this.doc.removeEventListener('touchmove', this.handleDragMove);
+    this.doc.removeEventListener('mousedown', this.unSelectBlock);
+    this.doc.removeEventListener('touchstart', this.unSelectBlock);
     this.currentTarget = currentTarget;
     this.doc.addEventListener('mousemove', this.handleDragMove);
     this.doc.addEventListener('touchmove', this.handleDragMove, {
@@ -128766,8 +128910,17 @@ class Shape {
     this.target.setAttribute('data-starty', y);
     this.common.applyPixels(target); //Initial
 
-    if (this.block.hasAttribute('data-matrix')) {
-      const s = this.block.getAttribute('data-matrix');
+    if (this.block.hasAttribute('data--matrix')) {
+      let s = this.block.getAttribute('data--matrix'); // Adaptif
+
+      const breakpoint = this.block.getAttribute('data--transform-val');
+
+      if (breakpoint && breakpoint < 1920) {
+        if (this.block.getAttribute('data--matrix-' + breakpoint)) {
+          s = this.block.getAttribute('data--matrix-' + breakpoint);
+        }
+      }
+
       this.initialCorners = JSON.parse(s);
       this.corners = JSON.parse(s);
     } else {
@@ -128868,14 +129021,50 @@ class Shape {
   updateBlockStyle(target) {
     this.common.applyPercentage(target);
     this.doc.querySelectorAll('[data-startx]').forEach(elm => elm.removeAttribute('data-startx'));
-    this.doc.querySelectorAll('[data-starty]').forEach(elm => elm.removeAttribute('data-starty'));
+    this.doc.querySelectorAll('[data-starty]').forEach(elm => elm.removeAttribute('data-starty')); // Adaptif
+
+    const breakpoint = this.doc.body.getAttribute('data-breakpoint');
+
+    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();
   }
 
   setTransform(block) {
     let transform = this.common.transform2d(block, this.corners[0], this.corners[1], this.corners[2], this.corners[3], this.corners[4], this.corners[5], this.corners[6], this.corners[7]);
     block.style.transform = transform;
-    this.block.setAttribute('data-matrix', JSON.stringify(this.corners));
+    let matrix = JSON.stringify(this.corners); // this.block.setAttribute('data--matrix', matrix);
+    // Adaptif
+
+    const breakpoint = this.doc.body.getAttribute('data-breakpoint');
+
+    if (breakpoint && breakpoint < 1920) {
+      this.block.setAttribute('data--transform-' + breakpoint, transform);
+      this.block.setAttribute('data--transform-val', breakpoint);
+      this.block.setAttribute('data--matrix-' + breakpoint, matrix);
+    } else {
+      this.block.setAttribute('data--transform', transform);
+      this.block.setAttribute('data--transform-val', '');
+      this.block.setAttribute('data--matrix', matrix);
+    }
+
+    this.block.removeAttribute('data-prev'); // reset
+
+    this.block.removeAttribute('data-fluid'); //---
   }
 
   resizeTopLeft(deltaX, deltaY) {
@@ -129297,10 +129486,11 @@ class Draggable {
     this.onDelete = options && options.onDelete || null;
     this.onBeforeChange = options && options.onBeforeChange || null;
     this.onChange = options && options.onChange || null;
-    this.onSelectBlock = options && options.onSelectBlock || null;
-    this.onUnSelectBlock = options && options.onUnSelectBlock || 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;
@@ -129494,7 +129684,7 @@ class Draggable {
 
     if (blocks.length === 1) {
       const block = blocks[0];
-      if (this.onSelectBlock) this.onSelectBlock(block); // on first block select (before clone) 
+      if (this.onSelectStart) this.onSelectStart(block); // on first block select (before clone) 
     }
   }
 
@@ -129550,8 +129740,13 @@ class Draggable {
     const block = element.closest(this.selector);
 
     if (block) {
-      if (block.classList.contains('active')) return; // if clicked block is active
-      // if(block.parentNode.classList.contains('active')) return; // if group is active
+      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
@@ -129563,11 +129758,16 @@ class Draggable {
         block.classList.add('active');
         if (this.onMultipleSelect) this.onMultipleSelect();
       } else {
-        if (this.onUnSelectBlock) this.onUnSelectBlock();
+        if (this.onSelectClear) this.onSelectClear();
         this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
         block.classList.add('active');
-      } // Higlight parent group if current child block is clicked
+        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');
@@ -129585,7 +129785,7 @@ class Draggable {
 
       this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
       this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
-      if (this.onUnSelectBlock) this.onUnSelectBlock();
+      if (this.onSelectClear) this.onSelectClear();
     } // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
 
 
@@ -129970,12 +130170,8 @@ class EditableBlocks {
       // onEditStart: () => {},
       // onEditEnd: () => {},
       // onDuplicate: () => {},
-      onSelectBlock: block => {
-        this.selectBlock(block);
-      },
-      onUnSelectBlock: () => {
-        this.unSelectBlock();
-      },
+      // onSelectBlock:  (block) => {},
+      // onUnSelectBlock: () => {},
       // onMultipleSelect: () => {},
       disableOnMobile: 0,
       rotate: true,
@@ -130014,7 +130210,9 @@ class EditableBlocks {
     target.style.zIndex = newZIndex;
   }
 
-  selectBlock(block) {
+  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;
 
@@ -130022,7 +130220,7 @@ class EditableBlocks {
       return;
     }
 
-    if (block.classList.contains('is-group')) 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);
@@ -130033,7 +130231,7 @@ class EditableBlocks {
     }
   }
 
-  unSelectBlock() {
+  selectClear() {
     this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
     this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
   }
@@ -130063,8 +130261,14 @@ class EditableBlocks {
         if (this.onChange) this.onChange();
       },
       onMultipleSelect: this.onMultipleSelect,
-      onSelectBlock: this.onSelectBlock,
-      onUnSelectBlock: this.onUnSelectBlock
+      onSelectStart: block => {
+        this.selectStart(block);
+      },
+      onSelectClear: () => {
+        this.selectClear();
+        if (this.onUnselectBlock) this.onUnselectBlock();
+      },
+      onSelectBlock: this.onSelectBlock
     });
     this.resizable = new Resizable({
       selector: this.selector,
@@ -130116,7 +130320,7 @@ class EditableBlocks {
         if (block.classList.contains('clone')) {
           const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
           this.onEditStart(clonedTarget);
-          this.unSelectBlock(); // Disable drag during editing
+          this.selectClear(); // Disable drag during editing
 
           if (!this.draggable) return;
           this.draggable.disableDrag(clonedTarget);
@@ -130194,8 +130398,24 @@ class EditableBlocks {
   }
 
   addBlock(html, container) {
-    this.blockSelector.unSelect();
+    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();
   }
 
@@ -130210,6 +130430,7 @@ class EditableBlocks {
   }
 
   enableShape() {
+    this.selectClear();
     let blocks = Array.from(this.doc.querySelectorAll(this.selector)).filter(elm => elm.classList.contains('active'));
     blocks.forEach(block => {
       this.shape.enable(block);
@@ -130240,6 +130461,13 @@ class EditableBlocks {
     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;
+  }
+
 }
 
 const dom = new Dom$1();
@@ -130287,6 +130515,7 @@ class ContentBox {
       disableStaticSection: false,
       framework: '',
       imageRenameOnEdit: true,
+      imageResizeOnBlock: false,
       htmlButton: true,
       // HTML button on left sidebar
       undoRedoButtons: true,
@@ -133544,10 +133773,10 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         onChange: () => {
           this.onChange();
         },
-        onContentClick: e => {
-          const block = e.target.closest('.is-block');
-          this.editor.elmTool.click(block, e);
-        },
+        // onContentClick: (e) => { // click during editing with ContentBuilder in a block
+        //     const block = e.target.closest('.is-block');
+        //     this.editor.elmTool.click(block, e);
+        // },
         onEditStart: block => {
           block.classList.add('editable');
           const cols = block.querySelectorAll('[data-click="true"]'); // or [contentEditable="true"]
@@ -133674,6 +133903,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       useMediaRecorder: this.settings.useMediaRecorder,
       encoderPath: this.settings.encoderPath,
       hideImageGeneration: this.settings.hideImageGeneration,
+      imageResizeOnBlock: this.settings.imageResizeOnBlock,
       listFilesUrl: this.settings.listFilesUrl,
       listFoldersUrl: this.settings.listFoldersUrl,
       deleteFilesUrl: this.settings.deleteFilesUrl,
@@ -133759,6 +133989,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       onBlockCanvasAdd: () => {
         this.eb.refresh();
       },
+      blockContainer: '.is-box',
       slider: this.settings.slider,
       onRender: () => {
         this.settings.onRender();